mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
10971cc3ca
adds the following variables ``` --ion-toolbar-color-unchecked --ion-toolbar-color-checked ```
86 lines
2.3 KiB
SCSS
86 lines
2.3 KiB
SCSS
@import "./segment-button";
|
|
@import "./segment-button.ios.vars";
|
|
|
|
// iOS Segment Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{$segment-button-ios-background-color};
|
|
--background-hover: #{$segment-button-ios-background-color-hover};
|
|
--background-activated: #{$segment-button-ios-background-color-activated};
|
|
--background-checked: #{$segment-button-ios-background-color-checked};
|
|
--border-color: #{$segment-button-ios-border-color};
|
|
--color: #{$segment-button-ios-text-color};
|
|
--color-activated: var(--color);
|
|
--color-checked: #{$segment-button-ios-text-color-checked};
|
|
--color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
|
|
--color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
|
|
--border-radius: #{$segment-button-ios-border-radius};
|
|
--border-width: #{$segment-button-ios-border-width};
|
|
--border-style: solid;
|
|
--transition: #{$segment-button-ios-transition};
|
|
|
|
min-height: #{$segment-button-ios-height};
|
|
|
|
font-size: #{$segment-button-ios-font-size};
|
|
|
|
line-height: #{$segment-button-ios-line-height};
|
|
}
|
|
|
|
|
|
// Segment Button: Indicator
|
|
// --------------------------------------------------
|
|
|
|
.segment-button-indicator {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Segment Button: Icon
|
|
// --------------------------------------------------
|
|
|
|
::slotted(ion-icon) {
|
|
font-size: $segment-button-ios-icon-size;
|
|
}
|
|
|
|
|
|
// Segment Button: Layout
|
|
// --------------------------------------------------
|
|
|
|
// Layout: icon start
|
|
:host(.segment-button-layout-icon-start) ::slotted(ion-label) {
|
|
@include margin-horizontal(2px, 0);
|
|
}
|
|
|
|
// Layout: icon end
|
|
:host(.segment-button-layout-icon-end) ::slotted(ion-label) {
|
|
@include margin-horizontal(0, 2px);
|
|
}
|
|
|
|
|
|
// Segment Button: Hover
|
|
// --------------------------------------------------
|
|
|
|
@media (any-hover: hover) {
|
|
:host(:hover:not(.segment-button-checked)) {
|
|
background: var(--background-hover);
|
|
}
|
|
}
|
|
|
|
|
|
// Segment Button: Activated
|
|
// --------------------------------------------------
|
|
|
|
:host(.activated) {
|
|
background: var(--background-activated);
|
|
}
|
|
|
|
|
|
// Segment: Checked & Activated
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-checked.activated) {
|
|
background: var(--background-checked);
|
|
color: var(--color-checked);
|
|
}
|