mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
125 lines
3.5 KiB
SCSS
125 lines
3.5 KiB
SCSS
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
|
@use "./segment-button.common";
|
|
|
|
// Ionic Segment Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --color-disabled: Color of the disabled segment button
|
|
*/
|
|
--background: none;
|
|
--background-checked: var(--background);
|
|
--color: #{globals.$ion-primitives-neutral-1000};
|
|
--color-checked: #{globals.$ion-semantics-primary-base};
|
|
--color-disabled: #{globals.$ion-primitives-neutral-500};
|
|
--border-width: #{globals.$ion-border-size-025};
|
|
--border-color: #{globals.$ion-primitives-neutral-300};
|
|
--border-style: #{globals.$ion-border-style-solid};
|
|
--indicator-box-shadow: none;
|
|
--indicator-color: var(--color-checked);
|
|
--indicator-height: #{globals.$ion-border-size-025};
|
|
--indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--indicator-transform: none;
|
|
--padding-top: #{globals.$ion-space-200};
|
|
--padding-end: #{globals.$ion-space-200};
|
|
--padding-bottom: #{globals.$ion-space-200};
|
|
--padding-start: #{globals.$ion-space-200};
|
|
--transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
|
|
|
|
min-width: globals.$ion-scale-1200;
|
|
min-height: globals.$ion-scale-1200;
|
|
}
|
|
|
|
.button-native {
|
|
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
|
|
|
// Ensures the indicator moves correctly between segment buttons
|
|
z-index: 1;
|
|
}
|
|
|
|
.button-inner {
|
|
@include globals.padding(globals.$ion-space-100, null, globals.$ion-space-100, null);
|
|
|
|
gap: globals.$ion-space-100;
|
|
}
|
|
|
|
// Segment Button Label/Text
|
|
// --------------------------------------------------
|
|
|
|
::slotted(ion-label),
|
|
::slotted(ion-text) {
|
|
@include globals.typography(globals.$ion-body-action-sm);
|
|
|
|
color: var(--color);
|
|
}
|
|
|
|
// Segment Button Icon
|
|
// --------------------------------------------------
|
|
|
|
::slotted(ion-icon) {
|
|
width: globals.$ion-scale-600;
|
|
height: globals.$ion-scale-600;
|
|
|
|
color: var(--color);
|
|
}
|
|
|
|
// Segment Button: Checked
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-checked) ::slotted(ion-label),
|
|
:host(.segment-button-checked) ::slotted(ion-text),
|
|
:host(.segment-button-checked) ::slotted(ion-icon) {
|
|
color: var(--color-checked);
|
|
}
|
|
|
|
// Segment Button: Disabled
|
|
// --------------------------------------------------
|
|
|
|
:host(.segment-button-disabled) ::slotted(ion-label),
|
|
:host(.segment-button-disabled) ::slotted(ion-text),
|
|
:host(.segment-button-disabled) ::slotted(ion-icon) {
|
|
color: var(--color-disabled);
|
|
}
|
|
|
|
// Segment Button: Focused
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-focused) .button-inner {
|
|
@include globals.focused-state();
|
|
}
|
|
|
|
// Segment Button: Indicator
|
|
// --------------------------------------------------
|
|
|
|
.segment-button-indicator {
|
|
@include globals.position(null, 0, 0, 0);
|
|
|
|
// Ensures the indicator displays correctly above the border
|
|
z-index: 2;
|
|
}
|
|
|
|
// Segment Button Layout
|
|
// --------------------------------------------------
|
|
|
|
// Segments with icons above or below the label
|
|
// should have a fixed height of 72px
|
|
:host(.segment-button-layout-icon-top),
|
|
:host(.segment-button-layout-icon-bottom) {
|
|
height: globals.$ion-scale-1800;
|
|
}
|
|
|
|
// Segments with icons at the start or end, or with only
|
|
// icons or labels, should have a fixed height of 48px
|
|
:host(.segment-button-has-label-only),
|
|
:host(.segment-button-has-icon-only),
|
|
:host(.segment-button-layout-icon-start),
|
|
:host(.segment-button-layout-icon-end) {
|
|
height: globals.$ion-scale-1200;
|
|
}
|
|
|
|
:host(.segment-button-layout-icon-start) .button-inner,
|
|
:host(.segment-button-layout-icon-end) .button-inner {
|
|
gap: globals.$ion-space-200;
|
|
}
|