Merge pull request #248 from NativeScript/bundev/fix-primary-colors

fix: Bootstrap and .nt-form colors not adapting to skin
NativeScript · Feb 4, 2020 · 1b1675c · 1b1675c
2 parents 0f6930c + 42cb5f0
commit 1b1675c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 47 deletions.
diff --git a/src/scss/_bootstrap.scss b/src/scss/_bootstrap.scss
@@ -0,0 +1,28 @@
+// Contextual colors and backgrounds http://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds
+.text-primary {
+  @include colorize($color: accent);
+}
+
+.text-danger {
+  color: const(error);
+}
+
+.bg-primary {
+  @include colorize($color: accent);
+  color: $white;
+}
+
+.bg-danger {
+  background-color: const(error);
+  color: $white;
+}
+
+// Image shapes http://v4-alpha.getbootstrap.com/content/images/#image-shapes
+.img-rounded {
+  border-radius: const(border-radius-sm);
+}
+
+.img-circle {
+  border-radius: const(border-radius-lg);
+}
+
diff --git a/src/scss/_controls.scss b/src/scss/_controls.scss
@@ -56,6 +56,11 @@
 
     // Forms
 
+    @include form-skin(
+                ('Form',
+                '.nt-form')
+    );
+
     @include form-fields-skin();
 
     @include input-component-skin(

diff --git a/src/scss/_index.scss b/src/scss/_index.scss
@@ -1,5 +1,6 @@
 // Specifics
 @import './controls';
+@import './bootstrap';
 
 /* Dividers */
 

diff --git a/src/scss/core/primitives/_bootstrap.scss b/src/scss/core/primitives/_bootstrap.scss
@@ -1,15 +1,6 @@
 
 // # BOOTSTRAP #
 // ## Utilities ##
-// Image shapes http://v4-alpha.getbootstrap.com/content/images/#image-shapes
-.img-rounded {
-  border-radius: const(border-radius-sm);
-}
-
-.img-circle {
-  border-radius: const(border-radius-lg);
-}
-
 .img-thumbnail {
   border-radius: 0;
 }
@@ -35,22 +26,3 @@
 .m-y-auto {
   vertical-align: center;
 }
-
-// Contextual colors and backgrounds http://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds
-.text-primary {
-  color: light(accent);
-}
-
-.text-danger {
-  color: const(error);
-}
-
-.bg-primary {
-  background-color: light(accent);
-  color: $white;
-}
-
-.bg-danger {
-  background-color: const(error);
-  color: $white;
-}
diff --git a/src/scss/mixins/components/_forms.scss b/src/scss/mixins/components/_forms.scss
@@ -2,13 +2,8 @@
 
 @mixin form($selectors) {
     #{$selectors} {
-        font-family: 'Roboto Regular';
         padding: 16 0 10;
 
-        .ns-ios & {
-            font-family: 'SF UI Text Regular', system;
-        }
-
         .-center {
             horizontal-align: center;
         }
@@ -17,21 +12,12 @@
             margin: 20 0;
         }
 
-        .nt-form__link {
-            @include colorize($color: accent);
-        }
-
-        .nt-form__title {
-            font-size: const(btn-font-size);
-        }
-
         .nt-form__logo {
             margin: 20 0;
             width: 50%;
         }
 
         .nt-form__validation-message {
-            color: const(error);
             margin: 1 0 0;
             padding: 0;
             height: 19;
@@ -46,11 +32,6 @@
                 margin: 5;
             }
         }
-
-        // Set isEnabled="false" on the whole form
-        &[isEnabled=false] * {
-            opacity: const(disabled-opacity);
-        }
     }
 }
 
@@ -332,6 +313,26 @@
     }
 }
 
+@mixin form-skin($selectors) {
+    #{$selectors} {
+        .nt-form__title {
+            font-size: const(btn-font-size);
+        }
+
+        .nt-form__link {
+            @include colorize($color: accent);
+        }
+
+        .nt-form__validation-message {
+            color: const(error);
+        }
+
+        // Set isEnabled="false" on the whole form
+        &[isEnabled=false] * {
+            opacity: const(disabled-opacity);
+        }
+    }
+}
 
 @mixin form-fields-skin() {