mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
9dfc863f0f
* fix(fab): separate the mode colors and update the md icon color -md icon color matches spec by adding 0.54 opacity to the color fixes #16091 * fix(fab): update the font size for buttons in a fab list * fix(fab-button): update box-shadow for both states * fix(fab-button): update transition to match md spec
68 lines
1.9 KiB
SCSS
Executable File
68 lines
1.9 KiB
SCSS
Executable File
@import "./fab-button";
|
|
@import "./fab-button.ios.vars";
|
|
|
|
// iOS FAB Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{$fab-ios-background-color};
|
|
--background-activated: #{$fab-ios-background-color-activated};
|
|
--background-focused: var(--background-activated);
|
|
--color: #{$fab-ios-text-color};
|
|
--color-activated: #{$fab-ios-text-color};
|
|
--color-focused: var(--color-activated);
|
|
--box-shadow: #{$fab-ios-box-shadow};
|
|
--transition: #{$fab-ios-transition};
|
|
}
|
|
|
|
:host(.activated) {
|
|
--box-shadow: #{$fab-ios-box-shadow-activated};
|
|
--transform: #{$fab-ios-transform};
|
|
--transition: #{$fab-ios-transition-activated};
|
|
}
|
|
|
|
::slotted(ion-icon),
|
|
.close-icon {
|
|
font-size: $fab-ios-icon-font-size;
|
|
}
|
|
|
|
// FAB buttons in a list
|
|
// --------------------------------------------------
|
|
|
|
:host(.fab-button-in-list) {
|
|
--background: #{$fab-ios-list-button-background-color};
|
|
--background-activated: #{$fab-ios-list-button-background-color-activated};
|
|
--background-focused: var(--background-activated);
|
|
--color: #{$fab-ios-list-button-text-color};
|
|
--color-activated: #{$fab-ios-list-button-text-color};
|
|
--color-focused: var(--color-activated);
|
|
--transition: #{transform 200ms ease 10ms,
|
|
opacity 200ms ease 10ms};
|
|
}
|
|
|
|
:host(.fab-button-in-list) ::slotted(ion-icon) {
|
|
font-size: $fab-ios-list-button-icon-font-size;
|
|
}
|
|
|
|
|
|
// Translucent FAB buttons
|
|
// --------------------------------------------------
|
|
|
|
:host(.fab-translucent) {
|
|
--background: #{$fab-ios-translucent-background-color};
|
|
--backdrop-filter: #{$fab-ios-translucent-filter};
|
|
}
|
|
|
|
:host(.fab-translucent-in-list) {
|
|
--background: #{$fab-ios-list-button-translucent-background-color};
|
|
}
|
|
|
|
// .fab-translucent-ios-#{$color-name} {
|
|
// background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha);
|
|
// opacity: .8;
|
|
// }
|
|
|
|
// .fab-translucent-ios-#{$color-name}.activated {
|
|
// opacity: 1;
|
|
// }
|