56 lines
1.1 KiB
SCSS
56 lines
1.1 KiB
SCSS
@import "./segment";
|
|
@import "./segment.ios.vars";
|
|
|
|
// iOS Segment
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{$segment-ios-background-color};
|
|
|
|
@include border-radius($segment-ios-border-radius);
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
// Segment: Color
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-color) {
|
|
background: #{current-color(base, 0.065)};
|
|
}
|
|
|
|
|
|
// Segment: Activated
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-activated) ::slotted(ion-segment-button) {
|
|
--indicator-transform: scale(0.95);
|
|
}
|
|
|
|
|
|
// Segment: Default Toolbar
|
|
// --------------------------------------------------
|
|
|
|
:host(.in-toolbar) {
|
|
@include margin(0, auto);
|
|
|
|
width: auto;
|
|
}
|
|
|
|
// Default Segment, In a Toolbar
|
|
:host(.in-toolbar:not(.ion-color)) {
|
|
background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
|
|
}
|
|
|
|
|
|
// Segment: Color Toolbar
|
|
// --------------------------------------------------
|
|
|
|
// Toolbar with Color, Default Segment
|
|
:host(.in-toolbar-color:not(.ion-color)) {
|
|
background: #{current-color(contrast, 0.11)};
|
|
}
|