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

core/src/components/range/range.md.scss
261 строка6 KB
Liam DeBeasi
refactor(range): remove legacy property and support for legacy syntax (#29040)
15 фев 2024, 20:06
15 фев 2024, 20:0658c795f
@import "./range";
@import "./range.md.vars";

// Material Design Range
// --------------------------------------------------

:host {
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{ion-color(primary, base, 0.26)};
  --bar-background-active: #{ion-color(primary, base)};
  --bar-border-radius: 0;
  --height: #{$range-md-slider-height};
  --pin-background: #{ion-color(primary, base)};
  --pin-color: #{ion-color(primary, contrast)};
}

::slotted(:not(ion-icon)[slot="start"]),
::slotted(:not(ion-icon)[slot="end"]),
.native-wrapper {
  font-size: $range-md-pin-font-size;
}

:host(.range-item-start-adjustment) {
  @include padding(null, null, null, $range-md-item-padding-horizontal);
}

:host(.range-item-end-adjustment) {
  @include padding(null, $range-md-item-padding-horizontal, null, null);
}

:host(.ion-color) .range-bar {
  background: current-color(base, 0.26);
}

:host(.ion-color) .range-bar-active,
:host(.ion-color) .range-knob,
:host(.ion-color) .range-knob::before,
:host(.ion-color) .range-pin,
:host(.ion-color) .range-pin::before,
:host(.ion-color) .range-tick {
  background: current-color(base);
  color: current-color(contrast);
}

::slotted([slot="start"]) {
  @include margin(0, 14px, 0, 0);
}

::slotted([slot="end"]) {
  @include margin(0, 0, 0, 14px);
}

:host(.range-has-pin:not(.range-label-placement-stacked)) {
  /**
  * The pin should not overlap any elements that are
  * above the range. By adding padding to the top of the
  * range, it provides a buffer for the pin to move into
  * when it is pressed.
  *
  * The padding is not included when the label is stacked
  * because the pin is below the label.
  * It still requires a buffer to prevent the pin from
  * overlapping the range. The buffer is added to the
  * bottom of the range label instead of the host.
  */
  @include padding($range-md-pin-dimension, null, null, null);
}

:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
  /**
  * The pin should not overlap the stacked label. By adding
  * margin to the bottom of the label, it provides a buffer
  * for the pin to move into when it is pressed.
  */
  @include margin(null, null, $range-md-pin-dimension, null);
}

.range-bar-active {
  bottom: 0;

  width: auto;

  background: var(--bar-background-active);
}

.range-knob {
  transform: scale(.67);

  transition-duration: 120ms;
  transition-property: transform, background-color, border;
  transition-timing-function: ease;

  z-index: 2;

  &::before {
    @include border-radius(50%);
    @include position(null, null, null, 0);

    position: absolute;

    width: var(--knob-size);
    height: var(--knob-size);

    transform: scale(1);

    // Value from Material Design components for the web
    transition: 0.267s cubic-bezier(0, 0, 0.58, 1);

    background: var(--knob-background);

    content: "";
    opacity: #{$range-md-knob-indicator-opacity-hover};
    pointer-events: none;
  }
}

.range-tick {
  position: absolute;
  top: calc((var(--height) - var(--bar-height)) / 2);

  width: var(--bar-height);
  height: var(--bar-height);

  background: var(--bar-background-active);

  z-index: 1;
  pointer-events: none;
}

.range-tick-active {
  background: transparent;
}

.range-pin {
  @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
  @include border-radius(50%);
  @include transform(translate3d(0, 0, 0), scale(.01));

  display: flex;

  align-items: center;
  justify-content: center;

  /**
   * The dimensions of the range need
   * to scale with the size of the text
   * which is why we use dynamic dimensions here.
   */
  width: $range-md-pin-dimension;
  height: $range-md-pin-dimension;

  transition: transform 120ms ease, background 120ms ease;

  background: var(--pin-background);
  color: var(--pin-color);

  &::before {
    /**
     * The -1px here moves the ::before
     * psuedo-element down to create a uniform pin shape.
     */
    @include position(null, null, -1px, 50%);
    @include margin-horizontal(-13px, null);

    // Border radius for the pin should not change based on the direction
    @include multi-dir() {
      /* stylelint-disable-next-line property-disallowed-list */
      border-radius: 50% 50% 50% 0;
    }

    @include rtl() {
      /* stylelint-disable-next-line property-disallowed-list */
      left: unset;
    }

    position: absolute;

    width: 26px;
    height: 26px;

    transform: rotate(-45deg);

    transition: background 120ms ease;

    background: var(--pin-background);

    content: "";
    z-index: -1;
  }
}

/**
 * Move the pin up by its full height
 * plus a few pixels so the tip is above
 * (but not touching) the knob.
 */
.range-knob-pressed .range-pin,
.range-knob-handle.ion-focused .range-pin {
  transform: translate3d(0, calc(-100% + 4px), 0) scale(1);
}

@media (any-hover: hover) {
  .range-knob-handle:hover .range-knob:before {
    transform: scale(2);

    opacity: #{$range-md-knob-indicator-opacity-hover};
  }
}

.range-knob-handle {
  &.ion-activated .range-knob:before,
  &.ion-focused .range-knob:before,
  &.range-knob-pressed .range-knob:before {
    transform: scale(2);
  }

  &.ion-focused .range-knob::before {
    opacity: #{$range-md-knob-indicator-opacity-focus};
  }

  &.ion-activated .range-knob::before,
  &.range-knob-pressed .range-knob::before {
    opacity: #{$range-md-knob-indicator-opacity-active};
  }
}

:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,
:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob {
  transform: scale(1);
}

// Material Design Range: Disabled
// --------------------------------------------------
// When the range is disabled, the range label,
// any slotted labels, and any slotted icons
// need to receive the same opacity. The range
// changes color instead of becoming transparent.

:host(.range-disabled) .range-bar-active,
:host(.range-disabled) .range-bar,
:host(.range-disabled) .range-tick {
  background-color: $range-md-bar-background-color;
}

:host(.range-disabled) .range-knob {
  transform: scale(.55);

  outline: 5px solid #fff;

  background-color: $range-md-bar-background-color;
}

:host(.range-disabled) .label-text-wrapper,
:host(.range-disabled) ::slotted([slot=start]),
:host(.range-disabled) ::slotted([slot=end]) {
  opacity: $range-md-disabled-opacity;
}