@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_transform.scss

@@ -0,0 +1,232 @@
+@use "../variables" as *;
+/* Transform ========================================================================== */
+
+@mixin cool-transform {
+    .transform {
+        transform: translateX(var(--cool-translate-x, 0)) translateY(var(--cool-translate-y, 0))
+            rotate(var(--cool-rotate, 0)) scaleX(var(--cool-scale-x, 1)) scaleY(var(--cool-scale-y, 1))
+            skewX(var(--cool-skew-x, 0)) skewY(var(--cool-skew-y, 0));
+    }
+    .transform-none {
+        transform: none;
+    }
+
+    .scale-0 {
+        --cool-scale-x: 0;
+        --cool-scale-y: 0;
+    }
+    .scale-50 {
+        --cool-scale-x: 0.5;
+        --cool-scale-y: 0.5;
+    }
+    .scale-75 {
+        --cool-scale-x: 0.75;
+        --cool-scale-y: 0.75;
+    }
+    .scale-90 {
+        --cool-scale-x: 0.9;
+        --cool-scale-y: 0.9;
+    }
+    .scale-95 {
+        --cool-scale-x: 0.95;
+        --cool-scale-y: 0.95;
+    }
+    .scale-100 {
+        --cool-scale-x: 1;
+        --cool-scale-y: 1;
+    }
+    .scale-105 {
+        --cool-scale-x: 1.05;
+        --cool-scale-y: 1.05;
+    }
+    .scale-110 {
+        --cool-scale-x: 1.1;
+        --cool-scale-y: 1.1;
+    }
+    .scale-125 {
+        --cool-scale-x: 1.25;
+        --cool-scale-y: 1.25;
+    }
+    .scale-150 {
+        --cool-scale-x: 1.5;
+        --cool-scale-y: 1.5;
+    }
+
+    .scale-x-0 {
+        --cool-scale-x: 0;
+    }
+    .scale-x-50 {
+        --cool-scale-x: 0.5;
+    }
+    .scale-x-75 {
+        --cool-scale-x: 0.75;
+    }
+    .scale-x-90 {
+        --cool-scale-x: 0.9;
+    }
+    .scale-x-95 {
+        --cool-scale-x: 0.95;
+    }
+    .scale-x-100 {
+        --cool-scale-x: 1;
+    }
+    .scale-x-105 {
+        --cool-scale-x: 1.05;
+    }
+    .scale-x-110 {
+        --cool-scale-x: 1.1;
+    }
+    .scale-x-125 {
+        --cool-scale-x: 1.25;
+    }
+    .scale-x-150 {
+        --cool-scale-x: 1.5;
+    }
+
+    .scale-y-0 {
+        --cool-scale-y: 0;
+    }
+    .scale-y-50 {
+        --cool-scale-y: 0.5;
+    }
+    .scale-y-75 {
+        --cool-scale-y: 0.75;
+    }
+    .scale-y-90 {
+        --cool-scale-y: 0.9;
+    }
+    .scale-y-95 {
+        --cool-scale-y: 0.95;
+    }
+    .scale-y-100 {
+        --cool-scale-y: 1;
+    }
+    .scale-y-105 {
+        --cool-scale-y: 1.05;
+    }
+    .scale-y-110 {
+        --cool-scale-y: 1.1;
+    }
+    .scale-y-125 {
+        --cool-scale-y: 1.25;
+    }
+    .scale-y-150 {
+        --cool-scale-y: 1.5;
+    }
+
+    .rotate-0 {
+        --cool-rotate: 0deg;
+    }
+    .rotate-45 {
+        --cool-rotate: 45deg;
+    }
+    .rotate-90 {
+        --cool-rotate: 90deg;
+    }
+    .rotate-180 {
+        --cool-rotate: 180deg;
+    }
+    .-rotate-45 {
+        --cool-rotate: -45deg;
+    }
+    .-rotate-90 {
+        --cool-rotate: -90deg;
+    }
+    .-rotate-180 {
+        --cool-rotate: -180deg;
+    }
+
+    @each $name, $size in $spacers {
+        .translate-x-#{$name} {
+            --cool-translate-x: #{$size};
+        }
+        .translate-y-#{$name} {
+            --cool-translate-y: #{$size};
+        }
+        .-translate-x-#{$name} {
+            --cool-translate-x: -#{$size};
+        }
+        .-translate-y-#{$name} {
+            --cool-translate-y: -#{$size};
+        }
+    }
+
+    .translate-x-full {
+        --cool-translate-x: 100%;
+    }
+    .translate-y-full {
+        --cool-translate-y: 100%;
+    }
+    .-translate-x-full {
+        --cool-translate-x: -100%;
+    }
+    .-translate-y-full {
+        --cool-translate-y: -100%;
+    }
+
+    .origin-center {
+        transform-origin: center;
+    }
+    .origin-top {
+        transform-origin: top;
+    }
+    .origin-top-right {
+        transform-origin: top right;
+    }
+    .origin-right {
+        transform-origin: right;
+    }
+    .origin-bottom-right {
+        transform-origin: bottom right;
+    }
+    .origin-bottom {
+        transform-origin: bottom;
+    }
+    .origin-bottom-left {
+        transform-origin: bottom left;
+    }
+    .origin-left {
+        transform-origin: left;
+    }
+    .origin-top-left {
+        transform-origin: top left;
+    }
+
+    .transform-style-flat {
+        transform-style: flat;
+    }
+    .transform-style-3d {
+        transform-style: preserve-3d;
+    }
+
+    .backface-visible {
+        backface-visibility: visible;
+    }
+    .backface-hidden {
+        backface-visibility: hidden;
+    }
+
+    .perspective-none {
+        perspective: none;
+    }
+    .perspective-sm {
+        perspective: 250px;
+    }
+    .perspective-md {
+        perspective: 500px;
+    }
+    .perspective-lg {
+        perspective: 1000px;
+    }
+    .perspective-xl {
+        perspective: 1500px;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-transform;
+    }
+} @else {
+    @include cool-transform;
+}

