diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss index 5105051..743f33d 100644 --- a/src/scss/_boilerplate.scss +++ b/src/scss/_boilerplate.scss @@ -8,4 +8,5 @@ @import 'boilerplate/variables'; @import 'boilerplate/fonts'; @import 'boilerplate/buttons'; +@import 'boilerplate/inputs'; @import 'boilerplate/forms'; \ No newline at end of file diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss index 58a999c..55314cc 100644 --- a/src/scss/boilerplate/_forms.scss +++ b/src/scss/boilerplate/_forms.scss @@ -1,10 +1,64 @@ -input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"], select { +input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { + background-color: $input-default-background-color; border: $input-default-border; border-radius: $input-default-border-radius; + height: $input-default-height; + width: $input-default-width; + margin: $input-default-margin; padding: $input-default-padding; - line-height: $input-default-line-height; + vertical-align: $input-default-vertical-align; font-size: $input-default-font-size; - font-weight: $input-default-font-weight; color: $input-default-color; - height: $input-default-height; + font-family: $input-default-font-family; + font-weight: $input-default-font-weight; + font-style: $input-default-font-style; + line-height: $input-default-line-height; + + &:focus { + background-color: $input-default-focus-background-color; + border: $input-default-focus-border; + color: $input-default-focus-color; + font-style: $input-default-focus-font-style; + } + + &:disabled { + background-color: $input-default-disabled-background-color; + border: $input-default-disabled-border; + opacity: $input-default-disabled-opacity; + color: $input-default-disabled-color; + font-style: $input-default-disabled-font-style; + } + + &::placeholder { + opacity: 1; + color: $input-default-placeholder-color !important; + font-style: $input-default-placeholder-font-style; + } + +} + +textarea { + height: $input-textarea-default-height; + resize: $input-textarea-default-resize; +} + +input[type="checkbox"] { + width: $input-choice-default-width; +} + +/**** +** Sidebar input +****/ + +.sidebar { + input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"], select { + border: $input-default-border; + border-radius: $input-default-border-radius; + padding: $input-default-padding; + line-height: $input-default-line-height; + font-size: $input-default-font-size; + font-weight: $input-default-font-weight; + color: #2e2e2e; + height: 45px; + } } \ No newline at end of file diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 7912423..4188a1b 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -5,9 +5,9 @@ * License: MIT */ -/** -* Color pallete -*/ +/* + * Color pallete + */ $primary-color: red; $secondary-color: orange; @@ -17,9 +17,9 @@ $alt-secondary-color: magenta; $color-primary-gradient-color: linear-gradient(red, orange); $color-secondary-gradient-color: linear-gradient(magenta, blue); -/** -* Fonts -*/ +/* + * Fonts + */ $font-default-font-family-primary: 'Montserrat'; $font-default-font-family-secondary: 'Open Sans'; $font-default-font-size: 12px; @@ -38,7 +38,7 @@ $font-default-link-decoration: underline; $font-default-link-font-weight: $font-default-font-weight; $font-default-link-hover-font-weight: 600; -/** +/* * Buttons */ $button-default-background-color: $primary-color; @@ -85,13 +85,49 @@ $button-secondary-hover-background-color: black; $button-secondary-hover-border: red; $button-secondary-hover-color: red; -/* Inputs & Forms */ -$input-default-padding: 15px 15px; -$input-default-height: 40px; -$input-default-line-height: 35px; +/* + * Inputs & Forms + */ + +/* [input-text|select|textarea|input-radio|input-checkbox] */ +$input-default-background-color: white; +$input-default-border-color: gray; +$input-default-border: 1px solid $input-default-border-color; +$input-default-border-radius: 3px; +$input-default-height: 36px; +$input-default-width: 100%; +$input-default-margin: 0; +$input-default-padding: 0 9px; +$input-default-vertical-align: middle; $input-default-font-size: $font-default-font-size; -$input-default-border: 1px solid #000; -$input-default-border-radius: 15px; -$input-default-color: #2e2e2e; +$input-default-color: black; +$input-default-font-family: $font-default-font-family-secondary; $input-default-font-weight: $font-default-font-weight; +$input-default-font-style: italic; +$input-default-line-height: 36px; + +/* Placeholder */ +$input-default-placeholder-color: #84929F; +$input-default-placeholder-font-style: $input-default-font-style; + +/* Disabled state */ +$input-default-disabled-background-color: $input-default-background-color; +$input-default-disabled-border: $input-default-border; +$input-default-disabled-opacity: .2; +$input-default-disabled-color: $input-default-color; +$input-default-disabled-font-style: $input-default-font-style; + +/* Focus state */ +$input-default-focus-background-color: $input-default-background-color; +$input-default-focus-border: $input-default-border; +$input-default-focus-color: $input-default-color; +$input-default-focus-font-style: $input-default-font-style; + +/* Textarea */ +$input-textarea-default-height: auto; +$input-textarea-default-resize: vertical; + +/* Checkbox / Radio */ +$input-choice-default-width: auto; +