From e126810b21da06a779d79dafdfc8fb79acc498d1 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 11:28:13 +0100 Subject: [PATCH 01/28] Add hover effects to button using box-shadow --- src/scss/cdb-components/_buttons.scss | 28 ++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index 56d18d2..77f5170 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -162,11 +162,10 @@ Layout Component: .CDB-Button { @include transition(background, 300ms); position: relative; + box-sizing: border-box; padding: $baseSize $baseSize + 12; - border: 1px solid transparent; border-radius: $baseSize / 2; cursor: pointer; - box-sizing: border-box; .CDB-Button-Text { @@ -235,9 +234,7 @@ Layout Component: background: $cBlue; color: $cWhite; - &:hover { - background: darken($cBlue, 8%); - } + &:hover, &:active { background: darken($cBlue, 16%); } @@ -265,9 +262,7 @@ Layout Component: background: $cAlert; color: $cWhite; - &:hover { - background: darken($cAlert, 8%); - } + &:hover, &:active { background: darken($cAlert, 16%); } @@ -288,9 +283,7 @@ Layout Component: background: $cError; color: $cWhite; - &:hover { - background: darken($cError, 8%); - } + &:hover, &:active { background: darken($cError, 16%); } @@ -411,12 +404,14 @@ Layout Component: .CDB-Button--secondary { - border: 1px solid $cBlue; + box-shadow: inset 0 0 0 1px $cBlue; color: $cBlue; &:hover { background: rgba($cBlue, 0.08); + box-shadow: inset 0 0 0 2px darken($cBlue, 16%); } + &:active { background: $cBlue; color: $cWhite; @@ -425,7 +420,9 @@ Layout Component: &.is-disabled { &:hover { background: transparent; + box-shadow: inset 0 0 0 1px $cBlue; } + &:active { background: transparent; } @@ -453,12 +450,14 @@ Layout Component: .CDB-Button--white { - border: 1px solid $cWhite; + box-shadow: inset 0 0 0 1px $cWhite; color: $cWhite; &:hover { background: rgba($cWhite, 0.08); + box-shadow: inset 0 0 0 2px darken($cWhite, 16%); } + &:active { background: rgba($cMainBg, 0.08); color: $cWhite; @@ -466,9 +465,12 @@ Layout Component: &.is-disabled { @include opacity(0.24); + &:hover { background: transparent; + box-shadow: inset 0 0 0 1px $cWhite; } + &:active { background: transparent; color: $cWhite; From 3d4c8a77ffefe11b641f79917ec912450d2ede1a Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 11:30:30 +0100 Subject: [PATCH 02/28] Cleanup _buttons.scss --- src/scss/cdb-components/_buttons.scss | 45 +++++++++------------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index 77f5170..690530e 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -171,26 +171,28 @@ Layout Component: .CDB-Button-Text { display: block; } + &.is-disabled { - cursor: default; opacity: 0.24; + cursor: default; } } .CDB-Button--loading { - .CDB-Button-loader { position: absolute; + z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transform-origin: 50%; opacity: 0; - z-index: 10; } + .CDB-Button-Text { @include transition(all 600ms); } + &.is-loading { cursor: default; @@ -199,6 +201,7 @@ Layout Component: animation-duration: 600ms; animation-fill-mode: forwards; } + .CDB-Button-Text { opacity: 0; } @@ -240,18 +243,14 @@ Layout Component: } &.is-loading { - &:hover { - background: $cBlue; - } + &:hover, &:active { background: $cBlue; } } &.is-disabled { - &:hover { - background: $cBlue; - } + &:hover, &:active { background: $cBlue; } @@ -268,9 +267,7 @@ Layout Component: } &.is-disabled { - &:hover { - background: $cAlert; - } + &:hover, &:active { background: $cAlert; } @@ -289,9 +286,7 @@ Layout Component: } &.is-disabled { - &:hover { - background: $cError; - } + &:hover, &:active { background: $cError; } @@ -431,24 +426,18 @@ Layout Component: &.is-loading { cursor: default; - &:hover { - background: none; - color: $cBlue; - } + &:hover, &:active { background: none; color: $cBlue; } } + &--background { + background-color: $cWhite; + } } - -.CDB-Button--secondary--background { - background-color: $cWhite; -} - - .CDB-Button--white { box-shadow: inset 0 0 0 1px $cWhite; color: $cWhite; @@ -480,14 +469,10 @@ Layout Component: &.is-loading { cursor: default; - &:hover { - background: none; - color: $cWhite; - } + &:hover, &:active { background: none; color: $cWhite; } } - } From f649676743022fa99bc984fad56780fe1534411a Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 12:08:08 +0100 Subject: [PATCH 03/28] Fix border-radius issue in NavSubmenu --- src/scss/cdb-components/_menu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss index 10b88bd..899781f 100644 --- a/src/scss/cdb-components/_menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -193,6 +193,7 @@ margin-bottom: -1px; padding-bottom: 12px; border-bottom: 1px solid transparent; + border-radius: 0; color: $cBlue; } From 0208b2485b0ff32d988913ce380d0e15204f9d89 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 13:08:27 +0100 Subject: [PATCH 04/28] Remove unnecessary mixins in _buttons.scss --- src/scss/cdb-components/_buttons.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index 690530e..74a8406 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -160,7 +160,7 @@ Layout Component: */ .CDB-Button { - @include transition(background, 300ms); + transition: background, 300ms; position: relative; box-sizing: border-box; padding: $baseSize $baseSize + 12; @@ -190,7 +190,7 @@ Layout Component: } .CDB-Button-Text { - @include transition(all 600ms); + transition: all 600ms; } &.is-loading { @@ -453,7 +453,7 @@ Layout Component: } &.is-disabled { - @include opacity(0.24); + opacity: 0.24; &:hover { background: transparent; From c30f62fe51f44912e1549c88fe4f0febac504882 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 14:43:54 +0100 Subject: [PATCH 05/28] Use 8% darken instead of 16% --- src/scss/cdb-components/_buttons.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index 74a8406..b296f0c 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -239,7 +239,7 @@ Layout Component: &:hover, &:active { - background: darken($cBlue, 16%); + background: darken($cBlue, 8%); } &.is-loading { @@ -263,7 +263,7 @@ Layout Component: &:hover, &:active { - background: darken($cAlert, 16%); + background: darken($cAlert, 8%); } &.is-disabled { @@ -282,7 +282,7 @@ Layout Component: &:hover, &:active { - background: darken($cError, 16%); + background: darken($cError, 8%); } &.is-disabled { @@ -404,7 +404,7 @@ Layout Component: &:hover { background: rgba($cBlue, 0.08); - box-shadow: inset 0 0 0 2px darken($cBlue, 16%); + box-shadow: inset 0 0 0 2px darken($cBlue, 8%); } &:active { @@ -444,7 +444,7 @@ Layout Component: &:hover { background: rgba($cWhite, 0.08); - box-shadow: inset 0 0 0 2px darken($cWhite, 16%); + box-shadow: inset 0 0 0 2px darken($cWhite, 8%); } &:active { From 8cfc04c859313f1cf65e8c2a3dd146e443d8dee5 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 14:53:38 +0100 Subject: [PATCH 06/28] Add hover effects to _menu.scss --- src/scss/cdb-components/_menu.scss | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss index 899781f..31b5b00 100644 --- a/src/scss/cdb-components/_menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -149,9 +149,14 @@ display: block; margin-bottom: -1px; padding: 4px 0 11px; - border-bottom: 1px solid transparent; + transition: border-color 0.2s ease-in; + border-bottom: 2px solid transparent; border-radius: 0; color: $cBlue; + + &:hover { + border-bottom: 2px solid darken($cBlue, 8%); + } } .CDB-NavMenu-item, @@ -162,7 +167,7 @@ } .CDB-NavMenu-item.is-selected .CDB-NavMenu-link { - border-bottom: 1px solid $cBlack; + border-bottom: 2px solid $cMainText; color: $cMainText; } @@ -173,7 +178,7 @@ } .CDB-NavSubmenu { - border-bottom: 1px solid $cSecondaryLine; + border-bottom: 2px solid $cSecondaryLine; } .CDB-NavSubmenu--inside { @@ -192,13 +197,18 @@ display: block; margin-bottom: -1px; padding-bottom: 12px; - border-bottom: 1px solid transparent; + transition: border-color 0.2s ease-in; + border-bottom: 2px solid transparent; border-radius: 0; color: $cBlue; + + &:hover { + border-bottom: 2px solid darken($cBlue, 8%); + } } .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link { - border-bottom: 1px solid $cMainLine; + border-bottom: 2px solid $cMainLine; color: $cMainText; } @@ -207,7 +217,6 @@ } .CDB-NavMenu.is-dark { - .CDB-NavMenu-inner, .CDB-NavSubmenu { border-bottom: 1px solid $cSecondaryText; @@ -215,16 +224,21 @@ .CDB-NavMenu-link, .CDB-NavSubmenu-link { + margin-bottom: -1px; color: $cAltText; + + &:hover { + border-bottom: 2px solid darken($cMainLine, 8%); + } } .CDB-NavMenu-item.is-selected .CDB-NavMenu-link { - border-bottom: 1px solid $cMainLine; + border-bottom: 2px solid $cMainLine; color: $cWhite; } .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link { - border-bottom: 1px solid $cMainLine; + border-bottom: 2px solid $cMainLine; color: $cWhite; } From 433c238a93f0f2c6c17b7a9a98693b2d7bee3fae Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 15:00:07 +0100 Subject: [PATCH 07/28] Boyscout _menu.scss --- src/scss/cdb-components/_menu.scss | 36 +++++++++++++++++------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss index 31b5b00..5f4a949 100644 --- a/src/scss/cdb-components/_menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -137,13 +137,16 @@ position: relative; margin-bottom: 18px; border-bottom: 1px solid $cMainLine; + + &--no-margin { + margin-bottom: 0; + } + + &--is-dropdown { + padding: $baseSize 0 0 $baseSize * 2; + } } -.CDB-NavMenu-inner--no-margin { - margin-bottom: 0; -} -.CDB-NavMenu-inner--is-dropdown { - padding: $baseSize 0 0 $baseSize * 2; -} + .CDB-NavMenu-link { display: block; @@ -179,18 +182,18 @@ .CDB-NavSubmenu { border-bottom: 2px solid $cSecondaryLine; -} -.CDB-NavSubmenu--inside { - position: absolute; - right: 0; - left: 0; - padding-top: 14px; -} + &--inside { + position: absolute; + right: 0; + left: 0; + padding-top: 14px; + } -.CDB-NavSubmenu--outside { - margin-top: -5px; - margin-bottom: 18px; + &--outside { + margin-top: -5px; + margin-bottom: 18px; + } } .CDB-NavSubmenu-link { @@ -207,6 +210,7 @@ } } + .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link { border-bottom: 2px solid $cMainLine; color: $cMainText; From 6192c8e27c6a53156c474bdf645270343da76e58 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:18:08 +0100 Subject: [PATCH 08/28] Add $cBlueHover color --- src/scss/cdb-variables/_colors.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index b761938..04b4b05 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -3,6 +3,7 @@ // General $cBlue: #1785FB; +$cBlueHover: #0f6cd2; $cBlack: #000; $cWhite: #FFF; $cMainBg: #2E3C43; From 7a00c4513d6a7f45f1decfb213ce36ae34d54e50 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:18:32 +0100 Subject: [PATCH 09/28] Use cblueHover --- src/scss/cdb-components/_buttons.scss | 4 ++-- src/scss/cdb-components/_menu.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index b296f0c..e48b21b 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -239,7 +239,7 @@ Layout Component: &:hover, &:active { - background: darken($cBlue, 8%); + background: $cBlueHover; } &.is-loading { @@ -404,7 +404,7 @@ Layout Component: &:hover { background: rgba($cBlue, 0.08); - box-shadow: inset 0 0 0 2px darken($cBlue, 8%); + box-shadow: inset 0 0 0 2px $cBlueHover; } &:active { diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss index 5f4a949..bbfcd66 100644 --- a/src/scss/cdb-components/_menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -158,7 +158,7 @@ color: $cBlue; &:hover { - border-bottom: 2px solid darken($cBlue, 8%); + border-bottom: 2px solid $cBlueHover; } } @@ -206,7 +206,7 @@ color: $cBlue; &:hover { - border-bottom: 2px solid darken($cBlue, 8%); + border-bottom: 2px solid $cBlueHover; } } From e0e0e7cf1cf4d97b5e2829dbda6921eec4e0bfbf Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:18:52 +0100 Subject: [PATCH 10/28] Change hover color for CDB-InputText --- src/scss/cdb-components/forms/_inputs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_inputs.scss b/src/scss/cdb-components/forms/_inputs.scss index 77d023f..ca11e24 100644 --- a/src/scss/cdb-components/forms/_inputs.scss +++ b/src/scss/cdb-components/forms/_inputs.scss @@ -35,7 +35,7 @@ font-style: italic; } &:hover { - border: 1px solid $cHoverLine; + border: 1px solid $cBlueHover; } &:focus { border: 1px solid $cBlue; From aed2e0b394c525be1110d6332fefbf0987d530ad Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:19:24 +0100 Subject: [PATCH 11/28] Boyscout _inputs.scss --- src/scss/cdb-components/forms/_inputs.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/scss/cdb-components/forms/_inputs.scss b/src/scss/cdb-components/forms/_inputs.scss index ca11e24..9884d64 100644 --- a/src/scss/cdb-components/forms/_inputs.scss +++ b/src/scss/cdb-components/forms/_inputs.scss @@ -24,36 +24,45 @@ &.is-cursor { cursor: pointer; } + &.is-empty { color: $cHintText; } + &.is-number { color: darken($cHighlight, 16%); } + &.is-null { color: $cHintText; font-style: italic; } + &:hover { border: 1px solid $cBlueHover; } + &:focus { border: 1px solid $cBlue; outline: none; } + &:disabled, &.is-disabled { border-color: $cSecondaryLine; background: $cThirdBackground; cursor: default; } + &.has-icon { padding-right: $baseSize * 4; } + &.has-error { @include default-form-error-style(); } } + .CDB-InputTextPlain { width: 100%; border: 0; From 6169a7deb94444336d8543b219edd20278d195b3 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:28:06 +0100 Subject: [PATCH 12/28] Change hover color for checkbox --- src/scss/cdb-components/forms/_checkbox.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_checkbox.scss b/src/scss/cdb-components/forms/_checkbox.scss index be8ee9b..281bf51 100644 --- a/src/scss/cdb-components/forms/_checkbox.scss +++ b/src/scss/cdb-components/forms/_checkbox.scss @@ -85,7 +85,8 @@ } .CDB-Checkbox:hover + .CDB-Checkbox-face { - border: 1px solid $cHoverLine; + border: 1px solid $cBlueHover; + &::before, &::after { background: $cHoverLine; From 3b0fb9f4449a103727b15a17e4d0a5bf293071b7 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:35:01 +0100 Subject: [PATCH 13/28] Boyscout _checkbox.scss --- src/scss/cdb-components/forms/_checkbox.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_checkbox.scss b/src/scss/cdb-components/forms/_checkbox.scss index 281bf51..5202f46 100644 --- a/src/scss/cdb-components/forms/_checkbox.scss +++ b/src/scss/cdb-components/forms/_checkbox.scss @@ -66,7 +66,7 @@ } .CDB-Checkbox:checked + .CDB-Checkbox-face { - @include transition(background, 300ms); + transition: background 300ms; border: 1px solid $cBlue; background: $cBlue; @@ -78,6 +78,7 @@ .CDB-Checkbox:checked:hover + .CDB-Checkbox-face { border: 1px solid $cBlue; + &::before, &::after { background: $cWhite; @@ -94,6 +95,7 @@ } .CDB-Checkbox:active + .CDB-Checkbox-face { border: 1px solid $cBlue; + &::before, &::after { background: $cBlue; @@ -103,6 +105,7 @@ .CDB-Checkbox:disabled + .CDB-Checkbox-face { border: 1px solid $cSecondaryLine; background: $cThirdBackground; + &::before, &::after { opacity: 0; From 5dd60975147f6243354290cc573ddaaf719cff43 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:35:19 +0100 Subject: [PATCH 14/28] Change hover color in _radio.scss --- src/scss/cdb-components/forms/_radio.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_radio.scss b/src/scss/cdb-components/forms/_radio.scss index aed6dca..42cd12b 100644 --- a/src/scss/cdb-components/forms/_radio.scss +++ b/src/scss/cdb-components/forms/_radio.scss @@ -79,7 +79,8 @@ } .CDB-Radio:hover + .CDB-Radio-face { - border: 1px solid $cHoverLine; + border: 1px solid $cBlueHover; + &::before { background: $cHoverLine; } From 6862ba81b3174c0f4c588617e85039bd69637b54 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 20 Nov 2017 16:35:43 +0100 Subject: [PATCH 15/28] Boyscout _radio.scss --- src/scss/cdb-components/forms/_radio.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_radio.scss b/src/scss/cdb-components/forms/_radio.scss index 42cd12b..ca261d3 100644 --- a/src/scss/cdb-components/forms/_radio.scss +++ b/src/scss/cdb-components/forms/_radio.scss @@ -56,7 +56,7 @@ } .CDB-Radio:checked + .CDB-Radio-face { - @include transition(background, 300ms); + transition: background 300ms; border: 1px solid $cBlue; background: $cBlue; From d81979530d8694cf79c0600e73ec59bedc997e85 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 09:42:54 +0100 Subject: [PATCH 16/28] Refactor _option-input to allow independent borders --- .../cdb-components/forms/_option-input.scss | 115 +++++++++++------- 1 file changed, 69 insertions(+), 46 deletions(-) diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index ff4987e..c751a7f 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -99,67 +99,90 @@ */ .CDB-OptionInput { - width: 100%; - height: $baseSize * 4; - border: 1px solid $cMainLine; - border-radius: $baseSize / 2; box-sizing: border-box; + width: 100%; + height: $baseSize * 4 - 2px; + border-radius: $baseSize / 2; vertical-align: middle; +} - &:hover { - border: 1px solid $cHoverLine; +.CDB-OptionInput-container { + display: flex; + align-content: center; + align-items: center; + + &--noMargin { + margin: 0; } +} + +.CDB-OptionInput-item { + display: flex; + position: relative; + box-sizing: content-box; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + font-size: $sFontSize-medium; + + &.is-active, + &:hover, + &:focus { + cursor: pointer; + } + + &:first-child { + width: auto; + margin-right: $baseSize; + } + + &:last-child { + width: 100%; + } +} + +.CDB-OptionInput-container:not(.CDB-OptionInput-container--noBorder) .CDB-OptionInput-item { + padding: 0 $baseSize; + border: 1px solid $cMainLine; + + &.is-active, + &:hover, &:focus { border: 1px solid $cBlue; } -} -.CDB-OptionInput.is-active { - border: 1px solid $cBlue; -} -.CDB-OptionInput-container { - @include display-flex(); - @include align-content(center); - @include align-items(center); - margin: 0 $baseSize; -} -.CDB-OptionInput-container--noMargin { - margin: 0; -} -.CDB-OptionInput-item { - @include display-flex(); - @include align-items(center); - @include align-content(center); - width: auto; - height: 100%; - font-size: $sFontSize-medium; - box-sizing: content-box; - &::after { - width: 1px; - height: 100%; - margin-right: $baseSize; - background-color: $cSecondaryLine; - content: ''; + &:first-child { + margin-right: 0; + border-radius: 4px 0 0 4px; } - &:last-child { - width: 100%; - &::after { - display: none; + &:last-child { + border-radius: 4px; + } + + + .CDB-OptionInput-item { + border-left: none; + border-radius: 0 4px 4px 0; + + &:hover::after { + content: ''; + position: absolute; + left: 0; + width: 1px; + height: 100%; + background-color: $cBlue; } } } -.CDB-OptionInput-item--noSeparator::after { - content: ''; -} + .CDB-OptionInput-content { - @include display-flex(); - @include align-items(center); - height: 100%; - margin-left: -$baseSize; - padding: 0 $baseSize + 2; - color: $cMainBg; + display: flex; box-sizing: content-box; + align-items: center; + justify-content: center; + height: 100%; + color: $cMainBg; white-space: nowrap; &:hover { From 12eb1a3258694bf0a51069b240a3ed57f01d66d7 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 10:00:49 +0100 Subject: [PATCH 17/28] Use --border modifier instead of :not --- src/scss/cdb-components/forms/_option-input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index c751a7f..aaf3b82 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -142,7 +142,7 @@ } } -.CDB-OptionInput-container:not(.CDB-OptionInput-container--noBorder) .CDB-OptionInput-item { +.CDB-OptionInput-container--border .CDB-OptionInput-item { padding: 0 $baseSize; border: 1px solid $cMainLine; From 36f9e908834ee19fa8f00f9307e2cc35050128d6 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 10:06:47 +0100 Subject: [PATCH 18/28] Use $cBlue in _dropdown instead of green --- src/scss/cdb-components/forms/_dropdowns.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/cdb-components/forms/_dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss index bef1bf3..758b98d 100644 --- a/src/scss/cdb-components/forms/_dropdowns.scss +++ b/src/scss/cdb-components/forms/_dropdowns.scss @@ -152,7 +152,7 @@ border-bottom: 0; } &:hover { - background-color: rgba(157, 224, 173, 0.2); + background-color: rgba($cBlue, 0.08); color: $cMainBg; cursor: pointer; } From 2d560e8decd31577a9e434b53018c7f1ce2464d9 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 10:07:54 +0100 Subject: [PATCH 19/28] Boyscouy _dropdowns.scss --- src/scss/cdb-components/forms/_dropdowns.scss | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/scss/cdb-components/forms/_dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss index 758b98d..6ccd492 100644 --- a/src/scss/cdb-components/forms/_dropdowns.scss +++ b/src/scss/cdb-components/forms/_dropdowns.scss @@ -113,6 +113,7 @@ position: relative; height: 250px; } + .CDB-Dropdown { @include display-flex(); @include flex-direction(row); @@ -120,13 +121,15 @@ top: 40px; max-height: 200px; } + .CDB-Dropdown-calculations { + box-sizing: border-box; padding: $sMargin-element; border-right: 1px solid $cMainLine; border-radius: 4px 0 0 4px; background-color: $cSecondaryBackground; - box-sizing: border-box; } + .CDB-Dropdown-calculationsElement { margin-bottom: $sLineHeight-medium; color: $cMainBg; @@ -136,12 +139,14 @@ margin-bottom: 0; } } + .CDB-Dropdown-options { width: $baseSize * 20; border-radius: 0 4px 4px 0; background-color: $cWhite; vertical-align: top; } + .CDB-Dropdown-optionsElement { @include text-overflow(); padding: 12px 10px; @@ -151,20 +156,23 @@ &:last-child { border-bottom: 0; } + &:hover { background-color: rgba($cBlue, 0.08); color: $cMainBg; cursor: pointer; } -} -.CDB-Dropdown-optionsElement.is-selected { - color: $cMainBg; -} -.CDB-Dropdown-optionsElement.is-disabled { - color: $cHintText; - &:hover { - background-color: transparent; - cursor: default; + &.is-selected { + color: $cMainBg; + } + + &.is-disabled { + color: $cHintText; + + &:hover { + background-color: transparent; + cursor: default; + } } } From ed3e5c0e3cac7ec7d6f8c4ed2dab9afccaa8305e Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 10:15:07 +0100 Subject: [PATCH 20/28] Remove flex mixins in _drodowns.scss --- src/scss/cdb-components/forms/_dropdowns.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/forms/_dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss index 6ccd492..c322d67 100644 --- a/src/scss/cdb-components/forms/_dropdowns.scss +++ b/src/scss/cdb-components/forms/_dropdowns.scss @@ -115,8 +115,8 @@ } .CDB-Dropdown { - @include display-flex(); - @include flex-direction(row); + display: flex; + flex-direction: row; position: absolute; top: 40px; max-height: 200px; From 7b082df82fb5ede4969840622ded3bebd64f4c65 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Tue, 21 Nov 2017 10:34:45 +0100 Subject: [PATCH 21/28] Add hover effects to _toggle.scss --- src/scss/cdb-components/forms/_toggle.scss | 17 ++++++++++++++--- src/scss/cdb-variables/_colors.scss | 4 +++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/forms/_toggle.scss b/src/scss/cdb-components/forms/_toggle.scss index 5947e5d..ce2c8d1 100644 --- a/src/scss/cdb-components/forms/_toggle.scss +++ b/src/scss/cdb-components/forms/_toggle.scss @@ -30,21 +30,32 @@ .CDB-Toggle { position: absolute; + z-index: 1; width: $baseSize * 4; height: $baseSize * 2; opacity: 0; - z-index: 1; + + &:hover { + + .CDB-ToggleFace { + background: $cHintTextHover; + } + + &:checked + .CDB-ToggleFace { + background: $cHighlightHover; + } + } + .CDB-ToggleFace { - @include transition(background, 300ms); position: relative; width: $baseSize * 4; height: $baseSize * 2; margin: 0 2px; + transition: background 300ms; border-radius: 50px; background: $cHintText; &::before { + content: ''; position: absolute; top: 2px; left: 2px; @@ -53,7 +64,6 @@ border-radius: 50%; background: $cWhite; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); - content: ''; } } @@ -69,4 +79,5 @@ .Toggle .is-disabled { opacity: 0.24; + pointer-events: none; } diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index 04b4b05..01b27b6 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -3,7 +3,7 @@ // General $cBlue: #1785FB; -$cBlueHover: #0f6cd2; +$cBlueHover: #0F6CD2; $cBlack: #000; $cWhite: #FFF; $cMainBg: #2E3C43; @@ -23,9 +23,11 @@ $cMainText: #2E3C43; $cSecondaryText: #636D72; $cAltText: #979EA1; $cHintText: #CBCED0; +$cHintTextHover: #9C9FA1; //Others $cHighlight: #9DE0AD; +$cHighlightHover: #82BB90; $cAlert: #F19243; $cPublic: #9BC63B; $cLink: #FEB100; From b8393c93dbff4906927efd2e160b697182857311 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Wed, 22 Nov 2017 11:47:04 +0100 Subject: [PATCH 22/28] =?UTF-8?q?=F0=9F=90=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scss/cdb-components/_buttons.scss | 10 +++++----- src/scss/cdb-components/_menu.scss | 5 ++++- src/scss/cdb-components/forms/_dropdowns.scss | 2 +- src/scss/cdb-components/forms/_option-input.scss | 8 +++++--- src/scss/cdb-components/forms/_toggle.scss | 4 ++-- 5 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index e48b21b..c93cd66 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -160,12 +160,12 @@ Layout Component: */ .CDB-Button { - transition: background, 300ms; position: relative; - box-sizing: border-box; padding: $baseSize $baseSize + 12; + transition: background, 300ms; border-radius: $baseSize / 2; cursor: pointer; + box-sizing: border-box; .CDB-Button-Text { @@ -181,12 +181,12 @@ Layout Component: .CDB-Button--loading { .CDB-Button-loader { position: absolute; - z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transform-origin: 50%; opacity: 0; + z-index: 10; } .CDB-Button-Text { @@ -399,8 +399,8 @@ Layout Component: .CDB-Button--secondary { - box-shadow: inset 0 0 0 1px $cBlue; color: $cBlue; + box-shadow: inset 0 0 0 1px $cBlue; &:hover { background: rgba($cBlue, 0.08); @@ -439,8 +439,8 @@ Layout Component: } .CDB-Button--white { - box-shadow: inset 0 0 0 1px $cWhite; color: $cWhite; + box-shadow: inset 0 0 0 1px $cWhite; &:hover { background: rgba($cWhite, 0.08); diff --git a/src/scss/cdb-components/_menu.scss b/src/scss/cdb-components/_menu.scss index bbfcd66..0b01798 100644 --- a/src/scss/cdb-components/_menu.scss +++ b/src/scss/cdb-components/_menu.scss @@ -143,7 +143,10 @@ } &--is-dropdown { - padding: $baseSize 0 0 $baseSize * 2; + padding-top: $baseSize; + padding-right: 0; + padding-bottom: 0; + padding-left: $baseSize * 2; } } diff --git a/src/scss/cdb-components/forms/_dropdowns.scss b/src/scss/cdb-components/forms/_dropdowns.scss index c322d67..ff77ab7 100644 --- a/src/scss/cdb-components/forms/_dropdowns.scss +++ b/src/scss/cdb-components/forms/_dropdowns.scss @@ -116,9 +116,9 @@ .CDB-Dropdown { display: flex; - flex-direction: row; position: absolute; top: 40px; + flex-direction: row; max-height: 200px; } diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index aaf3b82..29da195 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -154,7 +154,8 @@ &:first-child { margin-right: 0; - border-radius: 4px 0 0 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } &:last-child { @@ -163,15 +164,16 @@ + .CDB-OptionInput-item { border-left: none; - border-radius: 0 4px 4px 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; &:hover::after { - content: ''; position: absolute; left: 0; width: 1px; height: 100%; background-color: $cBlue; + content: ''; } } } diff --git a/src/scss/cdb-components/forms/_toggle.scss b/src/scss/cdb-components/forms/_toggle.scss index ce2c8d1..46972f8 100644 --- a/src/scss/cdb-components/forms/_toggle.scss +++ b/src/scss/cdb-components/forms/_toggle.scss @@ -30,10 +30,10 @@ .CDB-Toggle { position: absolute; - z-index: 1; width: $baseSize * 4; height: $baseSize * 2; opacity: 0; + z-index: 1; &:hover { + .CDB-ToggleFace { @@ -55,7 +55,6 @@ background: $cHintText; &::before { - content: ''; position: absolute; top: 2px; left: 2px; @@ -64,6 +63,7 @@ border-radius: 50%; background: $cWhite; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); + content: ''; } } From 8d29f7af3e843107e5575a41cff508f242c3f0ae Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Wed, 22 Nov 2017 12:22:36 +0100 Subject: [PATCH 23/28] Add cBlackHover color --- src/scss/cdb-variables/_colors.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index 01b27b6..22b38fa 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -1,31 +1,31 @@ -// Colors variables -// ---------------------------------------------- - -// General +// -- General $cBlue: #1785FB; -$cBlueHover: #0F6CD2; $cBlack: #000; $cWhite: #FFF; $cMainBg: #2E3C43; -//Structure +// -- Structure $cSecondaryDark: #282C2F; $cSecondaryBackground: #F2F6F9; $cThirdBackground: #F9F9F9; -//Lines +// -- Lines $cHoverLine: #AAA; $cMainLine: #DDD; $cSecondaryLine: rgba($cMainBg, 0.08); -//Typography +// -- Borders +$cBlackHover: #2E3C43; +$cBlueHover: #0F6CD2; + +// -- Typography $cMainText: #2E3C43; $cSecondaryText: #636D72; $cAltText: #979EA1; $cHintText: #CBCED0; $cHintTextHover: #9C9FA1; -//Others +// -- Others $cHighlight: #9DE0AD; $cHighlightHover: #82BB90; $cAlert: #F19243; From 7e040de9a8183f5acd0f5cb8daadbb7a5d34ff70 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Wed, 22 Nov 2017 12:32:38 +0100 Subject: [PATCH 24/28] Add :hover to .u-actionTextColor --- src/scss/cdb-utilities/_helpers.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/scss/cdb-utilities/_helpers.scss b/src/scss/cdb-utilities/_helpers.scss index e4d90b3..b161089 100644 --- a/src/scss/cdb-utilities/_helpers.scss +++ b/src/scss/cdb-utilities/_helpers.scss @@ -51,6 +51,10 @@ .u-actionTextColor { color: $cBlue; + + &:hover { + color: $cBlueHover; + } } .u-mainTextColor { color: $cMainText; From 38ed394be3baed99a31d7d26b54f594dcac739db Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 27 Nov 2017 10:38:36 +0100 Subject: [PATCH 25/28] Fix border-radius in CDB-OptionInput-item --- src/scss/cdb-components/forms/_option-input.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index 29da195..9056872 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -164,8 +164,8 @@ + .CDB-OptionInput-item { border-left: none; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; &:hover::after { position: absolute; From 1df6cb91823d4da1213b26da69f8e9333197c9d6 Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 27 Nov 2017 11:00:40 +0100 Subject: [PATCH 26/28] Fix hover/focus color difference in CDB-TextInput --- src/scss/cdb-components/forms/_inputs.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/scss/cdb-components/forms/_inputs.scss b/src/scss/cdb-components/forms/_inputs.scss index 9884d64..7436359 100644 --- a/src/scss/cdb-components/forms/_inputs.scss +++ b/src/scss/cdb-components/forms/_inputs.scss @@ -38,12 +38,9 @@ font-style: italic; } - &:hover { - border: 1px solid $cBlueHover; - } - + &:hover, &:focus { - border: 1px solid $cBlue; + border: 1px solid $cBlueHover; outline: none; } From 8a101f0ea6a6453c768e5f156372dd9fb60c865c Mon Sep 17 00:00:00 2001 From: rubenmoya Date: Mon, 27 Nov 2017 15:12:30 +0100 Subject: [PATCH 27/28] Fix problems with option-input component --- src/scss/cdb-components/forms/_inputs.scss | 7 ++-- .../cdb-components/forms/_option-input.scss | 35 +++++++++++++------ 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/scss/cdb-components/forms/_inputs.scss b/src/scss/cdb-components/forms/_inputs.scss index 7436359..5f222ba 100644 --- a/src/scss/cdb-components/forms/_inputs.scss +++ b/src/scss/cdb-components/forms/_inputs.scss @@ -38,9 +38,12 @@ font-style: italic; } - &:hover, - &:focus { + &:hover { border: 1px solid $cBlueHover; + } + + &:focus { + border: 1px solid $cBlackHover; outline: none; } diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index 9056872..1312deb 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -147,15 +147,24 @@ border: 1px solid $cMainLine; &.is-active, - &:hover, &:focus { - border: 1px solid $cBlue; + border: 1px solid $cBlackHover; + } + + &:hover { + border: 1px solid $cBlueHover; } &:first-child { margin-right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; + + &:hover { + + .CDB-OptionInput-item::after { + content: none; + } + } } &:last-child { @@ -167,14 +176,24 @@ border-top-left-radius: 0; border-bottom-left-radius: 0; + &.is-active::after, + &:focus::after, &:hover::after { position: absolute; - left: 0; + left: -1px; width: 1px; - height: 100%; - background-color: $cBlue; + height: calc(100% + 2px); content: ''; } + + &.is-active::after, + &:focus::after { + background-color: $cBlackHover; + } + + &:hover::after { + background-color: $cBlueHover; + } } } @@ -191,9 +210,3 @@ text-decoration: none; } } -.CDB-OptionInput-item:first-child .CDB-OptionInput-content { - border-bottom-left-radius: 4px; -} -.CDB-OptionInput-item.is-active > .CDB-OptionInput-content { - border-bottom: 1px solid $cMainBg; -} From 77bb5324590fb6ec69783faa417fc17c92993258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Matall=C3=ADn?= Date: Tue, 28 Nov 2017 13:34:19 +0100 Subject: [PATCH 28/28] active > hover --- src/scss/cdb-components/forms/_option-input.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss index 1312deb..f83c999 100644 --- a/src/scss/cdb-components/forms/_option-input.scss +++ b/src/scss/cdb-components/forms/_option-input.scss @@ -146,15 +146,15 @@ padding: 0 $baseSize; border: 1px solid $cMainLine; + &:hover { + border: 1px solid $cBlueHover; + } + &.is-active, &:focus { border: 1px solid $cBlackHover; } - &:hover { - border: 1px solid $cBlueHover; - } - &:first-child { margin-right: 0; border-top-left-radius: 4px; @@ -186,14 +186,14 @@ content: ''; } + &:hover::after { + background-color: $cBlueHover; + } + &.is-active::after, &:focus::after { background-color: $cBlackHover; } - - &:hover::after { - background-color: $cBlueHover; - } } }