@oruga-ui/theme-oruga 0.0.1

package/dist/scss/components/_steps.scss

@@ -0,0 +1,599 @@
+@use "sass:list";
+
+/* @docs */
+$steps-details-background-color: hsl(0, 0%, 100%) !default;
+$steps-details-padding: 0.2em !default;
+$steps-marker-background: $grey-light !default;
+$steps-marker-color: $primary-invert !default;
+$steps-marker-border: 0.2em solid #fff !default;
+$steps-marker-font-weight: 700 !default;
+$steps-marker-rounded-border-radius: $base-rounded-border-radius !default;
+$steps-color: $grey-lighter !default;
+$steps-previous-color: $primary !default;
+$steps-active-color: $primary !default;
+$steps-divider-height: 0.2em !default;
+$steps-vertical-padding: 1em 0 !default;
+$steps-item-line-height: $base-line-height !default;
+$steps-link-color: hsl(0, 0%, 29%) !default;
+$steps-content-padding: 1rem !default;
+$steps-font-size: $base-font-size !default;
+$steps-details-title-font-weight: 600 !default;
+/* @docs */
+
+$LR_CALC_EXPRESSION: "calc(($size - $divider-height) * 0.5)";
+$GRADIENT_EXPRESSION: "linear-gradient(to left, $param1 50%, $param2 50%)";
+$MULTIPLY_EXPRESSION: "calc($param * $factor)";
+
+@mixin steps-size($size, $name: null) {
+  @include avariable(
+    "font-size",
+    if($name != null, ("size-" + #{$name}), "steps-size"),
+    $size
+  );
+  @include evariable(
+    "min-height",
+    $MULTIPLY_EXPRESSION,
+    eparam(
+      "$param",
+      variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
+    ),
+    eparam("$factor", 2)
+  );
+
+  .o-steps__divider {
+    @include avariable("height", "steps-divider-height", $steps-divider-height);
+    @include avariable(
+      "top",
+      if($name != null, ("size-" + #{$name}), "steps-size"),
+      $size
+    );
+  }
+
+  .o-steps__marker {
+    @include evariable(
+      "height",
+      $MULTIPLY_EXPRESSION,
+      eparam(
+        "$param",
+        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
+      ),
+      eparam("$factor", 2)
+    );
+    @include evariable(
+      "width",
+      $MULTIPLY_EXPRESSION,
+      eparam(
+        "$param",
+        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
+      ),
+      eparam("$factor", 2)
+    );
+  }
+
+  .o-steps__title {
+    @include avariable(
+      "background-color",
+      "steps-details-background-color",
+      $steps-details-background-color
+    );
+    text-align: center;
+    z-index: 1;
+
+    @include avariable(
+      "padding",
+      "steps-details-padding",
+      $steps-details-padding
+    );
+    @include evariable(
+      "font-size",
+      $MULTIPLY_EXPRESSION,
+      eparam(
+        "$param",
+        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
+      ),
+      eparam("$factor", 1.2)
+    );
+    @include avariable(
+      "height",
+      "steps-details-title-font-weight",
+      $steps-details-title-font-weight
+    );
+    @include avariable(
+      "line-height",
+      if($name != null, ("size-" + #{$name}), "steps-size"),
+      $size
+    );
+  }
+
+  .o-steps__wrapper-vertical {
+    .o-steps--label-right {
+      .o-steps__divider {
+        @include evariable(
+          "left",
+          $LR_CALC_EXPRESSION,
+          eparam(
+            "$size",
+            variable(
+              if($name != null, ("size-" + #{$name}), "steps-size"),
+              $size
+            )
+          ),
+          eparam(
+            "$divider-height",
+            variable("steps-divider-height", $steps-divider-height)
+          )
+        );
+      }
+    }
+
+    .o-steps--label-left {
+      .o-steps__divider {
+        left: auto;
+
+        @include evariable(
+          "right",
+          $LR_CALC_EXPRESSION,
+          eparam(
+            "$size",
+            variable(
+              if($name != null, ("size-" + #{$name}), "steps-size"),
+              $size
+            )
+          ),
+          eparam(
+            "$divider-height",
+            variable("steps-divider-height", $steps-divider-height)
+          )
+        );
+      }
+    }
+
+    &.o-steps__wrapper-position-right {
+      .o-steps--label-right {
+        .o-steps__divider {
+          @include evariable(
+            "left",
+            $LR_CALC_EXPRESSION,
+            eparam(
+              "$size",
+              variable(
+                if($name != null, ("size-" + #{$name}), "steps-size"),
+                $size
+              )
+            ),
+            eparam(
+              "$divider-height",
+              variable("steps-divider-height", $steps-divider-height)
+            )
+          );
+        }
+      }
+
+      .o-steps--label-left {
+        .o-steps__divider {
+          left: auto;
+
+          @include evariable(
+            "right",
+            $LR_CALC_EXPRESSION,
+            eparam(
+              "$size",
+              variable(
+                if($name != null, ("size-" + #{$name}), "steps-size"),
+                $size
+              )
+            ),
+            eparam(
+              "$divider-height",
+              variable("steps-divider-height", $steps-divider-height)
+            )
+          );
+        }
+      }
+    }
+  }
+}
+
+.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 {
+    margin: 0;
+    padding: 0;
+
+    @include avariable(
+      "line-height",
+      "steps-item-line-height",
+      $steps-item-line-height
+    );
+    margin-top: 0;
+    position: relative;
+    flex-grow: 1;
+    flex-basis: 1em;
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &--#{$name} {
+        &.o-steps__nav-item-active {
+          .o-steps__marker {
+            @include avariable(
+              "background-color",
+              ("variant-invert-" + #{$name}),
+              $color-invert
+            );
+            @include avariable("border-color", ("variant-" + #{$name}), $color);
+            @include avariable("color", ("variant-" + #{$name}), $color);
+          }
+
+          .o-steps__divider {
+            @include evariable(
+              "background",
+              $GRADIENT_EXPRESSION,
+              eparam(
+                "$param1",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-bg-" + #{$name}),
+                    "steps-divider-color-bg"
+                  ),
+                  $steps-color
+                )
+              ),
+              eparam(
+                "$param2",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-" + #{$name}),
+                    "steps-divider-color"
+                  ),
+                  $color
+                )
+              )
+            );
+            background-size: 200% 100%;
+          }
+        }
+
+        &.o-steps__nav-item-previous {
+          .o-steps__marker {
+            @include avariable(
+              "color",
+              ("variant-invert-" + #{$name}),
+              $color-invert
+            );
+            @include avariable(
+              "background-color",
+              ("variant-" + #{$name}),
+              $color
+            );
+          }
+
+          .o-steps__divider {
+            @include evariable(
+              "background",
+              $GRADIENT_EXPRESSION,
+              eparam(
+                "$param1",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-bg-" + #{$name}),
+                    "steps-divider-color-bg"
+                  ),
+                  $steps-color
+                )
+              ),
+              eparam(
+                "$param2",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-" + #{$name}),
+                    "steps-divider-color"
+                  ),
+                  $color
+                )
+              )
+            );
+            background-size: 200% 100%;
+          }
+        }
+      }
+    }
+  }
+
+  &__divider {
+    background: linear-gradient(
+      to left,
+      variable("steps-divider-color-bg", $steps-color) 50%,
+      variable("steps-divider-color", $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;
+
+    @include avariable(
+      "padding",
+      "steps-content-padding",
+      $steps-content-padding
+    );
+
+    &-transitioning {
+      overflow: hidden;
+    }
+  }
+
+  &--animated {
+    .o-steps__divider {
+      transition-property: background;
+
+      @include avariable(
+        "transition-duration",
+        "transition-duration",
+        $speed-slow
+      );
+      @include avariable(
+        "transition-timing-function",
+        "transition-timing",
+        $easing
+      );
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    @include avariable("color", "steps-link-color", $steps-link-color);
+    cursor: pointer;
+    text-decoration: none;
+
+    &-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;
+
+    @include avariable(
+      "font-weight",
+      "steps-marker-font-weight",
+      $steps-marker-font-weight
+    );
+    @include avariable(
+      "background",
+      "steps-marker-background",
+      $steps-marker-background
+    );
+    @include avariable("color", "steps-marker-color", $steps-marker-color);
+    @include avariable("border", "steps-marker-border", $steps-marker-border);
+    z-index: 1;
+    overflow: hidden;
+
+    &--rounded {
+      @include avariable(
+        "border-radius",
+        "steps-marker-rounded-border-radius",
+        $steps-marker-rounded-border-radius
+      );
+    }
+  }
+
+  &__details {
+    @include avariable(
+      "background-color",
+      "steps-details-background-color",
+      $steps-details-background-color
+    );
+    text-align: center;
+    z-index: 1;
+
+    @include avariable(
+      "padding",
+      "steps-details-padding",
+      $steps-details-padding
+    );
+  }
+
+  &__nav-item-active {
+    .o-steps__link {
+      cursor: default;
+    }
+
+    .o-steps__marker {
+      @include avariable(
+        "background-color",
+        "steps-marker-color",
+        $steps-marker-color
+      );
+      @include avariable(
+        "border-color",
+        "steps-active-color",
+        $steps-active-color
+      );
+      @include avariable("color", "steps-active-color", $steps-active-color);
+    }
+
+    .o-steps__divider {
+      background-position: left bottom;
+    }
+  }
+
+  &__nav-item-previous {
+    .o-steps__marker {
+      @include avariable("color", "steps-marker-color", $steps-marker-color);
+      @include avariable(
+        "background-color",
+        "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%;
+
+      @include avariable(
+        "width",
+        "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;
+
+      @include avariable(
+        "padding",
+        "steps-vertical-padding",
+        $steps-vertical-padding
+      );
+      // Override marker connector color per step
+      @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        &--#{$name} {
+          .o-steps__divider {
+            @include evariable(
+              "background",
+              $GRADIENT_EXPRESSION,
+              eparam(
+                "$param1",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-bg-" + #{$name}),
+                    "steps-divider-color-bg"
+                  ),
+                  $steps-color
+                )
+              ),
+              eparam(
+                "$param2",
+                variable(
+                  if(
+                    $name != null,
+                    ("steps-divider-color-" + #{$name}),
+                    "steps-divider-color"
+                  ),
+                  $color
+                )
+              )
+            );
+            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 {
+      @include avariable(
+        "height",
+        "steps-divider-height",
+        $steps-divider-height
+      );
+      @include avariable("top", "steps-divider-top", $steps-font-size);
+
+      @each $name, $value in $sizes {
+        .o-steps--#{$name} {
+          @include avariable("top", "size-" + #{$name}, $value);
+        }
+      }
+    }
+  }
+}