mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
62 lines
1.8 KiB
SCSS
Executable File
62 lines
1.8 KiB
SCSS
Executable File
@import "../../themes/ionic.globals.ios";
|
|
|
|
// iOS FAB Button
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Background color of the button
|
|
$fab-ios-background-color: color($colors-ios, primary) !default;
|
|
|
|
/// @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;
|
|
}
|
|
|
|
|
|
// Generate iOS FAB colors
|
|
// --------------------------------------------------
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
|
|
|
$background-color: $color-base;
|
|
$background-color-activated: color-shade($background-color);
|
|
$fg-color: $color-contrast;
|
|
|
|
.fab-ios.fab-ios-#{$color-name} {
|
|
color: $fg-color;
|
|
background-color: $background-color;
|
|
}
|
|
|
|
.fab-ios.fab-ios-#{$color-name}.activated {
|
|
background-color: $background-color-activated;
|
|
}
|
|
}
|
|
|