Merge pull request #38 from alvarosaburido/feature/customizable_defau…

…lt_theme

Feature/customizable default theme

dev/styles/_vendors.scss

@@ -1,3 +1,8 @@
 //@import 'bootstrap/scss/bootstrap.scss';
 @import 'bootstrap/scss/bootstrap-grid.scss';
+
+// Customize default theme
+/* $input-bg: #e9ecef;
+$input-border-radius: 50px; */
+
 @import '../../src/styles/themes/default.scss';

docs/guide/theming.md

@@ -1,7 +1,74 @@
 The components are unstyled by default, so you can customize them with your own styles. If you want a more "ready to go" solution you can import one of the themes we have included in `src/styles/themes/`
 
 ```scss
-@import '~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss';
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
 ```
 
 For now, only default theme (similar to bootstrap) is available. More themes are in progress.
+
+
+## Defaul Theme
+
+Similar to default bootstrap theme for forms.
+
+### Import to your app
+
+```scss
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
+```
+
+### Customize your variables
+
+```scss
+$input-bg: #e2eb5d52;
+$input-border-color: #aec64c;
+
+@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
+```
+
+### Variables available
+
+You have all this variables to customize your form inputs.
+
+Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](./models.md).
+
+```scss
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
+$input-line-height: 1.5 !default;
+$input-font-family: $font-family-sans-serif !default;
+$input-font-size: 1rem !default;
+$input-font-weight: 400;
+
+$input-padding-y: 0.375rem !default;
+$input-padding-x: 0.75rem !default;
+$input-border-width: 1px !default;
+$input-border-color: #e9ecef !default;
+$input-bg: #fff !default;
+$input-disabled-bg: #e9ecef;
+$input-border-radius: 0.25rem !default;
+
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$input-placeholder-color: #6c757d !default;
+$input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
+$input-height: calc(
+  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
+    2}
+);
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$enable-shadows: true !default;
+
+$input-error-color: #dc3545 !default;
+```
+
+## Material Theme
+
+Work in progress [[#3](/~https://github.com/alvarosaburido/vue-dynamic-forms/issues/3)]

src/styles/themes/default.scss

@@ -1,21 +1,37 @@
-$font-size: 1rem !default;
-
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
   'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
   'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$font-family: $font-family-sans-serif !default;
 
-$line-height: 1.5;
+$input-line-height: 1.5 !default;
+$input-font-family: $font-family-sans-serif !default;
+$input-font-size: 1rem !default;
+$input-font-weight: 400;
+
+$input-padding-y: 0.375rem !default;
+$input-padding-x: 0.75rem !default;
+$input-border-width: 1px !default;
+$input-border-color: #e9ecef !default;
+$input-bg: #fff !default;
+$input-disabled-bg: #e9ecef;
+$input-border-radius: 0.25rem !default;
+
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$input-placeholder-color: #6c757d !default;
+$input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
+$input-height: calc(
+  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
+    2}
+);
 
-$input-padding-y: 0.375rem;
-$input-padding-x: 0.75rem;
-$input-border-width: 1px;
-$input-border-color: #e9ecef;
-$input-border-radius: 0.25rem;
-$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-$input-placeholder-color: #6c757d;
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
-$input-error-color: #dc3545;
+$enable-shadows: true !default;
+
+$input-error-color: #dc3545 !default;
 
 // Form groups
 //
@@ -42,7 +58,7 @@ $input-error-color: #dc3545;
 
     .form-control {
       border-color: $input-error-color;
-      background: lighten($input-error-color, 40);
+      background-color: lighten($input-error-color, 40);
     }
   }
 
@@ -56,22 +72,42 @@ $input-error-color: #dc3545;
 .form-control {
   display: block;
   width: 100%;
+  background-color: $input-bg;
   padding: $input-padding-y $input-padding-x;
-  font-family: $font-family;
-  font-size: $font-size;
+  font-family: $input-font-family;
+  font-size: $input-font-size;
+  font-weight: $input-font-weight;
   border: $input-border-width solid $input-border-color;
   border-radius: $input-border-radius;
+  box-shadow: $input-box-shadow;
 
   &:not(textarea) {
-    height: calc(
-      #{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
-        2}
-    );
+    height: $input-height;
   }
 
   // Placeholder
   &::placeholder {
     color: $input-border-color;
     opacity: 1;
   }
+
+  &:disabled,
+  &[readonly] {
+    background-color: $input-disabled-bg;
+    // iOS fix for unreadable disabled content; see /~https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
 }