mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
0fbc2b27f7
- Removes the `*.ionic.vars.scss` files for item, list and input and uses the design tokens directly - Removes the `tab-bar.ionic.vars.scss` file and moves the variables to the default ionic theme file since this uses global css variables
122 lines
3.4 KiB
SCSS
122 lines
3.4 KiB
SCSS
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
|
@use "./item.common";
|
|
|
|
// Item
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{globals.$ion-primitives-base-white};
|
|
--background-activated: #{globals.$ion-primitives-neutral-200};
|
|
--border-color: #{globals.$ion-primitives-neutral-300};
|
|
--border-style: #{globals.$ion-border-style-solid};
|
|
--border-width: #{0 0 globals.$ion-border-size-025 0};
|
|
--color: #{globals.$ion-primitives-neutral-1200};
|
|
--detail-icon-color: #{globals.$ion-primitives-neutral-800};
|
|
--detail-icon-font-size: #{globals.$ion-scale-600};
|
|
--detail-icon-opacity: 1;
|
|
--min-height: #{globals.$ion-scale-1800};
|
|
--padding-top: #{globals.$ion-space-200};
|
|
--padding-end: #{globals.$ion-space-400};
|
|
--padding-bottom: #{globals.$ion-space-200};
|
|
--padding-start: #{globals.$ion-space-400};
|
|
|
|
@include globals.typography(globals.$ion-body-lg-medium);
|
|
|
|
font-family: globals.$ion-font-family;
|
|
font-size: globals.$ion-font-size-400;
|
|
}
|
|
|
|
// Inner Item
|
|
// --------------------------------------------------
|
|
|
|
.item-inner {
|
|
// This prevents the padding/margin from
|
|
// being excluded from the height calculation.
|
|
min-height: initial;
|
|
}
|
|
|
|
// Item Detail Icon
|
|
// --------------------------------------------------
|
|
|
|
.item-detail-icon {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
// Ionic Item Slots
|
|
// --------------------------------------------------
|
|
|
|
slot[name="start"]::slotted(*) {
|
|
@include globals.margin(null, #{globals.$ion-space-400}, null, null);
|
|
}
|
|
|
|
slot[name="end"]::slotted(*) {
|
|
@include globals.margin(null, null, null, #{globals.$ion-space-400});
|
|
}
|
|
|
|
::slotted(ion-icon:not(.item-detail-icon)) {
|
|
color: globals.$ion-primitives-neutral-1000;
|
|
|
|
font-size: globals.$ion-scale-1000;
|
|
}
|
|
|
|
// Item: Disabled
|
|
// --------------------------------------------------
|
|
|
|
:host(.item-disabled) {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
// Item: Activated
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-activated) .item-native {
|
|
background: var(--background-activated);
|
|
}
|
|
|
|
// Item: Focused
|
|
// --------------------------------------------------
|
|
|
|
:host(.ion-focused) .item-native {
|
|
// This prevents the focus ring from clipping.
|
|
overflow: visible;
|
|
}
|
|
|
|
:host(.ion-focused) .item-native::after {
|
|
@include globals.border-radius(inherit);
|
|
@include globals.position(0, 0, 0, 0);
|
|
|
|
position: absolute;
|
|
|
|
border-width: globals.$ion-border-size-050;
|
|
border-style: globals.$ion-border-style-solid;
|
|
border-color: globals.$ion-border-focus-default;
|
|
|
|
content: "";
|
|
}
|
|
|
|
// Ionic Item Lines
|
|
// --------------------------------------------------
|
|
|
|
// Full lines - apply the border to the item
|
|
// Inset lines - apply the border to the item inner
|
|
:host(.item-lines-full) {
|
|
--border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
|
|
}
|
|
|
|
:host(.item-lines-inset) {
|
|
--inner-border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
|
|
}
|
|
|
|
// Full lines - remove the border from the item inner (inset list items)
|
|
// Inset lines - remove the border on the item (full list items)
|
|
// No lines - remove the border on both (full / inset list items)
|
|
:host(.item-lines-inset),
|
|
:host(.item-lines-none) {
|
|
--border-width: #{globals.$ion-border-size-0};
|
|
}
|
|
|
|
:host(.item-lines-full),
|
|
:host(.item-lines-none) {
|
|
--inner-border-width: #{globals.$ion-border-size-0};
|
|
}
|