mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
fix(fab): colors in speed dial buttons
This commit is contained in:
Manu Mtz.-Almeida
@ -3,11 +3,40 @@
|
||||
// iOS FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the FAB button
|
||||
$button-ios-fab-border-radius: 50% !default;
|
||||
/// @prop - Background color of the button
|
||||
$fab-ios-background-color: color($colors-ios, primary) !default;
|
||||
|
||||
.fab-button {
|
||||
border-radius: $button-ios-fab-border-radius;
|
||||
/// @prop - Text color of the button
|
||||
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-ios-in-list-background-color: color($colors-ios, light) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-ios-in-list-text-color: color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-background-color) !default;
|
||||
|
||||
.fab-ios {
|
||||
color: $fab-ios-text-color;
|
||||
background-color: $fab-ios-background-color;
|
||||
}
|
||||
|
||||
.fab-ios.activated {
|
||||
background-color: $fab-ios-background-color-activated;
|
||||
}
|
||||
|
||||
.fab-ios.fab-in-list {
|
||||
color: $fab-ios-in-list-text-color;
|
||||
background-color: $fab-ios-in-list-background-color;
|
||||
}
|
||||
|
||||
.fab-ios.fab-in-list.activated {
|
||||
background-color: $fab-ios-in-list-background-color-activated;
|
||||
}
|
||||
|
||||
|
||||
@ -20,12 +49,12 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.fab-ios-#{$color-name} {
|
||||
.fab-ios.fab-ios-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.fab-ios-#{$color-name}.activated {
|
||||
.fab-ios.fab-ios-#{$color-name}.activated {
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,31 +3,58 @@
|
||||
// Material Design FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the FAB button
|
||||
$button-md-fab-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Box shadow of the FAB button
|
||||
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
|
||||
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated FAB button
|
||||
$button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
|
||||
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-md-background-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-md-in-list-background-color: color($colors-md, light) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-in-list-text-color: color-contrast($colors-md, $fab-md-in-list-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
|
||||
|
||||
|
||||
.fab-button {
|
||||
border-radius: $button-md-fab-border-radius;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
.fab-md {
|
||||
color: $fab-md-text-color;
|
||||
background-color: $fab-md-background-color;
|
||||
|
||||
box-shadow: $fab-md-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;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-activated;
|
||||
}
|
||||
.fab-md.activated {
|
||||
background-color: $fab-md-background-color-activated;
|
||||
box-shadow: $fab-md-box-shadow-activated;
|
||||
}
|
||||
|
||||
.fab-md.fab-in-list {
|
||||
color: $fab-md-in-list-text-color;
|
||||
background-color: $fab-md-in-list-background-color;
|
||||
}
|
||||
|
||||
.fab-md.fab-wp.fab-in-list.activated {
|
||||
background-color: $fab-md-in-list-background-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS FAB colors
|
||||
// Generate MD FAB colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@ -36,12 +63,12 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.fab-md-#{$color-name} {
|
||||
.fab-md.fab-md-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.fab-md-#{$color-name}.activated {
|
||||
.fab-md.fab-md-#{$color-name}.activated {
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,34 +4,33 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width and height of the FAB button
|
||||
$button-fab-size: 56px !default;
|
||||
$button-fab-mini-size: 40px !default;
|
||||
$button-fab-content-margin: 10px !default;
|
||||
$button-fab-list-margin: 10px !default;
|
||||
$fab-size: 56px !default;
|
||||
$fab-mini-size: 40px !default;
|
||||
$fab-content-margin: 10px !default;
|
||||
$fab-list-margin: 10px !default;
|
||||
|
||||
|
||||
.fab-button {
|
||||
.fab {
|
||||
@include appearance(none);
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
width: $button-fab-size;
|
||||
height: $button-fab-size;
|
||||
width: $fab-size;
|
||||
height: $fab-size;
|
||||
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
line-height: $button-fab-size;
|
||||
line-height: $fab-size;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
background-color: #327eff;
|
||||
cursor: pointer;
|
||||
transition: background-color, opacity 100ms linear;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-clip: padding-box;
|
||||
font-kerning: none;
|
||||
user-select: none;
|
||||
@ -46,16 +45,16 @@ $button-fab-list-margin: 10px !default;
|
||||
// FAB mini
|
||||
// --------------------------------------------------
|
||||
|
||||
.fab-button[mini] {
|
||||
margin: ($button-fab-size - $button-fab-mini-size) / 2;
|
||||
.fab[mini] {
|
||||
margin: ($fab-size - $fab-mini-size) / 2;
|
||||
|
||||
width: $button-fab-mini-size;
|
||||
height: $button-fab-mini-size;
|
||||
width: $fab-mini-size;
|
||||
height: $fab-mini-size;
|
||||
|
||||
line-height: $button-fab-mini-size;
|
||||
line-height: $fab-mini-size;
|
||||
|
||||
.fab-close-icon {
|
||||
line-height: $button-fab-mini-size;
|
||||
line-height: $fab-mini-size;
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,37 +69,37 @@ ion-fab {
|
||||
&[center] {
|
||||
left: 50%;
|
||||
|
||||
margin-left: -$button-fab-size / 2;
|
||||
margin-left: -$fab-size / 2;
|
||||
}
|
||||
|
||||
&[middle] {
|
||||
top: 50%;
|
||||
|
||||
margin-top: -$button-fab-size / 2;
|
||||
margin-top: -$fab-size / 2;
|
||||
}
|
||||
|
||||
&[top] {
|
||||
top: $button-fab-content-margin;
|
||||
top: $fab-content-margin;
|
||||
}
|
||||
|
||||
&[right] {
|
||||
right: $button-fab-content-margin;
|
||||
right: $fab-content-margin;
|
||||
}
|
||||
|
||||
&[bottom] {
|
||||
bottom: $button-fab-content-margin;
|
||||
bottom: $fab-content-margin;
|
||||
}
|
||||
|
||||
&[left] {
|
||||
left: $button-fab-content-margin;
|
||||
left: $fab-content-margin;
|
||||
}
|
||||
|
||||
&[top][edge] {
|
||||
top: -$button-fab-size / 2;
|
||||
top: -$fab-size / 2;
|
||||
}
|
||||
|
||||
&[bottom][edge] {
|
||||
bottom: -$button-fab-size / 2;
|
||||
bottom: -$fab-size / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,32 +115,30 @@ ion-fab-list {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
margin: $button-fab-size + $button-fab-list-margin 0;
|
||||
margin: $fab-size + $fab-list-margin 0;
|
||||
|
||||
min-width: $button-fab-size;
|
||||
min-height: $button-fab-size;
|
||||
min-width: $fab-size;
|
||||
min-height: $fab-size;
|
||||
}
|
||||
|
||||
.fab-button {
|
||||
ion-fab-list .fab-in-list {
|
||||
margin: 8px;
|
||||
|
||||
width: $button-fab-mini-size;
|
||||
height: $button-fab-mini-size;
|
||||
width: $fab-mini-size;
|
||||
height: $fab-mini-size;
|
||||
|
||||
color: #797979;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0);
|
||||
transition: all 200ms ease;
|
||||
transition-delay: 10ms;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
&.fab-dial-button-visible {
|
||||
ion-fab-list .fab-in-list.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-fab-list[side=top] {
|
||||
@ -156,7 +153,7 @@ ion-fab-list[side=left] {
|
||||
|
||||
flex-direction: row-reverse;
|
||||
|
||||
margin: 0 $button-fab-size + $button-fab-list-margin;
|
||||
margin: 0 $fab-size + $fab-list-margin;
|
||||
}
|
||||
|
||||
ion-fab-list[side=right] {
|
||||
@ -164,7 +161,7 @@ ion-fab-list[side=right] {
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
margin: 0 $button-fab-size + $button-fab-list-margin;
|
||||
margin: 0 $fab-size + $fab-list-margin;
|
||||
}
|
||||
|
||||
|
||||
@ -181,13 +178,13 @@ ion-fab-list[side=right] {
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
line-height: $button-fab-size;
|
||||
line-height: $fab-size;
|
||||
opacity: 0;
|
||||
transform: scale(.4) rotateZ(-45deg);
|
||||
transition: all ease-in-out 300ms;
|
||||
}
|
||||
|
||||
.fab-button .button-inner {
|
||||
.fab .button-inner {
|
||||
transition: all ease-in-out 300ms;
|
||||
}
|
||||
|
||||
|
||||
@ -65,12 +65,6 @@ import { isTrueProperty } from '../../util/util';
|
||||
})
|
||||
export class FabButton extends Ion {
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
this.setElementClass('fab-button', true); // set role
|
||||
}
|
||||
/**
|
||||
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
|
||||
*/
|
||||
@ -93,6 +87,7 @@ export class FabButton extends Ion {
|
||||
renderer: Renderer,
|
||||
) {
|
||||
super(config, elementRef, renderer);
|
||||
this.setElementClass('fab', true); // set role
|
||||
this.mode = config.get('mode');
|
||||
}
|
||||
|
||||
@ -120,8 +115,15 @@ export class FabButton extends Ion {
|
||||
})
|
||||
export class FabList {
|
||||
_visible: boolean = false;
|
||||
_fabs: FabButton[] = [];
|
||||
|
||||
@ContentChildren(FabButton) _buttons: QueryList<FabButton>;
|
||||
@ContentChildren(FabButton)
|
||||
set _setbuttons(query: QueryList<FabButton>) {
|
||||
let fabs = this._fabs = query.toArray();
|
||||
for (var fab of fabs) {
|
||||
fab.setElementClass('fab-in-list', true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
@ -132,15 +134,15 @@ export class FabList {
|
||||
return;
|
||||
}
|
||||
|
||||
let buttons = this._buttons.toArray();
|
||||
let fabs = this._fabs;
|
||||
let i = 1;
|
||||
if (visible) {
|
||||
buttons.forEach(fab => {
|
||||
setTimeout(() => fab.setElementClass('fab-dial-button-visible', true), i * 30);
|
||||
fabs.forEach(fab => {
|
||||
setTimeout(() => fab.setElementClass('show', true), i * 30);
|
||||
i++;
|
||||
});
|
||||
} else {
|
||||
buttons.forEach(fab => fab.setElementClass('fab-dial-button-visible', false));
|
||||
fabs.forEach(fab => fab.setElementClass('show', false));
|
||||
}
|
||||
this._visible = visible;
|
||||
}
|
||||
|
||||
@ -3,16 +3,45 @@
|
||||
// Windows FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the FAB button
|
||||
$button-wp-fab-border-radius: 50% !default;
|
||||
/// @prop - Background color of the button
|
||||
$fab-wp-background-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-wp-in-list-background-color: color($colors-wp, light) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-wp-in-list-text-color: color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
|
||||
|
||||
|
||||
.fab-button {
|
||||
border-radius: $button-wp-fab-border-radius;
|
||||
.fab-wp {
|
||||
color: $fab-wp-text-color;
|
||||
background-color: $fab-wp-background-color;
|
||||
}
|
||||
|
||||
.fab-wp.activated {
|
||||
background-color: $fab-wp-background-color-activated;
|
||||
}
|
||||
|
||||
.fab-wp.fab-in-list {
|
||||
color: $fab-wp-in-list-text-color;
|
||||
background-color: $fab-wp-in-list-background-color;
|
||||
}
|
||||
|
||||
.fab-wp.fab-in-list.activated {
|
||||
background-color: $fab-wp-in-list-background-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS FAB colors
|
||||
// Generate WP FAB colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
@ -21,12 +50,12 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.fab-wp-#{$color-name} {
|
||||
.fab-wp.fab-wp-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.fab-wp-#{$color-name}.activated {
|
||||
.fab-wp.fab-wp-#{$color-name}.activated {
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,16 +53,16 @@
|
||||
<ion-fab center middle #fab5>
|
||||
<button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
|
||||
<ion-fab-list side="top">
|
||||
<button ion-fab (click)="openSocial('vimeo', fab5)"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="bottom">
|
||||
<button ion-fab (click)="openSocial('facebook', fab5)"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="left">
|
||||
<button ion-fab (click)="openSocial('googleplus', fab5)"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
<ion-fab-list side="right">
|
||||
<button ion-fab (click)="openSocial('twitter', fab5)"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
<button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user