226 lines
5.8 KiB
SCSS
226 lines
5.8 KiB
SCSS
@import "./segment-button";
|
|
@import "./segment-button.ios.vars";
|
|
|
|
// iOS Segment Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{$segment-button-ios-background};
|
|
--background-checked: #{$segment-button-ios-background-checked};
|
|
--background-hover: #{$segment-button-ios-background-hover};
|
|
--background-hover-opacity: 0;
|
|
--background-focused: none;
|
|
--background-focused-opacity: 0;
|
|
--border-radius: #{$segment-button-ios-border-radius};
|
|
--border-width: #{$segment-button-ios-border-width};
|
|
--border-color: #{$segment-button-ios-border-color};
|
|
--border-style: solid;
|
|
--indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
|
|
--indicator-color: #{$segment-button-ios-indicator-color};
|
|
--indicator-height: 100%;
|
|
--indicator-transition: #{$segment-button-ios-transition-animated};
|
|
--indicator-transform: none;
|
|
--transition: #{$segment-button-ios-transition};
|
|
--padding-top: 0;
|
|
--padding-end: 13px;
|
|
--padding-bottom: 0;
|
|
--padding-start: 13px;
|
|
|
|
@include margin($segment-button-ios-margin, null, $segment-button-ios-margin, null);
|
|
|
|
position: relative;
|
|
|
|
flex-basis: 0;
|
|
flex-direction: row;
|
|
|
|
min-width: #{$segment-button-ios-min-width};
|
|
|
|
min-height: #{$segment-button-ios-min-height};
|
|
|
|
// Necessary for the z-index to work properly
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
font-size: #{$segment-button-ios-font-size};
|
|
|
|
font-weight: 450;
|
|
|
|
line-height: #{$segment-button-ios-line-height};
|
|
}
|
|
|
|
|
|
// Segment Button: Borders
|
|
// --------------------------------------------------
|
|
|
|
:host::before {
|
|
@include margin(5px, 0);
|
|
|
|
transition: 160ms opacity ease-in-out;
|
|
|
|
transition-delay: 100ms;
|
|
|
|
border-left: var(--border-width) var(--border-style) var(--border-color);
|
|
|
|
content: "";
|
|
opacity: 1;
|
|
|
|
will-change: opacity;
|
|
}
|
|
|
|
:host(:first-of-type)::before {
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
|
|
// Segment Button: Disabled
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-disabled) {
|
|
opacity: $segment-button-ios-opacity-disabled;
|
|
}
|
|
|
|
|
|
// 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: Checked Indicator
|
|
// --------------------------------------------------
|
|
|
|
.segment-button-indicator {
|
|
@include padding(null, $segment-button-ios-margin);
|
|
@include position(0, 0, 0, 0);
|
|
}
|
|
|
|
.segment-button-indicator-background {
|
|
@include border-radius($segment-button-ios-border-radius);
|
|
|
|
background: var(--indicator-color);
|
|
}
|
|
|
|
.segment-button-indicator-background {
|
|
transition: var(--indicator-transition);
|
|
}
|
|
|
|
|
|
// Segment Button: Checked Borders
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-checked)::before,
|
|
:host(.segment-button-after-checked)::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
// Segment Button: Checked
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-checked) {
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
// Segment: States
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-focused) .button-native {
|
|
opacity: $segment-button-ios-opacity-focused;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
// Default Segment, Hover
|
|
:host(:hover) .button-native {
|
|
opacity: $segment-button-ios-opacity-hover;
|
|
}
|
|
|
|
:host(.segment-button-checked:hover) .button-native {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
// Segment Button: Segment w/ Color
|
|
// --------------------------------------------------
|
|
|
|
// Default
|
|
:host(.in-segment-color) {
|
|
background: none;
|
|
color: $segment-button-ios-color;
|
|
}
|
|
|
|
// Indicator color on a Segment w/ color
|
|
// should not change if the variable is set
|
|
:host(.in-segment-color) .segment-button-indicator-background {
|
|
background: $segment-button-ios-indicator-color;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
// Toolbar with Color, Default Segment, Hover
|
|
// Toolbar with Color, Default Segment, Checked, Hover
|
|
:host(.in-segment-color:hover) .button-native,
|
|
:host(.in-segment-color.segment-button-checked:hover) .button-native {
|
|
color: $segment-button-ios-color;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Segment Button: Toolbar
|
|
// --------------------------------------------------
|
|
|
|
// Default Segment, In a Toolbar
|
|
:host(.in-toolbar:not(.in-segment-color)) {
|
|
--background-checked: #{var(--ion-toolbar-segment-background-checked, $segment-button-ios-background-checked)};
|
|
--color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
|
|
--color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
|
|
--indicator-color: #{var(--ion-toolbar-segment-indicator-color, $segment-button-ios-indicator-color)};
|
|
}
|
|
|
|
|
|
// Segment Button: Toolbar w/ Color
|
|
// --------------------------------------------------
|
|
|
|
// Do not use the global or local CSS variable if the toolbar has a color
|
|
:host(.in-toolbar-color) .segment-button-indicator-background {
|
|
background: #fff;
|
|
}
|
|
|
|
// Toolbar with Color, Default Segment
|
|
:host(.in-toolbar-color:not(.in-segment-color)) .button-native {
|
|
color: #{current-color(contrast)};
|
|
}
|
|
|
|
// Toolbar with Color, Default Segment, Checked
|
|
:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native {
|
|
color: #{current-color(base)};
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
// Toolbar with Color, Default Segment, Hover
|
|
:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native {
|
|
color: #{current-color(contrast)};
|
|
}
|
|
|
|
// Toolbar with Color, Default Segment, Checked / Hover
|
|
:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native {
|
|
color: #{current-color(base)};
|
|
}
|
|
}
|