@finqu/cool 1.0.0

package/scss/utilities/_spacing.scss

@@ -0,0 +1,92 @@
+// Spacing
+// ---------------------------------------------------------------------------------------------------------------
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @each $prop, $abbrev in (margin: m, padding: p) {
+
+            @each $name, $size in $spacers {
+
+                .#{$abbrev}#{$infix}-#{$name} {
+                    #{$prop}: $size !important;
+                }
+
+                .#{$abbrev}t#{$infix}-#{$name},
+                .#{$abbrev}y#{$infix}-#{$name} {
+                    #{$prop}-top: $size !important;
+                }
+
+                .#{$abbrev}r#{$infix}-#{$name},
+                .#{$abbrev}x#{$infix}-#{$name} {
+                    #{$prop}-right: $size !important;
+                }
+
+                .#{$abbrev}b#{$infix}-#{$name},
+                .#{$abbrev}y#{$infix}-#{$name} {
+                    #{$prop}-bottom: $size !important;
+                }
+
+                .#{$abbrev}l#{$infix}-#{$name},
+                .#{$abbrev}x#{$infix}-#{$name} {
+                    #{$prop}-left: $size !important;
+                }
+            }
+        }
+
+        // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+        @each $name, $size in $spacers {
+
+            @if $size != 0 {
+                .m#{$infix}-n#{$name} {
+                    margin: -$size !important;
+                }
+
+                .mt#{$infix}-n#{$name},
+                .my#{$infix}-n#{$name} {
+                    margin-top: -$size !important;
+                }
+
+                .mr#{$infix}-n#{$name},
+                .mx#{$infix}-n#{$name} {
+                    margin-right: -$size !important;
+                }
+                .mb#{$infix}-n#{$name},
+                .my#{$infix}-n#{$name} {
+                    margin-bottom: -$size !important;
+                }
+                .ml#{$infix}-n#{$name},
+                .mx#{$infix}-n#{$name} {
+                    margin-left: -$size !important;
+                }
+            }
+        }
+
+        // Some special margin utils
+        .m#{$infix}-auto {
+            margin: auto !important;
+        }
+
+        .mt#{$infix}-auto,
+        .my#{$infix}-auto {
+            margin-top: auto !important;
+        }
+
+        .mr#{$infix}-auto,
+        .mx#{$infix}-auto {
+            margin-right: auto !important;
+        }
+        .mb#{$infix}-auto,
+        .my#{$infix}-auto {
+            margin-bottom: auto !important;
+        }
+
+        .ml#{$infix}-auto,
+        .mx#{$infix}-auto {
+            margin-left: auto !important;
+        }
+    }
+}

package/scss/utilities/_text.scss

@@ -0,0 +1,97 @@
+// Text
+// ---------------------------------------------------------------------------------------------------------------
+
+// Align
+.text-left {
+    text-align: left !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.text-justify {
+    text-align: justify !important;
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .text#{$infix}-left   {
+            text-align: left !important;
+        }
+
+        .text#{$infix}-right  {
+            text-align: right !important;
+        }
+
+        .text#{$infix}-center {
+            text-align: center !important;
+        }
+
+        .text#{$infix}-justify {
+            text-align: justify !important;
+        }
+    }
+}
+
+
+// Transform
+.text-lowercase {
+    text-transform: lowercase !important;
+}
+
+.text-uppercase {
+    text-transform: uppercase !important;
+}
+
+.text-capitalize {
+    text-transform: capitalize !important;
+}
+
+.text-transform-none {
+    text-transform: none !important;
+}
+
+
+// Decoration
+.text-underline {
+    text-decoration: underline !important;
+}
+
+.text-decoration-none {
+    text-decoration: none !important;
+}
+
+// Colors
+@each $color, $value in $colors {
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+
+// Misc
+.text-hide {
+    @include text-hide();
+}
+
+.text-nowrap {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+}
+
+.text-break {
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+}