mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
75 lines
2.0 KiB
SCSS
75 lines
2.0 KiB
SCSS
@import "./segment";
|
|
@import "./segment.md.vars";
|
|
|
|
// Material Design Segment
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: transparent;
|
|
--background-checked: transparent;
|
|
--border-color: #{$segment-button-md-border-bottom-color};
|
|
--color: #{$segment-button-md-text-color};
|
|
--color-checked: #{$segment-button-md-text-color};
|
|
}
|
|
|
|
:host(.segment-disabled) {
|
|
opacity: $segment-md-opacity-disabled;
|
|
}
|
|
|
|
// Material Design Segment Button Color
|
|
// --------------------------------------------------
|
|
|
|
:host-context(ion-toolbar.ion-color):not(.ion-color) {
|
|
--color: #{current-color(contrast)};
|
|
--color-checked: #{current-color(contrast)};
|
|
}
|
|
|
|
:host(.ion-color)::slotted(ion-segment-button) {
|
|
--color: #{current-color(base)};
|
|
}
|
|
|
|
:host(.ion-color)::slotted(.segment-button-checked) {
|
|
color: #{current-color(base)};
|
|
}
|
|
|
|
|
|
// Material Design Segment Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(ion-segment-button) {
|
|
--padding-top: #{$segment-button-md-padding-top};
|
|
--padding-end: #{$segment-button-md-padding-end};
|
|
--padding-bottom: #{$segment-button-md-padding-bottom};
|
|
--padding-start: #{$segment-button-md-padding-start};
|
|
--border-width: #{0 0 $segment-button-md-border-bottom-width 0};
|
|
--border-style: solid;
|
|
--transition: #{$segment-button-md-transition};
|
|
--icon-size: #{$segment-button-md-icon-size};
|
|
|
|
height: $segment-button-md-height;
|
|
|
|
font-size: $segment-button-md-font-size;
|
|
font-weight: $segment-button-md-font-weight;
|
|
|
|
line-height: $segment-button-md-line-height;
|
|
|
|
text-transform: uppercase;
|
|
|
|
opacity: $segment-button-md-opacity;
|
|
}
|
|
|
|
// Checked Segment Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(.activated),
|
|
::slotted(.segment-button-checked) {
|
|
opacity: $segment-button-md-opacity-activated;
|
|
}
|
|
|
|
// Disabled Segment Button
|
|
// --------------------------------------------------
|
|
|
|
::slotted(.segment-button-disabled) {
|
|
opacity: $segment-button-md-opacity-disabled;
|
|
}
|