@oruga-ui/theme-oruga 0.4.1 → 0.5.0

package/src/assets/scss/components/_steps.scss

@@ -1,427 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$steps-details-background-color: hsl(0, 0%, 100%) !default;
-$steps-details-padding: 0.2em !default;
-$steps-marker-background: var(--#{$prefix}grey-light) !default;
-$steps-marker-color: var(--#{$prefix}primary-invert) !default;
-$steps-marker-border: 0.2em solid #fff !default;
-$steps-marker-font-weight: 700 !default;
-$steps-marker-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-$steps-color: var(--#{$prefix}grey-lighter) !default;
-$steps-previous-color: var(--#{$prefix}primary) !default;
-$steps-active-color: var(--#{$prefix}primary) !default;
-$steps-divider-height: 0.2em !default;
-$steps-vertical-padding: 1em 0 !default;
-$steps-item-line-height: var(--#{$prefix}base-line-height) !default;
-$steps-link-color: hsl(0, 0%, 29%) !default;
-$steps-content-padding: 1rem !default;
-$steps-font-size: var(--#{$prefix}base-font-size) !default;
-$steps-details-title-font-weight: 600 !default;
-/* @docs */
-
-@mixin steps-size($size, $name: null) {
-  $sizeVarName: if($name != null, "size-" + #{$name}, "steps-size");
-
-  font-size: var(--#{$prefix}#{$sizeVarName}, $size);
-  min-height: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
-
-  .o-steps__divider {
-    height: var(--#{$prefix}steps-divider-height, $steps-divider-height);
-    top: var(--#{$prefix}#{$sizeVarName}, $size);
-  }
-
-  .o-steps__marker {
-    height: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
-    width: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
-  }
-
-  .o-steps__title {
-    text-align: center;
-    z-index: 1;
-    background-color: var(
-      --#{$prefix}steps-details-background-color,
-      $steps-details-background-color
-    );
-    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
-    font-size: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 1.2);
-    height: var(
-      --#{$prefix}steps-details-title-font-weight,
-      $steps-details-title-font-weight
-    );
-    line-height: var(--#{$prefix}#{$sizeVarName}, $size);
-  }
-
-  .o-steps__wrapper-vertical {
-    .o-steps--label-right {
-      .o-steps__divider {
-        left: calc(
-          (
-              var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                  --#{$prefix}steps-divider-height,
-                  $steps-divider-height
-                )
-            ) * 0.5
-        );
-      }
-    }
-
-    .o-steps--label-left {
-      .o-steps__divider {
-        left: auto;
-        right: calc(
-          (
-              var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                  --#{$prefix}steps-divider-height,
-                  $steps-divider-height
-                )
-            ) * 0.5
-        );
-      }
-    }
-
-    &.o-steps__wrapper-position-right {
-      .o-steps--label-right {
-        .o-steps__divider {
-          left: calc(
-            (
-                var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                    --#{$prefix}steps-divider-height,
-                    $steps-divider-height
-                  )
-              ) * 0.5
-          );
-        }
-      }
-
-      .o-steps--label-left {
-        .o-steps__divider {
-          left: auto;
-          right: calc(
-            (
-                var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                    --#{$prefix}steps-divider-height,
-                    $steps-divider-height
-                  )
-              ) * 0.5
-          );
-        }
-      }
-    }
-  }
-}
-
-.o-steps {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-
-  @include steps-size($steps-font-size);
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      @include steps-size($value, $name);
-    }
-  }
-
-  &__nav-item {
-    position: relative;
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 1em;
-    justify-content: center;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    margin-top: 0;
-    line-height: var(
-      --#{$prefix}steps-item-line-height,
-      $steps-item-line-height
-    );
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-      $bgVarName: if(
-        $name != null,
-        "steps-divider-color-bg-" + #{$name},
-        "steps-divider-color-bg"
-      );
-      $colorVarName: if(
-        $name != null,
-        "steps-divider-color-" + #{$name},
-        "steps-divider-color"
-      );
-
-      &--#{$name} {
-        &.o-steps__nav-item-active {
-          .o-steps__marker {
-            background-color: var(
-              --#{$prefix}variant-invert-#{$name},
-              $color-invert
-            );
-            border-color: var(--#{$prefix}variant-#{$name}, $color);
-            color: var(--#{$prefix}variant-#{$name}, $color);
-          }
-
-          .o-steps__divider {
-            background: linear-gradient(
-              to left,
-              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
-              var(--#{$prefix}#{$colorVarName}, $color) 50%
-            );
-            background-size: 200% 100%;
-          }
-        }
-
-        &.o-steps__nav-item-previous {
-          .o-steps__marker {
-            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-            background-color: var(--#{$prefix}variant-#{$name}, $color);
-          }
-
-          .o-steps__divider {
-            background: linear-gradient(
-              to left,
-              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
-              var(--#{$prefix}#{$colorVarName}, $color) 50%
-            );
-            background-size: 200% 100%;
-          }
-        }
-      }
-    }
-  }
-
-  &__divider {
-    background: linear-gradient(
-      to left,
-      var(--#{$prefix}steps-divider-color-bg, $steps-color) 50%,
-      var(--#{$prefix}steps-divider-color, var(--#{$prefix}primary)) 50%
-    );
-    background-size: 200% 100%;
-    background-position: right bottom;
-    // This will contain the divider
-    content: " ";
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: -50%;
-    width: 100%;
-  }
-
-  &__content {
-    position: relative;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
-
-    &-transitioning {
-      overflow: hidden;
-    }
-  }
-
-  &--animated {
-    .o-steps__divider {
-      transition: background var(--#{$prefix}transition-duration)
-        var(--#{$prefix}transition-timing);
-    }
-  }
-
-  &__link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background: transparent;
-    border: transparent;
-    cursor: pointer;
-    text-decoration: none;
-    color: var(--#{$prefix}steps-link-color, $steps-link-color);
-
-    &-label-right {
-      flex-direction: row;
-    }
-
-    &-label-left {
-      flex-direction: row-reverse;
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:not(&-clickable) {
-      cursor: not-allowed;
-    }
-  }
-
-  &__marker {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-    z-index: 1;
-    font-weight: var(
-      --#{$prefix}steps-marker-font-weight,
-      $steps-marker-font-weight
-    );
-    background: var(
-      --#{$prefix}steps-marker-background,
-      $steps-marker-background
-    );
-    color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
-    border: var(--#{$prefix}steps-marker-border, $steps-marker-border);
-
-    &--rounded {
-      border-radius: var(
-        --#{$prefix}steps-marker-rounded-border-radius,
-        $steps-marker-rounded-border-radius
-      );
-    }
-  }
-
-  &__details {
-    text-align: center;
-    z-index: 1;
-    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
-    background-color: var(
-      --#{$prefix}steps-details-background-color,
-      $steps-details-background-color
-    );
-  }
-
-  &__nav-item-active {
-    .o-steps__link {
-      cursor: default;
-    }
-
-    .o-steps__marker {
-      background-color: var(
-        --#{$prefix}steps-marker-color,
-        $steps-marker-color
-      );
-      border-color: var(--#{$prefix}steps-active-color, $steps-active-color);
-      color: var(--#{$prefix}steps-active-color, $steps-active-color);
-    }
-
-    .o-steps__divider {
-      background-position: left bottom;
-    }
-  }
-
-  &__nav-item-previous {
-    .o-steps__marker {
-      color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
-      background-color: var(
-        --#{$prefix}steps-previous-color,
-        $steps-previous-color
-      );
-    }
-
-    .o-steps__divider {
-      background-position: left bottom;
-    }
-  }
-
-  &__item {
-    flex-shrink: 0;
-    flex-basis: auto;
-  }
-
-  &__wrapper-vertical {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .o-steps {
-      height: 100%;
-      flex-direction: column;
-    }
-
-    .o-steps__divider {
-      height: 100%;
-      width: var(--#{$prefix}steps-divider-height, $steps-divider-height);
-      top: -50%;
-      left: calc(50% - #{$steps-divider-height * 0.5});
-    }
-
-    .o-steps__item-active,
-    .o-steps__item-previous {
-      .o-steps__divider {
-        background-position: right top;
-      }
-    }
-
-    .o-steps__nav-item {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      padding: var(--#{$prefix}steps-vertical-padding, $steps-vertical-padding);
-
-      // Override marker connector color per step
-      @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-        $bgVarName: if(
-          $name != null,
-          "steps-divider-color-bg-" + #{$name},
-          "steps-divider-color-bg"
-        );
-        $colorVarName: if(
-          $name != null,
-          "steps-divider-color-" + #{$name},
-          "steps-divider-color"
-        );
-
-        &--#{$name} {
-          .o-steps__divider {
-            background: linear-gradient(
-              to left,
-              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
-              var(--#{$prefix}#{$colorVarName}, $color) 50%
-            );
-            background-size: 100% 200%;
-            background-position: left bottom;
-          }
-        }
-      }
-    }
-
-    .o-steps__content {
-      flex-grow: 1;
-      flex-basis: 70%;
-    }
-
-    .o-steps__navigation {
-      flex-basis: 100%;
-    }
-
-    &.o-steps__wrapper-position-right {
-      flex-direction: row-reverse;
-    }
-  }
-
-  &--mobile {
-    .o-steps__title {
-      display: none;
-      padding: 0;
-    }
-
-    .o-steps__divider {
-      height: var(--#{$prefix}steps-divider-height, $steps-divider-height);
-      top: var(--#{$prefix}steps-divider-top, $steps-font-size);
-
-      @each $name, $value in $sizes {
-        .o-steps--#{$name} {
-          top: var(--#{$prefix}size-#{$name}, $value);
-        }
-      }
-    }
-  }
-}

package/src/assets/scss/components/_switch.scss

@@ -1,150 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$switch-active-background-color: var(--#{$prefix}primary) !default;
-$switch-action-background: #f5f5f5 !default;
-$switch-background: var(--#{$prefix}grey-light) !default;
-$switch-border-radius: var(--#{$prefix}base-border-radius) !default;
-$switch-box-shadow:
-  0 3px 1px 0 rgba(0, 0, 0, 0.05),
-  0 2px 2px 0 rgba(0, 0, 0, 0.1),
-  0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
-$switch-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$switch-margin-label: 0.5em !default;
-$switch-padding: 0.2em !default;
-$switch-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-$switch-width: 2.75 * 1em !default;
-/* @docs */
-
-.o-switch {
-  @include unselectable;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  border-radius: 50rem;
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}font-size-#{name}, $value);
-    }
-  }
-
-  // color variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
-
-      .o-switch__check--checked {
-        background: var(--#{$prefix}variant-#{$name}, $color);
-      }
-    }
-    &--#{$name}-passive {
-      --#{$prefix}focus: #{createFocus($color)};
-
-      .o-switch__check:not(.o-switch__check--checked) {
-        background: var(--#{$prefix}variant-#{$name}, $color);
-      }
-    }
-  }
-
-  &__label {
-    margin-left: var(--#{$prefix}switch-margin-label, $switch-margin-label);
-  }
-
-  &--left {
-    flex-direction: row-reverse;
-
-    .o-switch__label {
-      margin-left: 0;
-      margin-right: var(--#{$prefix}switch-margin-label, $switch-margin-label);
-    }
-  }
-
-  &__check-switch {
-    content: "";
-    display: block;
-    height: calc(
-      (
-          var(--#{$prefix}switch-width, $switch-width) - var(
-              --#{$prefix}switch-padding,
-              $switch-padding
-            ) * 2
-        ) * 0.5
-    );
-    width: calc(
-      (
-          var(--#{$prefix}switch-width, $switch-width) - var(
-              --#{$prefix}switch-padding,
-              $switch-padding
-            ) * 2
-        ) * 0.5
-    );
-    background: var(
-      --#{$prefix}switch-action-background,
-      $switch-action-background
-    );
-    box-shadow: var(--#{$prefix}switch-box-shadow, $switch-box-shadow);
-    transition: transform var(--#{$prefix}transition-duration)
-      var(--#{$prefix}transition-timing);
-    will-change: transform;
-    transform-origin: left;
-  }
-
-  &__check {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    width: var(--#{$prefix}switch-width, $switch-width);
-    height: calc(
-      var(--#{$prefix}switch-width, $switch-width) * 0.5 +
-        var(--#{$prefix}switch-padding, $switch-padding)
-    );
-
-    padding: var(--#{$prefix}switch-padding, $switch-padding);
-    background: var(--#{$prefix}switch-background, $switch-background);
-    border-radius: var(--#{$prefix}switch-border-radius, $switch-border-radius);
-    transition: background var(--#{$prefix}transition-duration)
-      var(--#{$prefix}transition-timing);
-
-    &--checked {
-      background: var(
-        --#{$prefix}switch-active-background-color,
-        $switch-active-background-color
-      );
-
-      .o-switch__check-switch {
-        transform: translate3d(100%, 0, 0);
-      }
-    }
-  }
-
-  &__input {
-    position: absolute;
-    left: 0;
-    opacity: 0;
-    z-index: -1;
-  }
-
-  &--rounded {
-    border-radius: var(
-      --#{$prefix}switch-rounded-border-radius,
-      $switch-rounded-border-radius
-    );
-  }
-
-  &--disabled {
-    opacity: var(--#{$prefix}switch-disabled-opacity, $switch-disabled-opacity);
-  }
-
-  // focus effect
-  &:focus &__check,
-  &:focus-within &__check {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
-}