javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(button): FABulous

Browse Source
This commit is contained in:
Max Lynch
2015-07-17 12:34:22 -05:00
parent 43b8b4ad67
commit 720d40c911
4 changed files with 56 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ionic/components/button/button.scss
View File

@ -20,6 +20,7 @@ $button-small-height: 2.8rem !default;
$button-small-padding: 1.1rem !default;
$button-small-icon-size: 2.1rem !default;
$button-fab-size: 56px;
// Core Button
// --------------------------------------------------
@ -126,6 +127,41 @@ button,
pointer-events: none;
}
// FABulous buttons (Floating action button from material)
&[fab] {
position: absolute;
width: $button-fab-size;
height: $button-fab-size;
line-height: $button-fab-size;
min-width: 0;
vertical-align: middle;
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
transition: .2s linear;
transition-property: background-color;
&[fab-center] {
left: 50%;
margin-left: -$button-fab-size/2;
}
&[fab-top] {
top: 15px;
}
&[fab-right] {
right: 15px;
}
&[fab-bottom] {
bottom: 15px;
}
&[fab-left] {
left: 15px;
}
}
}
[full],

6
ionic/components/button/extensions/material.scss
View File

@ -20,15 +20,15 @@ $button-material-border-radius: 3px !default;
box-shadow: $button-material-box-shadow;
&.button-icon {
&[icon] {
font-size: $button-icon-size;
}
&.button-large.button-icon {
&[large][icon] {
font-size: $button-large-icon-size;
}
&.button-small.button-icon {
&[small][icon] {
font-size: $button-small-icon-size;
}

7
ionic/components/button/test/fab/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

10
ionic/components/button/test/fab/main.html Normal file
View File

@ -0,0 +1,10 @@
<div>
<button fab fab-left fab-top primary><i class="icon ion-plus"></i></button>
<button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
<button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
<button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
<button fab fab-center fab-bottom stable><i class="icon ion-plus"></i></button>
<button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
</div>