From b9a2344abf0adf454e6fef9a812e09e1ebb66e17 Mon Sep 17 00:00:00 2001 From: Jordy Kommeren Date: Mon, 13 Aug 2018 13:59:06 +0200 Subject: [PATCH] Added missing variables --- src/scss/boilerplate/_buttons.scss | 46 ++++++++++++++++++++++++++++ src/scss/boilerplate/_fonts.scss | 9 +++++- src/scss/boilerplate/_inputs.scss | 38 ++++++++++++++--------- src/scss/boilerplate/_menu.scss | 25 ++++++++++++--- src/scss/boilerplate/_variables.scss | 30 +++++++++++++++++- 5 files changed, 126 insertions(+), 22 deletions(-) diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss index 7e0df93..65c5bf0 100644 --- a/src/scss/boilerplate/_buttons.scss +++ b/src/scss/boilerplate/_buttons.scss @@ -112,3 +112,49 @@ button { } } +.modes { + .modes-mode { + background: $toolbar-modes-mode-background; + border-top: $toolbar-modes-mode-border; + border-left: $toolbar-modes-mode-border; + border-bottom: $toolbar-modes-mode-border; + color: $toolbar-modes-mode-color; + padding: $toolbar-modes-mode-padding; + &:before { + color: $toolbar-modes-mode-color; + } + &:last-child { + border-right: $toolbar-modes-mode-border; + &.active { + border-right: $toolbar-modes-mode-active-border; + } + &:hover { + border-right: $toolbar-modes-mode-hover-border; + } + } + + &.active { + background: $toolbar-modes-mode-active-background; + border-left: $toolbar-modes-mode-active-border; + border-top: $toolbar-modes-mode-active-border; + border-bottom: $toolbar-modes-mode-active-border; + color: $toolbar-modes-mode-active-color; + padding: $toolbar-modes-mode-active-padding; + &:before { + color: $toolbar-modes-mode-active-color; + } + } + + &:hover { + background: $toolbar-modes-mode-hover-background; + border-left: $toolbar-modes-mode-hover-border; + border-top: $toolbar-modes-mode-hover-border; + border-bottom: $toolbar-modes-mode-hover-border; + color: $toolbar-modes-mode-hover-color; + padding: $toolbar-modes-mode-hover-padding; + &:before { + color: $toolbar-modes-mode-hover-color; + } + } + } +} diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss index 00e681b..450dd18 100644 --- a/src/scss/boilerplate/_fonts.scss +++ b/src/scss/boilerplate/_fonts.scss @@ -1,11 +1,14 @@ html, body { font-family: $font-family; color: $font-default-color; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; h1, h2, h3, h4, h5, h6 { font-family: $font-family-heading; color: $font-family-heading-color; font-weight: $font-family-heading-font-weight; + text-transform: $font-family-heading-text-transform; } h1 { @@ -89,6 +92,7 @@ html, body { margin: $font-filter-title-margin; color: $font-filter-title-color; line-height: $font-filter-title-line-height; + text-transform: $font-filter-title-text-transform; strong { font-size: $font-filter-title-font-size; @@ -96,6 +100,7 @@ html, body { margin: $font-filter-title-margin; color: $font-filter-title-color; line-height: $font-filter-title-line-height; + text-transform: $font-filter-title-text-transform; } } @@ -105,6 +110,7 @@ html, body { margin: $font-filter-subtitle-margin; color: $font-filter-subtitle-color; line-height: $font-filter-subtitle-line-height; + text-transform: $font-filter-subtitle-text-transform; } .filter-options { @@ -113,6 +119,7 @@ html, body { font-weight: $font-filter-options-title-font-weight; margin: $font-filter-options-title-margin; color: $font-filter-options-title-color; + text-transform: $font-filter-options-title-text-transform; } } @@ -123,7 +130,7 @@ html, body { font-weight: $font-product-item-name-font-weight; line-height: $font-product-item-name-line-height; margin: $font-product-item-name-margin; - + text-transform: $font-product-item-name-text-transform; &:visited { color: $font-product-item-name-color; diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss index 91b14e6..c38fade 100644 --- a/src/scss/boilerplate/_inputs.scss +++ b/src/scss/boilerplate/_inputs.scss @@ -192,23 +192,31 @@ input[type="checkbox"] { } } -.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; +.sorter { + .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; + } + .sorter-action { + &:before { + line-height: $input-sorter-line-height; + } + } } + /**** ** Sidebar input ****/ diff --git a/src/scss/boilerplate/_menu.scss b/src/scss/boilerplate/_menu.scss index 77e5a53..5c08dc3 100644 --- a/src/scss/boilerplate/_menu.scss +++ b/src/scss/boilerplate/_menu.scss @@ -14,16 +14,31 @@ &:hover { color: $menu-bar-menu-item-hover-color; + background: $menu-bar-menu-item-hover-background; + 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; } } &.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; + color: $menu-bar-menu-item-active-color; + background: $menu-bar-menu-item-active-background; + border-top: $menu-bar-menu-item-active-border-top; + border-bottom: $menu-bar-menu-item-active-border-bottom; + border-left: $menu-bar-menu-item-active-border-left; + border-right: $menu-bar-menu-item-active-border-right; + + &:hover { + color: $menu-bar-menu-item-hover-color; + background: $menu-bar-menu-item-hover-background; + 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; + } } } } diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 42dc16c..2301192 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -40,6 +40,7 @@ $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; +$font-family-heading-text-transform: none !default; /* H1 */ $font-family-heading-h1-font-size: 40px !default; @@ -116,24 +117,28 @@ $font-filter-title-font-weight: 700 !default; $font-filter-title-line-height: 1.421617 !default; $font-filter-title-margin: 0 0 20px 0 !default; $font-filter-title-color: $font-default-color !default; +$font-filter-title-text-transform: none !default; $font-filter-subtitle-font-size: $font-default-font-size !default; $font-filter-subtitle-font-weight: 700 !default; $font-filter-subtitle-line-height: 1.421617 !default; $font-filter-subtitle-margin: 0 0 10px 0 !default; $font-filter-subtitle-color: $font-default-color !default; +$font-filter-subtitle-text-transform: none !default; $font-filter-options-title-font-size: $font-default-font-size !default; $font-filter-options-title-font-weight: 700 !default; $font-filter-options-title-line-height: 1.421617 !default; $font-filter-options-title-margin: 0 0 10px 0 !default; $font-filter-options-title-color: $font-default-color !default; +$font-filter-options-title-text-transform: none !default; $font-product-item-name-font-size: $font-default-font-size !default; $font-product-item-name-font-weight: $font-default-font-weight !default; $font-product-item-name-line-height: $font-default-font-line-height !default; $font-product-item-name-margin: 5px 0px !default; $font-product-item-name-color: $font-default-color !default; +$font-product-item-name-text-transform: none !default; /* * Buttons @@ -449,12 +454,23 @@ $menu-bar-menu-item-font-family: $font-default-font-family-primary !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; +$menu-bar-menu-item-hover-background: $menu-bar-background !default; + +$menu-bar-menu-item-active-color: $menu-bar-menu-item-hover-color !default; +$menu-bar-menu-item-active-default-border: $menu-bar-menu-item-hover-default-border !default; +$menu-bar-menu-item-active-border-top: $menu-bar-menu-item-hover-border-top !default; +$menu-bar-menu-item-active-border-bottom: $menu-bar-menu-item-hover-border-bottom !default; +$menu-bar-menu-item-active-border-left: $menu-bar-menu-item-hover-border-left !default; +$menu-bar-menu-item-active-border-right: $menu-bar-menu-item-hover-border-right !default; +$menu-bar-menu-item-active-background: $menu-bar-menu-item-hover-background !default; + $menu-bar-menu-item-submenu-background: #ffffff !default; $menu-bar-menu-item-submenu-item-color: $color-boilerplate-black !default; $menu-bar-menu-item-submenu-item-border-color: $color-boilerplate-orange !default; @@ -509,7 +525,19 @@ $form-fieldset-field-control-float: none !default; $form-action-toolbar-margin: 20px 0 !default; $form-action-toolbar-padding: 0 !default; - +/* Toolbar */ +$toolbar-modes-mode-background: $color-boilerplate-light-gray !default; +$toolbar-modes-mode-border: 1px solid $color-boilerplate-gray !default; +$toolbar-modes-mode-color: $color-boilerplate-gray !default; +$toolbar-modes-mode-padding: 7px 10px !default; +$toolbar-modes-mode-hover-background: $color-boilerplate-lighter-gray !default; +$toolbar-modes-mode-hover-border: $toolbar-modes-mode-border !default; +$toolbar-modes-mode-hover-color: $toolbar-modes-mode-color !default; +$toolbar-modes-mode-hover-padding: $toolbar-modes-mode-padding !default; +$toolbar-modes-mode-active-background: $toolbar-modes-mode-background !default; +$toolbar-modes-mode-active-border: $toolbar-modes-mode-border !default; +$toolbar-modes-mode-active-color: $toolbar-modes-mode-color !default; +$toolbar-modes-mode-active-padding: $toolbar-modes-mode-padding !default; /*