@oruga-ui/theme-oruga 0.5.0 → 0.6.0

package/dist/scss/components/_select.scss

@@ -7,7 +7,7 @@ $select-border-style: solid !default;
 $select-border-width: 1px !default;
 $select-border-radius: var(--#{$prefix}base-border-radius) !default;
 $select-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
+    --#{$prefix}base-border-radius-rounded
 ) !default;
 $select-box-shadow: $control-box-shadow !default;
 $select-color: #363636 !default;
@@ -22,135 +22,158 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 /* @docs */
 
 @function svg_arrow($color) {
-  $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-  $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
-  $end: "</svg>";
+    $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
+    $end: "</svg>";
 
-  @return svg-encode("#{$start}#{$content}#{$end}");
+    @return svg-encode("#{$start}#{$content}#{$end}");
 }
 
-.o-ctrl-sel {
-  display: inline-flex;
-  position: relative;
+.o-select {
+    display: inline-flex;
+    position: relative;
+
+    &__input {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        cursor: pointer;
+        justify-content: flex-start;
+        align-items: center;
+
+        box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
+        background-color: var(
+            --#{$prefix}select-background-color,
+            $select-background-color
+        );
+        border-color: var(
+            --#{$prefix}select-border-color,
+            $select-border-color
+        );
+        border-width: var(
+            --#{$prefix}select-border-width,
+            $select-border-width
+        );
+        border-style: var(
+            --#{$prefix}select-border-style,
+            $select-border-style
+        );
+        border-radius: var(
+            --#{$prefix}select-border-radius,
+            $select-border-radius
+        );
+        color: var(--#{$prefix}select-color, $select-color);
+        font-size: var(--#{$prefix}base-font-size, $base-font-size);
+        height: var(--#{$prefix}select-height, $select-height);
+        line-height: var(--#{$prefix}select-line-height, $select-line-height);
+        padding: var(--#{$prefix}select-padding, $select-padding);
+        margin: var(--#{$prefix}select-margin, $select-margin);
+
+        &--arrowed {
+            background-image: url(svg_arrow($select-arrow-color));
+            background-repeat: no-repeat;
+            background-size: var(
+                --#{$prefix}select-arrow-size,
+                $select-arrow-size
+            );
+            background-position: calc(
+                    100% - var(
+                            --#{$prefix}select-arrow-size,
+                            $select-arrow-size
+                        ) *
+                        0.5
+                )
+                center;
+            padding-right: calc(
+                var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
+            );
+        }
+
+        &--placeholder {
+            opacity: var(
+                --#{$prefix}select-placeholder-opacity,
+                $select-placeholder-opacity
+            );
+        }
+
+        &--iconspace-left {
+            padding-left: var(--#{$prefix}select-height, $select-height);
+        }
+
+        &--iconspace-right {
+            padding-right: var(--#{$prefix}select-height, $select-height);
+        }
+
+        &[disabled] {
+            cursor: inherit;
+        }
+    }
+
+    // size variants
+    @each $name, $value in $sizes {
+        &--#{$name} .o-select__input {
+            font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
+        }
+    }
+
+    // color variants
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
 
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
+        &--#{$name} .o-select__input {
+            --#{$prefix}focus: #{createFocus($color)};
 
-    .o-sel {
-      width: 100%;
+            border-color: var(--#{$prefix}variant-#{$name}, $color);
+        }
+    }
+
+    &--rounded .o-select__input {
+        border-radius: var(
+            --#{$prefix}select-rounded-border-radius,
+            $select-rounded-border-radius
+        );
     }
-  }
-}
 
-.o-sel {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  display: inline-block;
-  position: relative;
-  vertical-align: top;
-  cursor: pointer;
-  justify-content: flex-start;
-  align-items: center;
-
-  box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
-  background-color: var(
-    --#{$prefix}select-background-color,
-    $select-background-color
-  );
-  border-color: var(--#{$prefix}select-border-color, $select-border-color);
-  border-width: var(--#{$prefix}select-border-width, $select-border-width);
-  border-style: var(--#{$prefix}select-border-style, $select-border-style);
-  border-radius: var(--#{$prefix}select-border-radius, $select-border-radius);
-  color: var(--#{$prefix}select-color, $select-color);
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-  height: var(--#{$prefix}select-height, $select-height);
-  line-height: var(--#{$prefix}select-line-height, $select-line-height);
-  padding: var(--#{$prefix}select-padding, $select-padding);
-  margin: var(--#{$prefix}select-margin, $select-margin);
-
-  &-arrow {
-    background-image: url(svg_arrow($select-arrow-color));
-    background-repeat: no-repeat;
-    background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
-    background-position: calc(
-        100% - var(--#{$prefix}select-arrow-size, $select-arrow-size) * 0.5
-      )
-      center;
-    padding-right: calc(
-      var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
-    );
-  }
-
-  &-iconspace-left {
-    padding-left: var(--#{$prefix}select-height, $select-height);
-  }
-
-  &-iconspace-right {
-    padding-right: var(--#{$prefix}select-height, $select-height);
-  }
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
+    &--expanded {
+        width: 100%;
+        flex-grow: 1;
+
+        .o-select__input {
+            width: 100%;
+        }
+    }
+
+    &--multiple .o-select__input {
+        height: auto;
+        padding: 0;
     }
-  }
 
-  // color variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
+    &__icon-left,
+    &__icon-right {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: var(--#{$prefix}select-height, $select-height);
+        z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
+    }
 
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
+    &__icon-right {
+        right: 0;
+    }
+
+    &__icon-left {
+        left: 0;
+    }
 
-      border-color: var(--#{$prefix}variant-#{$name}, $color);
+    // focus effect
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        .o-select__input {
+            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+            outline: none;
+        }
     }
-  }
-
-  &--rounded {
-    border-radius: var(
-      --#{$prefix}select-rounded-border-radius,
-      $select-rounded-border-radius
-    );
-  }
-
-  &--multiple {
-    height: auto;
-    padding: 0;
-  }
-
-  &--placeholder {
-    opacity: var(
-      --#{$prefix}select-placeholder-opacity,
-      $select-placeholder-opacity
-    );
-  }
-
-  &__icon-left,
-  &__icon-right {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: var(--#{$prefix}select-height, $select-height);
-    z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
-  }
-
-  &__icon-right {
-    right: 0;
-  }
-
-  &__icon-left {
-    left: 0;
-  }
-
-  &[disabled] {
-    cursor: inherit;
-  }
-
-  // focus effect
-  &:focus,
-  &:focus-within {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
 }

package/dist/scss/components/_sidebar.scss

@@ -12,128 +12,144 @@ $sidebar-width: 260px !default;
 $sidebar-zindex: 100 !default;
 /* @docs */
 
-.o-side {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: none;
-
-  &__content {
-    position: absolute;
-    background-color: var(
-      --#{$prefix}sidebar-content-background-color,
-      $sidebar-content-background-color
-    );
-    border-radius: var(
-      --#{$prefix}sidebar-border-radius,
-      $sidebar-border-radius
-    );
-    box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      &--#{$name} {
-        background-color: var(--#{$prefix}variant-#{$name}), $color;
-      }
-    }
+.o-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: none;
+
+    &__content {
+        position: absolute;
+        background-color: var(
+            --#{$prefix}sidebar-content-background-color,
+            $sidebar-content-background-color
+        );
+        border-radius: var(
+            --#{$prefix}sidebar-border-radius,
+            $sidebar-border-radius
+        );
+        box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
+
+        @each $name, $pair in $colors {
+            $color: list.nth($pair, 1);
+            &--#{$name} {
+                background-color: var(--#{$prefix}variant-#{$name}), $color;
+            }
+        }
 
-    // position
-    &--right,
-    &--left {
-      transition: width var(--#{$prefix}transition-duration)
-        var(--#{$prefix}transition-timing);
-      width: var(--#{$prefix}sidebar-width, $sidebar-width);
-    }
+        // position
+        &--right,
+        &--left {
+            transition: width var(--#{$prefix}transition-duration)
+                var(--#{$prefix}transition-timing);
+            width: var(--#{$prefix}sidebar-width, $sidebar-width);
+        }
 
-    &--top,
-    &--bottom {
-      transition: height var(--#{$prefix}transition-duration)
-        var(--#{$prefix}transition-timing);
-      height: var(--#{$prefix}sidebar-width, $sidebar-width);
-    }
+        &--top,
+        &--bottom {
+            transition: height var(--#{$prefix}transition-duration)
+                var(--#{$prefix}transition-timing);
+            height: var(--#{$prefix}sidebar-width, $sidebar-width);
+        }
 
-    &--right {
-      left: auto;
-      right: 0;
-      border-left: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
+        &--right {
+            left: auto;
+            right: 0;
+            border-left: var(
+                    --#{$prefix}sidebar-border-width,
+                    $sidebar-border-width
+                )
+                solid
+                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+        }
 
-    &--left {
-      left: 0;
-      right: auto;
-      border-right: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
+        &--left {
+            left: 0;
+            right: auto;
+            border-right: var(
+                    --#{$prefix}sidebar-border-width,
+                    $sidebar-border-width
+                )
+                solid
+                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+        }
 
-    &--top {
-      top: 0;
-      bottom: auto;
-      border-bottom: var(
-          --#{$prefix}sidebar-border-width,
-          $sidebar-border-width
-        )
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
+        &--top {
+            top: 0;
+            bottom: auto;
+            border-bottom: var(
+                    --#{$prefix}sidebar-border-width,
+                    $sidebar-border-width
+                )
+                solid
+                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+        }
 
-    &--bottom {
-      top: auto;
-      bottom: 0;
-      border-top: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
+        &--bottom {
+            top: auto;
+            bottom: 0;
+            border-top: var(
+                    --#{$prefix}sidebar-border-width,
+                    $sidebar-border-width
+                )
+                solid
+                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+        }
 
-    &--reduced {
-      width: var(--#{$prefix}sidebar-reduced-width, $sidebar-reduced-width);
+        &--reduced {
+            width: var(
+                --#{$prefix}sidebar-reduced-width,
+                $sidebar-reduced-width
+            );
+        }
 
-      &-expand {
-        &:hover {
-          transition: width var(--#{$prefix}transition-duration)
-            var(--#{$prefix}transition-timing);
-          width: var(--#{$prefix}sidebar-width, $sidebar-width);
+        &--hover-expand {
+            &:hover {
+                transition: width var(--#{$prefix}transition-duration)
+                    var(--#{$prefix}transition-timing);
+                width: var(--#{$prefix}sidebar-width, $sidebar-width);
+            }
         }
-      }
-    }
 
-    &--fullwidth {
-      width: 100%;
-      max-width: 100%;
+        &--fullwidth {
+            width: 100%;
+            max-width: 100%;
+        }
+
+        &--fullheight {
+            height: 100%;
+            max-height: 100%;
+        }
     }
 
-    &--fullheight {
-      height: 100%;
-      max-height: 100%;
+    &__overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
     }
-  }
 
-  &__overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-    background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
-  }
+    &--active {
+        display: block;
+    }
 
-  &--active {
-    display: block;
-  }
+    &--inline {
+        position: relative;
 
-  &--inline {
-    position: relative;
+        .o-sidebar__overlay {
+            position: absolute;
+        }
 
-    .o-side__overlay {
-      position: absolute;
+        .o-sidebar__content {
+            position: relative;
+        }
     }
 
-    .o-side__content {
-      position: relative;
+    &:not(&--inline) {
+        z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
     }
-  }
-
-  &:not(&--inline) {
-    z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
-  }
 }

package/dist/scss/components/_skeleton.scss

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