@oruga-ui/theme-oruga 0.4.2 → 0.5.1

package/dist/scss/components/_button.scss

@@ -1,15 +1,17 @@
 @use "sass:list";
 
 /* @docs */
-$button-background-color: var(--#{$prefix}primary) !default;
-$button-color: var(--#{$prefix}primary-invert) !default;
+$button-background-color: transparent !default;
+$button-color: var(--#{$prefix}black) !default;
 $button-border-radius: var(--#{$prefix}base-border-radius) !default;
-$button-border: 1px solid $button-background-color !default;
+$button-border-color: var(--#{$prefix}grey-lighter) !default;
+$button-border: 1px solid $button-border-color !default;
 $button-box-shadow: none !default;
 $button-font-weight: 400 !default;
 $button-line-height: var(--#{$prefix}base-line-height) !default;
 $button-margin-icon-to-text: 0.1875em !default;
 $button-margin: 0 !default;
+$button-spacer: 0.5rem !default;
 $button-height: $control-height !default;
 $button-padding: $control-padding-vertical 0.75em !default;
 $button-rounded-border-radius: var(
@@ -17,6 +19,7 @@ $button-rounded-border-radius: var(
 ) !default;
 $button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
 $button-outlined-background-color: transparent !default;
+$button-outlined-border-color: var(--#{$prefix}grey-light) !default;
 /* @docs */
 
 @keyframes spinAround {
@@ -118,22 +121,11 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--outlined {
-    background-color: var(
-      --#{$prefix}button-outlined-background-color,
-      $button-outlined-background-color
-    );
-    border-color: var(
-      --#{$prefix}button-background-color,
-      $button-background-color
-    );
-    color: var(--#{$prefix}button-background-color, $button-background-color);
-
+    &:focus,
     &:hover {
-      border-color: transparent;
-
       background-color: var(
-        --#{$prefix}button-background-color,
-        $button-background-color
+        --#{$prefix}button-border-color,
+        $button-border-color
       );
       color: var(--#{$prefix}button-color, $button-color);
     }
@@ -162,30 +154,10 @@ $button-outlined-background-color: transparent !default;
     }
   }
 
-  &--loading {
-    color: transparent !important;
-    pointer-events: none;
-  }
-
-  &--loading::after {
-    -webkit-animation: spinAround 500ms infinite linear;
-    left: calc(50% - 0.5em);
-    top: calc(50% - 0.5em);
-    position: absolute !important;
-    border: 2px solid #dbdbdb;
-    border-radius: 9999px;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    display: block;
-    height: 1em;
-    width: 1em;
-  }
-
   &--inverted {
     background-color: var(--#{$prefix}button-color, $button-color);
     border-color: var(--#{$prefix}button-color, $button-color);
-    color: var(--#{$prefix}button-background-color, $button-background-color);
+    color: var(--#{$prefix}button-border-color, $button-border-color);
 
     &:hover {
       /* background-color: darken($color-invert, 5%)*/
@@ -223,4 +195,28 @@ $button-outlined-background-color: transparent !default;
     box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
     outline: 0;
   }
+
+  &--loading {
+    color: transparent !important;
+    pointer-events: none;
+  }
+
+  &--loading::after {
+    -webkit-animation: spinAround 500ms infinite linear;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.5em);
+    position: absolute !important;
+    border: 2px solid #dbdbdb;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+  }
+
+  .o-icon:not(:last-child) {
+    margin-right: var(--#{$prefix}button-spacer, $button-spacer);
+  }
 }

package/dist/scss/components/_datepicker.scss

@@ -2,13 +2,12 @@
 
 /* @docs */
 $datepicker-font-size: var(--#{$prefix}base-font-size) !default;
-$datepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
-$datepicker-box-padding: 0.375rem 1rem !default;
-$datepicker-header-padding: 0 0 0.875rem 0 !default;
-$datepicker-header-margin: 0 0 0.875rem 0 !default;
+$datepicker-box-padding: 0.5rem 1rem !default;
+$datepicker-header-padding: 0.5rem 0 !default;
+$datepicker-header-margin: 0 0 0.5rem 0 !default;
 $datepicker-header-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
-$datepicker-footer-padding: 0.875rem 0.5rem 0 0.5rem !default;
-$datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
+$datepicker-footer-padding: 0.5rem 0.5rem 0 0.5rem !default;
+$datepicker-footer-margin: 0.5rem 0 !default;
 $datepicker-footer-border-top: 1px solid var(--#{$prefix}grey-lighter) !default;
 $datepicker-table-head-padding: 0 0 0.875rem 0 !default;
 $datepicker-table-head-margin: 0 0 0.875rem 0 !default;
@@ -38,6 +37,7 @@ $datepicker-event-background-color: var(--#{$prefix}grey-light) !default;
 $datepicker-event-dots-size: 0.35em !default;
 $datepicker-event-dots-margin: 0 0.1em !default;
 $datepicker-event-bars-height: 0.25em !default;
+$datepicker-btn-background-color: transparent !default;
 $datepicker-btn-border-color: var(--#{$prefix}grey-lighter) !default;
 $datepicker-btn-border-radius: var(--#{$prefix}base-border-radius) !default;
 $datepicker-btn-border: 1px solid transparent !default;
@@ -66,8 +66,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   }
 
   &__box {
-    --#{$prefix}dropdown-item-line-height: #{$datepicker-box-line-height};
-    --#{$prefix}dropdown-item-padding: #{$datepicker-box-padding};
+    padding: var(--#{$prefix}datepicker-box-padding, $datepicker-box-padding);
   }
 
   &__header {
@@ -124,6 +123,10 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
         --#{$prefix}datepicker-btn-line-height,
         $datepicker-btn-line-height
       );
+      background-color: var(
+        --#{$prefix}datepicker-btn-background-color,
+        $datepicker-btn-background-color
+      );
       border: var(--#{$prefix}datepicker-btn-border, $datepicker-btn-border);
       border-radius: var(
         --#{$prefix}datepicker-btn-border-radius,
@@ -490,5 +493,9 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       flex-grow: 1;
       flex-shrink: 1;
     }
+
+    .o-drop__menu {
+      padding: 0;
+    }
   }
 }

package/dist/scss/components/_datetimepicker.scss

@@ -8,6 +8,6 @@
     align-items: center;
 
     // override time dropdown shadow
-    --#{$prefix}dropdown-menu-box-shadow: 0,0,0,0;
+    --#{$prefix}dropdown-menu-box-shadow: 0, 0, 0, 0;
   }
 }

package/dist/scss/components/_dropdown.scss

@@ -236,7 +236,7 @@ $dropdown-mobile-zindex: 60 !default;
     pointer-events: none;
   }
 
-  &--mobile {
+  &--modal:not(.o-drop--inline):not(.o-drop--hoverable) {
     > .o-drop__menu {
       position: fixed;
       top: 25%;

package/dist/scss/components/_menu.scss

@@ -6,6 +6,7 @@ $menu-item-active-color: var(--#{$prefix}primary-invert) !default;
 $menu-item-active-background-color: var(--#{$prefix}primary) !default;
 $menu-item-disabled-color: var(--#{$prefix}grey-light) !default;
 $menu-list-border-left: 1px solid var(--#{$prefix}primary) !default;
+$menu-list-border-radius: var(--#{$prefix}base-border-radius) !default;
 $menu-list-line-height: 1.25em !default;
 $menu-item-padding: 0.5em 0.75em !default;
 $menu-nested-list-margin: 0.75em !default;
@@ -24,7 +25,7 @@ $menu-icon-spacer: 0.5rem !default;
   }
 
   &__list,
-  &__item__wrapper {
+  &__item {
     list-style: none;
   }
 
@@ -55,12 +56,16 @@ $menu-icon-spacer: 0.5rem !default;
     }
   }
 
-  &__item {
+  &__item__button {
     display: block;
     list-style: none;
     color: var(--#{$prefix}menu-item-color, $menu-item-color);
     padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
     font-size: var(--#{$prefix}menu-item-size, $base-font-size);
+    border-radius: var(
+      --#{$prefix}menu-list-border-radius,
+      $menu-list-border-radius
+    );
 
     &:hover:not(&--active):not(&--disabled) {
       color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
@@ -70,7 +75,7 @@ $menu-icon-spacer: 0.5rem !default;
       );
     }
 
-    &--icon-text .o-icon {
+    &--icon .o-icon {
       margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
     }
 

package/dist/scss/components/_pagination.scss

@@ -34,7 +34,7 @@ $pagination-rounded-border-radius: var(
     }
   }
 
-  &__link {
+  &__btn {
     @include unselectable;
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -120,11 +120,11 @@ $pagination-rounded-border-radius: var(
     );
   }
 
-  &__next {
+  &__btn-next {
     order: 3;
   }
 
-  &__previous {
+  &__btn-previous {
     order: 2;
   }
 
@@ -149,11 +149,11 @@ $pagination-rounded-border-radius: var(
   &--centered {
     justify-content: center;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 3;
     }
 
@@ -166,11 +166,11 @@ $pagination-rounded-border-radius: var(
   &--right {
     justify-content: flex-end;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 2;
     }
 
@@ -184,18 +184,18 @@ $pagination-rounded-border-radius: var(
     justify-content: flex-start;
     flex-wrap: wrap;
 
-    .o-pag__link {
+    .o-pag__btn {
       flex-grow: 1;
       flex-shrink: 1;
     }
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;

package/dist/scss/components/_slider.scss

@@ -30,6 +30,7 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
 @mixin slider-size($size, $name: null) {
   $track-height: calc($size / $slider-thumb-to-track-ratio);
   $tick-height: calc($track-height * $slider-tick-to-track-ratio);
+  $tick-label-top: calc($track-height * 0.5 + 2px);
   $thumb-size: $size;
 
   .o-slide__track {
@@ -61,14 +62,13 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
   .o-slide__tick-label {
     @if $name {
       font-size: var(--#{$prefix}slider-mark-size-#{$name}, $slider-mark-size);
+      top: var(--#{$prefix}slider-tick-label-top-#{$name}, $tick-label-top);
     } @else {
-      font-size: var(--#{$prefix}slider-mark-size $slider-mark-size);
+      font-size: var(--#{$prefix}slider-mark-size, $slider-mark-size);
+      top: var(--#{$prefix}slider-tick-label-top, $tick-label-top);
     }
 
     position: absolute;
-    top: calc(
-      var(--#{$prefix}slider-tick-label-top-#{$name}, $track-height) * 0.5 + 2px
-    );
     left: 50%;
     transform: translateX(-50%);
   }

package/dist/scss/components/_steps.scss

@@ -1,8 +1,9 @@
 @use "sass:list";
 
 /* @docs */
-$steps-details-background-color: hsl(0, 0%, 100%) !default;
-$steps-details-padding: 0.2em !default;
+$steps-title-background-color: hsl(0, 0%, 100%) !default;
+$steps-title-padding: 0.2em !default;
+$steps-title-font-weight: 500 !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;
@@ -17,9 +18,9 @@ $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-spacer: 1rem !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) {
@@ -38,87 +39,13 @@ $steps-details-title-font-weight: 600 !default;
     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);
+  .o-steps__step-label {
     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 {
@@ -127,6 +54,13 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
+  &__nav {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+  }
+
   &__nav-item {
     position: relative;
     display: flex;
@@ -157,7 +91,7 @@ $steps-details-title-font-weight: 600 !default;
       );
 
       &--#{$name} {
-        &.o-steps__nav-item-active {
+        &.o-steps__nav-item--active {
           .o-steps__marker {
             background-color: var(
               --#{$prefix}variant-invert-#{$name},
@@ -177,7 +111,7 @@ $steps-details-title-font-weight: 600 !default;
           }
         }
 
-        &.o-steps__nav-item-previous {
+        &.o-steps__nav-item--previous {
           .o-steps__marker {
             color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
             background-color: var(--#{$prefix}variant-#{$name}, $color);
@@ -218,11 +152,15 @@ $steps-details-title-font-weight: 600 !default;
     overflow: visible;
     display: flex;
     flex-direction: column;
-    padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
+    margin-top: var(--#{$prefix}steps-content-spacer, $steps-content-spacer);
 
     &-transitioning {
       overflow: hidden;
     }
+
+    &:not(:has(.o-steps__panel:empty)) {
+      padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
+    }
   }
 
   &--animated {
@@ -232,7 +170,7 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__link {
+  &__step {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -260,6 +198,20 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
+  &__step-label {
+    text-align: center;
+    z-index: 1;
+    background-color: var(
+      --#{$prefix}steps-title-background-color,
+      $steps-title-background-color
+    );
+    padding: var(--#{$prefix}steps-title-padding, $steps-title-padding);
+    font-weight: var(
+      --#{$prefix}steps-title-font-weight,
+      $steps-title-font-weight
+    );
+  }
+
   &__marker {
     align-items: center;
     display: flex;
@@ -285,17 +237,7 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__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 {
+  &__nav-item--active {
     .o-steps__link {
       cursor: default;
     }
@@ -314,7 +256,7 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__nav-item-previous {
+  &__nav-item--previous {
     .o-steps__marker {
       color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
       background-color: var(
@@ -333,30 +275,16 @@ $steps-details-title-font-weight: 600 !default;
     flex-basis: auto;
   }
 
-  &__wrapper-vertical {
+  &--vertical {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 
-    .o-steps {
+    .o-steps__nav {
       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;
@@ -393,6 +321,20 @@ $steps-details-title-font-weight: 600 !default;
       }
     }
 
+    .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__content {
       flex-grow: 1;
       flex-basis: 70%;
@@ -402,26 +344,17 @@ $steps-details-title-font-weight: 600 !default;
       flex-basis: 100%;
     }
 
-    &.o-steps__wrapper-position-right {
+    &.o-steps-position-right {
       flex-direction: row-reverse;
     }
   }
 
   &--mobile {
-    .o-steps__title {
+    @extend .o-steps--vertical;
+
+    .o-steps__step-label {
       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);
-        }
-      }
-    }
   }
 }