core/src/components/item/item.md.scss - main - githubmirror/ionic-framework

core/src/components/item/item.md.scss
233 строки7 KB
Brandy Carney
refactor(item): remove deprecated highlight variables used with legacy form controls (#29055)
12 мар 2024, 00:29
12 мар 2024, 00:29d53fb29
@use "sass:math";
@import "./item";
@import "./item.md.vars";
@import "../label/label.md.vars";

// Material Design Item
// --------------------------------------------------

:host {
  --min-height: #{$item-md-min-height};
  --background: #{$item-md-background};
  --background-activated: transparent;
  --background-focused: currentColor;
  --background-hover: currentColor;
  --background-activated-opacity: 0;
  --background-focused-opacity: .12;
  --background-hover-opacity: .04;
  --border-color: #{$item-md-border-bottom-color};
  --color: #{$item-md-color};
  --transition: opacity 15ms linear, background-color 15ms linear;
  --padding-start: #{$item-md-padding-start};
  --inner-padding-end: #{$item-md-padding-end};
  --inner-border-width: #{0 0 $item-md-border-bottom-width 0};

  font-size: dynamic-font($item-md-font-size);
  font-weight: normal;

  text-transform: none;
}

// Material Design Item: States
// --------------------------------------------------

:host(.ion-color.ion-activated) .item-native {
  &::after {
    background: transparent;
  }
}

// Material Design Item Lines
// --------------------------------------------------

// Default input items have a full border
:host(.item-interactive) {
  --border-width: #{0 0 $item-md-border-bottom-width 0};
  --inner-border-width: 0;
}

// Full lines - apply the border to the item
// Inset lines - apply the border to the item inner
:host(.item-lines-full) {
  --border-width: #{0 0 $item-md-border-bottom-width 0};
}

:host(.item-lines-inset) {
  --inner-border-width: #{0 0 $item-md-border-bottom-width 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: 0;
}

:host(.item-lines-full),
:host(.item-lines-none) {
  --inner-border-width: 0;
}

// Material Design Multi-line Item
// --------------------------------------------------

// Multi-line items should align the slotted content at the top
:host(.item-multi-line) ::slotted([slot="start"]),
:host(.item-multi-line) ::slotted([slot="end"]) {
  @include margin($item-md-multi-line-slot-margin-top, $item-md-multi-line-slot-margin-end, $item-md-multi-line-slot-margin-bottom, $item-md-multi-line-slot-margin-start);

  align-self: flex-start;
}

// Material Design Item Slots
// --------------------------------------------------

::slotted([slot="start"]) {
  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
}

::slotted([slot="end"]) {
  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
}

// Material Design Slotted Icon
// --------------------------------------------------

::slotted(ion-icon) {
  color: $item-md-icon-slot-color;

  // The icon's font size should use em units to support
  // font scaling but evaluate to 24px at 100% font size.
  // The value in em units is calculated by dividing
  // the icon's font size in pixels by the item's
  // font size in pixels.
  // e.g. 24px / 16px = 1.5em
  font-size: math.div($item-md-icon-slot-font-size, $item-md-font-size) * 1em;
}

:host(.ion-color) ::slotted(ion-icon) {
  color: current-color(contrast);
}

::slotted(ion-icon[slot]) {
  @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
}

::slotted(ion-icon[slot="start"]) {
  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
}

::slotted(ion-icon[slot="end"]) {
  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
}

// Material Design Slotted Toggle
// --------------------------------------------------

::slotted(ion-toggle[slot="start"]),
::slotted(ion-toggle[slot="end"]) {
  @include margin(0);
}


// Material Design Slotted Note
// --------------------------------------------------

::slotted(ion-note) {
  @include margin(0);

  align-self: flex-start;

  font-size: $item-md-note-slot-font-size;
}

::slotted(ion-note[slot]) {
  @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
}

// Material Design Item Avatar
// --------------------------------------------------

::slotted(ion-avatar) {
  width: $item-md-avatar-width;
  height: $item-md-avatar-height;
}

// Material Design Item Thumbnail
// --------------------------------------------------

::slotted(ion-thumbnail) {
  --size: #{$item-md-thumbnail-size};
}

// Material Design Item Avatar/Thumbnail
// --------------------------------------------------

::slotted(ion-avatar),
::slotted(ion-thumbnail) {
  @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
}

::slotted(ion-avatar[slot="start"]),
::slotted(ion-thumbnail[slot="start"]) {
  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
}

::slotted(ion-avatar[slot="end"]),
::slotted(ion-thumbnail[slot="end"]) {
  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
}


// Material Design Slotted Label
// --------------------------------------------------

::slotted(ion-label) {
  @include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start);
}

// Material Design Floating/Stacked Label
// --------------------------------------------------

:host(.item-label-stacked) ::slotted([slot="end"]),
:host(.item-label-floating) ::slotted([slot="end"]) {
  @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start);
}

// Material Design Toggle/Radio Item
// --------------------------------------------------

:host(.item-toggle) ::slotted(ion-label),
:host(.item-radio) ::slotted(ion-label) {
  @include margin-horizontal(0, null);
}

// Material Design Item Button
// --------------------------------------------------

::slotted(.button-small) {
  --padding-top: 2px;
  --padding-bottom: 2px;
  --padding-start: .6em;
  --padding-end: .6em;

  min-height: 25px;

  font-size: dynamic-font(12px);
}

// Material Design Stacked & Floating Inputs
// --------------------------------------------------

:host(.item-label-floating),
:host(.item-label-stacked) {
  --min-height: 55px;
}

:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),
:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
  color: $label-md-text-color-focused;
}