@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_sidebar.scss

@@ -1,116 +1,132 @@
-@use "sass:list";
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
-$sidebar-box-shadow: 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) !default;
-$sidebar-content-background-color: var(--#{$prefix}grey-lighter) !default;
-$sidebar-border-radius: var(--#{$prefix}base-border-radius) !default;
-$sidebar-border-width: 1px !default;
-$sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
-$sidebar-reduced-width: 80px !default;
-$sidebar-width: 260px !default;
-$sidebar-zindex: 100 !default;
+$sidebar-zindex: map.get(vars.$zindex, "fixed") !default;
+
+$sidebar-overlay-background-color: h.useVar(
+    "overlay-background-color"
+) !default;
+$sidebar-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
+
+$sidebar-content-zindex: map.get(vars.$zindex, "sidebar") !default;
+$sidebar-content-max-width: 50vw !default;
+$sidebar-content-max-height: 50vh !default;
+$sidebar-content-box-shadow: h.useVar("overlay-box-shadow") !default;
+$sidebar-content-background-color: h.useVar(
+    "control-brackground-color"
+) !default;
+$sidebar-content-border-radius: h.useVar("border-radius") !default;
+$sidebar-content-border-width: h.useVar("control-border-width") !default;
+$sidebar-content-border-style: solid !default;
+$sidebar-content-border-color: h.useVar("control-border-color") !default;
 /* @docs */
 
 .o-sidebar {
+    @include h.defineVar("sidebar-zindex", $sidebar-zindex);
+    @include h.defineVar(
+        "sidebar-overlay-background-color",
+        $sidebar-overlay-background-color
+    );
+    @include h.defineVar("sidebar-overlay-zindex", $sidebar-overlay-zindex);
+
+    @include h.defineVar("sidebar-content-zindex", $sidebar-content-zindex);
+    @include h.defineVar(
+        "sidebar-content-box-shadow",
+        $sidebar-content-box-shadow
+    );
+    @include h.defineVar(
+        "sidebar-content-background-color",
+        $sidebar-content-background-color
+    );
+    @include h.defineVar(
+        "sidebar-content-border-radius",
+        $sidebar-content-border-radius
+    );
+    @include h.defineVar(
+        "sidebar-content-border-width",
+        $sidebar-content-border-width
+    );
+    @include h.defineVar(
+        "sidebar-content-border-style",
+        $sidebar-content-border-style
+    );
+    @include h.defineVar(
+        "sidebar-content-border-color",
+        $sidebar-content-border-color
+    );
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+    // disable clickable
+    pointer-events: none;
+
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
+    right: 0;
+    top: 0;
     height: 100%;
     width: 100%;
-    display: none;
+    z-index: h.useVar("sidebar-zindex");
+
+    &__overlay {
+        pointer-events: auto;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        background-color: h.useVar("sidebar-overlay-background-color");
+        z-index: h.useVar("sidebar-overlay-zindex");
+    }
 
     &__content {
+        pointer-events: auto;
         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;
-            }
-        }
+        overflow: auto;
+        z-index: h.useVar("sidebar-content-zindex");
 
-        // position
-        &--right,
-        &--left {
-            transition: width var(--#{$prefix}transition-duration)
-                var(--#{$prefix}transition-timing);
-            width: var(--#{$prefix}sidebar-width, $sidebar-width);
-        }
+        background-color: h.useVar("sidebar-content-background-color");
+        border-width: 0;
+        border-style: h.useVar("sidebar-content-border-style");
+        border-color: h.useVar("sidebar-content-border-color");
+        border-radius: h.useVar("sidebar-content-border-radius");
 
-        &--top,
-        &--bottom {
-            transition: height var(--#{$prefix}transition-duration)
-                var(--#{$prefix}transition-timing);
-            height: var(--#{$prefix}sidebar-width, $sidebar-width);
-        }
+        box-shadow: h.useVar("sidebar-content-box-shadow");
+
+        transition:
+            width h.useVar("transition-duration") h.useVar("transition-timing"),
+            height h.useVar("transition-duration") h.useVar("transition-timing");
 
+        // position
         &--right {
             left: auto;
             right: 0;
-            border-left: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-left-width: h.useVar("sidebar-content-border-width");
         }
 
         &--left {
             left: 0;
             right: auto;
-            border-right: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-right-width: h.useVar("sidebar-content-border-width");
         }
 
         &--top {
             top: 0;
             bottom: auto;
-            border-bottom: var(
-                    --#{$prefix}sidebar-border-width,
-                    $sidebar-border-width
-                )
-                solid
-                var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
+            border-bottom-width: h.useVar("sidebar-content-border-width");
         }
 
         &--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
-            );
-        }
-
-        &--hover-expand {
-            &:hover {
-                transition: width var(--#{$prefix}transition-duration)
-                    var(--#{$prefix}transition-timing);
-                width: var(--#{$prefix}sidebar-width, $sidebar-width);
-            }
+            border-top-width: h.useVar("sidebar-content-border-width");
         }
 
         &--fullwidth {
@@ -124,32 +140,17 @@ $sidebar-zindex: 100 !default;
         }
     }
 
-    &__overlay {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
-    }
-
-    &--active {
-        display: block;
-    }
-
     &--inline {
-        position: relative;
+        @include h.defineVar("sidebar-zindex", "unset");
+        @include h.defineVar("sidebar-content-zindex", "unset");
 
-        .o-sidebar__overlay {
-            position: absolute;
-        }
+        position: relative;
 
         .o-sidebar__content {
             position: relative;
+            border-width: 0;
+            width: 100%;
+            height: 100%;
         }
     }
-
-    &:not(&--inline) {
-        z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
-    }
 }

package/dist/scss/components/_skeleton.scss

@@ -1,34 +1,42 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
+$skeleton-spacer: 0.5em !default;
+$skeleton-duration: 1.5s !default;
+$skeleton-font-size: h.useVar("font-size") !default;
+$skeleton-background-color: vars.$grey-lighter !default;
 $skeleton-background: linear-gradient(
     90deg,
-    $grey-lighter 25%,
-    rgba($grey-lighter, 0.5) 50%,
-    $grey-lighter 75%
+    $skeleton-background-color 25%,
+    rgba($skeleton-background-color, 0.5) 50%,
+    $skeleton-background-color 75%
 ) !default;
-$skeleton-border-radius: var(--#{$prefix}base-border-radius) !default;
-$skeleton-duration: 1.5s !default;
-$skeleton-margin: 0.5rem 0 0 0 !default;
+$skeleton-border-radius: h.useVar("border-radius") !default;
+$skeleton-border-radius-rounded: h.useVar("border-radius-rounded") !default;
 /* @docs */
 
-@keyframes skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
+.o-skeleton {
+    @include h.defineVar("skeleton-duration", $skeleton-duration);
+    @include h.defineVar("skeleton-spacer", $skeleton-spacer);
+    @include h.defineVar("skeleton-font-size", $skeleton-font-size);
+    @include h.defineVar("skeleton-background", $skeleton-background);
+    @include h.defineVar("skeleton-border-radius", $skeleton-border-radius);
+    @include h.defineVar(
+        "skeleton-border-radius-rounded",
+        $skeleton-border-radius-rounded
+    );
 
-    100% {
-        background-position: 0 50%;
-    }
-}
+    @keyframes skeleton-loading {
+        0% {
+            background-position: 100% 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);
+        100% {
+            background-position: 0 50%;
+        }
     }
-}
 
-.o-skeleton {
     display: inline-flex;
     flex-direction: column;
     vertical-align: middle;
@@ -36,21 +44,14 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
     &__item {
         width: 100%;
-        background: var(--#{$prefix}skeleton-background, $skeleton-background);
-        margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
-
-        @include steps-size($base-font-size);
-
-        @each $name, $value in $sizes {
-            &--#{$name} {
-                @include steps-size($value, $name);
-            }
-        }
+        background: h.useVar("skeleton-background");
+        line-height: h.useVar("skeleton-font-size");
+        border-radius: h.useVar("skeleton-border-radius");
 
         &--rounded {
-            border-radius: var(
-                --#{$prefix}skeleton-border-radius,
-                $skeleton-border-radius
+            @include h.defineVar(
+                "skeleton-border-radius",
+                h.useVar("skeleton-border-radius-rounded")
             );
         }
 
@@ -58,15 +59,26 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
             background-size: 400% 100%;
             animation-name: skeleton-loading;
             animation-iteration-count: infinite;
-            animation-duration: var(
-                --#{$prefix}skeleton-duration,
-                $skeleton-duration
-            );
+            animation-duration: h.useVar("skeleton-duration");
         }
 
         &::after {
             content: "\00a0";
         }
+
+        // size variants
+        @each $name, $value in vars.$sizes {
+            &--#{$name} {
+                @include h.defineVar(
+                    "skeleton-font-size",
+                    h.useVar("size-#{$name}")
+                );
+            }
+        }
+
+        & + .o-skeleton__item {
+            margin-top: h.useVar("skeleton-spacer");
+        }
     }
 
     &--centered {
@@ -75,6 +87,5 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
     &--right {
         align-items: flex-end;
-        margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
     }
 }