@finqu/cool 1.3.0 → 2.0.2

package/scss/utilities/_flex.scss

@@ -0,0 +1,216 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Flex ========================================================================== */
+
+@mixin cool-flex {
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .flex#{$infix}-row {
+                flex-direction: row;
+            }
+            .flex#{$infix}-column {
+                flex-direction: column;
+            }
+            .flex#{$infix}-row-reverse {
+                flex-direction: row-reverse;
+            }
+            .flex#{$infix}-column-reverse {
+                flex-direction: column-reverse;
+            }
+
+            .flex#{$infix}-wrap {
+                flex-wrap: wrap;
+            }
+            .flex#{$infix}-nowrap {
+                flex-wrap: nowrap;
+            }
+            .flex#{$infix}-wrap-reverse {
+                flex-wrap: wrap-reverse;
+            }
+
+            .flex#{$infix}-fill {
+                flex: 1 1 auto;
+            }
+            .flex#{$infix}-grow-0 {
+                flex-grow: 0;
+            }
+            .flex#{$infix}-grow-1 {
+                flex-grow: 1;
+            }
+            .flex#{$infix}-shrink-0 {
+                flex-shrink: 0;
+            }
+            .flex#{$infix}-shrink-1 {
+                flex-shrink: 1;
+            }
+            .flex#{$infix}-basis-0 {
+                flex-basis: 0;
+            }
+            .flex#{$infix}-basis-auto {
+                flex-basis: auto;
+            }
+
+            .flex#{$infix}-1 {
+                flex: 1 1 0%;
+            }
+            .flex#{$infix}-auto {
+                flex: 1 1 auto;
+            }
+            .flex#{$infix}-initial {
+                flex: 0 1 auto;
+            }
+            .flex#{$infix}-none {
+                flex: none;
+            }
+
+            .justify-content#{$infix}-start {
+                justify-content: flex-start;
+            }
+            .justify-content#{$infix}-end {
+                justify-content: flex-end;
+            }
+            .justify-content#{$infix}-center {
+                justify-content: center;
+            }
+            .justify-content#{$infix}-between {
+                justify-content: space-between;
+            }
+            .justify-content#{$infix}-around {
+                justify-content: space-around;
+            }
+            .justify-content#{$infix}-evenly {
+                justify-content: space-evenly;
+            }
+            .justify-content#{$infix}-stretch {
+                justify-content: stretch;
+            }
+
+            .align-items#{$infix}-start {
+                align-items: flex-start;
+            }
+            .align-items#{$infix}-end {
+                align-items: flex-end;
+            }
+            .align-items#{$infix}-center {
+                align-items: center;
+            }
+            .align-items#{$infix}-baseline {
+                align-items: baseline;
+            }
+            .align-items#{$infix}-stretch {
+                align-items: stretch;
+            }
+
+            .align-content#{$infix}-start {
+                align-content: flex-start;
+            }
+            .align-content#{$infix}-end {
+                align-content: flex-end;
+            }
+            .align-content#{$infix}-center {
+                align-content: center;
+            }
+            .align-content#{$infix}-between {
+                align-content: space-between;
+            }
+            .align-content#{$infix}-around {
+                align-content: space-around;
+            }
+            .align-content#{$infix}-evenly {
+                align-content: space-evenly;
+            }
+            .align-content#{$infix}-stretch {
+                align-content: stretch;
+            }
+
+            .align-self#{$infix}-auto {
+                align-self: auto;
+            }
+            .align-self#{$infix}-start {
+                align-self: flex-start;
+            }
+            .align-self#{$infix}-end {
+                align-self: flex-end;
+            }
+            .align-self#{$infix}-center {
+                align-self: center;
+            }
+            .align-self#{$infix}-baseline {
+                align-self: baseline;
+            }
+            .align-self#{$infix}-stretch {
+                align-self: stretch;
+            }
+
+            @for $i from -1 through 12 {
+                .order#{$infix}-#{$i} {
+                    order: $i;
+                }
+            }
+            .order#{$infix}-first {
+                order: -9999;
+            }
+            .order#{$infix}-last {
+                order: 9999;
+            }
+
+            .place-content#{$infix}-center {
+                place-content: center;
+            }
+            .place-content#{$infix}-start {
+                place-content: start;
+            }
+            .place-content#{$infix}-end {
+                place-content: end;
+            }
+            .place-content#{$infix}-between {
+                place-content: space-between;
+            }
+            .place-content#{$infix}-around {
+                place-content: space-around;
+            }
+            .place-content#{$infix}-evenly {
+                place-content: space-evenly;
+            }
+            .place-content#{$infix}-stretch {
+                place-content: stretch;
+            }
+
+            .place-items#{$infix}-center {
+                place-items: center;
+            }
+            .place-items#{$infix}-start {
+                place-items: start;
+            }
+            .place-items#{$infix}-end {
+                place-items: end;
+            }
+            .place-items#{$infix}-stretch {
+                place-items: stretch;
+            }
+
+            .place-self#{$infix}-center {
+                place-self: center;
+            }
+            .place-self#{$infix}-start {
+                place-self: start;
+            }
+            .place-self#{$infix}-end {
+                place-self: end;
+            }
+            .place-self#{$infix}-stretch {
+                place-self: stretch;
+            }
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-flex;
+    }
+} @else {
+    @include cool-flex;
+}

package/scss/utilities/_grid.scss