package/scss/utilities/_transitions.scss

@@ -0,0 +1,147 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Transitions ========================================================================== */
+
+@mixin cool-transitions {
+    .transition-none {
+        transition-property: none;
+    }
+    .transition-all {
+        transition-property: all;
+    }
+    .transition {
+        transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    }
+    .transition-colors {
+        transition-property: background-color, border-color, color, fill, stroke;
+    }
+    .transition-opacity {
+        transition-property: opacity;
+    }
+    .transition-shadow {
+        transition-property: box-shadow;
+    }
+    .transition-transform {
+        transition-property: transform;
+    }
+
+    .duration-75 {
+        transition-duration: 75ms;
+    }
+    .duration-100 {
+        transition-duration: 100ms;
+    }
+    .duration-150 {
+        transition-duration: 150ms;
+    }
+    .duration-200 {
+        transition-duration: 200ms;
+    }
+    .duration-300 {
+        transition-duration: 300ms;
+    }
+    .duration-500 {
+        transition-duration: 500ms;
+    }
+    .duration-700 {
+        transition-duration: 700ms;
+    }
+    .duration-1000 {
+        transition-duration: 1000ms;
+    }
+
+    .ease-linear {
+        transition-timing-function: linear;
+    }
+    .ease-in {
+        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    }
+    .ease-out {
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    .ease-in-out {
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .delay-75 {
+        transition-delay: 75ms;
+    }
+    .delay-100 {
+        transition-delay: 100ms;
+    }
+    .delay-150 {
+        transition-delay: 150ms;
+    }
+    .delay-200 {
+        transition-delay: 200ms;
+    }
+    .delay-300 {
+        transition-delay: 300ms;
+    }
+    .delay-500 {
+        transition-delay: 500ms;
+    }
+    .delay-700 {
+        transition-delay: 700ms;
+    }
+    .delay-1000 {
+        transition-delay: 1000ms;
+    }
+
+    .animate-none {
+        animation: none;
+    }
+
+    .will-change-auto {
+        will-change: auto;
+    }
+    .will-change-scroll {
+        will-change: scroll-position;
+    }
+    .will-change-contents {
+        will-change: contents;
+    }
+    .will-change-transform {
+        will-change: transform;
+    }
+    .will-change-opacity {
+        will-change: opacity;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .transition#{$infix}-none {
+                transition-property: none;
+            }
+            .transition#{$infix}-all {
+                transition-property: all;
+            }
+            .transition#{$infix} {
+                transition-property:
+                    background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+            }
+            .transition#{$infix}-colors {
+                transition-property: background-color, border-color, color, fill, stroke;
+            }
+            .transition#{$infix}-opacity {
+                transition-property: opacity;
+            }
+            .transition#{$infix}-shadow {
+                transition-property: box-shadow;
+            }
+            .transition#{$infix}-transform {
+                transition-property: transform;
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-transitions;
+    }
+} @else {
+    @include cool-transitions;
+}

