@oruga-ui/theme-oruga 0.7.0 → 0.8.0

package/dist/scss/components/_modal.scss

@@ -1,94 +1,156 @@
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$modal-content-background-color: var(--#{$prefix}white) !default;
-$modal-content-border-radius: var(--#{$prefix}base-border-radius) !default;
-$modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
-$modal-close-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$modal-close-right: 20px !default;
-$modal-close-top: 20px !default;
-$modal-close-size: 32px !default;
-$modal-close-color: var(--#{$prefix}white) !default;
-$modal-content-fullscreen-background-color: $control-brackground-color !default;
+$modal-zindex: map.get(vars.$zindex, "fixed") !default;
+
+$modal-overlay-background-color: h.useVar("overlay-background-color") !default;
+$modal-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
+
+$modal-content-zindex: map.get(vars.$zindex, "modal") !default;
 $modal-content-max-height: calc(100vh - 160px) !default;
-$modal-content-margin: 0 auto !default;
-$modal-zindex: 40 !default;
+$modal-content-max-width: calc(100vw - 160px) !default;
+$modal-content-box-shadow: h.useVar("overlay-box-shadow") !default;
+$modal-content-border-radius: h.useVar("border-radius") !default;
+$modal-content-background-color: h.useVar("control-brackground-color") !default;
+
+$modal-close-top: 20px !default;
+$modal-close-right: 20px !default;
+$modal-close-color: h.useVar("white") !default;
+$modal-close-size: 2rem !default;
+$modal-close-border-radius: h.useVar("border-radius-rounded") !default;
+$modal-close-background-color: h.useVar("control-shadow-color") !default;
 /* @docs */
 
 .o-modal {
+    @include h.defineVar("modal-zindex", $modal-zindex);
+    @include h.defineVar(
+        "modal-overlay-background-color",
+        $modal-overlay-background-color
+    );
+    @include h.defineVar("modal-overlay-zindex", $modal-overlay-zindex);
+
+    @include h.defineVar("modal-content-zindex", $modal-content-zindex);
+    @include h.defineVar("modal-content-box-shadow", $modal-content-box-shadow);
+    @include h.defineVar("modal-content-max-height", $modal-content-max-height);
+    @include h.defineVar("modal-content-max-width", $modal-content-max-width);
+    @include h.defineVar(
+        "modal-content-border-radius",
+        $modal-content-border-radius
+    );
+    @include h.defineVar(
+        "modal-content-background-color",
+        $modal-content-background-color
+    );
+
+    @include h.defineVar("modal-close-top", $modal-close-top);
+    @include h.defineVar("modal-close-right", $modal-close-right);
+    @include h.defineVar("modal-close-color", $modal-close-color);
+    @include h.defineVar("modal-close-size", $modal-close-size);
+    @include h.defineVar(
+        "modal-close-border-radius",
+        $modal-close-border-radius
+    );
+    @include h.defineVar(
+        "modal-close-background-color",
+        $modal-close-background-color
+    );
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
+
+    // disable clickable
+    pointer-events: none;
+
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
-    z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
+    height: 100%;
+    width: 100%;
+    z-index: h.useVar("modal-zindex");
 
     &__overlay {
+        pointer-events: auto;
+        position: absolute;
         bottom: 0;
         left: 0;
-        position: absolute;
         right: 0;
         top: 0;
-        background-color: var(
-            --#{$prefix}modal-overlay-background-color,
-            $modal-overlay-background-color
-        );
+        background-color: h.useVar("modal-overlay-background-color");
+        z-index: h.useVar("modal-overlay-zindex");
     }
 
     &__content {
-        overflow: auto;
+        pointer-events: auto;
         position: relative;
-        margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
-        max-height: var(
-            --#{$prefix}modal-content-max-height,
-            $modal-content-max-height
-        );
-        background-color: var(
-            --#{$prefix}modal-content-background-color,
-            $modal-content-background-color
-        );
-        border-radius: var(
-            --#{$prefix}modal-content-border-radius,
-            $modal-content-border-radius
-        );
+        overflow: auto;
+        margin: 0 auto;
+        z-index: h.useVar("modal-content-zindex");
+
+        max-height: h.useVar("modal-content-max-height");
+        max-width: h.useVar("modal-content-max-width");
+        background-color: h.useVar("modal-content-background-color");
+        border-radius: h.useVar("modal-content-border-radius");
 
+        box-shadow: h.useVar("modal-content-box-shadow");
+
+        /// @deprecated
         &--full-screen {
             width: 100%;
             height: 100%;
+            max-width: 100vh;
             max-height: 100vh;
             margin: 0;
-            background-color: var(
-                --#{$prefix}modal-content-fullscreen-background-color,
-                $modal-content-fullscreen-background-color
-            );
+        }
+
+        &--fullwidth {
+            width: 100%;
+            max-width: 100%;
+        }
+
+        &--fullheight {
+            height: 100%;
+            max-height: 100%;
         }
     }
 
     &__close {
-        background: none;
+        // add clickable cursor
+        @include h.clickable;
+
         position: fixed;
+        top: h.useVar("modal-close-top");
+        right: h.useVar("modal-close-right");
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        height: h.useVar("modal-close-size");
+        width: h.useVar("modal-close-size");
+        padding: 0;
+
+        color: h.useVar("modal-close-color");
+
         border: none;
-        display: inline-block;
-        vertical-align: top;
-        border-radius: var(
-            --#{$prefix}modal-close-border-radius,
-            $modal-close-border-radius
-        );
-        right: var(--#{$prefix}modal-close-right, $modal-close-right);
-        top: var(--#{$prefix}modal-close-top, $modal-close-top);
-        height: var(--#{$prefix}modal-close-size, $modal-close-size);
-        width: var(--#{$prefix}modal-close-size, $modal-close-size);
-        color: var(--#{$prefix}modal-close-color, $modal-close-color);
+        border-radius: h.useVar("modal-close-border-radius");
+        background-color: h.useVar("modal-close-background-color");
     }
 
     &--mobile {
         .o-modal__content {
-            width: 100%;
+            @media screen and (max-width: 1199px) {
+                width: 75vw;
+            }
+            @media screen and (max-width: 575px) {
+                width: 90vw;
+            }
         }
     }
 }

package/dist/scss/components/_notification.scss

@@ -1,44 +1,91 @@
 @use "sass:list";
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$notification-background-color: var(--#{$prefix}primary) !default;
-$notification-border-radius: 4px !default;
+$notification-spacer: calc(2 * h.useVar("control-spacer")) !default;
 $notification-padding: 1.75em 1.75em !default;
-$notification-margin-bottom: 1.5rem !default;
-$notification-animantion: append-animate 0.3s linear !default;
-$notification-color: var(--#{$prefix}white) !default;
-$notification-close-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$notification-close-right: 0.5rem !default;
-$notification-close-top: 0.5rem !default;
-$notification-close-size: 20px !default;
-$notification-close-color: var(--#{$prefix}white) !default;
-$notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
-$notification-icon-margin-right: 1rem !default;
+$notification-animation: append-animate h.useVar("animation-speed") linear !default;
+
+$notification-color: h.useVar("primary-invert") !default;
+$notification-background-color: h.useVar("primary") !default;
+$notification-border-radius: h.useVar("border-radius") !default;
+
+$notification-close-top: 0.5em !default;
+$notification-close-right: 0.5em !default;
+$notification-close-color: h.useVar("white") !default;
+$notification-close-size: 1.5rem !default;
+$notification-close-border-radius: h.useVar("border-radius-rounded") !default;
+$notification-close-background-color: h.useVar("control-shadow-color") !default;
+
 $notification-notices-padding: 2em !default;
-$notification-notices-zindex: 1000 !default;
+$notification-notices-max-width: 600px !default;
+$notification-notices-zindex: map.get(vars.$zindex, "tooltip") !default;
 /* @docs */
 
 .o-notification {
-    position: relative;
-    transform-origin: 50% 0;
-    // Modifiers
-    background-color: var(
-        --#{$prefix}notification-background-color,
+    @include h.defineVar("notification-spacer", $notification-spacer);
+    @include h.defineVar("notification-padding", $notification-padding);
+    @include h.defineVar("notification-animation", $notification-animation);
+    @include h.defineVar("notification-color", $notification-color);
+    @include h.defineVar(
+        "notification-background-color",
         $notification-background-color
     );
-    color: var(--#{$prefix}notification-color, $notification-color);
-    border-radius: var(
-        --#{$prefix}notification-border-radius,
+    @include h.defineVar(
+        "notification-border-radius",
         $notification-border-radius
     );
-    padding: var(--#{$prefix}notification-padding, $notification-padding);
-    margin-bottom: var(
-        --#{$prefix}notification-margin-bottom,
-        $notification-margin-bottom
+
+    @include h.defineVar("notification-close-top", $notification-close-top);
+    @include h.defineVar("notification-close-right", $notification-close-right);
+    @include h.defineVar("notification-close-color", $notification-close-color);
+    @include h.defineVar("notification-close-size", $notification-close-size);
+    @include h.defineVar(
+        "notification-close-border-radius",
+        $notification-close-border-radius
+    );
+    @include h.defineVar(
+        "notification-close-background-color",
+        $notification-close-background-color
     );
 
+    display: inline-flex;
+    flex-direction: row-reverse;
+    position: relative;
+    transform-origin: 50% 0;
+
+    padding: h.useVar("notification-padding");
+    margin-bottom: h.useVar("notification-spacer");
+
+    color: h.useVar("notification-color");
+
+    background-color: h.useVar("notification-background-color");
+    border-radius: h.useVar("notification-border-radius");
+
+    animation: h.useVar("notification-animation");
+    -webkit-animation: h.useVar("notification-animation");
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar(
+                "notification-color",
+                h.useVar("#{$name}-invert")
+            );
+            @include h.defineVar(
+                "notification-background-color",
+                h.useVar($name)
+            );
+
+            &:hover {
+                // darken color on hover
+                filter: brightness(95%);
+            }
+        }
+    }
+
     &__content {
         flex-basis: auto;
         flex-grow: 1;
@@ -49,8 +96,8 @@ $notification-notices-zindex: 1000 !default;
     }
 
     &__wrapper {
-        align-items: center;
         display: flex;
+        align-items: center;
         text-align: inherit;
         padding-top: 0;
         border: 0;
@@ -60,93 +107,66 @@ $notification-notices-zindex: 1000 !default;
         flex-basis: auto;
         flex-grow: 0;
         flex-shrink: 0;
-        margin-right: var(
-            --#{$prefix}notification-icon-margin-right,
-            $notification-icon-margin-right
-        );
+        margin-right: h.useVar("notification-spacer");
     }
 
     &__close {
+        // add clickable cursor
+        @include h.clickable;
+
         position: absolute;
-        border: none;
-        cursor: pointer;
-        pointer-events: auto;
-        display: flex;
-        justify-content: center;
+        top: h.useVar("notification-close-top");
+        right: h.useVar("notification-close-right");
+
+        display: inline-flex;
         align-items: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        vertical-align: top;
-        background-color: var(
-            --#{$prefix}notification-close-background-color,
-            $notification-close-background-color
-        );
-        border-radius: var(
-            --#{$prefix}notification-close-border-radius,
-            $notification-close-border-radius
-        );
-        right: var(
-            --#{$prefix}notification-close-right,
-            $notification-close-right
-        );
-        top: var(--#{$prefix}notification-close-top, $notification-close-top);
-        height: var(
-            --#{$prefix}notification-close-size,
-            $notification-close-size
-        );
-        width: var(
-            --#{$prefix}notification-close-size,
-            $notification-close-size
-        );
-        color: var(
-            --#{$prefix}notification-close-color,
-            $notification-close-color
-        );
-    }
+        justify-content: center;
 
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-        $color-invert: list.nth($pair, 2);
-        &--#{$name} {
-            border-color: transparent;
-            background-color: var(--#{$prefix}variant-#{$name}, $color);
-            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+        height: h.useVar("notification-close-size");
+        width: h.useVar("notification-close-size");
+        padding: 0;
 
-            &:hover {
-                // background-color: darken($color, 2.5%)
-                // IE 11 needs polyfill
-                filter: brightness(97.5%);
-            }
-        }
+        color: h.useVar("notification-close-color");
+
+        border: none;
+        border-radius: h.useVar("notification-close-border-radius");
+        background-color: h.useVar("notification-close-background-color");
     }
 }
 
 .o-notices {
+    @include h.defineVar(
+        "notification-notices-zindex",
+        $notification-notices-zindex
+    );
+    @include h.defineVar(
+        "notification-notices-padding",
+        $notification-notices-padding
+    );
+    @include h.defineVar(
+        "notification-notices-max-width",
+        $notification-notices-max-width
+    );
+
     position: fixed;
     display: flex;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
+
     overflow: hidden;
+    // disable clickable
     pointer-events: none;
-    padding: var(
-        --#{$prefix}notification-notices-padding,
-        $notification-notices-padding
-    );
-    z-index: var(
-        --#{$prefix}notification-notices-zindex,
-        $notification-notices-zindex
-    );
+
+    padding: h.useVar("notification-notices-padding");
+    z-index: h.useVar("notification-notices-zindex");
 
     .o-notification {
         pointer-events: stroke;
-        max-width: 600px;
-        animation: var(
-            --#{$prefix}notification-animantion,
-            $notification-animantion
-        );
+        max-width: h.useVar("notification-notices-max-width");
 
+        // position variants
         &--top,
         &--bottom {
             align-self: center;
@@ -176,12 +196,8 @@ $notification-notices-zindex: 1000 !default;
             margin-bottom: 0;
 
             &:not(:first-child) {
-                margin-bottom: $notification-margin-bottom;
+                margin-bottom: h.useVar("notification-spacer");
             }
         }
     }
-
-    &__custom-container {
-        position: absolute;
-    }
 }