@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_flex.scss

@@ -1,52 +1,216 @@
-// 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 !important; }
-		.flex#{$infix}-column         { flex-direction: column !important; }
-		.flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
-		.flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
-
-		.flex#{$infix}-wrap         { flex-wrap: wrap !important; }
-		.flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
-		.flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
-		.flex#{$infix}-fill         { flex: 1 1 auto !important; }
-		.flex#{$infix}-grow-0       { flex-grow: 0 !important; }
-		.flex#{$infix}-grow-1       { flex-grow: 1 !important; }
-		.flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
-		.flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }
-		.flex#{$infix}-basis-0      { flex-basis: 0 !important; }
-		.flex#{$infix}-basis-auto   { flex-basis: auto !important; }
-
-		.justify-content#{$infix}-start   { justify-content: flex-start !important; }
-		.justify-content#{$infix}-end     { justify-content: flex-end !important; }
-		.justify-content#{$infix}-center  { justify-content: center !important; }
-		.justify-content#{$infix}-between { justify-content: space-between !important; }
-		.justify-content#{$infix}-around  { justify-content: space-around !important; }
-
-		.align-items#{$infix}-start    { align-items: flex-start !important; }
-		.align-items#{$infix}-end      { align-items: flex-end !important; }
-		.align-items#{$infix}-center   { align-items: center !important; }
-		.align-items#{$infix}-baseline { align-items: baseline !important; }
-		.align-items#{$infix}-stretch  { align-items: stretch !important; }
-
-		.align-content#{$infix}-start   { align-content: flex-start !important; }
-		.align-content#{$infix}-end     { align-content: flex-end !important; }
-		.align-content#{$infix}-center  { align-content: center !important; }
-		.align-content#{$infix}-between { align-content: space-between !important; }
-		.align-content#{$infix}-around  { align-content: space-around !important; }
-		.align-content#{$infix}-stretch { align-content: stretch !important; }
-
-		.align-self#{$infix}-auto     { align-self: auto !important; }
-		.align-self#{$infix}-start    { align-self: flex-start !important; }
-		.align-self#{$infix}-end      { align-self: flex-end !important; }
-		.align-self#{$infix}-center   { align-self: center !important; }
-		.align-self#{$infix}-baseline { align-self: baseline !important; }
-		.align-self#{$infix}-stretch  { align-self: stretch !important; }
-	}
-}
+@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;
+}