@@ -0,0 +1,136 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Grid ========================================================================== */
+
+@mixin cool-util-grid {
+    .d-grid {
+        display: grid;
+    }
+    .d-inline-grid {
+        display: inline-grid;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .d#{$infix}-grid {
+                display: grid;
+            }
+            .d#{$infix}-inline-grid {
+                display: inline-grid;
+            }
+
+            @for $i from 1 through 12 {
+                .grid-cols#{$infix}-#{$i} {
+                    grid-template-columns: repeat($i, minmax(0, 1fr));
+                }
+            }
+
+            .grid-cols#{$infix}-none {
+                grid-template-columns: none;
+            }
+
+            .grid-cols#{$infix}-auto {
+                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+            }
+        }
+    }
+
+    @for $i from 1 through 6 {
+        .grid-rows-#{$i} {
+            grid-template-rows: repeat($i, minmax(0, 1fr));
+        }
+    }
+
+    .grid-rows-none {
+        grid-template-rows: none;
+    }
+
+    .grid-flow-row {
+        grid-auto-flow: row;
+    }
+    .grid-flow-col {
+        grid-auto-flow: column;
+    }
+    .grid-flow-row-dense {
+        grid-auto-flow: row dense;
+    }
+    .grid-flow-col-dense {
+        grid-auto-flow: column dense;
+    }
+
+    @for $i from 1 through 12 {
+        .col-span-#{$i} {
+            grid-column: span $i / span $i;
+        }
+    }
+    .col-span-full {
+        grid-column: 1 / -1;
+    }
+    .col-span-auto {
+        grid-column: auto;
+    }
+
+    @for $i from 1 through 13 {
+        .col-start-#{$i} {
+            grid-column-start: $i;
+        }
+        .col-end-#{$i} {
+            grid-column-end: $i;
+        }
+    }
+    .col-start-auto {
+        grid-column-start: auto;
+    }
+    .col-end-auto {
+        grid-column-end: auto;
+    }
+
+    @for $i from 1 through 6 {
+        .row-span-#{$i} {
+            grid-row: span $i / span $i;
+        }
+    }
+    .row-span-full {
+        grid-row: 1 / -1;
+    }
+    .row-span-auto {
+        grid-row: auto;
+    }
+
+    @for $i from 1 through 7 {
+        .row-start-#{$i} {
+            grid-row-start: $i;
+        }
+        .row-end-#{$i} {
+            grid-row-end: $i;
+        }
+    }
+    .row-start-auto {
+        grid-row-start: auto;
+    }
+    .row-end-auto {
+        grid-row-end: auto;
+    }
+
+    .grid-auto-fit {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: var(--cool-grid-gutter-x);
+    }
+
+    .grid-auto-fill {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: var(--cool-grid-gutter-x);
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-util-grid;
+    }
+} @else {
+    @include cool-util-grid;
+}

package/scss/utilities/_opacity.scss

@@ -0,0 +1,131 @@
+@use "../variables" as *;
+@use "sass:map";
+/* Opacity ========================================================================== */
+
+@mixin cool-opacity {
+    .opacity-0 {
+        opacity: 0;
+    }
+    .opacity-5 {
+        opacity: 0.05;
+    }
+    .opacity-10 {
+        opacity: 0.1;
+    }
+    .opacity-20 {
+        opacity: 0.2;
+    }
+    .opacity-25 {
+        opacity: 0.25;
+    }
+    .opacity-30 {
+        opacity: 0.3;
+    }
+    .opacity-40 {
+        opacity: 0.4;
+    }
+    .opacity-50 {
+        opacity: 0.5;
+    }
+    .opacity-60 {
+        opacity: 0.6;
+    }
+    .opacity-70 {
+        opacity: 0.7;
+    }
+    .opacity-75 {
+        opacity: 0.75;
+    }
+    .opacity-80 {
+        opacity: 0.8;
+    }
+    .opacity-90 {
+        opacity: 0.9;
+    }
+    .opacity-95 {
+        opacity: 0.95;
+    }
+    .opacity-100 {
+        opacity: 1;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .opacity#{$infix}-0 {
+                opacity: 0;
+            }
+            .opacity#{$infix}-25 {
+                opacity: 0.25;
+            }
+            .opacity#{$infix}-50 {
+                opacity: 0.5;
+            }
+            .opacity#{$infix}-75 {
+                opacity: 0.75;
+            }
+            .opacity#{$infix}-100 {
+                opacity: 1;
+            }
+        }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        .hover\:opacity-0:hover {
+            opacity: 0;
+        }
+        .hover\:opacity-25:hover {
+            opacity: 0.25;
+        }
+        .hover\:opacity-50:hover {
+            opacity: 0.5;
+        }
+        .hover\:opacity-75:hover {
+            opacity: 0.75;
+        }
+        .hover\:opacity-100:hover {
+            opacity: 1;
+        }
+    }
+
+    .focus\:opacity-0:focus {
+        opacity: 0;
+    }
+    .focus\:opacity-25:focus {
+        opacity: 0.25;
+    }
+    .focus\:opacity-50:focus {
+        opacity: 0.5;
+    }
+    .focus\:opacity-75:focus {
+        opacity: 0.75;
+    }
+    .focus\:opacity-100:focus {
+        opacity: 1;
+    }
+
+    .group:hover .group-hover\:opacity-0 {
+        opacity: 0;
+    }
+    .group:hover .group-hover\:opacity-25 {
+        opacity: 0.25;
+    }
+    .group:hover .group-hover\:opacity-50 {
+        opacity: 0.5;
+    }
+    .group:hover .group-hover\:opacity-75 {
+        opacity: 0.75;
+    }
+    .group:hover .group-hover\:opacity-100 {
+        opacity: 1;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-opacity;
+    }
+} @else {
+    @include cool-opacity;
+}

package/scss/utilities/_overflow.scss

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