@oruga-ui/theme-oruga 0.0.1

package/dist/scss/components/_skeleton.scss

@@ -0,0 +1,93 @@
+/* @docs */
+$skeleton-background: linear-gradient(
+  90deg,
+  $grey-lighter 25%,
+  rgba($grey-lighter, 0.5) 50%,
+  $grey-lighter 75%
+) !default;
+$skeleton-border-radius: $base-border-radius !default;
+$skeleton-duration: 1.5s !default;
+$skeleton-margin: 0.5rem 0 0 0 !default;
+/* @docs */
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+@mixin steps-size($size, $name: null) {
+  @if $name {
+    @include avariable(
+      "line-height",
+      ("skeleton-font-size-" + #{$name}),
+      $size
+    );
+  } @else {
+    @include avariable("line-height", "skeleton-font-size", $size);
+  }
+}
+
+.o-sklt {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+  width: 100%;
+
+  &__item {
+    width: 100%;
+
+    @include avariable(
+      "background",
+      "skeleton-background",
+      $skeleton-background
+    );
+
+    &--rounded {
+      @include avariable(
+        "border-radius",
+        "skeleton-border-radius",
+        $skeleton-border-radius
+      );
+    }
+
+    &--animated {
+      background-size: 400% 100%;
+      animation-name: skeleton-loading;
+      animation-iteration-count: infinite;
+
+      @include avariable(
+        "animation-duration",
+        "skeleton-duration",
+        $skeleton-duration
+      );
+    }
+
+    &::after {
+      content: "\00a0";
+    }
+
+    @include avariable("margin", "skeleton-margin", $skeleton-margin);
+    @include steps-size($base-font-size);
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        @include steps-size($value, $name);
+      }
+    }
+  }
+
+  &--centered {
+    align-items: center;
+  }
+
+  &--right {
+    align-items: flex-end;
+
+    @include avariable("margin", "skeleton-margin", $skeleton-margin);
+  }
+}

package/dist/scss/components/_slider.scss