package/scss/utilities/_user-select.scss

@@ -1,14 +1,93 @@
-// User select
-// ---------------------------------------------------------------------------------------------------------------
+@use "../variables" as *;
+@use "sass:map";
+/* User Select ========================================================================== */
 
-.user-select-all {
-	user-select: all !important;
-}
+@mixin cool-user-select {
+    .user-select-none {
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+    }
+
+    .user-select-text {
+        user-select: text;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+    }
+
+    .user-select-all {
+        user-select: all;
+        -webkit-user-select: all;
+        -moz-user-select: all;
+        -ms-user-select: all;
+    }
+
+    .user-select-auto {
+        user-select: auto;
+        -webkit-user-select: auto;
+        -moz-user-select: auto;
+        -ms-user-select: auto;
+    }
+
+    .user-select-contain {
+        user-select: contain;
+        -webkit-user-select: contain;
+        -moz-user-select: contain;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-.user-select-auto {
-	user-select: auto !important;
+            .user-select#{$infix}-none {
+                user-select: none;
+            }
+            .user-select#{$infix}-text {
+                user-select: text;
+            }
+            .user-select#{$infix}-all {
+                user-select: all;
+            }
+            .user-select#{$infix}-auto {
+                user-select: auto;
+            }
+        }
+    }
+
+    .user-drag-none {
+        -webkit-user-drag: none;
+        user-drag: none;
+    }
+
+    .user-drag-auto {
+        -webkit-user-drag: auto;
+        user-drag: auto;
+    }
+
+    .user-drag-element {
+        -webkit-user-drag: element;
+        user-drag: element;
+    }
+
+    .highlight-none {
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+    }
+
+    .touch-callout-none {
+        -webkit-touch-callout: none;
+    }
+    .touch-callout-default {
+        -webkit-touch-callout: default;
+    }
 }
 
-.user-select-none {
-	user-select: none !important;
-}
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-user-select;
+    }
+} @else {
+    @include cool-user-select;
+}

package/scss/utilities/_visibility.scss

@@ -1,10 +1,66 @@
-// Visiblity
-// ---------------------------------------------------------------------------------------------------------------
+@use "../variables" as *;
+@use "sass:map";
+
+/* Visibility ========================================================================== */
 
 .visible {
-	visibility: visible !important;
+    visibility: visible;
 }
-
 .invisible {
-	visibility: hidden !important;
-}
+    visibility: hidden;
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .visible#{$infix} {
+            visibility: visible;
+        }
+        .invisible#{$infix} {
+            visibility: hidden;
+        }
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .hover\:visible:hover {
+        visibility: visible;
+    }
+    .hover\:invisible:hover {
+        visibility: hidden;
+    }
+}
+
+.group:hover .group-hover\:visible {
+    visibility: visible;
+}
+.group:hover .group-hover\:invisible {
+    visibility: hidden;
+}
+
+.focus\:visible:focus {
+    visibility: visible;
+}
+.focus\:invisible:focus {
+    visibility: hidden;
+}
+
+.content-visibility-auto {
+    content-visibility: auto;
+}
+.content-visibility-hidden {
+    content-visibility: hidden;
+}
+.content-visibility-visible {
+    content-visibility: visible;
+}
+
+@media print {
+    .visible-print {
+        visibility: visible;
+    }
+    .invisible-print {
+        visibility: hidden;
+    }
+}

