From aaa2873f198f9639aacf72ddc402b6b0f33e11fe Mon Sep 17 00:00:00 2001 From: Jordy Kommeren Date: Thu, 2 Aug 2018 16:19:26 +0200 Subject: [PATCH] Updated README.md, added many variables in the _variables.scss and refactored the way colors are handled in the _variables.scss Update README.md wrote the installation guide, extending/editing styling guide and gulp guide. Update _variables.scss refactored colors to use $color-boilerplate- prefix and not just $primary-color/$secondary-color, added a lot of new variables e.g. menu styling. reworked heading variables, added more inputs, changed all default variable value's to match the blank theme's styling. Added !default tag on every variable, this way it can be overwritten. --- README.md | 58 +++- src/scss/_boilerplate.scss | 1 + src/scss/boilerplate/_fonts.scss | 35 ++- src/scss/boilerplate/_forms.scss | 54 +--- src/scss/boilerplate/_inputs.scss | 98 ++++++ src/scss/boilerplate/_menu.scss | 30 ++ src/scss/boilerplate/_swatches.scss | 1 + src/scss/boilerplate/_variables.scss | 442 ++++++++++++++++----------- 8 files changed, 488 insertions(+), 231 deletions(-) create mode 100644 src/scss/boilerplate/_menu.scss diff --git a/README.md b/README.md index a2889ce..1d6c174 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,64 @@ Magento 2 Boilerplate Theme with focus on ease-of-use and quick results * Magento 2.0 ### Bug reports and contribution rules -- Before reporting an issue, check if you can reproduce it on the clean Magento instance. If that's true, submit issue to the Magento 2 repository, not here +- Before reporting an issue, check if you can reproduce it on the clean Magento instance without our boilerplate. If that's true, submit issue to the Magento 2 repository, not here - Al other issues can be reported here ### Questions If you want to know more about this project, join our slack channel and ask questions. + +### Requirements +- Node.js (https://nodejs.org/) +- npm (https://npmjs.org) +- yarn (https://yarnpkg.com/) + +### Installation +> Disclaimer: +> This installation guide expects you to have a Magento 2 instance running. If you need help to get Magento 2 up and running, we'd like to refer you to the install guide: https://devdocs.magento.com/guides/v2.2/install-gde/prereq/zip_install.html + +##### Creating the right folder structure +1. Open the Magento 2 project where you want to install the boilerplate in your IDE/Code editor of choice. +2. Navigate to the `app/design/frontend` folder. +3. Create a new directory named `Epartment`. +4. Open your terminal/commandline. +5. `cd` into `app/design/frontend/Epartment`. +6. Clone the git repository in a new directory called `bootstrap` note the lowercase.
+`git clone https://github.com/epartment/magento2-theme-epartment-boilerplate.git bootstrap`. + +##### Installing the required dependencies using npm and yarn +1. In your terminal/commandline: `cd` into the newly created `app/design/frontend/Epartment/bootstrap` folder. +2. Run the following command: `yarn install`. Alternatively it's also possible to do `npm install`. + +##### Setting the boilerplate as the active theme in the Magento 2 backend +1. Login to your Magento 2 backend. +2. Go to `Content > Design > Configuration`. +3. Select the `Website`, `Store` or `Storeview` where you want to have the boilerplate theme activated and click `edit`. +4. Now in the `Applied Theme` dropdown, please select `Epartment Bootstrap` option and click `Save Configuration`. +5. Go back to the Frontend en reload the page. +6. You have succesfully installed the Epartment Magento 2 Boilerplate. + +### Extending and editing the boilerplate styling +> Note: The Epartment Magento 2 Boilerplate uses SASS for styling. + +##### Editing existing variables +1. In your project navigate to the `app/design/frontend/Epartment/bootstrap/src/scss/boilerplate` folder. +2. You can take a look into `_variables.scss` to see what default variables you can overwrite. +3. Overwriting the default variables is done by creating a new `.scss` file e.g. `_websitename.scss` and redeclare the variables you want to overwrite. +4. Note: Don't forget to include the new `.scss` created in the previous step into the `_boilerplate.scss` . +5. Run a `gulp` command to compile the styling changes. More info about the `gulp` commands can be found in the next chapter. + +##### Extending with custom styling +> Note: The boilerplate variables cover a great range of elements. Try to modify the variables first before adding any custom `.scss` files! + +1. In your project navigate to the `app/design/frontend/Epartment/bootstrap/src/scss` folder. +2. Create a new `.scss` file e.g. `_custom_hero_homepage.scss`. +3. Write some awesome `SASS`. +4. Note: Don't forget to include the new `.scss` created before as a `@import` in the `style.scss`. +5. Run a `gulp` command to compile the styling changes. More info about the `gulp` commands can be found in the next chapter. + +### Gulp +##### Available Gulp commands +- `gulp watch` : Watches all `.scss` files and compiles them when `gulp` detects a change. It also starts a browsersync session this way you can see your changes on the fly. +- `gulp scripts` : Compiles all `.js` files. +- `gulp script-depts` : Copies the script dependencies from the `node_modules` to a local folder for `production` +- `gulp build` : Builds all `.scss` and `.js` files for `production` \ No newline at end of file diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss index 10de332..c15e916 100644 --- a/src/scss/_boilerplate.scss +++ b/src/scss/_boilerplate.scss @@ -11,4 +11,5 @@ @import 'boilerplate/swatches'; @import 'boilerplate/inputs'; @import 'boilerplate/forms'; +@import 'boilerplate/menu'; @import 'boilerplate/product'; \ No newline at end of file diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss index 35228ac..400d726 100644 --- a/src/scss/boilerplate/_fonts.scss +++ b/src/scss/boilerplate/_fonts.scss @@ -1,30 +1,46 @@ html, body { font-family: $font-family; + color: $font-default-color; h1, h2, h3, h4, h5, h6 { - font-family: $font-family-headings; - color: $font-family-headings-color; - font-weight: $font-family-headings-weight; + font-family: $font-family-heading; + color: $font-family-heading-color; + font-weight: $font-family-heading-font-weight; } h1 { - font-size: 36px; + font-size: $font-family-heading-h1-font-size; + font-weight: $font-family-heading-h1-font-weight; + line-height: $font-family-heading-h1-line-height; + margin: $font-family-heading-h1-margin; } h2 { - font-size: 28px; + font-size: $font-family-heading-h2-font-size; + font-weight: $font-family-heading-h2-font-weight; + line-height: $font-family-heading-h2-line-height; + margin: $font-family-heading-h2-margin; } h3 { - font-size: 24px; + font-size: $font-family-heading-h3-font-size; + font-weight: $font-family-heading-h3-font-weight; + line-height: $font-family-heading-h3-line-height; + margin: $font-family-heading-h3-margin; } h4 { - font-size: 18px; + font-size: $font-family-heading-h4-font-size; + font-weight: $font-family-heading-h4-font-weight; + line-height: $font-family-heading-h4-line-height; + margin: $font-family-heading-h4-margin; } h5 { - font-size: 16px; + font-size: $font-family-heading-h5-font-size; + font-weight: $font-family-heading-h5-font-weight; + line-height: $font-family-heading-h5-line-height; + margin: $font-family-heading-h5-margin; } h6 { @@ -42,11 +58,12 @@ html, body { font-size: $font-default-font-size; font-weight: $font-default-link-font-weight; color: $font-default-link-color; - text-decoration: $font-default-link-decoration; + text-decoration: $font-default-link-text-decoration; &:hover { font-weight: $font-default-link-hover-font-weight; color: $font-default-link-hover-color; + text-decoration: $font-default-link-hover-text-decoration; } } } \ No newline at end of file diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss index 0652cce..6078893 100644 --- a/src/scss/boilerplate/_forms.scss +++ b/src/scss/boilerplate/_forms.scss @@ -1,54 +1,6 @@ -input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], 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; - vertical-align: $input-default-vertical-align; - font-size: $input-default-font-size; - color: $input-default-color; - 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; -} - - /**** - ** Fieldset - ****/ +/**** +** Fieldset +****/ .fieldset { border: $form-fieldset-border; diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss index e69de29..44db104 100644 --- a/src/scss/boilerplate/_inputs.scss +++ b/src/scss/boilerplate/_inputs.scss @@ -0,0 +1,98 @@ +input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], 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; + vertical-align: $input-default-vertical-align; + font-size: $input-default-font-size; + color: $input-default-color; + 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; +} + +.limiter-options { + background-color: $input-limiter-background-color; + border: $input-limiter-border; + border-radius: $input-limiter-border-radius; + height: $input-limiter-height; + width: $input-limiter-width; + margin: $input-limiter-margin; + padding: $input-limiter-padding; + vertical-align: $input-limiter-vertical-align; + font-size: $input-limiter-font-size; + color: $input-limiter-color; + font-family: $input-limiter-font-family; + font-weight: $input-limiter-font-weight; + font-style: $input-limiter-font-style; + line-height: $input-limiter-line-height; +} + +.sorter-options { + background-color: $input-sorter-background-color; + border: $input-sorter-border; + border-radius: $input-sorter-border-radius; + height: $input-sorter-height; + width: $input-sorter-width; + margin: $input-sorter-margin; + padding: $input-sorter-padding; + vertical-align: $input-sorter-vertical-align; + font-size: $input-sorter-font-size; + color: $input-sorter-color; + font-family: $input-sorter-font-family; + font-weight: $input-sorter-font-weight; + font-style: $input-sorter-font-style; + line-height: $input-sorter-line-height; +} + +/**** +** 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/_menu.scss b/src/scss/boilerplate/_menu.scss new file mode 100644 index 0000000..35c5166 --- /dev/null +++ b/src/scss/boilerplate/_menu.scss @@ -0,0 +1,30 @@ +.nav-sections { + background: $menu-bar-background; + margin: $menu-bar-margin; + + .navigation { + background: $menu-bar-background; + + .ui-menu-item.level-top { + a { + font-size: $menu-bar-menu-item-font-size; + font-weight: $menu-bar-menu-item-font-weight; + color: $menu-bar-menu-item-color; + + &:hover { + color: $menu-bar-menu-item-hover-color; + } + } + + &.has-active { + > a { + border-top: $menu-bar-menu-item-hover-border-top; + border-bottom: $menu-bar-menu-item-hover-border-bottom; + border-left: $menu-bar-menu-item-hover-border-left; + border-right: $menu-bar-menu-item-hover-border-right; + color: $menu-bar-menu-item-hover-color; + } + } + } + } +} \ No newline at end of file diff --git a/src/scss/boilerplate/_swatches.scss b/src/scss/boilerplate/_swatches.scss index 45e186a..fd2bc9b 100644 --- a/src/scss/boilerplate/_swatches.scss +++ b/src/scss/boilerplate/_swatches.scss @@ -70,6 +70,7 @@ &.text { background: $swatch-option-text-background; border: $swatch-option-text-border; + font-size: $swatch-option-text-font-size; color: $swatch-option-text-color; padding: $swatch-option-text-padding; min-width: $swatch-option-text-min-width; diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 77a5c96..0384f1d 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -6,220 +6,318 @@ */ /* - * Color pallete + * Color palette */ -$primary-color: red; -$secondary-color: orange; -$alt-primary-color: blue; -$alt-secondary-color: magenta; +$color-boilerplate-primary: #333 !default; +$color-boilerplate-secondary: orange !default; +$color-boilerplate-black: $color-boilerplate-primary !default; +$color-boilerplate-blue: #1979c3 !default; +$color-boilerplate-orange: #ff5501 !default; +$color-boilerplate-light-gray: #f2f2f2 !default; +$color-boilerplate-lighter-gray: rgb(218, 218, 218) !default; +$color-boilerplate-gray: rgb(148, 148, 148) !default; -$color-primary-gradient-color: linear-gradient(red, orange); -$color-secondary-gradient-color: linear-gradient(magenta, blue); +$color-primary-gradient-color: linear-gradient(red, orange) !default; +$color-secondary-gradient-color: linear-gradient(magenta, blue) !default; /* * 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-font-line-height: 18px; -$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-family-heading-line-height: 1.2; - -$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; +$font-default-font-family-primary: 'Open Sans' !default; +$font-default-font-family-secondary: 'Open Sans' !default; +$font-default-font-size: 1.4rem !default; +$font-default-font-weight: 400 !default; +$font-default-font-line-height: 18px !default; +$font-default-color: $color-boilerplate-black !default; +$font-default-heading-color: $color-boilerplate-black !default; + +/* Body */ +$font-family: $font-default-font-family-primary !default; + +/* Heading */ +$font-family-heading: $font-default-font-family-secondary !default; +$font-family-heading-color: $color-boilerplate-black !default; +$font-family-heading-font-weight: 300 !default; +$font-family-heading-line-height: 1.1 !default; + +/* H1 */ +$font-family-heading-h1-font-size: 40px !default; +$font-family-heading-h1-font-weight: $font-family-heading-font-weight !default; +$font-family-heading-h1-line-height: $font-family-heading-line-height !default; +$font-family-heading-h1-margin: 0rem 0 40px 0 !default; + +/* H2 */ +$font-family-heading-h2-font-size: 2.6rem !default; +$font-family-heading-h2-font-weight: $font-family-heading-font-weight !default; +$font-family-heading-h2-line-height: $font-family-heading-line-height !default; +$font-family-heading-h2-margin: 2.5rem 0 2rem 0 !default; + +/* H3 */ +$font-family-heading-h3-font-size: 1.8rem !default; +$font-family-heading-h3-font-weight: $font-family-heading-font-weight !default; +$font-family-heading-h3-line-height: $font-family-heading-line-height !default; +$font-family-heading-h3-margin: 1.5rem 0 1rem 0 !default; + +/* H4 */ +$font-family-heading-h4-font-size: 1.4rem !default; +$font-family-heading-h4-font-weight: 700 !default; +$font-family-heading-h4-line-height: $font-family-heading-line-height !default; +$font-family-heading-h4-margin: 2rem 0 2rem 0 !default; + +/* H5 */ +$font-family-heading-h5-font-size: 1.2rem !default; +$font-family-heading-h5-font-weight: 700 !default; +$font-family-heading-h5-line-height: $font-family-heading-line-height !default; +$font-family-heading-h5-margin: 2rem 0 2rem 0 !default; + +/* H6 */ +$font-family-heading-h6-font-size: 1rem !default; +$font-family-heading-h6-font-weight: 700 !default; +$font-family-heading-h6-line-height: $font-family-heading-line-height !default; +$font-family-heading-h6-margin: 2rem 0 2rem 0 !default; + +$font-default-link-color: $color-boilerplate-blue !default; +$font-default-link-text-decoration: none !default; +$font-default-link-font-weight: $font-default-font-weight !default; +$font-default-link-hover-color: $font-default-link-color !default; +$font-default-link-hover-font-weight: $font-default-link-font-weight !default; +$font-default-link-hover-text-decoration: underline !default; + +/* Standard title classes */ + /* * Buttons */ -$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-background-color: $color-boilerplate-blue !default; +$button-default-border: 1px solid $color-boilerplate-blue !default; +$button-default-border-radius: 3px !default; +$button-default-color: $color-boilerplate-light-gray !default; +$button-default-font-size: 1.4rem !default; +$button-default-font-weight: 400 !default; +$button-default-transition: all .34s ease-in-out !default; +$button-default-padding: 7px 15px !default; +$button-default-text-transform: none !default; /* 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-default-hover-background-color: $color-boilerplate-orange !default; +$button-default-hover-border: 1px solid $color-boilerplate-blue !default; +$button-default-hover-color: white !default; /* Button primary */ -$button-primary-background-color: $button-default-background-color; -$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-background-color: $button-default-background-color !default; +$button-primary-border: $button-default-border !default; +$button-primary-color: $button-default-color !default; +$button-primary-font-weight: 600 !default; +$button-primary-font-size: $button-default-font-size !default; +$button-primary-transition: $button-default-transition !default; +$button-primary-padding: $button-default-padding !default; +$button-primary-text-transform: $button-default-text-transform !default; /* 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-primary-hover-background-color: $button-default-hover-background-color !default; +$button-primary-hover-border: $button-default-hover-border !default; +$button-primary-hover-color: $button-default-hover-color !default; /* 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-background-color: white !default; +$button-secondary-border: 1px solid blue !default; +$button-secondary-font-size: $button-default-font-size !default; +$button-secondary-padding: 20px !default; +$button-secondary-transition: $button-default-transition !default; +$button-secondary-color: $color-boilerplate-blue !default; +$button-secondary-text-transform: $button-default-text-transform !default; /* Button secondary hover states */ -$button-secondary-hover-background-color: black; -$button-secondary-hover-border: red; -$button-secondary-hover-color: red; +$button-secondary-hover-background-color: black !default; +$button-secondary-hover-border: red !default; +$button-secondary-hover-color: red !default; /* * Swatches */ -$swatch-default-background: black; -$swatch-default-border: 1px solid rgb(218, 218, 218); -$swatch-default-color: white; -$swatch-default-font-size: $font-default-font-size; -$swatch-default-font-weight: $font-default-font-weight; -$swatch-default-line-height: $font-default-font-line-height; -$swatch-default-text-align: center; -$swatch-default-margin: 0 10px 5px; -$swatch-default-padding: 1px 2px; -$swatch-default-height: 20px; -$swatch-default-width: 30px; -$swatch-default-min-width: 30px; -$swatch-default-max-width: 90px; -$swatch-default-overflow: hidden; - -$swatch-default-hover-border: 1px solid white; -$swatch-default-hover-outline: 1px solid #999; -$swatch-default-hover-color: #999; - -$swatch-option-text-background: $swatch-default-background; -$swatch-option-text-border: $swatch-default-border; -$swatch-option-text-color: $swatch-default-color; -$swatch-option-text-padding: 4px 8px; -$swatch-option-text-min-width: 22px; -$swatch-option-text-margin: 0px 7px 5px; -$swatch-option-text-outline: $swatch-default-hover-outline; - -$swatch-option-text-hover-border: $swatch-default-hover-border; -$swatch-option-text-hover-outline: $swatch-default-hover-outline; -$swatch-option-text-hover-color: $swatch-default-hover-color; - -$swatch-option-color-border: $swatch-default-border; -$swatch-option-color-padding: $swatch-default-padding; -$swatch-option-color-margin: $swatch-default-margin; -$swatch-option-color-height: $swatch-default-height; -$swatch-option-color-width: $swatch-default-width; -$swatch-option-color-hover-outline: $swatch-default-hover-outline; -$swatch-option-color-min-width: $swatch-default-min-width; +$swatch-default-background: $color-boilerplate-light-gray !default; +$swatch-default-border: 1px solid $color-boilerplate-lighter-gray !default; +$swatch-default-color: $color-boilerplate-gray !default; +$swatch-default-font-size: $font-default-font-size !default; +$swatch-default-font-weight: 700 !default; +$swatch-default-line-height: 20px !default; +$swatch-default-text-align: center !default; +$swatch-default-margin: 0 10px 5px 0 !default; +$swatch-default-padding: 1px 2px !default; +$swatch-default-height: 20px !default; +$swatch-default-width: 30px !default; +$swatch-default-min-width: 30px !default; +$swatch-default-max-width: 90px !default; +$swatch-default-overflow: hidden !default; + +$swatch-default-hover-border: 1px solid white !default; +$swatch-default-hover-outline: 1px solid #999 !default; +$swatch-default-hover-color: #999 !default; + +$swatch-option-text-background: $swatch-default-background !default; +$swatch-option-text-border: $swatch-default-border !default; +$swatch-option-text-color: $swatch-default-color !default; +$swatch-option-text-font-size: 12px !default; +$swatch-option-text-padding: 4px 8px !default; +$swatch-option-text-min-width: 22px !default; +$swatch-option-text-margin: 0px 7px 5px 0 !default; +$swatch-option-text-outline: $swatch-default-hover-outline !default; + +$swatch-option-text-hover-border: $swatch-default-hover-border !default; +$swatch-option-text-hover-outline: $swatch-default-hover-outline !default; +$swatch-option-text-hover-color: $swatch-default-hover-color !default; + +$swatch-option-color-border: $swatch-default-border !default; +$swatch-option-color-padding: $swatch-default-padding !default; +$swatch-option-color-margin: $swatch-default-margin !default; +$swatch-option-color-height: $swatch-default-height !default; +$swatch-option-color-width: $swatch-default-width !default; +$swatch-option-color-hover-outline: $swatch-default-hover-outline !default; +$swatch-option-color-min-width: $swatch-default-min-width !default; /* * 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-color: black; -$input-default-font-family: $font-default-font-family-secondary; -$input-default-font-weight: $font-default-font-weight; -$input-default-font-style: normal; -$input-default-line-height: 36px; +$input-default-background-color: white !default; +$input-default-border-color: $color-boilerplate-gray !default; +$input-default-border: 1px solid $input-default-border-color !default; +$input-default-border-radius: 3px !default; +$input-default-height: 36px !default; +$input-default-width: 100% !default; +$input-default-margin: 0 !default; +$input-default-padding: 5px 10px 4px !default; +$input-default-vertical-align: middle !default; +$input-default-font-size: $font-default-font-size !default; +$input-default-color: black !default; +$input-default-font-family: $font-default-font-family-secondary !default; +$input-default-font-weight: $font-default-font-weight !default; +$input-default-font-style: normal !default; +$input-default-line-height: 36px !default; /* Placeholder */ -$input-default-placeholder-color: #84929F; -$input-default-placeholder-font-style: $input-default-font-style; +$input-default-placeholder-color: #84929F !default; +$input-default-placeholder-font-style: $input-default-font-style !default; /* 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; +$input-default-disabled-background-color: $input-default-background-color !default; +$input-default-disabled-border: $input-default-border !default; +$input-default-disabled-opacity: .2 !default; +$input-default-disabled-color: $input-default-color !default; +$input-default-disabled-font-style: $input-default-font-style !default; /* 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; +$input-default-focus-background-color: $input-default-background-color !default; +$input-default-focus-border: $input-default-border !default; +$input-default-focus-color: $input-default-color !default; +$input-default-focus-font-style: $input-default-font-style !default; /* Textarea */ -$input-textarea-default-height: auto; -$input-textarea-default-resize: vertical; +$input-textarea-default-height: auto !default; +$input-textarea-default-resize: vertical !default; /* Checkbox / Radio */ -$input-choice-default-width: auto; +$input-choice-default-width: auto !default; + +/* Limiter */ +$input-limiter-background-color: white !default; +$input-limiter-border-color: $color-boilerplate-gray !default; +$input-limiter-border: 1px solid $color-boilerplate-gray !default; +$input-limiter-border-radius: $input-default-border-radius !default; +$input-limiter-height: 32px !default; +$input-limiter-width: auto !default; +$input-limiter-margin: 0 5px 0 7px !default; +$input-limiter-padding: $input-default-padding !default; +$input-limiter-vertical-align: $input-default-vertical-align !default; +$input-limiter-font-size: $font-default-font-size !default; +$input-limiter-color: $color-boilerplate-black !default; +$input-limiter-font-family: $input-default-font-family !default; +$input-limiter-font-weight: $input-default-font-weight !default; +$input-limiter-font-style: $input-default-font-style !default; +$input-limiter-line-height: 1.42 !default; + +/* Sorter */ +$input-sorter-background-color: white !default; +$input-sorter-border-color: $color-boilerplate-gray !default; +$input-sorter-border: 1px solid $color-boilerplate-gray !default; +$input-sorter-border-radius: $input-default-border-radius !default; +$input-sorter-height: 32px !default; +$input-sorter-width: auto !default; +$input-sorter-margin: 0 0 0 7px !default; +$input-sorter-padding: $input-default-padding !default; +$input-sorter-vertical-align: $input-default-vertical-align !default; +$input-sorter-font-size: $font-default-font-size !default; +$input-sorter-color: $color-boilerplate-black !default; +$input-sorter-font-family: $input-default-font-family !default; +$input-sorter-font-weight: $input-default-font-weight !default; +$input-sorter-font-style: $input-default-font-style !default; +$input-sorter-line-height: 1.42 !default; + +/* + * Menu bar + */ + +$menu-bar-background: $color-boilerplate-light-gray !default; +$menu-bar-margin: 0 0 25px !default; +$menu-bar-menu-item-font-weight: 700 !default; +$menu-bar-menu-item-font-size: $font-default-font-size !default; +$menu-bar-menu-item-color: $color-boilerplate-gray !default; +$menu-bar-menu-item-hover-color: $color-boilerplate-black !default; +$menu-bar-menu-item-hover-default-border: 3px solid $color-boilerplate-orange !default; +$menu-bar-menu-item-hover-border-top: none !default; +$menu-bar-menu-item-hover-border-bottom: $menu-bar-menu-item-hover-default-border !default; +$menu-bar-menu-item-hover-border-left: none !default; +$menu-bar-menu-item-hover-border-right: none !default; /* * Fieldset / Fields */ /* Fieldset */ -$form-fieldset-border: 0; -$form-fieldset-margin: 0; -$form-fieldset-padding: 0; -$form-fieldset-legend-color: $font-default-color; -$form-fieldset-legend-font-size: 24px; -$form-fieldset-legend-font-family: $font-default-font-family-secondary; -$form-fieldset-legend-font-weight: 600; -$form-fieldset-legend-font-style: normal; -$form-fieldset-legend-line-height: 1.2; -$form-fieldset-legend-margin: 20px 0; -$form-fieldset-legend-padding: 0; -$form-fieldset-legend-width: inherit; +$form-fieldset-border: 0 !default; +$form-fieldset-margin: 0 !default; +$form-fieldset-padding: 0 !default; +$form-fieldset-legend-color: $font-default-color !default; +$form-fieldset-legend-font-size: 24px !default; +$form-fieldset-legend-font-family: $font-default-font-family-secondary !default; +$form-fieldset-legend-font-weight: 600 !default; +$form-fieldset-legend-font-style: normal !default; +$form-fieldset-legend-line-height: 1.2 !default; +$form-fieldset-legend-margin: 20px 0 !default; +$form-fieldset-legend-padding: 0 !default; +$form-fieldset-legend-width: inherit !default; /* Field */ -$form-fieldset-field-type: block; -$form-fieldset-field-margin: 0 0 20px; -$form-fieldset-field-box-sizing: border-box; +$form-fieldset-field-type: block !default; +$form-fieldset-field-margin: 0 0 20px !default; +$form-fieldset-field-box-sizing: border-box !default; -$form-fieldset-field-choice-before-width: auto; -$form-fieldset-field-choice-before-padding: 0; -$form-fieldset-field-choice-before-height: inherit; -$form-fieldset-field-choice-before-float: none; +$form-fieldset-field-choice-before-width: auto !default; +$form-fieldset-field-choice-before-padding: 0 !default; +$form-fieldset-field-choice-before-height: inherit !default; +$form-fieldset-field-choice-before-float: none !default; /* Label */ -$form-fieldset-field-label-padding: 6px 15px 0 0; -$form-fieldset-field-label-text-align: left; -$form-fieldset-field-label-width: auto; -$form-fieldset-field-label-float: none; -$form-fieldset-field-label-font-weight: 600; +$form-fieldset-field-label-padding: 6px 15px 0 0 !default; +$form-fieldset-field-label-text-align: left !default; +$form-fieldset-field-label-width: auto !default; +$form-fieldset-field-label-float: none !default; +$form-fieldset-field-label-font-weight: 600 !default; -$form-fieldset-field-choice-label-margin: 0 0 0 5px; +$form-fieldset-field-choice-label-margin: 0 0 0 5px !default; /* Control */ -$form-fieldset-field-control-width: auto; -$form-fieldset-field-control-float: none; +$form-fieldset-field-control-width: auto !default; +$form-fieldset-field-control-float: none !default; /* Action toolbar */ -$form-action-toolbar-margin: 20px 0; -$form-action-toolbar-padding: 0; +$form-action-toolbar-margin: 20px 0 !default; +$form-action-toolbar-padding: 0 !default; /* * Tabs @@ -227,23 +325,27 @@ $form-action-toolbar-padding: 0; /* Detail tabs */ -$detail-tab-title-background: black; -$detail-tab-title-border-color: gray; -$detail-tab-title-color: white; -$detail-tab-title-font-weight: 300; -$detail-tab-title-text-decoration: none; -$detail-tab-title-padding: 5px 25px; -$detail-tab-title-height: 25px; -$detail-tab-title-font-size: 1.5rem; +$detail-tab-title-background: black !default; +$detail-tab-title-border-color: gray !default; +$detail-tab-title-color: white !default; +$detail-tab-title-font-weight: 300 !default; +$detail-tab-title-text-decoration: none !default; +$detail-tab-title-padding: 5px 25px !default; +$detail-tab-title-height: 25px !default; +$detail-tab-title-font-size: 1.5rem !default; + +$detail-tab-title-hover-background: orange !default; +$detail-tab-title-hover-color: white !default; +$detail-tab-title-hover-border: red !default; -$detail-tab-title-hover-background: orange; -$detail-tab-title-hover-color: white; -$detail-tab-title-hover-border: red; +$detail-tab-title-active-background: orange !default; +$detail-tab-title-active-color: white !default; +$detail-tab-title-active-border: red !default; -$detail-tab-title-active-background: orange; -$detail-tab-title-active-color: white; -$detail-tab-title-active-border: red; +$detail-tab-content-background: gray !default; +$detail-tab-content-border: 1px solid black !default; +$detail-tab-content-margin: 31px !default; +$detail-tab-content-font-size: $font-default-font-size !default; -$detail-tab-content-background: black;