117 lines
3.6 KiB
SCSS
Executable File
117 lines
3.6 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: #{ion-color(primary, shade)};
|
|
--background-hover: #{ion-color(primary, tint)};
|
|
--background-activated-opacity: 1;
|
|
--background-focused-opacity: 1;
|
|
--background-hover-opacity: 1;
|
|
--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(.ion-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);
|
|
--background-hover: #{$fab-ios-list-button-background-color-hover};
|
|
--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;
|
|
}
|
|
|
|
|
|
// FAB Button: Color
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-color.ion-focused) .button-native::after {
|
|
background: #{current-color(shade)};
|
|
}
|
|
|
|
// Focused/Activated Button with Color
|
|
:host(.ion-color.ion-focused) .button-native,
|
|
:host(.ion-color.ion-activated) .button-native {
|
|
color: #{current-color(contrast)};
|
|
|
|
&::after {
|
|
background: #{current-color(shade)};
|
|
}
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
:host(.ion-color:hover) .button-native {
|
|
color: #{current-color(contrast)};
|
|
|
|
&::after {
|
|
background: #{current-color(tint)};
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Translucent FAB buttons
|
|
// --------------------------------------------------
|
|
|
|
@supports (backdrop-filter: blur(0)) {
|
|
:host(.fab-button-translucent) {
|
|
--background: #{ion-color(primary, base, $fab-ios-translucent-background-alpha)};
|
|
--background-hover: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-hover)};
|
|
--background-focused: #{ion-color(primary, base, $fab-ios-translucent-background-alpha-focused)};
|
|
--backdrop-filter: #{$fab-ios-translucent-filter};
|
|
}
|
|
|
|
:host(.fab-button-translucent-in-list) {
|
|
--background: #{ion-color(light, base, $fab-ios-translucent-background-alpha)};
|
|
--background-hover: #{ion-color(light, base, $fab-ios-translucent-background-alpha-hover)};
|
|
--background-focused: #{ion-color(light, base, $fab-ios-translucent-background-alpha-focused)};
|
|
}
|
|
}
|
|
|
|
// Translucent FAB buttons with color
|
|
// --------------------------------------------------
|
|
|
|
@supports (backdrop-filter: blur(0)) {
|
|
@media (any-hover: hover) {
|
|
:host(.fab-button-translucent.ion-color:hover) .button-native {
|
|
background: #{current-color(base, $fab-ios-translucent-background-alpha-hover)};
|
|
}
|
|
}
|
|
|
|
:host(.ion-color.fab-button-translucent) .button-native {
|
|
background: #{current-color(base, $fab-ios-translucent-background-alpha)};
|
|
}
|
|
|
|
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
|
|
:host(.ion-color.ion-activated.fab-button-translucent) .button-native {
|
|
background: #{current-color(base)};
|
|
}
|
|
} |