fix(styles): get rid of nested mixins as sass doesn't support this fo…

…r the time being (#331) Closes #316
akveo · Mar 28, 2018 · 157b69d · 157b69d
1 parent 0c10917
commit 157b69d
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 86 deletions.
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -4,40 +4,41 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-checkbox-theme() {
-  @mixin hover-border($color) {
-    .customised-control-input:checked ~ .customised-control-indicator {
-      border-color: $color;
-    }
-    .customised-control-input:hover:enabled ~ .customised-control-indicator {
-      border-color: lighten($color, 10%);
-    }
-  }
-
-  @mixin checkmark($size, $color, $border-size) {
-    &::before {
-      content: '';
-      position: absolute;
-      height: calc(#{$size} * 0.6);
-      width: calc(#{$size} * 0.4);
-      border: solid $color;
-      border-width: 0 $border-size $border-size 0;
-      transform: rotate(45deg);
-    }
+// locally used mixin
+@mixin hover-border($color) {
+  .customised-control-input:checked ~ .customised-control-indicator {
+    border-color: $color;
   }
-
-  @mixin set-style($bg, $size, $border-size, $border-color) {
-    background-color: $bg;
-    width: $size;
-    height: $size;
-    border: $border-size solid $border-color;
+  .customised-control-input:hover:enabled ~ .customised-control-indicator {
+    border-color: lighten($color, 10%);
   }
-
-  @mixin description-style {
-    color: nb-theme(color-fg-heading);
-    padding-left: 0.25rem;
+}
+// locally used mixin
+@mixin chackbox-checkmark($size, $color, $border-size) {
+  &::before {
+    content: '';
+    position: absolute;
+    height: calc(#{$size} * 0.6);
+    width: calc(#{$size} * 0.4);
+    border: solid $color;
+    border-width: 0 $border-size $border-size 0;
+    transform: rotate(45deg);
   }
+}
+// locally used mixin
+@mixin set-style($bg, $size, $border-size, $border-color) {
+  background-color: $bg;
+  width: $size;
+  height: $size;
+  border: $border-size solid $border-color;
+}
+// locally used mixin
+@mixin description-style {
+  color: nb-theme(color-fg-heading);
+  padding-left: 0.25rem;
+}
 
+@mixin nb-checkbox-theme() {
   nb-checkbox {
     .customised-control {
       position: relative;
@@ -64,7 +65,7 @@
       display: flex;
       justify-content: center;
 
-      @include checkmark(
+      @include chackbox-checkmark(
           nb-theme(checkbox-size),
           nb-theme(checkbox-checkmark),
           nb-theme(checkbox-border-size)
@@ -89,7 +90,7 @@
         display: flex;
         justify-content: center;
 
-        @include checkmark(
+        @include chackbox-checkmark(
             nb-theme(checkbox-checked-size),
             nb-theme(checkbox-checked-checkmark),
             nb-theme(checkbox-checked-border-size)
@@ -108,7 +109,7 @@
           display: flex;
           justify-content: center;
 
-          @include checkmark(
+          @include chackbox-checkmark(
               nb-theme(checkbox-disabled-size),
               nb-theme(checkbox-checkmark),
               nb-theme(checkbox-disabled-border-size)
@@ -133,7 +134,7 @@
           display: flex;
           justify-content: center;
 
-          @include checkmark(
+          @include chackbox-checkmark(
               nb-theme(checkbox-disabled-size),
               nb-theme(checkbox-disabled-checkmark),
               nb-theme(checkbox-disabled-border-size)
@@ -163,3 +164,4 @@
     }
   }
 }
+
diff --git a/src/framework/theme/styles/global/bootstrap/_custom-forms.scss b/src/framework/theme/styles/global/bootstrap/_custom-forms.scss
@@ -4,15 +4,16 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin custom-forms() {
-  @mixin hover-checked-border($color) {
-    .custom-control-input:hover ~ .custom-control-indicator,
-    .custom-control-input:checked ~ .custom-control-indicator,
-    .custom-control-input:hover:checked ~ .custom-control-indicator {
-      border-color: $color;
-    }
+// locally used mixin
+@mixin hover-checked-border($color) {
+  .custom-control-input:hover ~ .custom-control-indicator,
+  .custom-control-input:checked ~ .custom-control-indicator,
+  .custom-control-input:hover:checked ~ .custom-control-indicator {
+    border-color: $color;
   }
+}
 
+@mixin custom-forms() {
   .custom-control {
     margin: 0;
     min-height: inherit;
@@ -111,3 +112,4 @@
     }
   }
 }
+
diff --git a/src/framework/theme/styles/global/bootstrap/_forms.scss b/src/framework/theme/styles/global/bootstrap/_forms.scss
@@ -8,6 +8,52 @@
 @import '../../core/mixins';
 @import './custom-forms';
 
+// locally used mixin
+@mixin checkmark($size, $color, $wight, $opacity: 1) {
+  ~ .custom-control-label::after {
+    background-image: none;
+    content: '';
+    position: absolute;
+    height: calc(#{$size} * 0.6);
+    width: calc(#{$size} * 0.4);
+    top: calc(#{$size} * 0.4);
+    left: calc(#{$size} * 0.3);
+    border: solid $color;
+    border-width: 0 $wight $wight 0;
+    transform: rotate(45deg);
+    opacity: $opacity;
+  }
+}
+// locally used mixin
+@mixin radio($size, $color, $opacity) {
+  ~ .custom-control-label::after {
+    content: '';
+    position: absolute;
+    background-color: $color;
+    height: calc(#{$size} * 0.5);
+    width: calc(#{$size} * 0.5);
+    border: solid $color 0.35rem;
+    border-radius: 50%;
+    opacity: $opacity;
+    top: calc(#{$size} * 0.5);
+    left: calc(#{$size} * 0.21);
+  }
+}
+// locally used mixin
+@mixin label($color, $opacity) {
+  ~ .custom-control-label {
+    opacity: $opacity;
+    &::before {
+      color: transparent;
+      background-color: transparent;
+      border: 2px solid $color;
+      height: 1.25rem;
+      width: 1.25rem;
+      opacity: $opacity;
+    }
+  }
+}
+
 @mixin nb-b-forms-theme() {
 
   .input-group-addon,
@@ -67,51 +113,6 @@
     }
   }
 
-  @mixin checkmark($size, $color, $wight, $opacity) {
-    ~ .custom-control-label::after {
-      background-image: none;
-      content: '';
-      position: absolute;
-      height: calc(#{$size} * 0.6);
-      width: calc(#{$size} * 0.4);
-      top: calc(#{$size} * 0.4);
-      left: calc(#{$size} * 0.3);
-      border: solid $color;
-      border-width: 0 $wight $wight 0;
-      transform: rotate(45deg);
-      opacity: $opacity;
-    }
-  }
-
-  @mixin radio($size, $color, $opacity) {
-    ~ .custom-control-label::after {
-      content: '';
-      position: absolute;
-      background-color: $color;
-      height: calc(#{$size} * 0.5);
-      width: calc(#{$size} * 0.5);
-      border: solid $color 0.35rem;
-      border-radius: 50%;
-      opacity: $opacity;
-      top: calc(#{$size} * 0.5);
-      left: calc(#{$size} * 0.21);
-    }
-  }
-
-  @mixin label($color, $opacity) {
-    ~ .custom-control-label {
-      opacity: $opacity;
-      &::before {
-        color: transparent;
-        background-color: transparent;
-        border: 2px solid $color;
-        height: 1.25rem;
-        width: 1.25rem;
-        opacity: $opacity;
-      }
-    }
-  }
-
   .custom-control {
     position: relative;
     display: block;