@finqu/cool 1.3.0 → 2.0.2

package/scss/utilities/_cursor.scss

@@ -0,0 +1,160 @@
+@use "../variables" as *;
+/* Cursor ========================================================================== */
+
+@mixin cool-cursor {
+    .cursor-auto {
+        cursor: auto;
+    }
+
+    .cursor-default {
+        cursor: default;
+    }
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
+
+    .cursor-wait {
+        cursor: wait;
+    }
+
+    .cursor-text {
+        cursor: text;
+    }
+
+    .cursor-move {
+        cursor: move;
+    }
+
+    .cursor-not-allowed {
+        cursor: not-allowed;
+    }
+
+    .cursor-help {
+        cursor: help;
+    }
+
+    .cursor-progress {
+        cursor: progress;
+    }
+
+    .cursor-crosshair {
+        cursor: crosshair;
+    }
+
+    .cursor-context-menu {
+        cursor: context-menu;
+    }
+
+    .cursor-cell {
+        cursor: cell;
+    }
+
+    .cursor-copy {
+        cursor: copy;
+    }
+
+    .cursor-alias {
+        cursor: alias;
+    }
+
+    .cursor-none {
+        cursor: none;
+    }
+
+    .cursor-col-resize {
+        cursor: col-resize;
+    }
+
+    .cursor-row-resize {
+        cursor: row-resize;
+    }
+
+    .cursor-n-resize {
+        cursor: n-resize;
+    }
+
+    .cursor-e-resize {
+        cursor: e-resize;
+    }
+
+    .cursor-s-resize {
+        cursor: s-resize;
+    }
+
+    .cursor-w-resize {
+        cursor: w-resize;
+    }
+
+    .cursor-ne-resize {
+        cursor: ne-resize;
+    }
+
+    .cursor-nw-resize {
+        cursor: nw-resize;
+    }
+
+    .cursor-se-resize {
+        cursor: se-resize;
+    }
+
+    .cursor-sw-resize {
+        cursor: sw-resize;
+    }
+
+    .cursor-ew-resize {
+        cursor: ew-resize;
+    }
+
+    .cursor-ns-resize {
+        cursor: ns-resize;
+    }
+
+    .cursor-nesw-resize {
+        cursor: nesw-resize;
+    }
+
+    .cursor-nwse-resize {
+        cursor: nwse-resize;
+    }
+
+    .cursor-grab {
+        cursor: grab;
+    }
+
+    .cursor-grabbing {
+        cursor: grabbing;
+    }
+
+    .cursor-zoom-in {
+        cursor: zoom-in;
+    }
+
+    .cursor-zoom-out {
+        cursor: zoom-out;
+    }
+
+    .cursor-sortable {
+        cursor:
+            url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),
+            move;
+        cursor: -webkit-grab;
+        cursor: grab;
+    }
+
+    .cursor-sortable-chosen {
+        cursor:
+            url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA8ElEQ…MaIrswx%2FYOXKRSUsXsh8s3Y91rlQK%2FF8IiOx%2B3vxAooqZGlRhljTAAAAAElFTkSuQmCC),
+            move;
+        cursor: -webkit-grabbing;
+        cursor: grabbing;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-cursor;
+    }
+} @else {
+    @include cool-cursor;
+}

package/scss/utilities/_display.scss

@@ -0,0 +1,116 @@
+@use "../variables" as *;
+@use "sass:map";
+
+/* Display ========================================================================== */
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .d#{$infix}-none {
+            display: none;
+        }
+
+        .d#{$infix}-inline {
+            display: inline;
+        }
+
+        .d#{$infix}-inline-block {
+            display: inline-block;
+        }
+
+        .d#{$infix}-block {
+            display: block;
+        }
+
+        .d#{$infix}-table {
+            display: table;
+        }
+
+        .d#{$infix}-table-row {
+            display: table-row;
+        }
+
+        .d#{$infix}-table-cell {
+            display: table-cell;
+        }
+
+        .d#{$infix}-flex {
+            display: flex;
+        }
+
+        .d#{$infix}-inline-flex {
+            display: inline-flex;
+        }
+
+        .d#{$infix}-grid {
+            display: grid;
+        }
+
+        .d#{$infix}-inline-grid {
+            display: inline-grid;
+        }
+
+        .d#{$infix}-contents {
+            display: contents;
+        }
+
+        .d#{$infix}-flow-root {
+            display: flow-root;
+        }
+
+        @supports (grid-template-columns: subgrid) {
+            .d#{$infix}-subgrid {
+                display: grid;
+                grid-template-columns: subgrid;
+                grid-template-rows: subgrid;
+            }
+        }
+    }
+}
+
+@media print {
+    .d-print-none {
+        display: none;
+    }
+
+    .d-print-inline {
+        display: inline;
+    }
+
+    .d-print-inline-block {
+        display: inline-block;
+    }
+
+    .d-print-block {
+        display: block;
+    }
+
+    .d-print-table {
+        display: table;
+    }
+
+    .d-print-table-row {
+        display: table-row;
+    }
+
+    .d-print-table-cell {
+        display: table-cell;
+    }
+
+    .d-print-flex {
+        display: flex;
+    }
+
+    .d-print-inline-flex {
+        display: inline-flex;
+    }
+
+    .d-print-grid {
+        display: grid;
+    }
+
+    .d-print-inline-grid {
+        display: inline-grid;
+    }
+}

