diff --git a/src/scss/_bootstrap.scss b/src/scss/_bootstrap.scss new file mode 100644 index 0000000..89edd3e --- /dev/null +++ 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 index da0c04d..678aa6c 100644 --- 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 index 2bda35c..dcacc36 100644 --- 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 index 43cf04a..c0f9fa5 100644 --- 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 index cb1a8a4..574ffbd 100644 --- 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() {