@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_overflow.scss

@@ -1,6 +1,242 @@
-// Overflow
-// ---------------------------------------------------------------------------------------------------------------
-
-@each $value in $overflows {
-	.overflow-#{$value} { overflow: $value !important; }
-}
+@use "../variables" as *;
+@use "sass:map";
+/* Overflow ========================================================================== */
+
+@mixin cool-overflow {
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .overflow#{$infix}-auto {
+                overflow: auto;
+            }
+            .overflow#{$infix}-hidden {
+                overflow: hidden;
+            }
+            .overflow#{$infix}-visible {
+                overflow: visible;
+            }
+            .overflow#{$infix}-scroll {
+                overflow: scroll;
+            }
+            .overflow#{$infix}-clip {
+                overflow: clip;
+            }
+
+            .overflow-x#{$infix}-auto {
+                overflow-x: auto;
+            }
+            .overflow-x#{$infix}-hidden {
+                overflow-x: hidden;
+            }
+            .overflow-x#{$infix}-visible {
+                overflow-x: visible;
+            }
+            .overflow-x#{$infix}-scroll {
+                overflow-x: scroll;
+            }
+            .overflow-x#{$infix}-clip {
+                overflow-x: clip;
+            }
+
+            .overflow-y#{$infix}-auto {
+                overflow-y: auto;
+            }
+            .overflow-y#{$infix}-hidden {
+                overflow-y: hidden;
+            }
+            .overflow-y#{$infix}-visible {
+                overflow-y: visible;
+            }
+            .overflow-y#{$infix}-scroll {
+                overflow-y: scroll;
+            }
+            .overflow-y#{$infix}-clip {
+                overflow-y: clip;
+            }
+
+            .scrollbar#{$infix}-auto {
+                scrollbar-width: auto;
+            }
+            .scrollbar#{$infix}-thin {
+                scrollbar-width: thin;
+            }
+            .scrollbar#{$infix}-none {
+                scrollbar-width: none;
+            }
+
+            .overscroll#{$infix}-auto {
+                overscroll-behavior: auto;
+            }
+            .overscroll#{$infix}-contain {
+                overscroll-behavior: contain;
+            }
+            .overscroll#{$infix}-none {
+                overscroll-behavior: none;
+            }
+
+            .overscroll-x#{$infix}-auto {
+                overscroll-behavior-x: auto;
+            }
+            .overscroll-x#{$infix}-contain {
+                overscroll-behavior-x: contain;
+            }
+            .overscroll-x#{$infix}-none {
+                overscroll-behavior-x: none;
+            }
+
+            .overscroll-y#{$infix}-auto {
+                overscroll-behavior-y: auto;
+            }
+            .overscroll-y#{$infix}-contain {
+                overscroll-behavior-y: contain;
+            }
+            .overscroll-y#{$infix}-none {
+                overscroll-behavior-y: none;
+            }
+
+            .scroll-snap#{$infix}-none {
+                scroll-snap-type: none;
+            }
+            .scroll-snap-x#{$infix} {
+                scroll-snap-type: x mandatory;
+            }
+            .scroll-snap-y#{$infix} {
+                scroll-snap-type: y mandatory;
+            }
+            .scroll-snap-both#{$infix} {
+                scroll-snap-type: both mandatory;
+            }
+            .scroll-snap-x#{$infix}-proximity {
+                scroll-snap-type: x proximity;
+            }
+            .scroll-snap-y#{$infix}-proximity {
+                scroll-snap-type: y proximity;
+            }
+
+            .snap-start#{$infix} {
+                scroll-snap-align: start;
+            }
+            .snap-end#{$infix} {
+                scroll-snap-align: end;
+            }
+            .snap-center#{$infix} {
+                scroll-snap-align: center;
+            }
+            .snap-none#{$infix} {
+                scroll-snap-align: none;
+            }
+
+            .snap-normal#{$infix} {
+                scroll-snap-stop: normal;
+            }
+            .snap-always#{$infix} {
+                scroll-snap-stop: always;
+            }
+
+            @for $i from 0 through 5 {
+                .scroll-p#{$infix}-#{$i} {
+                    scroll-padding: #{$i * 0.25}rem;
+                }
+                .scroll-pt#{$infix}-#{$i} {
+                    scroll-padding-top: #{$i * 0.25}rem;
+                }
+                .scroll-pr#{$infix}-#{$i} {
+                    scroll-padding-right: #{$i * 0.25}rem;
+                }
+                .scroll-pb#{$infix}-#{$i} {
+                    scroll-padding-bottom: #{$i * 0.25}rem;
+                }
+                .scroll-pl#{$infix}-#{$i} {
+                    scroll-padding-left: #{$i * 0.25}rem;
+                }
+                .scroll-px#{$infix}-#{$i} {
+                    scroll-padding-inline: #{$i * 0.25}rem;
+                }
+                .scroll-py#{$infix}-#{$i} {
+                    scroll-padding-block: #{$i * 0.25}rem;
+                }
+                .scroll-m#{$infix}-#{$i} {
+                    scroll-margin: #{$i * 0.25}rem;
+                }
+                .scroll-mt#{$infix}-#{$i} {
+                    scroll-margin-top: #{$i * 0.25}rem;
+                }
+                .scroll-mr#{$infix}-#{$i} {
+                    scroll-margin-right: #{$i * 0.25}rem;
+                }
+                .scroll-mb#{$infix}-#{$i} {
+                    scroll-margin-bottom: #{$i * 0.25}rem;
+                }
+                .scroll-ml#{$infix}-#{$i} {
+                    scroll-margin-left: #{$i * 0.25}rem;
+                }
+                .scroll-mx#{$infix}-#{$i} {
+                    scroll-margin-inline: #{$i * 0.25}rem;
+                }
+                .scroll-my#{$infix}-#{$i} {
+                    scroll-margin-block: #{$i * 0.25}rem;
+                }
+            }
+        }
+    }
+
+    .scrollbar-custom {
+        &::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 4px;
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.3);
+            }
+        }
+
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
+    }
+
+    .scroll-smooth {
+        scroll-behavior: smooth;
+    }
+    .scroll-auto {
+        scroll-behavior: auto;
+    }
+
+    .overflow-horizontal-indicator {
+        background-image:
+            linear-gradient(to right, white, white), linear-gradient(to right, white, white),
+            linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
+            linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
+        background-position:
+            left center,
+            right center,
+            left center,
+            right center;
+        background-repeat: no-repeat;
+        background-color: white;
+        background-size:
+            30px 100%,
+            30px 100%,
+            30px 100%,
+            30px 100%;
+        background-attachment: local, local, scroll, scroll;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-overflow;
+    }
+} @else {
+    @include cool-overflow;
+}

