kodadot/nft-gallery

@import '@oruga-ui/oruga-next/src/scss/utilities/expressions.scss';
@import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
@import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
@import '@oruga-ui/oruga-next/src/scss/utilities/helpers.scss';

$steps-details-background-color: hsla(0, 0%, 0%, 0);
$steps-details-padding: 0.5em !default;
$steps-font-size: var(--step-size, 0.85rem);
$steps-active-color: rgb(var(--steps-active-color));
$steps-previous-color: #6188e7;
$steps-divider-height: 2px;

$steps-marker-background: #fff;
$steps-marker-border: 0.2em solid $grey-light !default;

$steps-marker-color: var(--background-color) !default;
$steps-marker-font-weight: 700 !default;
$steps-marker-rounded-border-radius: $base-rounded-border-radius !default;
$steps-color: $grey-lighter !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;

@import '@oruga-ui/oruga-next/src/scss/components/steps';

.o-steps {
  // Base styles - Themed
  &__marker {
    @apply bg-background-color;
  }

  .o-icon {
    @apply bg-background-color;
  }

  &__divider {
    @apply bg-none bg-k-shade bg-[length:200%_100%] bg-[right_bottom];
  }

  // oruga mixes the step size and the titlle font size together ($steps-font-size)
  // we need to override the title font size to make it bigger (12px / 0.75rem
  &__title {
    @apply text-xs #{!important};
    @apply text-k-grey;
  }

  // Navigation Items
  &__nav-item {
    // force active background color on last nav-item when active
    &--last {
      &.o-steps__nav-item-active {
        .o-steps__marker {
          @apply bg-steps-active-color;
        }
      }
    }

    // Current nav-item styles
    &-active {
      .o-steps__title {
        color: $steps-previous-color;
      }
      // move divider to right side (color it active)
      // this is required because of the theme override above of the divider background
      .o-steps__divider {
        @apply bg-k-blue bg-[left_bottom];
      }
    }

    // Previous nav-item styles
    &-previous {
      .o-steps__marker {
        border-color: $steps-previous-color;
        background-color: $steps-previous-color;
      }

      .o-steps__title {
        color: $steps-previous-color;
      }

      // move divider to right side (color it active)
      // this is required because of the theme override above of the divider background
      .o-steps__divider {
        @apply bg-k-blue bg-[left_bottom];
      }
    }
  }
}