@ng-matero/extensions 16.1.2 → 16.2.0

package/slider/slider.scss

@@ -1,514 +0,0 @@
-@use 'sass:math';
-@use '../core/style/variables';
-@use '../core/style/vendor-prefixes';
-@use '@angular/cdk' as cdk;
-
-// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
-// vertical slider this is the width.
-$thickness: 48px !default;
-$min-size: 128px !default;
-$padding: 8px !default;
-
-$track-thickness: 2px !default;
-$thumb-size: 20px !default;
-$thumb-border-width: 3px !default;
-$thumb-border-width-active: 2px !default;
-$thumb-border-width-disabled: 4px !default;
-
-$thumb-default-scale: .7 !default;
-$thumb-focus-scale: 1 !default;
-$thumb-disabled-scale: .5 !default;
-
-$thumb-arrow-gap: 12px !default;
-
-$thumb-label-size: 28px !default;
-
-$tick-size: 2px !default;
-
-$focus-ring-size: 30px !default;
-
-.mtx-slider {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  padding: $padding;
-  outline: none;
-  vertical-align: middle;
-
-  &:not(.mtx-slider-disabled):active,
-  &.mtx-slider-sliding:not(.mtx-slider-disabled) {
-    cursor: grabbing;
-  }
-}
-
-.mtx-slider-wrapper {
-  // force browser to show background-color when using the print function
-  @include vendor-prefixes.color-adjust(exact);
-
-  position: absolute;
-}
-
-.mtx-slider-track-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-}
-
-.mtx-slider-track-fill {
-  position: absolute;
-  transform-origin: 0 0;
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-track-background-left {
-  position: absolute;
-  transform-origin: 0 0;
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-track-background-right {
-  position: absolute;
-  transform-origin: 100% 100%;
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-ticks-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-
-.mtx-slider-ticks {
-  @include vendor-prefixes.private-background-clip(content-box);
-
-  background-repeat: repeat;
-  background-clip: content-box;
-  box-sizing: border-box;
-  opacity: 0;
-  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-thumb-container {
-  position: absolute;
-  z-index: 1;
-  transition: transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-focus-ring {
-  position: absolute;
-  width: $focus-ring-size;
-  height: $focus-ring-size;
-  border-radius: 50%;
-  transform: scale(0);
-  opacity: 0;
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-
-  .mtx-slider.cdk-keyboard-focused &,
-  .mtx-slider.cdk-program-focused & {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-%_mtx-slider-cursor {
-  .mtx-slider:not(.mtx-slider-disabled, .mtx-slider-sliding) & {
-    cursor: grab;
-  }
-}
-
-.mtx-slider-thumb {
-  @extend %_mtx-slider-cursor;
-
-  position: absolute;
-  right: -$thumb-size * .5;
-  bottom: -$thumb-size * .5;
-  box-sizing: border-box;
-  width: $thumb-size;
-  height: $thumb-size;
-  border: $thumb-border-width solid transparent;
-  border-radius: 50%;
-  transform: scale($thumb-default-scale);
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    border-color variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-.mtx-slider-thumb-label {
-  @extend %_mtx-slider-cursor;
-
-  display: none;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  width: $thumb-label-size;
-  height: $thumb-label-size;
-  border-radius: 50%;
-  transition:
-    transform variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    border-radius  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-    background-color  variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-
-  @include cdk.high-contrast(active, off) {
-    outline: solid 1px;
-  }
-}
-
-.mtx-slider-thumb-label-text {
-  z-index: 1;
-  opacity: 0;
-  transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-}
-
-// Slider sliding state.
-.mtx-slider-sliding {
-  .mtx-slider-track-fill,
-  .mtx-slider-track-background-left,
-  .mtx-slider-track-background-right,
-  .mtx-slider-thumb-container {
-    // Must use `transition-duration: 0ms` to disable animation rather than `transition: none`.
-    // On Mobile Safari `transition: none` causes the slider thumb to appear stuck.
-    transition-duration: 0ms;
-  }
-}
-
-// Slider with ticks when not disabled.
-.mtx-slider-has-ticks {
-  .mtx-slider-wrapper::after {
-    content: '';
-    position: absolute;
-    border-width: 0;
-    border-style: solid;
-    opacity: 0;
-    transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
-  }
-
-  &.cdk-focused,
-  &:hover {
-    &:not(.mtx-slider-hide-last-tick) {
-      .mtx-slider-wrapper::after {
-        opacity: 1;
-      }
-    }
-
-    &:not(.mtx-slider-disabled) .mtx-slider-ticks {
-      opacity: 1;
-    }
-  }
-}
-
-// Slider with thumb label.
-.mtx-slider-thumb-label-showing {
-  .mtx-slider-focus-ring {
-    display: none;
-  }
-
-  .mtx-slider-thumb-label {
-    display: flex;
-  }
-}
-
-// Inverted slider.
-.mtx-slider-axis-inverted {
-  .mtx-slider-track-fill {
-    transform-origin: 100% 100%;
-  }
-
-  .mtx-slider-track-fill.mtx-range-slider-fill {
-    transform-origin: 0 0;
-  }
-
-  .mtx-slider-track-background-left {
-    transform-origin: 100% 100%;
-  }
-
-  .mtx-slider-track-background-right {
-    transform-origin: 0 0;
-  }
-}
-
-// Active slider.
-.mtx-slider:not(.mtx-slider-disabled) {
-  &.cdk-focused {
-    &.mtx-slider-thumb-label-showing .mtx-slider-thumb {
-      transform: scale(0);
-    }
-
-    .mtx-slider-thumb-label {
-      border-radius: 50% 50% 0;
-    }
-
-    .mtx-slider-thumb-label-text {
-      opacity: 1;
-    }
-  }
-
-  &.cdk-mouse-focused,
-  &.cdk-touch-focused,
-  &.cdk-program-focused {
-    .mtx-slider-thumb {
-      border-width: $thumb-border-width-active;
-      transform: scale($thumb-focus-scale);
-    }
-  }
-}
-
-// Disabled slider.
-.mtx-slider-disabled {
-  .mtx-slider-focus-ring {
-    transform: scale(0);
-    opacity: 0;
-  }
-
-  .mtx-slider-thumb {
-    border-width: $thumb-border-width-disabled;
-    transform: scale($thumb-disabled-scale);
-  }
-
-  .mtx-slider-thumb-label {
-    display: none;
-  }
-}
-
-// Horizontal slider.
-.mtx-slider-horizontal {
-  height: $thickness;
-  min-width: $min-size;
-
-  .mtx-slider-wrapper {
-    height: $track-thickness;
-    top: ($thickness - $track-thickness) * .5;
-    left: $padding;
-    right: $padding;
-  }
-
-  .mtx-slider-wrapper::after {
-    height: $track-thickness;
-    border-left-width: $tick-size;
-    right: 0;
-    top: 0;
-  }
-
-  .mtx-slider-track-wrapper {
-    height: $track-thickness;
-    width: 100%;
-  }
-
-  .mtx-slider-track-fill {
-    height: $track-thickness;
-    width: 100%;
-    transform: scaleX(0);
-  }
-
-  .mtx-slider-track-background-left,
-  .mtx-slider-track-background-right {
-    height: $track-thickness;
-    width: 100%;
-    transform: scaleX(1);
-  }
-
-  .mtx-slider-ticks-container {
-    height: $track-thickness;
-    width: 100%;
-
-    @include cdk.high-contrast(active, off) {
-      height: 0;
-      outline: solid $track-thickness;
-      top: $track-thickness * .5;
-    }
-  }
-
-  .mtx-slider-ticks {
-    height: $track-thickness;
-    width: 100%;
-  }
-
-  .mtx-slider-thumb-container {
-    width: 100%;
-    height: 0;
-    top: 50%;
-  }
-
-  .mtx-slider-focus-ring {
-    top: -$focus-ring-size * .5;
-    right: -$focus-ring-size * .5;
-  }
-
-  .mtx-slider-thumb-label {
-    right: -$thumb-label-size * .5;
-    top: -($thumb-label-size + $thumb-arrow-gap);
-    transform:
-      translateY($thumb-label-size * .5 + $thumb-arrow-gap)
-      scale(.01)
-      rotate(45deg);
-  }
-
-  .mtx-slider-thumb-label-text {
-    transform: rotate(-45deg);
-  }
-
-  &.cdk-focused {
-    .mtx-slider-thumb-label {
-      transform: rotate(45deg);
-    }
-
-    @include cdk.high-contrast(active, off) {
-      .mtx-slider-thumb-label,
-      .mtx-slider-thumb-label-text {
-        transform: none;
-      }
-    }
-  }
-}
-
-// Vertical slider.
-.mtx-slider-vertical {
-  width: $thickness;
-  min-height: $min-size;
-
-  .mtx-slider-wrapper {
-    width: $track-thickness;
-    top: $padding;
-    bottom: $padding;
-    left: ($thickness - $track-thickness) * .5;
-  }
-
-  .mtx-slider-wrapper::after {
-    width: $track-thickness;
-    border-top-width: $tick-size;
-    bottom: 0;
-    left: 0;
-  }
-
-  .mtx-slider-track-wrapper {
-    height: 100%;
-    width: $track-thickness;
-  }
-
-  .mtx-slider-track-fill {
-    height: 100%;
-    width: $track-thickness;
-    transform: scaleY(0);
-  }
-
-  .mtx-slider-track-background-left,
-  .mtx-slider-track-background-right {
-    height: 100%;
-    width: $track-thickness;
-    transform: scaleY(1);
-  }
-
-  .mtx-slider-ticks-container {
-    width: $track-thickness;
-    height: 100%;
-
-    @include cdk.high-contrast(active, off) {
-      width: 0;
-      outline: solid $track-thickness;
-      left: $track-thickness * .5;
-    }
-  }
-
-  .mtx-slider-focus-ring {
-    bottom: -$focus-ring-size * .5;
-    left: -$focus-ring-size * .5;
-  }
-
-  .mtx-slider-ticks {
-    width: $track-thickness;
-    height: 100%;
-  }
-
-  .mtx-slider-thumb-container {
-    height: 100%;
-    width: 0;
-    left: 50%;
-  }
-
-  .mtx-slider-thumb {
-    @include vendor-prefixes.backface-visibility(hidden);
-  }
-
-  .mtx-slider-thumb-label {
-    bottom: -$thumb-label-size * .5;
-    left: -($thumb-label-size + $thumb-arrow-gap);
-    transform:
-      translateX($thumb-label-size * .5 + $thumb-arrow-gap)
-      scale(.01)
-      rotate(-45deg);
-  }
-
-  .mtx-slider-thumb-label-text {
-    transform: rotate(45deg);
-  }
-
-  &.cdk-focused {
-    .mtx-slider-thumb-label {
-      transform: rotate(-45deg);
-    }
-  }
-}
-
-// Slider in RTL languages.
-[dir='rtl'] {
-  .mtx-slider-wrapper::after {
-    left: 0;
-    right: auto;
-  }
-
-  .mtx-slider-horizontal {
-    .mtx-slider-track-fill:not(.mtx-range-slider-fill) {
-      transform-origin: 100% 100%;
-    }
-
-    .mtx-slider-track-background-left {
-      transform-origin: 100% 100%;
-    }
-
-    .mtx-slider-track-background-right {
-      transform-origin: 0 0;
-    }
-
-    &.mtx-slider-axis-inverted {
-      .mtx-slider-track-fill {
-        transform-origin: 0 0;
-      }
-
-      .mtx-slider-track-background-left {
-        transform-origin: 0 0;
-      }
-
-      .mtx-slider-track-background-right {
-        transform-origin: 100% 100%;
-      }
-    }
-  }
-}
-
-// Slider inside a component with disabled animations.
-/* stylelint-disable-next-line selector-class-pattern */
-.mtx-slider._mtx-animation-noopable {
-  .mtx-slider-track-fill,
-  .mtx-slider-track-background-left,
-  .mtx-slider-track-background-right,
-  .mtx-slider-ticks,
-  .mtx-slider-thumb-container,
-  .mtx-slider-focus-ring,
-  .mtx-slider-thumb,
-  .mtx-slider-thumb-label,
-  .mtx-slider-thumb-label-text,
-  .mtx-slider-has-ticks .mtx-slider-wrapper::after {
-    transition: none;
-  }
-}