package/scss/utilities/_z-index.scss

@@ -0,0 +1,169 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Z-index ========================================================================== */
+
+@mixin cool-z-index {
+    .z-auto {
+        z-index: auto;
+    }
+    .z-0 {
+        z-index: 0;
+    }
+    .z-10 {
+        z-index: 10;
+    }
+    .z-20 {
+        z-index: 20;
+    }
+    .z-30 {
+        z-index: 30;
+    }
+    .z-40 {
+        z-index: 40;
+    }
+    .z-50 {
+        z-index: 50;
+    }
+    .z-60 {
+        z-index: 60;
+    }
+    .z-70 {
+        z-index: 70;
+    }
+    .z-80 {
+        z-index: 80;
+    }
+    .z-90 {
+        z-index: 90;
+    }
+    .z-100 {
+        z-index: 100;
+    }
+    .z-max {
+        z-index: 9999;
+    }
+
+    .z-n1 {
+        z-index: -1;
+    }
+    .z-n10 {
+        z-index: -10;
+    }
+
+    .z-dropdown {
+        z-index: var(--cool-zindex-dropdown);
+    }
+    .z-sticky {
+        z-index: var(--cool-zindex-sticky);
+    }
+    .z-fixed {
+        z-index: var(--cool-zindex-fixed);
+    }
+    .z-select {
+        z-index: var(--cool-zindex-select);
+    }
+    .z-dialog {
+        z-index: var(--cool-zindex-dialog);
+    }
+    .z-toast {
+        z-index: var(--cool-zindex-toast);
+    }
+    .z-popover {
+        z-index: var(--cool-zindex-popover);
+    }
+    .z-tooltip {
+        z-index: var(--cool-zindex-tooltip);
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .z#{$infix}-auto {
+                z-index: auto;
+            }
+            .z#{$infix}-0 {
+                z-index: 0;
+            }
+            .z#{$infix}-10 {
+                z-index: 10;
+            }
+            .z#{$infix}-20 {
+                z-index: 20;
+            }
+            .z#{$infix}-30 {
+                z-index: 30;
+            }
+            .z#{$infix}-40 {
+                z-index: 40;
+            }
+            .z#{$infix}-50 {
+                z-index: 50;
+            }
+        }
+    }
+
+    .isolate {
+        isolation: isolate;
+    }
+    .isolation-auto {
+        isolation: auto;
+    }
+
+    .mix-blend-normal {
+        mix-blend-mode: normal;
+    }
+    .mix-blend-multiply {
+        mix-blend-mode: multiply;
+    }
+    .mix-blend-screen {
+        mix-blend-mode: screen;
+    }
+    .mix-blend-overlay {
+        mix-blend-mode: overlay;
+    }
+    .mix-blend-darken {
+        mix-blend-mode: darken;
+    }
+    .mix-blend-lighten {
+        mix-blend-mode: lighten;
+    }
+    .mix-blend-color-dodge {
+        mix-blend-mode: color-dodge;
+    }
+    .mix-blend-color-burn {
+        mix-blend-mode: color-burn;
+    }
+    .mix-blend-hard-light {
+        mix-blend-mode: hard-light;
+    }
+    .mix-blend-soft-light {
+        mix-blend-mode: soft-light;
+    }
+    .mix-blend-difference {
+        mix-blend-mode: difference;
+    }
+    .mix-blend-exclusion {
+        mix-blend-mode: exclusion;
+    }
+    .mix-blend-hue {
+        mix-blend-mode: hue;
+    }
+    .mix-blend-saturation {
+        mix-blend-mode: saturation;
+    }
+    .mix-blend-color {
+        mix-blend-mode: color;
+    }
+    .mix-blend-luminosity {
+        mix-blend-mode: luminosity;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-z-index;
+    }
+} @else {
+    @include cool-z-index;
+}