diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss index 8ba722f..5105051 100644 --- a/src/scss/_boilerplate.scss +++ b/src/scss/_boilerplate.scss @@ -6,4 +6,6 @@ */ @import 'boilerplate/variables'; -@import 'boilerplate/buttons'; \ No newline at end of file +@import 'boilerplate/fonts'; +@import 'boilerplate/buttons'; +@import 'boilerplate/forms'; \ No newline at end of file diff --git a/src/scss/boilerplate/_base.scss b/src/scss/boilerplate/_base.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss index b5ddb93..34734c9 100644 --- a/src/scss/boilerplate/_buttons.scss +++ b/src/scss/boilerplate/_buttons.scss @@ -8,11 +8,42 @@ button { background: $button-default-background-color; border: $button-default-border; + border-radius: $button-default-border-radius; + transition: $button-default-transition; + color: $button-default-color; &.action { + &:hover { + background: $button-default-hover-background-color; + border: $button-default-hover-border; + } &.primary { background: $button-primary-background-color; border: $button-primary-border; + color: $button-primary-color; + padding: $button-primary-padding; + font-size: $button-primary-font-size; + text-transform: $button-primary-text-transform; + + &:hover { + background: $button-primary-hover-background-color; + border: $button-primary-hover-border; + color: $button-primary-hover-color; + } + } + + &.secondary { + background: $button-secondary-background-color; + border: $button-secondary-border; + color: $button-secondary-color; + font-size: $button-secondary-font-size; + + &:hover { + background: $button-secondary-hover-background-color; + border: $button-secondary-hover-border; + color: $button-secondary-hover-color; + } } } -} \ No newline at end of file +} + diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss new file mode 100644 index 0000000..5c09a2f --- /dev/null +++ b/src/scss/boilerplate/_fonts.scss @@ -0,0 +1,51 @@ +html, body { + font-family: $font-family; + + h1, h2, h3, h4, h5, h6 { + font-family: $font-family-headings; + color: $font-family-headings-color; + font-weight: $font-family-headings-weight; + } + + h1 { + font-size: 36px; + } + + h2 { + font-size: 28px; + } + + h3 { + font-size: 24px; + } + + h4 { + font-size: 18px; + } + + h5 { + font-size: 16px; + } + + h6 { + font-size: 14px; + } + + p { + font-size: $font-default-font-size; + font-weight: $font-default-font-weight; + color: $font-default-color; + } + + a { + font-size: $font-default-font-size; + font-weight: $font-default-link-font-weight; + color: $font-default-link-color; + text-decoration: $font-default-link-decoration; + + &:hover { + font-weight: $font-default-link-hover-font-weight; + color: $font-default-link-hover-color; + } + } +} \ No newline at end of file diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss new file mode 100644 index 0000000..58a999c --- /dev/null +++ b/src/scss/boilerplate/_forms.scss @@ -0,0 +1,10 @@ +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: $input-default-color; + height: $input-default-height; +} \ No newline at end of file diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 4c94f51..7912423 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -5,11 +5,93 @@ * License: MIT */ +/** +* Color pallete +*/ + +$primary-color: red; +$secondary-color: orange; +$alt-primary-color: blue; +$alt-secondary-color: magenta; + +$color-primary-gradient-color: linear-gradient(red, orange); +$color-secondary-gradient-color: linear-gradient(magenta, blue); + +/** +* Fonts +*/ +$font-default-font-family-primary: 'Montserrat'; +$font-default-font-family-secondary: 'Open Sans'; +$font-default-font-size: 12px; +$font-default-font-weight: 400; +$font-default-color: black; +$font-default-heading-color: $primary-color; + +$font-family: $font-default-font-family-primary; +$font-family-headings: $font-default-font-family-secondary; +$font-family-headings-color: blue; +$font-family-headings-weight: 600; + +$font-default-link-color: red; +$font-default-link-hover-color: red; +$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: blue; -$button-default-border: 1px solid yellow; +$button-default-background-color: $primary-color; +$button-default-border: 1px solid $secondary-color; +$button-default-border-radius: 2px; +$button-default-color: $alt-primary-color; +$button-default-font-size: 12px; +$button-default-font-weight: 400; +$button-default-transition: all .34s ease-in-out; +$button-default-padding: 10px 20px; +$button-default-text-transform: uppercase; + +/* Button default states */ +$button-default-hover-background-color: $alt-primary-color; +$button-default-hover-border: 1px solid $alt-secondary-color; +$button-default-hover-color: white; +/* Button primary */ $button-primary-background-color: $button-default-background-color; -$button-primary-border: $button-default-border; \ No newline at end of file +$button-primary-border: $button-default-border; +$button-primary-color: $font-default-color; +$button-primary-font-weight: 600; +$button-primary-font-size: $button-default-font-size; +$button-primary-transition: $button-default-transition; +$button-primary-padding: $button-default-padding; +$button-primary-text-transform: $button-default-text-transform; + +/* Button primary hover states */ +$button-primary-hover-background-color: $button-default-hover-background-color; +$button-primary-hover-border: $button-default-hover-border; +$button-primary-hover-color: $button-default-hover-color; + +/* Button secondary */ +$button-secondary-background-color: white; +$button-secondary-border: 1px solid blue; +$button-secondary-font-size: $button-default-font-size; +$button-secondary-padding: 20px; +$button-secondary-transition: $button-default-transition; +$button-secondary-color: $alt-secondary-color; +$button-secondary-text-transform: $button-default-text-transform; + +/* Button secondary hover states */ +$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; +$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-font-weight: $font-default-font-weight; +