@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_borders.scss

@@ -1,146 +1,205 @@
-// Borders
-// ---------------------------------------------------------------------------------------------------------------
-
-// Borders
-.border {
-	border: $border-width solid $border-color !important;
-}
-
-.border-top {
-	border-top: $border-width solid $border-color !important;
-}
-
-.border-right {
-	border-right: $border-width solid $border-color !important;
-}
-
-.border-bottom {
-	border-bottom: $border-width solid $border-color !important;
-}
-
-.border-left {
-	border-left: $border-width solid $border-color !important;
-}
-
-.border-0 {
-	border: 0 !important;
-}
-
-.border-top-0 {
-	border-top: 0 !important;
-}
-
-.border-right-0 {
-	border-right: 0 !important;
-}
-
-.border-bottom-0 {
-	border-bottom: 0 !important;
-}
-
-.border-left-0   {
-	border-left: 0 !important;
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-    @include media-breakpoint-up($breakpoint) {
-
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    	.border#{$infix}   {
-            border: $border-width solid $border-color !important;
-        }
-
-        .border#{$infix}-top   {
-            border-top: $border-width solid $border-color !important;
-        }
-
-        .border#{$infix}-right   {
-            border-right: $border-width solid $border-color !important;
-        }
-
-        .border#{$infix}-bottom   {
-            border-bottom: $border-width solid $border-color !important;
-        }
-
-        .border#{$infix}-left   {
-            border-left: $border-width solid $border-color !important;
-        }
-
-        .border#{$infix}-0   {
-			border: 0 !important;
-		}
-
-		.border#{$infix}-top-0   {
-			border-top: 0 !important;
-		}
-
-		.border#{$infix}-right-0   {
-			border-right: 0 !important;
-		}
-
-		.border#{$infix}-bottom-0   {
-			border-bottom: 0 !important;
-		}
-
-		.border#{$infix}-left-0   {
-			border-left: 0 !important;
-		}
-    }
-}
-
-
-// Colors
-// @each $color, $value in $colors {
-// 	.border-#{$color} {
-// 		border-color: $value !important;
-// 	}
-// }
-
-@each $color, $value in $theme-colors {
-	.border-#{$color} {
-		border-color: $value !important;
-	}
-}
-
-// Radius
-.rounded-sm {
-	border-radius: $border-radius-sm !important;
-}
-
-.rounded {
-	border-radius: $border-radius !important;
-}
-
-.rounded-lg {
-	border-radius: $border-radius-lg !important;
-}
-
-.rounded-top {
-	border-top-left-radius: $border-radius !important;
-	border-top-right-radius: $border-radius !important;
-}
-
-.rounded-right {
-	border-top-right-radius: $border-radius !important;
-	border-bottom-right-radius: $border-radius !important;
-}
-
-.rounded-bottom {
-	border-bottom-right-radius: $border-radius !important;
-	border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-left {
-	border-top-left-radius: $border-radius !important;
-	border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-circle {
-	border-radius: 50% !important;
-}
-
-.rounded-0 {
-	border-radius: 0 !important;
-}
+@use "../variables" as *;
+/* Borders ========================================================================== */
+
+@mixin cool-borders {
+    .border {
+        border: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-0 {
+        border: 0;
+    }
+
+    .border-top {
+        border-top: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-right {
+        border-right: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-bottom {
+        border-bottom: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-left {
+        border-left: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block {
+        border-block: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block-start {
+        border-block-start: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block-end {
+        border-block-end: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline {
+        border-inline: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline-start {
+        border-inline-start: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline-end {
+        border-inline-end: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-top-0 {
+        border-top: 0;
+    }
+
+    .border-right-0 {
+        border-right: 0;
+    }
+
+    .border-bottom-0 {
+        border-bottom: 0;
+    }
+
+    .border-left-0 {
+        border-left: 0;
+    }
+
+    @each $color, $value in $theme-colors {
+        .border-#{$color} {
+            border-color: var(--cool-theme-color-#{$color}, #{$value});
+        }
+    }
+
+    @for $i from 1 through 5 {
+        .border-#{$i} {
+            border-width: #{$i}px;
+        }
+    }
+
+    .border-solid {
+        border-style: solid;
+    }
+
+    .border-dashed {
+        border-style: dashed;
+    }
+
+    .border-dotted {
+        border-style: dotted;
+    }
+
+    .border-none {
+        border-style: none;
+    }
+
+    .rounded-0 {
+        border-radius: 0;
+    }
+
+    .rounded-xs {
+        border-radius: var(--cool-border-radius-xs, 0.1rem);
+    }
+
+    .rounded-sm {
+        border-radius: var(--cool-border-radius-sm, 0.2rem);
+    }
+
+    .rounded {
+        border-radius: var(--cool-border-radius, 0.25rem);
+    }
+
+    .rounded-lg {
+        border-radius: var(--cool-border-radius-lg, 0.3rem);
+    }
+
+    .rounded-full {
+        border-radius: 9999px;
+    }
+
+    .rounded-top {
+        border-top-left-radius: var(--cool-border-radius);
+        border-top-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-right {
+        border-top-right-radius: var(--cool-border-radius);
+        border-bottom-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-bottom {
+        border-bottom-right-radius: var(--cool-border-radius);
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-left {
+        border-top-left-radius: var(--cool-border-radius);
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-start {
+        border-start-start-radius: var(--cool-border-radius);
+        border-end-start-radius: var(--cool-border-radius);
+    }
+
+    .rounded-end {
+        border-start-end-radius: var(--cool-border-radius);
+        border-end-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-tl {
+        border-top-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-tr {
+        border-top-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-br {
+        border-bottom-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-bl {
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-ss {
+        border-start-start-radius: var(--cool-border-radius);
+    }
+
+    .rounded-se {
+        border-start-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-ee {
+        border-end-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-es {
+        border-end-start-radius: var(--cool-border-radius);
+    }
+
+    .outline-none {
+        outline: none;
+    }
+
+    .outline {
+        outline-style: solid;
+        outline-width: 2px;
+    }
+
+    @each $color, $value in $theme-colors {
+        .outline-#{$color} {
+            outline-color: var(--cool-theme-color-#{$color}, #{$value});
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-borders;
+    }
+} @else {
+    @include cool-borders;
+}

package/scss/utilities/_collapse.scss

@@ -1,33 +1,28 @@
-// Collapse
-// -----------------------------------------------------------------------------------------
+@use "../variables" as *;
+/* Collapse ========================================================================== */
 
-[data-collapse-indicator] {
-    display: inline-block;
+@mixin cool-collapse {
+    .collapse:not(.show) {
+        display: none;
+    }
 
-    &.show {
-        > .icon {
-            transform: rotate(180deg);
-        }
+    .collapse.show {
+        display: block;
     }
-}
 
-.collapse {
-    position: absolute;
-    visibility: hidden;
-    transition: height .35s ease;
+    [data-collapse-indicator] {
+        display: inline-block;
+    }
 
-    &.show {
-        position: relative;
-        visibility: visible;
-        transition: height .35s ease;
+    [data-collapse-indicator].show > .icon {
+        transform: rotate(180deg);
     }
 }
 
-.collapsing {
-    position: relative;
-    visibility: visible;
-    height: 0;
-    overflow: hidden;
-    transition: height .35s ease;
-    pointer-events: none;
-}
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-collapse;
+    }
+} @else {
+    @include cool-collapse;
+}

package/scss/utilities/_cursor.scss

@@ -1,22 +1,160 @@
-// Cursor
-// ---------------------------------------------------------------------------------------------------------------
-
-.c-default {
-	cursor: default !important;
-}
-
-.c-pointer {
-	cursor: pointer !important;
-}
-
-.c-sortable {
-	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABF0lEQ…%2BX%2BvObByYdEkFh8%2F6qXFrrfeocIk8x2VrNl9A%2F0l7Ib3y%2F5wAAAAAElFTkSuQmCC),move;
-    cursor: -webkit-grab;
-    cursor: grab;
-}
-
-.c-sortable-chosen {
-	cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA8ElEQ…MaIrswx%2FYOXKRSUsXsh8s3Y91rlQK%2FF8IiOx%2B3vxAooqZGlRhljTAAAAAElFTkSuQmCC),move;
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-}
+@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;
+}