mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
02c138802a
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Added improvements on scss architecture, as identified on past assessment, on multiple components. Some of these changes resulted in snapshots differences, all reviewed and expected: - Button spinner - pics with no visual differences/false-positive. - Item slider - difference due to updated typography token. - Item - difference as is now using correct disabled styles tokens. - searchbar: 1px difference on horizontal margin - expected - to start using a more rounded value from a token. - Tab/tab-button - difference as is now using correct typography token. - Spinner/loading - this looks like a false positive, saw no visible differences. - Textarea - this looks like a false positive, saw no visible differences. - Typography - this looks like a false positive, saw no visible differences. ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>
109 lines
2.6 KiB
SCSS
109 lines
2.6 KiB
SCSS
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
|
@use "./item-option.common";
|
|
|
|
// Ionic Item Option
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
@include globals.padding(0);
|
|
@include globals.typography(globals.$ion-body-action-sm);
|
|
}
|
|
|
|
.button-native {
|
|
@include globals.padding(globals.$ion-space-200);
|
|
|
|
min-width: globals.$ion-scale-1600;
|
|
height: globals.$ion-scale-1600;
|
|
}
|
|
|
|
::slotted([slot="top"]) {
|
|
@include globals.margin(0, 0, globals.$ion-space-100, 0);
|
|
}
|
|
|
|
::slotted([slot="bottom"]) {
|
|
@include globals.margin(globals.$ion-space-100, 0, 0, 0);
|
|
}
|
|
|
|
::slotted([slot="start"]) {
|
|
@include globals.margin(0, globals.$ion-space-100, 0, 0);
|
|
}
|
|
|
|
::slotted([slot="end"]) {
|
|
@include globals.margin(0, 0, 0, globals.$ion-space-100);
|
|
}
|
|
|
|
::slotted(ion-icon),
|
|
::slotted([slot="icon-only"]) {
|
|
@include globals.margin(0);
|
|
|
|
width: globals.$ion-scale-500;
|
|
|
|
min-width: initial;
|
|
height: globals.$ion-scale-500;
|
|
}
|
|
|
|
// Item Option Shapes
|
|
// --------------------------------------------------
|
|
|
|
/* Round */
|
|
:host(.item-option-round) {
|
|
@include globals.border-radius(globals.$ion-border-radius-300);
|
|
}
|
|
|
|
/* Soft */
|
|
:host(.item-option-soft) {
|
|
@include globals.border-radius(globals.$ion-border-radius-200);
|
|
}
|
|
|
|
/* Rectangular */
|
|
:host(.item-option-rectangular) {
|
|
@include globals.border-radius(globals.$ion-border-radius-0);
|
|
}
|
|
|
|
// Item Option States
|
|
// --------------------------------------------------
|
|
|
|
/* Disabled */
|
|
:host(.item-option-disabled)::after {
|
|
@include globals.disabled-state();
|
|
}
|
|
|
|
:host(.item-option-disabled) .button-native {
|
|
opacity: 1;
|
|
}
|
|
|
|
// Subtle Item Option
|
|
// --------------------------------------------------
|
|
|
|
:host(.item-option-subtle) {
|
|
--background: #{globals.ion-color(primary, base, $subtle: true)};
|
|
--background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
|
|
--color: #{globals.ion-color(primary, contrast, $subtle: true)};
|
|
}
|
|
|
|
:host(.item-option-subtle.ion-color) {
|
|
background: globals.current-color(base, $subtle: true);
|
|
color: globals.current-color(contrast, $subtle: true);
|
|
}
|
|
|
|
// Bold Item Option
|
|
// --------------------------------------------------
|
|
|
|
:host(.item-option-bold) {
|
|
--background: #{globals.ion-color(primary, base)};
|
|
--background-activated: #{globals.ion-color(primary, shade)};
|
|
--color: #{globals.ion-color(primary, contrast)};
|
|
}
|
|
|
|
:host(.item-option-bold.ion-color) {
|
|
background: globals.current-color(base);
|
|
color: globals.current-color(contrast);
|
|
}
|
|
|
|
// Item Expandable Animation
|
|
// --------------------------------------------------
|
|
|
|
:host(.item-option-expandable) {
|
|
transition-timing-function: globals.$ion-transition-curve-expressive;
|
|
}
|