Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit dafa712

Browse files
alvarosabualvarosabu
authored
Merge pull request #38 from alvarosaburido/feature/customizable_default_theme
Feature/customizable default theme
2 parents c7d7b79 + 3bb8686 commit dafa712

File tree

3 files changed

+128
-20
lines changed

3 files changed

+128
-20
lines changed

‎dev/styles/_vendors.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
//@import 'bootstrap/scss/bootstrap.scss';
22
@import 'bootstrap/scss/bootstrap-grid.scss';
3+
4+
// Customize default theme
5+
/* $input-bg: #e9ecef;
6+
$input-border-radius: 50px; */
7+
38
@import '../../src/styles/themes/default.scss';

‎docs/guide/theming.md

+68-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,74 @@
11
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/`
22

33
```scss
4-
@import '~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss';
4+
@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
55
```
66

77
For now, only default theme (similar to bootstrap) is available. More themes are in progress.
8+
9+
10+
## Defaul Theme
11+
12+
Similar to default bootstrap theme for forms.
13+
14+
### Import to your app
15+
16+
```scss
17+
@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
18+
```
19+
20+
### Customize your variables
21+
22+
```scss
23+
$input-bg: #e2eb5d52;
24+
$input-border-color: #aec64c;
25+
26+
@import '~@asigloo/vue-dynamic-forms/src/styles/themes/theme.scss';
27+
```
28+
29+
### Variables available
30+
31+
You have all this variables to customize your form inputs.
32+
33+
Consider that this variables will affect **All** your inputs, for more selective styling please use `customClass` available on the [models](./models.md).
34+
35+
```scss
36+
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
37+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
38+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
39+
40+
$input-line-height: 1.5 !default;
41+
$input-font-family: $font-family-sans-serif !default;
42+
$input-font-size: 1rem !default;
43+
$input-font-weight: 400;
44+
45+
$input-padding-y: 0.375rem !default;
46+
$input-padding-x: 0.75rem !default;
47+
$input-border-width: 1px !default;
48+
$input-border-color: #e9ecef !default;
49+
$input-bg: #fff !default;
50+
$input-disabled-bg: #e9ecef;
51+
$input-border-radius: 0.25rem !default;
52+
53+
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
54+
$input-placeholder-color: #6c757d !default;
55+
$input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
56+
$input-height: calc(
57+
#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
58+
2}
59+
);
60+
61+
$input-focus-bg: $input-bg !default;
62+
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
63+
$input-focus-color: $input-color !default;
64+
$input-focus-width: $input-btn-focus-width !default;
65+
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
66+
67+
$enable-shadows: true !default;
68+
69+
$input-error-color: #dc3545 !default;
70+
```
71+
72+
## Material Theme
73+
74+
Work in progress [[#3](https://github.com/alvarosaburido/vue-dynamic-forms/issues/3)]

‎src/styles/themes/default.scss

+55-19
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,37 @@
1-
$font-size: 1rem !default;
2-
31
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
42
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
53
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
6-
$font-family: $font-family-sans-serif !default;
74

8-
$line-height: 1.5;
5+
$input-line-height: 1.5 !default;
6+
$input-font-family: $font-family-sans-serif !default;
7+
$input-font-size: 1rem !default;
8+
$input-font-weight: 400;
9+
10+
$input-padding-y: 0.375rem !default;
11+
$input-padding-x: 0.75rem !default;
12+
$input-border-width: 1px !default;
13+
$input-border-color: #e9ecef !default;
14+
$input-bg: #fff !default;
15+
$input-disabled-bg: #e9ecef;
16+
$input-border-radius: 0.25rem !default;
17+
18+
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
19+
$input-placeholder-color: #6c757d !default;
20+
$input-box-shadow: inset 0 1px 1px rgba(#000, 0.075) !default;
21+
$input-height: calc(
22+
#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
23+
2}
24+
);
925

10-
$input-padding-y: 0.375rem;
11-
$input-padding-x: 0.75rem;
12-
$input-border-width: 1px;
13-
$input-border-color: #e9ecef;
14-
$input-border-radius: 0.25rem;
15-
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
16-
$input-placeholder-color: #6c757d;
26+
$input-focus-bg: $input-bg !default;
27+
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
28+
$input-focus-color: $input-color !default;
29+
$input-focus-width: $input-btn-focus-width !default;
30+
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
1731

18-
$input-error-color: #dc3545;
32+
$enable-shadows: true !default;
33+
34+
$input-error-color: #dc3545 !default;
1935

2036
// Form groups
2137
//
@@ -42,7 +58,7 @@ $input-error-color: #dc3545;
4258

4359
.form-control {
4460
border-color: $input-error-color;
45-
background: lighten($input-error-color, 40);
61+
background-color: lighten($input-error-color, 40);
4662
}
4763
}
4864

@@ -56,22 +72,42 @@ $input-error-color: #dc3545;
5672
.form-control {
5773
display: block;
5874
width: 100%;
75+
background-color: $input-bg;
5976
padding: $input-padding-y $input-padding-x;
60-
font-family: $font-family;
61-
font-size: $font-size;
77+
font-family: $input-font-family;
78+
font-size: $input-font-size;
79+
font-weight: $input-font-weight;
6280
border: $input-border-width solid $input-border-color;
6381
border-radius: $input-border-radius;
82+
box-shadow: $input-box-shadow;
6483

6584
&:not(textarea) {
66-
height: calc(
67-
#{$line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width *
68-
2}
69-
);
85+
height: $input-height;
7086
}
7187

7288
// Placeholder
7389
&::placeholder {
7490
color: $input-border-color;
7591
opacity: 1;
7692
}
93+
94+
&:disabled,
95+
&[readonly] {
96+
background-color: $input-disabled-bg;
97+
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
98+
opacity: 1;
99+
}
100+
101+
&:focus {
102+
color: $input-focus-color;
103+
background-color: $input-focus-bg;
104+
border-color: $input-focus-border-color;
105+
outline: 0;
106+
107+
@if $enable-shadows {
108+
box-shadow: $input-box-shadow, $input-focus-box-shadow;
109+
} @else {
110+
box-shadow: $input-focus-box-shadow;
111+
}
112+
}
77113
}

0 commit comments

Comments
 (0)