@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_position.scss

@@ -1,30 +1,130 @@
-// Position
-// ---------------------------------------------------------------------------------------------------------------
-
-@each $position in $positions {
-	.position-#{$position} { position: $position !important; }
-}
-
-.fixed-top {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	z-index: $zindex-fixed;
-}
-
-.fixed-bottom {
-	position: fixed;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: $zindex-fixed;
-}
-
-.sticky-top {
-	 @supports (position: sticky) {
-		position: sticky;
-		top: 0;
-		z-index: $zindex-sticky;
-	}
-}
+@use "../variables" as *;
+@use "sass:map";
+/* Position ========================================================================== */
+
+@mixin cool-position {
+    .static {
+        position: static;
+    }
+    .relative {
+        position: relative;
+    }
+    .absolute {
+        position: absolute;
+    }
+    .fixed {
+        position: fixed;
+    }
+    .sticky {
+        position: sticky;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .top#{$infix}-0 {
+                top: 0;
+            }
+            .top#{$infix}-50 {
+                top: 50%;
+            }
+            .top#{$infix}-100 {
+                top: 100%;
+            }
+            .bottom#{$infix}-0 {
+                bottom: 0;
+            }
+            .bottom#{$infix}-50 {
+                bottom: 50%;
+            }
+            .bottom#{$infix}-100 {
+                bottom: 100%;
+            }
+            .left#{$infix}-0 {
+                left: 0;
+            }
+            .left#{$infix}-50 {
+                left: 50%;
+            }
+            .left#{$infix}-100 {
+                left: 100%;
+            }
+            .right#{$infix}-0 {
+                right: 0;
+            }
+            .right#{$infix}-50 {
+                right: 50%;
+            }
+            .right#{$infix}-100 {
+                right: 100%;
+            }
+
+            .inset#{$infix}-0 {
+                inset: 0;
+            }
+            .inset#{$infix}-auto {
+                inset: auto;
+            }
+            .inset-x#{$infix}-0 {
+                left: 0;
+                right: 0;
+            }
+            .inset-y#{$infix}-0 {
+                top: 0;
+                bottom: 0;
+            }
+
+            .start#{$infix}-0 {
+                inset-inline-start: 0;
+            }
+            .start#{$infix}-50 {
+                inset-inline-start: 50%;
+            }
+            .start#{$infix}-100 {
+                inset-inline-start: 100%;
+            }
+            .end#{$infix}-0 {
+                inset-inline-end: 0;
+            }
+            .end#{$infix}-50 {
+                inset-inline-end: 50%;
+            }
+            .end#{$infix}-100 {
+                inset-inline-end: 100%;
+            }
+
+            .translate-middle {
+                transform: translate(-50%, -50%);
+            }
+            .translate-middle-x {
+                transform: translateX(-50%);
+            }
+            .translate-middle-y {
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .center-absolute {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .center-fixed {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-position;
+    }
+} @else {
+    @include cool-position;
+}

package/scss/utilities/_screen-readers.scss

@@ -0,0 +1,95 @@
+@use "../variables" as *;
+/* Screen Readers ========================================================================== */
+
+@mixin cool-screen-readers {
+    .sr-only,
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+        clip-path: inset(50%);
+
+        &:not(:focus):not(:active) {
+            clip: rect(0, 0, 0, 0);
+            clip-path: inset(50%);
+        }
+    }
+
+    .sr-only-focusable,
+    .visually-hidden-focusable {
+        &:not(:focus):not(:focus-within) {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+            clip-path: inset(50%);
+        }
+
+        &:focus,
+        &:focus-within {
+            position: static;
+            width: auto;
+            height: auto;
+            padding: inherit;
+            margin: inherit;
+            overflow: visible;
+            clip: auto;
+            white-space: normal;
+            clip-path: none;
+        }
+    }
+
+    .skip-link {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: var(--cool-body-bg);
+        color: var(--cool-link-color);
+        padding: 8px;
+        text-decoration: none;
+        z-index: 100;
+
+        &:focus {
+            top: 0;
+        }
+    }
+
+    .aria-label {
+        &[aria-label]:not([aria-label=""]) {
+            &::before {
+                content: attr(aria-label);
+                @extend .sr-only;
+            }
+        }
+    }
+
+    .aria-live-polite {
+        &:not([aria-live]) {
+            position: relative;
+
+            &::after {
+                @extend .sr-only;
+                content: attr(data-announce);
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-screen-readers;
+    }
+} @else {
+    @include cool-screen-readers;
+}

package/scss/utilities/_shadows.scss

@@ -0,0 +1,195 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Shadows ========================================================================== */
+
+@mixin cool-shadows {
+    .shadow-none {
+        box-shadow: none;
+    }
+    .shadow-sm {
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+    .shadow {
+        box-shadow:
+            0 1px 3px 0 rgba(0, 0, 0, 0.1),
+            0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    }
+    .shadow-md {
+        box-shadow:
+            0 4px 6px -1px rgba(0, 0, 0, 0.1),
+            0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+    .shadow-lg {
+        box-shadow:
+            0 10px 15px -3px rgba(0, 0, 0, 0.1),
+            0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    .shadow-xl {
+        box-shadow:
+            0 20px 25px -5px rgba(0, 0, 0, 0.1),
+            0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+    .shadow-2xl {
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    }
+    .shadow-inner {
+        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    }
+
+    @each $color, $value in $theme-colors {
+        .shadow-#{$color} {
+            box-shadow: 0 4px 14px 0 rgba($value, 0.25);
+        }
+
+        .shadow-#{$color}-lg {
+            box-shadow: 0 10px 30px -5px rgba($value, 0.35);
+        }
+    }
+
+    .elevation-0 {
+        box-shadow: none;
+    }
+    .elevation-1 {
+        box-shadow:
+            0 2px 1px -1px rgba(0, 0, 0, 0.2),
+            0 1px 1px 0 rgba(0, 0, 0, 0.14),
+            0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    }
+    .elevation-2 {
+        box-shadow:
+            0 3px 1px -2px rgba(0, 0, 0, 0.2),
+            0 2px 2px 0 rgba(0, 0, 0, 0.14),
+            0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    }
+    .elevation-3 {
+        box-shadow:
+            0 3px 3px -2px rgba(0, 0, 0, 0.2),
+            0 3px 4px 0 rgba(0, 0, 0, 0.14),
+            0 1px 8px 0 rgba(0, 0, 0, 0.12);
+    }
+    .elevation-4 {
+        box-shadow:
+            0 2px 4px -1px rgba(0, 0, 0, 0.2),
+            0 4px 5px 0 rgba(0, 0, 0, 0.14),
+            0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    }
+    .elevation-6 {
+        box-shadow:
+            0 3px 5px -1px rgba(0, 0, 0, 0.2),
+            0 6px 10px 0 rgba(0, 0, 0, 0.14),
+            0 1px 18px 0 rgba(0, 0, 0, 0.12);
+    }
+    .elevation-8 {
+        box-shadow:
+            0 5px 5px -3px rgba(0, 0, 0, 0.2),
+            0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+    .elevation-12 {
+        box-shadow:
+            0 7px 8px -4px rgba(0, 0, 0, 0.2),
+            0 12px 17px 2px rgba(0, 0, 0, 0.14),
+            0 5px 22px 4px rgba(0, 0, 0, 0.12);
+    }
+    .elevation-16 {
+        box-shadow:
+            0 8px 10px -5px rgba(0, 0, 0, 0.2),
+            0 16px 24px 2px rgba(0, 0, 0, 0.14),
+            0 6px 30px 5px rgba(0, 0, 0, 0.12);
+    }
+    .elevation-24 {
+        box-shadow:
+            0 11px 15px -7px rgba(0, 0, 0, 0.2),
+            0 24px 38px 3px rgba(0, 0, 0, 0.14),
+            0 9px 46px 8px rgba(0, 0, 0, 0.12);
+    }
+
+    .text-shadow-sm {
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .text-shadow {
+        text-shadow:
+            0 1px 3px rgba(0, 0, 0, 0.1),
+            0 1px 2px rgba(0, 0, 0, 0.06);
+    }
+    .text-shadow-md {
+        text-shadow:
+            0 4px 6px rgba(0, 0, 0, 0.1),
+            0 2px 4px rgba(0, 0, 0, 0.06);
+    }
+    .text-shadow-lg {
+        text-shadow:
+            0 10px 15px rgba(0, 0, 0, 0.1),
+            0 4px 6px rgba(0, 0, 0, 0.05);
+    }
+    .text-shadow-none {
+        text-shadow: none;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .shadow#{$infix}-none {
+                box-shadow: none;
+            }
+            .shadow#{$infix}-sm {
+                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            }
+            .shadow#{$infix} {
+                box-shadow:
+                    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+                    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            }
+            .shadow#{$infix}-md {
+                box-shadow:
+                    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            }
+            .shadow#{$infix}-lg {
+                box-shadow:
+                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+                    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            }
+            .shadow#{$infix}-xl {
+                box-shadow:
+                    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .shadow-dark-sm {
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+        }
+        .shadow-dark {
+            box-shadow:
+                0 1px 3px 0 rgba(0, 0, 0, 0.3),
+                0 1px 2px 0 rgba(0, 0, 0, 0.26);
+        }
+        .shadow-dark-md {
+            box-shadow:
+                0 4px 6px -1px rgba(0, 0, 0, 0.3),
+                0 2px 4px -1px rgba(0, 0, 0, 0.26);
+        }
+        .shadow-dark-lg {
+            box-shadow:
+                0 10px 15px -3px rgba(0, 0, 0, 0.3),
+                0 4px 6px -2px rgba(0, 0, 0, 0.25);
+        }
+        .shadow-dark-xl {
+            box-shadow:
+                0 20px 25px -5px rgba(0, 0, 0, 0.3),
+                0 10px 10px -5px rgba(0, 0, 0, 0.24);
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-shadows;
+    }
+} @else {
+    @include cool-shadows;
+}