package/scss/utilities/_perfect-scrollbar.scss

@@ -1,141 +1,147 @@
-// Perfect scrollbar
-// ---------------------------------------------------------------------------------------------------------------
-
-.ps {
-    overflow: hidden !important;
-    overflow-anchor: none;
-    touch-action: auto;
-
-    &.ps-dark {
-        .ps__thumb-x,
-        .ps__thumb-y {
-            background-color: rgba(0, 0, 0, 0.50);
-        }
-
-        .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.80);
-                height: 12px;
-            }
-        }
-        > .ps__rail-y {
-            > .ps__thumb-y {
-                background-color: rgba(255, 255, 255, 0.80);
-                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 .2s linear, opacity .2s linear;
-    height: 15px;
-    bottom: 0px;
-    position: absolute;
-    z-index: 10;
-}
-
-.ps__rail-y {
-    display: none;
-    opacity: 0;
-    transition: background-color .2s linear, opacity .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.50);
-    border-radius: 6px;
-    transition: background-color .2s linear, height .2s ease-in-out;
-    height: 6px;
-    bottom: 2px;
-    position: absolute;
-}
-
-.ps__thumb-y {
-    background-color: rgba(255, 255, 255, 0.50);
-    border-radius: 6px;
-    transition: background-color .2s linear, width .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.80);
-    height: 12px;
-}
-
-.ps__rail-y:hover > .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y {
-    background-color:rgba(255, 255, 255, 0.80);
-    width: 12px;
-}
+@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;
+}