javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(fab): update floating action buttons

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-09-21 16:42:07 +02:00
committed by Adam Bradley
parent 83d973b1a8
commit 490a06dd3e
22 changed files with 703 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/button/button-fab.scss
View File

@@ -1,58 +0,0 @@
@import "../../themes/ionic.globals";
// Floating Action Buttons
// --------------------------------------------------
/// @prop - Width and height of the FAB button
$button-fab-size: 56px !default;
.button-fab {
position: absolute;
overflow: hidden;
line-height: $button-fab-size;
vertical-align: middle;
background-clip: padding-box;
}
.button-fab.button {
width: $button-fab-size;
min-width: 0;
height: $button-fab-size;
font-size: 14px;
}
.button-fab ion-icon {
flex: 1;
font-size: 2.8rem;
}
.button-fab[fab-center] {
left: 50%;
margin-left: -$button-fab-size / 2;
}
.button-fab[fab-top] {
top: 16px;
}
.button-fab[fab-right] {
right: 16px;
}
.button-fab[fab-bottom] {
bottom: 16px;
}
.button-fab[fab-left] {
left: 16px;
}
.button-fab[fab-fixed] {
position: fixed;
}

8
src/components/button/button.ios.scss
View File

@@ -311,14 +311,6 @@ $button-ios-fab-border-radius: 50% !default;
}
// iOS FAB Button
// --------------------------------------------------
.button-fab-ios {
border-radius: $button-ios-fab-border-radius;
}
// Generate iOS Button Colors
// --------------------------------------------------

17
src/components/button/button.md.scss
View File

@@ -394,23 +394,6 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
border-radius: $button-md-round-border-radius;
}
// Material Design FAB Button
// --------------------------------------------------
.button-fab-md {
border-radius: $button-md-fab-border-radius;
box-shadow: $button-md-fab-box-shadow;
transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
background-color $button-md-transition-duration $button-md-transition-timing-function,
color $button-md-transition-duration $button-md-transition-timing-function;
}
.button-fab-md.activated {
box-shadow: $button-md-fab-box-shadow-activated;
}
.button-md [icon-only] {
padding: 0;
}

8
src/components/button/button.wp.scss
View File

@@ -309,14 +309,6 @@ $button-wp-fab-border-radius: 50% !default;
border-radius: $button-wp-round-border-radius;
}
// Windows FAB Button
// --------------------------------------------------
.button-fab-wp {
border-radius: $button-wp-fab-border-radius;
}
.button-wp [icon-only] {
padding: 0;
}

30
src/components/button/test/fab/app-module.ts
View File

@@ -1,30 +0,0 @@
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../../../..';
@Component({
templateUrl: 'main.html'
})
export class E2EPage {}
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class E2EApp {
rootPage = E2EPage;
}
@NgModule({
declarations: [
E2EApp,
E2EPage
],
imports: [
IonicModule.forRoot(E2EApp)
],
bootstrap: [IonicApp],
entryComponents: [
E2EPage
]
})
export class AppModule {}

1
src/components/button/test/fab/e2e.ts
View File

@@ -1 +0,0 @@

25
src/components/button/test/fab/main.html
View File

@@ -1,25 +0,0 @@
<ion-content>
<button ion-button fab fab-left fab-top>
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-center fab-top color="secondary">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-right fab-top color="danger">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-left fab-bottom color="light">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-center fab-bottom color="primary">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-right fab-bottom color="dark">
<ion-icon name="add"></ion-icon>
</button>
</ion-content>