package/scss/utilities/_embed.scss

@@ -0,0 +1,89 @@
+@use "../variables" as *;
+@use "sass:math";
+/* Embed ========================================================================== */
+
+@mixin cool-embed {
+    .embed-responsive {
+        display: block;
+        width: 100%;
+        padding: 0;
+        overflow: hidden;
+
+        &::before {
+            display: block;
+            content: "";
+        }
+
+        &.embed-responsive-21by9 {
+            position: relative;
+
+            &::before {
+                padding-top: math.percentage(math.div(9, 21));
+            }
+        }
+
+        &.embed-responsive-16by9 {
+            position: relative;
+
+            &::before {
+                padding-top: math.percentage(math.div(9, 16));
+            }
+        }
+
+        &.embed-responsive-4by3 {
+            position: relative;
+
+            &::before {
+                padding-top: math.percentage(3 * 0.25);
+            }
+        }
+
+        &.embed-responsive-1by1 {
+            position: relative;
+
+            &::before {
+                padding-top: math.percentage(math.div(1, 1));
+            }
+        }
+
+        .embed-responsive-item,
+        iframe,
+        embed,
+        object,
+        video {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
+    .embed-tiles {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -5px;
+        position: relative;
+
+        .embed-responsive {
+            margin: 5px;
+            flex: 0 1 calc(50% - 10px);
+            @media screen and (max-width: 680px) {
+                flex: 0 1 100%;
+            }
+            @media screen and (min-width: 680px) and (max-width: 1140px) {
+                flex: 0 1 100%;
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-embed;
+    }
+} @else {
+    @include cool-embed;
+}

package/scss/utilities/_fill.scss

@@ -0,0 +1,79 @@
+@use "../variables" as *;
+/* Fill ========================================================================== */
+
+@mixin cool-fill {
+    .fill-current {
+        fill: currentColor;
+    }
+    .fill-transparent {
+        fill: transparent;
+    }
+    .fill-none {
+        fill: none;
+    }
+
+    @each $color, $value in $theme-colors {
+        .fill-#{$color} {
+            fill: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    @each $color, $value in $colors {
+        .fill-#{$color} {
+            fill: var(--cool-color-#{$color});
+        }
+    }
+
+    .fill-opacity-0 {
+        fill-opacity: 0;
+    }
+    .fill-opacity-25 {
+        fill-opacity: 0.25;
+    }
+    .fill-opacity-50 {
+        fill-opacity: 0.5;
+    }
+    .fill-opacity-75 {
+        fill-opacity: 0.75;
+    }
+    .fill-opacity-100 {
+        fill-opacity: 1;
+    }
+
+    .fill-rule-nonzero {
+        fill-rule: nonzero;
+    }
+    .fill-rule-evenodd {
+        fill-rule: evenodd;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        @each $color, $value in $theme-colors {
+            .hover\:fill-#{$color}:hover {
+                fill: var(--cool-theme-color-#{$color});
+            }
+        }
+
+        .hover\:fill-current:hover {
+            fill: currentColor;
+        }
+    }
+
+    @each $color, $value in $theme-colors {
+        .group:hover .group-hover\:fill-#{$color} {
+            fill: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    .group:hover .group-hover\:fill-current {
+        fill: currentColor;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-fill;
+    }
+} @else {
+    @include cool-fill;
+}

package/scss/utilities/_filters.scss

@@ -0,0 +1,233 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Filters ========================================================================== */
+
+@mixin cool-filters {
+    .blur-none {
+        filter: blur(0);
+    }
+    .blur-sm {
+        filter: blur(4px);
+    }
+    .blur {
+        filter: blur(8px);
+    }
+    .blur-md {
+        filter: blur(12px);
+    }
+    .blur-lg {
+        filter: blur(16px);
+    }
+    .blur-xl {
+        filter: blur(24px);
+    }
+    .blur-2xl {
+        filter: blur(40px);
+    }
+    .blur-3xl {
+        filter: blur(64px);
+    }
+
+    .backdrop-blur-none {
+        backdrop-filter: blur(0);
+    }
+    .backdrop-blur-sm {
+        backdrop-filter: blur(4px);
+    }
+    .backdrop-blur {
+        backdrop-filter: blur(8px);
+    }
+    .backdrop-blur-md {
+        backdrop-filter: blur(12px);
+    }
+    .backdrop-blur-lg {
+        backdrop-filter: blur(16px);
+    }
+    .backdrop-blur-xl {
+        backdrop-filter: blur(24px);
+    }
+    .backdrop-blur-2xl {
+        backdrop-filter: blur(40px);
+    }
+    .backdrop-blur-3xl {
+        backdrop-filter: blur(64px);
+    }
+
+    .brightness-0 {
+        filter: brightness(0);
+    }
+    .brightness-50 {
+        filter: brightness(0.5);
+    }
+    .brightness-75 {
+        filter: brightness(0.75);
+    }
+    .brightness-90 {
+        filter: brightness(0.9);
+    }
+    .brightness-95 {
+        filter: brightness(0.95);
+    }
+    .brightness-100 {
+        filter: brightness(1);
+    }
+    .brightness-105 {
+        filter: brightness(1.05);
+    }
+    .brightness-110 {
+        filter: brightness(1.1);
+    }
+    .brightness-125 {
+        filter: brightness(1.25);
+    }
+    .brightness-150 {
+        filter: brightness(1.5);
+    }
+    .brightness-200 {
+        filter: brightness(2);
+    }
+
+    .contrast-0 {
+        filter: contrast(0);
+    }
+    .contrast-50 {
+        filter: contrast(0.5);
+    }
+    .contrast-75 {
+        filter: contrast(0.75);
+    }
+    .contrast-100 {
+        filter: contrast(1);
+    }
+    .contrast-125 {
+        filter: contrast(1.25);
+    }
+    .contrast-150 {
+        filter: contrast(1.5);
+    }
+    .contrast-200 {
+        filter: contrast(2);
+    }
+
+    .grayscale-0 {
+        filter: grayscale(0);
+    }
+    .grayscale {
+        filter: grayscale(100%);
+    }
+
+    .hue-rotate-0 {
+        filter: hue-rotate(0deg);
+    }
+    .hue-rotate-15 {
+        filter: hue-rotate(15deg);
+    }
+    .hue-rotate-30 {
+        filter: hue-rotate(30deg);
+    }
+    .hue-rotate-60 {
+        filter: hue-rotate(60deg);
+    }
+    .hue-rotate-90 {
+        filter: hue-rotate(90deg);
+    }
+    .hue-rotate-180 {
+        filter: hue-rotate(180deg);
+    }
+
+    .invert-0 {
+        filter: invert(0);
+    }
+    .invert {
+        filter: invert(100%);
+    }
+
+    .saturate-0 {
+        filter: saturate(0);
+    }
+    .saturate-50 {
+        filter: saturate(0.5);
+    }
+    .saturate-100 {
+        filter: saturate(1);
+    }
+    .saturate-150 {
+        filter: saturate(1.5);
+    }
+    .saturate-200 {
+        filter: saturate(2);
+    }
+
+    .sepia-0 {
+        filter: sepia(0);
+    }
+    .sepia {
+        filter: sepia(100%);
+    }
+
+    .drop-shadow-sm {
+        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+    }
+    .drop-shadow {
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+    }
+    .drop-shadow-md {
+        filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+    }
+    .drop-shadow-lg {
+        filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+    }
+    .drop-shadow-xl {
+        filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+    }
+    .drop-shadow-2xl {
+        filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+    }
+    .drop-shadow-none {
+        filter: drop-shadow(0 0 #0000);
+    }
+
+    .filter-none {
+        filter: none;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .blur#{$infix}-none {
+                filter: blur(0);
+            }
+            .blur#{$infix}-sm {
+                filter: blur(4px);
+            }
+            .blur#{$infix} {
+                filter: blur(8px);
+            }
+            .blur#{$infix}-md {
+                filter: blur(12px);
+            }
+            .blur#{$infix}-lg {
+                filter: blur(16px);
+            }
+
+            .brightness#{$infix}-100 {
+                filter: brightness(1);
+            }
+            .grayscale#{$infix} {
+                filter: grayscale(100%);
+            }
+            .invert#{$infix} {
+                filter: invert(100%);
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-filters;
+    }
+} @else {
+    @include cool-filters;
+}