mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
ae1197ac2f
* fix(fab): remove chained css and exclude from typography directive references #8293 * refactor(typography): add `ion-text` attribute selector, deprecate others closes #8293
63 lines
1.9 KiB
SCSS
Executable File
63 lines
1.9 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 in a list
|
|
$fab-ios-list-button-background-color: $fab-list-button-background-color !default;
|
|
|
|
/// @prop - Text color of the button in a list
|
|
$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
|
|
|
|
/// @prop - Background color of the activated button in a list
|
|
$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-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-list-button-text-color;
|
|
background-color: $fab-ios-list-button-background-color;
|
|
}
|
|
|
|
.fab-ios.fab-in-list.activated {
|
|
background-color: $fab-ios-list-button-background-color-activated;
|
|
}
|
|
|
|
|
|
// Generate iOS FAB colors
|
|
// --------------------------------------------------
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
|
|
|
$bg-color: $color-base;
|
|
$bg-color-activated: color-shade($bg-color);
|
|
$fg-color: $color-contrast;
|
|
|
|
.fab-ios-#{$color-name} {
|
|
color: $fg-color;
|
|
background-color: $bg-color;
|
|
}
|
|
|
|
.fab-ios-#{$color-name}.activated {
|
|
background-color: $bg-color-activated;
|
|
}
|
|
}
|
|
|