@finqu/cool 1.3.0 → 2.0.2

package/scss/utilities/_perfect-scrollbar.scss

@@ -0,0 +1,147 @@
+@use "../variables" as *;
+/* Perfect Scrollbar ========================================================================== */
+
+@mixin cool-perfect-scrollbar {
+    .ps {
+        overflow: hidden;
+        overflow-anchor: none;
+        touch-action: auto;
+
+        &.ps-dark {
+            .ps__thumb-x,
+            .ps__thumb-y {
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
+            .ps__rail-x:hover > .ps__thumb-x,
+            .ps__rail-x:focus > .ps__thumb-x {
+                background-color: rgba(0, 0, 0, 0.65);
+                height: 12px;
+            }
+
+            .ps__rail-y:hover > .ps__thumb-y,
+            .ps__rail-y:focus > .ps__thumb-y {
+                background-color: rgba(0, 0, 0, 0.65);
+                width: 12px;
+            }
+
+            &.ps-mousedown-scroll {
+                > .ps__rail-x > .ps__thumb-x {
+                    background-color: rgba(0, 0, 0, 0.65);
+                    height: 12px;
+                }
+                > .ps__rail-y > .ps__thumb-y {
+                    background-color: rgba(0, 0, 0, 0.65);
+                    width: 12px;
+                }
+            }
+        }
+
+        &.ps-mousedown-scroll {
+            > .ps__rail-x .ps__thumb-x {
+                background-color: rgba(255, 255, 255, 0.8);
+                height: 12px;
+            }
+            > .ps__rail-y > .ps__thumb-y {
+                background-color: rgba(255, 255, 255, 0.8);
+                width: 12px;
+            }
+        }
+
+        &.ps-show-rail-y > .ps__rail-y {
+            opacity: 1;
+        }
+
+        &.ps-show-rail-x > .ps__rail-x {
+            opacity: 1;
+        }
+    }
+
+    .ps__rail-x {
+        display: none;
+        opacity: 0;
+        transition:
+            background-color 0.2s linear,
+            opacity 0.2s linear;
+        height: 15px;
+        bottom: 0px;
+        position: absolute;
+        z-index: 10;
+    }
+
+    .ps__rail-y {
+        display: none;
+        opacity: 0;
+        transition:
+            background-color 0.2s linear,
+            opacity 0.2s linear;
+        width: 22px;
+        right: 0;
+        position: absolute;
+        z-index: 10;
+    }
+
+    .ps--active-x > .ps__rail-x,
+    .ps--active-y > .ps__rail-y {
+        display: block;
+        background-color: transparent;
+    }
+
+    .ps:hover > .ps__rail-x,
+    .ps:hover > .ps__rail-y,
+    .ps--focus > .ps__rail-x,
+    .ps--focus > .ps__rail-y,
+    .ps--scrolling-x > .ps__rail-x,
+    .ps--scrolling-y > .ps__rail-y {
+        opacity: 1;
+    }
+
+    .ps__rail-x:hover,
+    .ps__rail-y:hover,
+    .ps__rail-x:focus,
+    .ps__rail-y:focus {
+        opacity: 1;
+    }
+
+    .ps__thumb-x {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 6px;
+        transition:
+            background-color 0.2s linear,
+            height 0.2s ease-in-out;
+        height: 6px;
+        bottom: 2px;
+        position: absolute;
+    }
+
+    .ps__thumb-y {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 6px;
+        transition:
+            background-color 0.2s linear,
+            width 0.2s ease-in-out;
+        width: 6px;
+        right: 2px;
+        position: absolute;
+    }
+
+    .ps__rail-x:hover > .ps__thumb-x,
+    .ps__rail-x:focus > .ps__thumb-x {
+        background-color: rgba(255, 255, 255, 0.8);
+        height: 12px;
+    }
+
+    .ps__rail-y:hover > .ps__thumb-y,
+    .ps__rail-y:focus > .ps__thumb-y {
+        background-color: rgba(255, 255, 255, 0.8);
+        width: 12px;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-perfect-scrollbar;
+    }
+} @else {
+    @include cool-perfect-scrollbar;
+}

package/scss/utilities/_pointer-events.scss

@@ -0,0 +1,125 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Pointer Events ========================================================================== */
+
+@mixin cool-pointer-events {
+    .pointer-events-none {
+        pointer-events: none;
+    }
+    .pointer-events-auto {
+        pointer-events: auto;
+    }
+    .pointer-events-all {
+        pointer-events: all;
+    }
+    .pointer-events-visible {
+        pointer-events: visible;
+    }
+    .pointer-events-painted {
+        pointer-events: painted;
+    }
+    .pointer-events-fill {
+        pointer-events: fill;
+    }
+    .pointer-events-stroke {
+        pointer-events: stroke;
+    }
+
+    .touch-none {
+        touch-action: none;
+    }
+    .touch-auto {
+        touch-action: auto;
+    }
+    .touch-pan-x {
+        touch-action: pan-x;
+    }
+    .touch-pan-y {
+        touch-action: pan-y;
+    }
+    .touch-pan-left {
+        touch-action: pan-left;
+    }
+    .touch-pan-right {
+        touch-action: pan-right;
+    }
+    .touch-pan-up {
+        touch-action: pan-up;
+    }
+    .touch-pan-down {
+        touch-action: pan-down;
+    }
+    .touch-pinch-zoom {
+        touch-action: pinch-zoom;
+    }
+    .touch-manipulation {
+        touch-action: manipulation;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .pointer-events#{$infix}-none {
+                pointer-events: none;
+            }
+            .pointer-events#{$infix}-auto {
+                pointer-events: auto;
+            }
+            .pointer-events#{$infix}-all {
+                pointer-events: all;
+            }
+            .pointer-events#{$infix}-visible {
+                pointer-events: visible;
+            }
+            .pointer-events#{$infix}-painted {
+                pointer-events: painted;
+            }
+            .pointer-events#{$infix}-fill {
+                pointer-events: fill;
+            }
+            .pointer-events#{$infix}-stroke {
+                pointer-events: stroke;
+            }
+
+            .touch#{$infix}-none {
+                touch-action: none;
+            }
+            .touch#{$infix}-auto {
+                touch-action: auto;
+            }
+            .touch#{$infix}-pan-x {
+                touch-action: pan-x;
+            }
+            .touch#{$infix}-pan-y {
+                touch-action: pan-y;
+            }
+            .touch#{$infix}-pan-left {
+                touch-action: pan-left;
+            }
+            .touch#{$infix}-pan-right {
+                touch-action: pan-right;
+            }
+            .touch#{$infix}-pan-up {
+                touch-action: pan-up;
+            }
+            .touch#{$infix}-pan-down {
+                touch-action: pan-down;
+            }
+            .touch#{$infix}-pinch-zoom {
+                touch-action: pinch-zoom;
+            }
+            .touch#{$infix}-manipulation {
+                touch-action: manipulation;
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-pointer-events;
+    }
+} @else {
+    @include cool-pointer-events;
+}

package/scss/utilities/_position.scss

@@ -0,0 +1,130 @@
+@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;
+}