@@ -0,0 +1,241 @@
+@use "sass:list";
+
+/* @docs */
+$slider-background: transparent !default;
+$slider-margin: 1em 0 !default;
+$slider-mark-size: 0.75rem !default;
+$slider-font-size: $base-font-size !default;
+$slider-rounded-borded-radius: $base-rounded-border-radius !default;
+$slider-thumb-background: $white !default;
+$slider-thumb-border: 1px solid $grey-light !default;
+$slider-thumb-radius: $base-border-radius !default;
+$slider-thumb-shadow: none !default;
+$slider-thumb-to-track-ratio: 2 !default;
+$slider-thumb-transform: scale(1.25) !default;
+$slider-tick-background: $primary !default;
+$slider-tick-radius: $base-border-radius !default;
+$slider-tick-to-track-ratio: 0.5 !default;
+$slider-tick-width: 3px !default;
+$slider-track-background: $grey-lighter !default;
+$slider-fill-background: $primary !default;
+$slider-track-border-radius: $base-border-radius !default;
+$slider-track-border: 0px solid $grey !default;
+$slider-track-disabled: 0.5 !default;
+$slider-track-radius: $base-border-radius !default;
+$slider-track-shadow: 0px 0px 0px $grey !default;
+/* @docs */
+
+@mixin slider-size($size, $name: null) {
+  $track-height: divide($size, $slider-thumb-to-track-ratio);
+  $tick-height: $track-height * $slider-tick-to-track-ratio;
+  $thumb-size: $size;
+
+  .o-slide__track {
+    @if $name {
+      @include avariable(
+        "height",
+        ("slider-track-height-" + #{$name}),
+        $track-height
+      );
+    } @else {
+      @include avariable("height", "slider-track-height", $track-height);
+    }
+  }
+
+  .o-slide__thumb {
+    @if $name {
+      @include avariable(
+        "height",
+        "slider-thumb-size-" + #{$name},
+        $thumb-size
+      );
+      @include avariable("width", "slider-thumb-size-" + #{$name}, $thumb-size);
+    } @else {
+      @include avariable("height", "slider-thumb-size", $thumb-size);
+      @include avariable("width", "slider-thumb-size", $thumb-size);
+    }
+  }
+
+  .o-slide__tick {
+    @if $name {
+      @include avariable(
+        "height",
+        "slider-tick-height-" + #{$name},
+        $tick-height
+      );
+    } @else {
+      @include avariable("height", "slider-tick-height", $tick-height);
+    }
+  }
+
+  .o-slide__tick-label {
+    @if $name {
+      @include avariable(
+        "font-size",
+        "slider-mark-size-" + #{$name},
+        $slider-mark-size
+      );
+    } @else {
+      @include avariable("font-size", "slider-mark-size", $slider-mark-size);
+    }
+    position: absolute;
+
+    @include evariable(
+      "top",
+      "calc($label-top * 0.5 + 2px)",
+      eparam(
+        "$label-top",
+        variable("slider-tick-label-top-" + #{$name}, $track-height)
+      )
+    );
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.o-slide {
+  @include avariable("margin", "slider-margin", $slider-margin);
+  @include avariable("background", "slider-background", $slider-background);
+  width: 100%;
+
+  &__thumb {
+    @include avariable(
+      "box-shadow",
+      "slider-thumb-shadow",
+      $slider-thumb-shadow
+    );
+    @include avariable("border", "slider-thumb-border", $slider-thumb-border);
+    @include avariable(
+      "border-radius",
+      "slider-thumb-radius",
+      $slider-thumb-radius
+    );
+    @include avariable(
+      "background",
+      "slider-thumb-background",
+      $slider-thumb-background
+    );
+
+    &:focus {
+      @include avariable(
+        "transform",
+        "slider-thumb-transform",
+        $slider-thumb-transform
+      );
+    }
+
+    &--rounded {
+      @include avariable(
+        "border-radius",
+        "slider-rounded-borded-radius",
+        $slider-rounded-borded-radius
+      );
+    }
+
+    &--dragging {
+      cursor: grabbing;
+      filter: brightness(0.8);
+    }
+  }
+
+  &__track {
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    @include avariable(
+      "background",
+      "slider-track-background",
+      $slider-track-background
+    );
+    @include avariable(
+      "border-radius",
+      "slider-track-border-radius",
+      $slider-track-border-radius
+    );
+  }
+
+  &__fill {
+    position: absolute;
+    height: 100%;
+
+    @include avariable(
+      "box-shadow",
+      "slider-track-shadow",
+      $slider-track-shadow
+    );
+    @include avariable(
+      "background",
+      "slider-fill-background",
+      $slider-fill-background
+    );
+    @include avariable(
+      "border-radius",
+      "slider-track-radius",
+      $slider-track-radius
+    );
+    @include avariable("border", "slider-track-border", $slider-track-border);
+    // Fix alignment in IE 11. Cancel out for others
+    top: 50%;
+    transform: translateY(-50%);
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      &--#{$name} {
+        @include avariable("background", ("variant-" + #{$name}), $color);
+      }
+    }
+  }
+
+  @include slider-size($slider-font-size);
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include slider-size($value, $name);
+    }
+  }
+
+  &__tick {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+
+    @include avariable("width", "slider-tick-width", $slider-tick-width);
+    @include avariable(
+      "background",
+      "slider-tick-background",
+      $slider-tick-background
+    );
+    @include avariable(
+      "border-radius",
+      "slider-tick-radius",
+      $slider-tick-radius
+    );
+
+    &--hidden {
+      background: transparent;
+    }
+  }
+
+  &__thumb-wrapper {
+    display: inline-flex;
+    align-items: center;
+    position: absolute;
+    cursor: grab;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    flex-direction: column; // Fix shrinked thumb at the end in IE 11
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    @include avariable(
+      "opacity",
+      "slider-track-disabled",
+      $slider-track-disabled
+    );
+  }
+}