From 820a4dad4205bd555fa077c6f8232785bd218017 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 8 Feb 2016 17:46:57 +0100 Subject: [PATCH 1/9] Dropdown component --- src/scss/cdb-components/forms/dropdowns.scss | 117 +++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/scss/cdb-components/forms/dropdowns.scss diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss new file mode 100644 index 0000000..59ab81b --- /dev/null +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -0,0 +1,117 @@ +// Dropdown styles +// ---------------------------------------------- + +/* SG +# Forms/Dropdowns + +``` +
+ +
+
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+ +
+
    +
  • + selected +
    • +
  • + active +
    • +
  • + disabled +
    • +
  • + disabled +
    • +
+
+
+
+``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-DropdownContainer { + position: relative; + height: 250px; +} +.CDB-Dropdown { + height: 200px; + position: absolute; + top: 40px; + font-size: 0; +} +.CDB-Dropdown-calculations { + display: inline-block; + width: $baseSize * 11; + height: 100%; + padding: $sMargin-element; + border-right: 1px solid $cMainLine; + border-radius: 3px 0 0 3px; + background-color: $cSecondaryBackground; + box-sizing: border-box; +} +.CDB-Dropdown-calculationsElement { + font-size: $sFontSize-small; + + &:not(:last-child) { + margin-bottom: $sLineHeight-medium; + } +} +.CDB-Dropdown-options { + display: inline-block; + width: $baseSize * 20; + border-radius: 0 3px 3px 0; + background-color: $cWhite; + vertical-align: top; +} +.CDB-Dropdown-optionsElement { + padding: 12px 10px; + border-bottom: 1px solid $cMainLine; + color: $cBlue; + + &:last-child { + border-bottom: 0; + } + &:hover { + background-color: rgba(157, 224, 173, 0.2); + cursor: pointer; + } +} +.CDB-Dropdown-optionsElement.is-selected { + color: $cBlack; +} +.CDB-Dropdown-optionsElement.is-disabled { + color: $cTypo4; +} From a4878321ad6d9ade6a16f92518f35cd294b05abd Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Tue, 9 Feb 2016 18:42:52 +0100 Subject: [PATCH 2/9] Dropdown component --- src/scss/cdb-components/forms/dropdowns.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index 59ab81b..314450a 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -38,19 +38,19 @@ -
+
  • - selected + selected
  • - active + active
  • - disabled + disabled
  • - disabled + disabled
