@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/src/progress/_progress.scss

@@ -1,577 +0,0 @@
-@use "sass:color";
-@use "sass:map";
-@use "../utils";
-@use "../theme/colors";
-@use "../theme/theme";
-@use "../transition/transition";
-
-$disable-everything: false !default;
-$disable-linear: $disable-everything !default;
-$disable-linear-vertical: false !default;
-$disable-linear-horizontal: false !default;
-$disable-linear-reverse: false !default;
-$disable-circular: $disable-everything !default;
-$disable-circular-centered-styles: false !default;
-$disable-determinate: false !default;
-$disable-indeterminate: false !default;
-
-$color: theme.theme-get-var(primary-color) !default;
-$background-color: color-mix(in srgb, currentcolor 66%, colors.$white) !default;
-// $background-color: theme.get-swatch(
-//   theme.$primary-color,
-//   300,
-//   false,
-//   rgba(theme.$primary-color, 0.4)
-// ) !default;
-
-$circular-size: 3rem !default;
-$circular-dense-size: 1.5rem !default;
-$circular-stroke-width: 6 !default;
-$circular-dasharray: 187 !default;
-$circular-transition-duration: transition.$enter-duration !default;
-$circular-indeterminate-transition-duration: 2.4s !default;
-$circular-rotate-only-transition-duration: 1.2s !default;
-$circular-rotate-only-dashoffset: $circular-dasharray * 0.4 !default;
-$circular-start-offset: $circular-dasharray !default;
-$circular-end-offset: $circular-dasharray * 0.25 !default;
-$circular-rotate-styles: (
-  0%: (
-    transform: rotate(0deg),
-  ),
-  50%: (
-    transform: rotate(135deg),
-  ),
-  75%: (
-    transform: rotate(450deg),
-  ),
-  100%: (
-    transform: rotate(720deg),
-  ),
-) !default;
-$circular-dash-styles: (
-  0%: (
-    stroke-dashoffset: $circular-start-offset,
-  ),
-  50%: (
-    stroke-dashoffset: $circular-end-offset,
-  ),
-  100%: (
-    stroke-dashoffset: $circular-start-offset,
-  ),
-) !default;
-
-$linear-size: 0.25rem !default;
-$linear-transition-duration: 2.4s !default;
-$linear-short-animation-delay: 0.75s !default;
-$linear-styles: (
-  0%: (
-    left: -35%,
-    right: 100%,
-  ),
-  60%: (
-    left: 100%,
-    right: -90%,
-  ),
-  100%: (
-    left: 100%,
-    right: -90%,
-  ),
-) !default;
-$linear-short-styles: (
-  0%: (
-    left: -200%,
-    right: 100%,
-  ),
-  40%: (
-    left: 107%,
-    right: -8%,
-  ),
-  100%: (
-    left: 107%,
-    right: -8%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the transition. Each key in this
-/// map will be set immediately at the root of the `keyframes` and then each
-/// child map will be considered a map of property: value.
-/// @type Map
-$linear-reverse-styles: (
-  0%: (
-    left: 100%,
-    right: -35%,
-  ),
-  60%: (
-    left: -90%,
-    right: 100%,
-  ),
-  100%: (
-    left: -90%,
-    right: 100%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the shorter transition. Each key
-/// in this map will be set immediately at the root of the `keyframes` and then
-/// each child map will be considered a map of property: value.
-/// @type Map
-$linear-reverse-short-styles: (
-  0%: (
-    left: 100%,
-    right: -200%,
-  ),
-  40%: (
-    left: -8%,
-    right: 107%,
-  ),
-  100%: (
-    left: -8%,
-    right: 107%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the vertical transition. Each
-/// key in this map will be set immediately at the root of the `keyframes` and
-/// then each child map will be considered a map of property: value.
-/// @type Map
-$linear-vertical-styles: (
-  0%: (
-    bottom: -35%,
-    top: 100%,
-  ),
-  60%: (
-    bottom: 100%,
-    top: -90%,
-  ),
-  100%: (
-    bottom: 100%,
-    top: -90%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the shorter vertical transition.
-/// Each key in this map will be set immediately at the root of the `keyframes`
-/// and then each child map will be considered a map of property: value.
-/// @type Map
-$linear-vertical-short-styles: (
-  0%: (
-    bottom: -200%,
-    top: 100%,
-  ),
-  40%: (
-    bottom: 107%,
-    top: -8%,
-  ),
-  100%: (
-    bottom: 107%,
-    top: -8%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the vertical transition. Each
-/// key in this map will be set immediately at the root of the `keyframes` and
-/// then each child map will be considered a map of property: value.
-/// @type Map
-$linear-vertical-reverse-styles: (
-  0%: (
-    bottom: 100%,
-    top: -35%,
-  ),
-  60%: (
-    bottom: -90%,
-    top: 100%,
-  ),
-  100%: (
-    bottom: -90%,
-    top: 100%,
-  ),
-) !default;
-
-/// The linear progress bar styles to apply for the shorter vertical transition.
-/// Each key in this map will be set immediately at the root of the `keyframes`
-/// and then each child map will be considered a map of property: value.
-/// @type Map
-$linear-vertical-reverse-short-styles: (
-  0%: (
-    bottom: 100%,
-    top: -200%,
-  ),
-  40%: (
-    bottom: -8%,
-    top: 107%,
-  ),
-  100%: (
-    bottom: -8%,
-    top: 107%,
-  ),
-) !default;
-
-$variables: (
-  background-color,
-  color,
-  circular-size,
-  circular-stroke-width,
-  linear-size
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "progress");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "progress")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin _animation($styles) {
-  @if $styles {
-    @each $percentage, $style in $styles {
-      #{$percentage} {
-        @include utils.map-to-styles($style);
-      }
-    }
-  }
-}
-
-@mixin _circular-progress {
-  .rmd-circular-progress {
-    @include use-var(height, circular-size);
-    @include use-var(width, circular-size);
-    // add border radius and overflow-hidden so that different stroke-widths
-    // are still circular. For some reason it isn't always the case.
-    align-items: center;
-    border-radius: 50%;
-    display: inline-flex;
-    justify-content: center;
-    overflow: hidden;
-
-    @if not $disable-circular-centered-styles {
-      &--centered {
-        display: flex;
-        margin: 0 auto;
-      }
-    }
-
-    @if $circular-dense-size {
-      &--dense {
-        @include set-var(circular-size, $circular-dense-size);
-      }
-    }
-
-    &__svg {
-      height: inherit;
-      width: inherit;
-
-      @if not $disable-determinate {
-        &--determinate {
-          transform: rotate(-90deg);
-        }
-      }
-
-      @if not $disable-indeterminate {
-        &--indeterminate {
-          animation: rmd-progress-rotate
-            $circular-indeterminate-transition-duration
-            linear
-            infinite;
-        }
-
-        &--rotate-only {
-          animation: rmd-progress-rotate-only
-            $circular-rotate-only-transition-duration
-            linear
-            infinite;
-        }
-      }
-    }
-
-    &__circle {
-      @include use-var(stroke-width, circular-stroke-width);
-
-      fill: none;
-      stroke: currentcolor;
-      stroke-dasharray: $circular-dasharray;
-      stroke-linecap: round;
-
-      @if not $disable-determinate {
-        &--animate {
-          transition: stroke-dashoffset
-            $circular-transition-duration
-            transition.$linear-timing-function;
-        }
-      }
-
-      @if not $disable-indeterminate {
-        &--indeterminate {
-          animation: rmd-circular-progress-size
-            $circular-indeterminate-transition-duration
-            ease-in-out
-            infinite;
-        }
-
-        &--rotate-only {
-          animation: none;
-          stroke-dashoffset: $circular-rotate-only-dashoffset;
-        }
-      }
-    }
-  }
-
-  @keyframes rmd-progress-rotate-only {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @if not $disable-indeterminate {
-    @keyframes rmd-progress-rotate {
-      @include _animation($circular-rotate-styles);
-    }
-
-    @keyframes rmd-circular-progress-size {
-      @include _animation($circular-dash-styles);
-    }
-  }
-}
-
-@mixin _linear-progress-bar {
-  @if not $disable-linear-horizontal {
-    &--horizontal {
-      @include utils.auto-rtl(left, 0);
-    }
-
-    @if not $disable-linear-reverse {
-      &--horizontal-reverse {
-        @include utils.auto-rtl-group(
-          (
-            left: auto,
-            right: 0,
-          )
-        );
-      }
-    }
-  }
-
-  @if not $disable-linear-vertical {
-    &--vertical {
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    @if not $disable-linear-reverse {
-      &--vertical-reverse {
-        bottom: auto;
-        top: 0;
-      }
-    }
-  }
-
-  &--animate {
-    transition-duration: transition.$linear-duration;
-    transition-property: height, width;
-    transition-timing-function: transition.$sharp-timing-function;
-  }
-
-  @if not $disable-determinate {
-    &--determinate {
-      @include use-var(background-color, color);
-      @include use-var(height, linear-size);
-
-      position: absolute;
-      z-index: 0;
-    }
-  }
-
-  @if not $disable-indeterminate {
-    &--indeterminate {
-      &::before,
-      &::after {
-        @include utils.auto-rtl-group(
-          (
-            left: 0,
-            right: 100%,
-          )
-        );
-
-        @include use-var(background-color, color);
-        @include use-var(height, linear-size);
-
-        animation-duration: $linear-transition-duration;
-        animation-iteration-count: infinite;
-        animation-timing-function: transition.$linear-timing-function;
-        content: "";
-        position: absolute;
-        will-change: left, right;
-        z-index: 0;
-      }
-
-      @if not $disable-linear-horizontal {
-        &::before {
-          animation-name: rmd-progress-bar;
-        }
-
-        &::after {
-          animation-delay: $linear-short-animation-delay;
-          animation-name: rmd-progress-bar-short;
-        }
-      }
-    }
-
-    @if not $disable-linear-reverse {
-      &--indeterminate-reverse {
-        &::before {
-          animation-name: rmd-progress-bar-reverse;
-        }
-
-        &::after {
-          animation-name: rmd-progress-bar-reverse-short;
-        }
-      }
-    }
-
-    @if not $disable-linear-vertical {
-      &--indeterminate-vertical {
-        &::before,
-        &::after {
-          @include use-var(width, linear-size);
-
-          height: auto;
-          left: 0;
-          right: 0;
-        }
-
-        &::before {
-          animation-name: rmd-progress-bar-vertical;
-        }
-
-        &::after {
-          animation-name: rmd-progress-bar-vertical-short;
-        }
-      }
-
-      @if not $disable-linear-reverse {
-        &--indeterminate-vertical-reverse {
-          &::before {
-            animation-name: rmd-progress-bar-vertical-reverse;
-          }
-
-          &::after {
-            animation-name: rmd-progress-bar-vertical-reverse-short;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin _linear-progress {
-  .rmd-linear-progress {
-    @include use-var(background-color);
-    display: block;
-    overflow: hidden;
-    position: relative;
-
-    @if not $disable-linear-horizontal {
-      &--horizontal {
-        @include use-var(height, linear-size);
-
-        width: 100%;
-      }
-    }
-
-    @if not $disable-linear-vertical {
-      &--vertical {
-        @include use-var(width, linear-size);
-
-        display: inline-block;
-        height: auto;
-      }
-    }
-
-    &__bar {
-      @include _linear-progress-bar;
-    }
-  }
-
-  @if not $disable-linear-horizontal {
-    @keyframes rmd-progress-bar {
-      @include _animation($linear-styles);
-    }
-
-    @keyframes rmd-progress-bar-short {
-      @include _animation($linear-short-styles);
-    }
-
-    @if not $disable-linear-reverse {
-      @keyframes rmd-progress-bar-reverse {
-        @include _animation($linear-reverse-styles);
-      }
-
-      @keyframes rmd-progress-bar-reverse-short {
-        @include _animation($linear-reverse-short-styles);
-      }
-    }
-  }
-
-  @if not $disable-linear-vertical {
-    @keyframes rmd-progress-bar-vertical {
-      @include _animation($linear-vertical-styles);
-    }
-
-    @keyframes rmd-progress-bar-vertical-short {
-      @include _animation($linear-vertical-short-styles);
-    }
-
-    @if not $disable-linear-reverse {
-      @keyframes rmd-progress-bar-vertical-reverse {
-        @include _animation($linear-vertical-reverse-styles);
-      }
-
-      @keyframes rmd-progress-bar-vertical-reverse-short {
-        @include _animation($linear-vertical-reverse-short-styles);
-      }
-    }
-  }
-}
-
-@mixin variables {
-  @if not $disable-circular {
-    @include set-var(circular-size, $circular-size);
-    @include set-var(circular-stroke-width, $circular-stroke-width);
-  }
-
-  @if not $disable-linear {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
-    @include set-var(linear-size, $linear-size);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @include utils.optional-layer(
-    overlay,
-    $disable-layer or ($disable-circular and $disable-linear)
-  ) {
-    @if not $disable-circular {
-      @include _circular-progress;
-    }
-
-    @if not $disable-linear {
-      @include _linear-progress;
-    }
-  }
-}