@finqu/cool 1.3.0 → 2.0.2

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

@@ -0,0 +1,93 @@
+@use "../variables" as *;
+@use "sass:map";
+/* User Select ========================================================================== */
+
+@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#{$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;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-user-select;
+    }
+} @else {
+    @include cool-user-select;
+}

package/scss/utilities/_visibility.scss

@@ -0,0 +1,66 @@
+@use "../variables" as *;
+@use "sass:map";
+
+/* Visibility ========================================================================== */
+
+.visible {
+    visibility: visible;
+}
+.invisible {
+    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;
+}