@@ -59,6 +59,7 @@ ``` */ +@import '../../cdb-utilities/mixins'; @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; @@ -67,10 +68,11 @@ height: 250px; } .CDB-Dropdown { + @include display-flex(); + @include flex-direction(row); height: 200px; position: absolute; top: 40px; - font-size: 0; } .CDB-Dropdown-calculations { display: inline-block; From b1158241b2f6e971548351adca2b89cad5b11e49 Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Tue, 9 Feb 2016 18:45:08 +0100 Subject: [PATCH 3/9] Dropdown component: minor fix --- 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 314450a..01d3495 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -70,9 +70,9 @@ .CDB-Dropdown { @include display-flex(); @include flex-direction(row); - height: 200px; position: absolute; top: 40px; + height: 200px; } .CDB-Dropdown-calculations { display: inline-block; From ff637c7b36b4cf466eaa0d8e58adce53c94b8477 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 14:10:59 +0100 Subject: [PATCH 4/9] Dropdown component: improvements --- src/scss/cdb-components/forms/dropdowns.scss | 60 +++++++++++--------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index 01d3495..7b51912 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -10,27 +10,27 @@
    -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
  • @@ -38,20 +38,12 @@
-
+
    -
  • - selected -
    • -
  • - active -
    • -
  • - disabled -
    • -
  • - disabled -
    • +
  • selected
    • +
  • active
    • +
  • disabled
    • +
  • disabled
@@ -62,6 +54,7 @@ @import '../../cdb-utilities/mixins'; @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; .CDB-DropdownContainer { position: relative; @@ -72,33 +65,31 @@ @include flex-direction(row); position: absolute; top: 40px; - height: 200px; + max-height: 200px; } .CDB-Dropdown-calculations { - display: inline-block; - width: $baseSize * 11; - height: 100%; padding: $sMargin-element; border-right: 1px solid $cMainLine; - border-radius: 3px 0 0 3px; + border-radius: 4px 0 0 4px; background-color: $cSecondaryBackground; box-sizing: border-box; } .CDB-Dropdown-calculationsElement { + margin-bottom: $sLineHeight-medium; font-size: $sFontSize-small; - &:not(:last-child) { - margin-bottom: $sLineHeight-medium; + &:last-child { + margin-bottom: 0; } } .CDB-Dropdown-options { - display: inline-block; width: $baseSize * 20; - border-radius: 0 3px 3px 0; + border-radius: 0 4px 4px 0; background-color: $cWhite; vertical-align: top; } .CDB-Dropdown-optionsElement { + @include text-overflow(); padding: 12px 10px; border-bottom: 1px solid $cMainLine; color: $cBlue; @@ -114,6 +105,21 @@ .CDB-Dropdown-optionsElement.is-selected { color: $cBlack; } +.CDB-Dropdown-optionsElement.is-disabled { + color: $cTypo4; + + &:hover { + background-color: transparent; + cursor: default; + } +} +background-color: rgba(157, 224, 173, 0.2); + cursor: pointer; + } +} +.CDB-Dropdown-optionsElement.is-selected { + color: $cBlack; +} .CDB-Dropdown-optionsElement.is-disabled { color: $cTypo4; } From 0da897e3b7d56a96e5360550e3c49847c3429b7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 14:16:51 +0100 Subject: [PATCH 5/9] Dropdown component: improvements --- src/scss/cdb-components/forms/dropdowns.scss | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index 7b51912..a62a826 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -76,6 +76,7 @@ } .CDB-Dropdown-calculationsElement { margin-bottom: $sLineHeight-medium; + color: $cMainDark; font-size: $sFontSize-small; &:last-child { @@ -103,7 +104,7 @@ } } .CDB-Dropdown-optionsElement.is-selected { - color: $cBlack; + color: $cMainDark; } .CDB-Dropdown-optionsElement.is-disabled { color: $cTypo4; @@ -113,13 +114,3 @@ cursor: default; } } -background-color: rgba(157, 224, 173, 0.2); - cursor: pointer; - } -} -.CDB-Dropdown-optionsElement.is-selected { - color: $cBlack; -} -.CDB-Dropdown-optionsElement.is-disabled { - color: $cTypo4; -} From 0ba08fd8de429f1da73bf8b67835f91e81e74edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 14:58:00 +0100 Subject: [PATCH 6/9] Dropdown component: minor fixes --- src/scss/cdb-components/forms/dropdowns.scss | 70 +++++++++----------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index a62a826..aedd0b0 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -8,44 +8,40 @@
-
-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
-
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
-
-
    -
  • selected
    • -
  • active
    • -
  • disabled
    • -
  • disabled
    • -
-
+
    +
  • selected
    • +
  • active
    • +
  • disabled
    • +
  • disabled
    • +
``` From 0aeaa4e90497d067d6e510bd747a0aa8f16fe4ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 15:02:22 +0100 Subject: [PATCH 7/9] Dropdown component: solved errors after merging master changes --- src/scss/cdb-components/forms/dropdowns.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index aedd0b0..cc3cdab 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -72,7 +72,7 @@ } .CDB-Dropdown-calculationsElement { margin-bottom: $sLineHeight-medium; - color: $cMainDark; + color: $cMainBg; font-size: $sFontSize-small; &:last-child { @@ -100,10 +100,10 @@ } } .CDB-Dropdown-optionsElement.is-selected { - color: $cMainDark; + color: $cMainBg; } .CDB-Dropdown-optionsElement.is-disabled { - color: $cTypo4; + color: $cHintText; &:hover { background-color: transparent; From 161af4654f442d5b84127aaeed03a0172c176870 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 15:03:00 +0100 Subject: [PATCH 8/9] Dropdown component: minor fix --- src/scss/cdb-components/forms/dropdowns.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index cc3cdab..871bd49 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -50,7 +50,6 @@ @import '../../cdb-utilities/mixins'; @import '../../cdb-variables/sizes'; @import '../../cdb-variables/colors'; -@import '../../cdb-utilities/mixins'; .CDB-DropdownContainer { position: relative; From 75365d1925666cc9781a8b1c3e1244c05d886f75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Fri, 4 Mar 2016 18:19:48 +0100 Subject: [PATCH 9/9] Input dropdown: style minor fix --- src/scss/cdb-components/forms/dropdowns.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/cdb-components/forms/dropdowns.scss b/src/scss/cdb-components/forms/dropdowns.scss index 871bd49..5ca9443 100644 --- a/src/scss/cdb-components/forms/dropdowns.scss +++ b/src/scss/cdb-components/forms/dropdowns.scss @@ -95,6 +95,7 @@ } &:hover { background-color: rgba(157, 224, 173, 0.2); + color: $cMainBg; cursor: pointer; } }