@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_display.scss

@@ -1,16 +1,116 @@
-// Display
-// ---------------------------------------------------------------------------------------------------------------
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-	@include media-breakpoint-up($breakpoint) {
-
-		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-		@each $value in $displays {
-			.d#{$infix}-#{$value} {
-				display: $value !important;
-			}
-		}
-	}
-}
+@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

@@ -1,78 +1,89 @@
-// Embed
-// ---------------------------------------------------------------------------------------------------------------
-
-.embed-responsive {
-	display: block;
-	width: 100%;
-	padding: 0;
-	overflow: hidden;
-
-	&::before {
-		display: block;
-		content: '';
-	}
-
-	&.embed-responsive-21by9 {
-		position: relative;
-
-		&::before {
-			padding-top: percentage(9/21);
-		}
-	}
-
-	&.embed-responsive-16by9 {
-		position: relative;
-
-		&::before {
-			padding-top: percentage(9/16);
-		}
-	}
-
-	&.embed-responsive-4by3 {
-		position: relative;
-
-		&::before {
-			padding-top: percentage(3/4);
-		}
-	}
-
-	&.embed-responsive-1by1 {
-		position: relative;
-
-		&::before {
-			padding-top: percentage(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%;
-		}
-		@include media-breakpoint-between(md, xl) {
-			flex: 0 1 100%
-		}
-	}
-}
+@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;
+}