Merge pull request #266 from picturepan2/0.4.0 v0.4.0

0.4.0

9 files changed, 114 insertions, 87 deletions

diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
new file mode 100644
index 0000000..eced5ad
--- /dev/null
+++ b/src/utilities/_colors.scss
@@ -0,0 +1,29 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);
diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss
new file mode 100644
index 0000000..bfc4c6b
--- /dev/null
+++ b/src/utilities/_cursors.scss
@@ -0,0 +1,24 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
diff --git a/src/utilities/display.less b/src/utilities/_display.scss
index 26e611e..c6248e0 100644
--- a/src/utilities/display.less
+++ b/src/utilities/_display.scss
@@ -15,7 +15,7 @@
   display: inline-flex;
 }
 .d-none,
-.hide {
+.d-hide {
   display: none !important;
 }
 .d-visible {
@@ -42,6 +42,3 @@
   position: absolute;
   width: 1px;
 }
-.hand {
-  cursor: pointer;
-}
diff --git a/src/utilities/divider.less b/src/utilities/_divider.scss
index a5cb45b..5d0feb2 100644
--- a/src/utilities/divider.less
+++ b/src/utilities/_divider.scss
@@ -5,44 +5,44 @@
   position: relative;
 
   &[data-content]::after {
-    background: @bg-color-light;
-    color: @gray-color;
+    background: $bg-color-light;
+    color: $gray-color;
     content: attr(data-content);
     display: inline-block;
-    font-size: @font-size-sm;
-    padding: 0 @unit-2;
-    transform: translateY(-@font-size-sm + @border-width);
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
   }
 }
 
 .divider {
-  border-top: @border-width solid @border-color;
-  height: @border-width;
-  margin: @unit-2 0;
+  border-top: $border-width solid $border-color;
+  height: $border-width;
+  margin: $unit-2 0;
 
   &[data-content] {
-    margin: @unit-4 0;
+    margin: $unit-4 0;
   }
 }
 
 .divider-vert {
   display: block;
-  padding: @unit-4;
+  padding: $unit-4;
 
   &::before {
-    border-left: @border-width solid @border-color;
-    bottom: @unit-2;
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
     content: "";
     display: block;
     left: 50%;
     position: absolute;
-    top: @unit-2;
+    top: $unit-2;
     transform: translateX(-50%);
   }
 
   &[data-content]::after {
     left: 50%;
-    padding: @unit-1 0;
+    padding: $unit-1 0;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
diff --git a/src/utilities/loading.less b/src/utilities/_loading.scss
index 767ec9e..1b4ea60 100644
--- a/src/utilities/loading.less
+++ b/src/utilities/_loading.scss
@@ -1,34 +1,34 @@
 // Loading
 .loading {
   color: transparent !important;
-  min-height: @unit-4;
+  min-height: $unit-4;
   pointer-events: none;
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: @border-width-lg solid @primary-color;
+    border: $border-width-lg solid $primary-color;
     border-radius: 50%;
     border-right-color: transparent;
     border-top-color: transparent;
     content: "";
     display: block;
-    height: @unit-4;
+    height: $unit-4;
     left: 50%;
-    margin-left: -@unit-2;
-    margin-top: -@unit-2;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
     position: absolute;
     top: 50%;
-    width: @unit-4;
-    z-index: @zindex-0;
+    width: $unit-4;
+    z-index: $zindex-0;
   }
 
   &.loading-lg {
-    min-height: @unit-10;
+    min-height: $unit-10;
     &::after {
-      height: @unit-8;
-      width: @unit-8;
-      margin-left: -@unit-4;
-      margin-top: -@unit-4;
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/utilities/position.less b/src/utilities/_position.scss
index 235d6a6..1f4c5e8 100644
--- a/src/utilities/position.less
+++ b/src/utilities/_position.scss
@@ -1,10 +1,12 @@
 // Position
 .clearfix {
-  .clearfix();
+  @include clearfix();
 }
+
 .float-left {
   float: left !important;
 }
+
 .float-right {
   float: right !important;
 }
@@ -12,12 +14,15 @@
 .relative {
   position: relative;
 }
+
 .absolute {
   position: absolute;
 }
+
 .fixed {
   position: fixed;
 }
+
 .centered {
   display: block;
   float: none;
@@ -26,10 +31,14 @@
 }
 
 // Spacing
-.margin-variant(0, 0);
-.margin-variant(1, @unit-1);
-.margin-variant(2, @unit-2);
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
 
-.padding-variant(0, 0);
-.padding-variant(1, @unit-1);
-.padding-variant(2, @unit-2);
\ No newline at end of file
+@include padding-variant(2, $unit-2);
diff --git a/src/utilities/shapes.less b/src/utilities/_shapes.scss
index e9f63bc..c11d5df 100644
--- a/src/utilities/shapes.less
+++ b/src/utilities/_shapes.scss
@@ -1,7 +1,8 @@
 // Shapes
 .rounded {
-  border-radius: @border-radius;
+  border-radius: $border-radius;
 }
+
 .circle {
   border-radius: 50%;
 }
diff --git a/src/utilities/text.less b/src/utilities/_text.scss
index f571613..67793ac 100644
--- a/src/utilities/text.less
+++ b/src/utilities/_text.scss
@@ -1,50 +1,62 @@
 // Text
+// Text alignment utilities
 .text-left {
   text-align: left;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-justify {
   text-align: justify;
 }
 
+// Text transform utilities
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-capitalize {
   text-transform: capitalize;
 }
 
+// Text style utilities
 .text-normal {
   font-weight: normal;
 }
+
 .text-bold {
   font-weight: bold;
 }
+
 .text-italic {
   font-style: italic;
 }
+
 .text-large {
   font-size: 1.2em;
 }
 
+// Text overflow utilities
 .text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include text-ellipsis();
 }
+
 .text-clip {
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
 }
+
 .text-break {
   hyphens: auto;
   word-break: break-word;
diff --git a/src/utilities/colors.less b/src/utilities/colors.less
deleted file mode 100644
index 9571241..0000000
--- a/src/utilities/colors.less
+++ /dev/null
@@ -1,45 +0,0 @@
-// Text colors
-.text-primary {
-  .text-color-variant(@primary-color);
-}
-.text-secondary {
-  .text-color-variant(@secondary-color-dark);
-}
-.text-gray {
-  .text-color-variant(@gray-color);
-}
-.text-light {
-  .text-color-variant(@light-color);
-}
-.text-success {
-  .text-color-variant(@success-color);
-}
-.text-warning {
-  .text-color-variant(@warning-color);
-}
-.text-error {
-  .text-color-variant(@error-color);
-}
-
-// Background colors
-.bg-primary {
-  .bg-color-variant(@primary-color);
-}
-.bg-secondary {
-  .bg-color-variant(@secondary-color);
-}
-.bg-dark {
-  .bg-color-variant(@dark-color);
-}
-.bg-gray {
-  .bg-color-variant(@bg-color);
-}
-.bg-success {
-  .bg-color-variant(@success-color);
-}
-.bg-warning {
-  .bg-color-variant(@warning-color);
-}
-.bg-error {
-  .bg-color-variant(@error-color);
-}