javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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-padding: 1.1rem !default;
$button-small-icon-size: 2.1rem !default; $button-small-icon-size: 2.1rem !default;
$button-fab-size: 56px;
// Core Button // Core Button
// -------------------------------------------------- // --------------------------------------------------
@ -126,6 +127,41 @@ button,
pointer-events: none; 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], [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; box-shadow: $button-material-box-shadow;
&.button-icon { &[icon] {
font-size: $button-icon-size; font-size: $button-icon-size;
} }
&.button-large.button-icon { &[large][icon] {
font-size: $button-large-icon-size; font-size: $button-large-icon-size;
} }
&.button-small.button-icon { &[small][icon] {
font-size: $button-small-icon-size; 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>