From 4979ba0e8f6039f09b8d716f9c2470912916d543 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 4 Feb 2016 16:26:54 +0100 Subject: [PATCH 01/19] Color input component --- .../cdb-components/forms/color_input.scss | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/scss/cdb-components/forms/color_input.scss diff --git a/src/scss/cdb-components/forms/color_input.scss b/src/scss/cdb-components/forms/color_input.scss new file mode 100644 index 0000000..2f74051 --- /dev/null +++ b/src/scss/cdb-components/forms/color_input.scss @@ -0,0 +1,48 @@ +// Color input styles +// ---------------------------------------------- + +/* SG +# Forms/Color input + +``` +
+

COLOR

+
+
+ +
+
+
+ ``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-ColorInput { + @include display-flex(); + @include align-items(center); + width: $baseSize * 20; + height: $baseSize * 4; + padding: $baseSize; + border: 1px solid $cMainLine; + border-radius: $baseSize / 2; + box-sizing: border-box; + cursor: pointer; + + &:hover { + border: 1px solid $cHoverLine; + } + &:focus { + border: 1px solid $cBlue; + } +} + +.CDB-ColorInput-colorBar { + @include inline-block(); + width: 100%; + height: $baseSize / 2; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: $baseSize; +} From 351b645ac88e9270e4b2c4a597f3e2db1eb7d343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 16 Feb 2016 19:10:37 +0100 Subject: [PATCH 02/19] Improvements: Option input & color bar components --- src/scss/cdb-components/forms/color_bar.scss | 67 +++++++++++++++++++ .../{color_input.scss => option_input.scss} | 19 ++---- 2 files changed, 74 insertions(+), 12 deletions(-) create mode 100644 src/scss/cdb-components/forms/color_bar.scss rename src/scss/cdb-components/forms/{color_input.scss => option_input.scss} (61%) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss new file mode 100644 index 0000000..1604fdd --- /dev/null +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -0,0 +1,67 @@ +// Color input styles +// ---------------------------------------------- + +/* SG +# Forms/Color bar + +``` + + + + +
+ + + + + + +
+ +
+ + + + + + +
+ ``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + +.CDB-ColorBarContainer { + @include display-flex(); + @include flex-direction(row); +} +.CDB-ColorBar { + width: 100%; + height: $baseSize / 2; + border: 1px solid rgba(0, 0, 0, 0.2); + + &:last-child { + margin-right: 0; + } +} +.CDB-ColorBar.CDB-ColorBar--small { + width: $baseSize * 2; +} +.CDB-ColorBar.CDB-ColorBar--med { + width: 29px; +} +.CDB-ColorBar.CDB-ColorBar--sBorderRadius { + border-radius: 2px; +} +.CDB-ColorBar.CDB-ColorBar--mBorderRadius { + border-radius: 6px; +} +.CDB-ColorBar.CDB-ColorBar--msBorderRadius { + border-radius: 6px 2px 2px 6px; +} +.CDB-ColorBar.CDB-ColorBar--smBorderRadius { + border-radius: 2px 6px 6px 2px; +} + diff --git a/src/scss/cdb-components/forms/color_input.scss b/src/scss/cdb-components/forms/option_input.scss similarity index 61% rename from src/scss/cdb-components/forms/color_input.scss rename to src/scss/cdb-components/forms/option_input.scss index 2f74051..3a99b21 100644 --- a/src/scss/cdb-components/forms/color_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -2,14 +2,14 @@ // ---------------------------------------------- /* SG -# Forms/Color input +# Forms/Option input ```
-

COLOR

+
-
- +
+
@@ -20,7 +20,7 @@ @import '../../cdb-variables/colors'; @import '../../cdb-utilities/mixins'; -.CDB-ColorInput { +.CDB-OptionInput { @include display-flex(); @include align-items(center); width: $baseSize * 20; @@ -38,11 +38,6 @@ border: 1px solid $cBlue; } } - -.CDB-ColorInput-colorBar { - @include inline-block(); - width: 100%; - height: $baseSize / 2; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: $baseSize; +.CDB-OptionInput.is-active { + border: 1px solid $cBlue; } From 55fae253d2aba958dc18ce5d3aeae2a420001216 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 18 Feb 2016 12:14:54 +0100 Subject: [PATCH 03/19] Color bar component: several improvements --- src/scss/cdb-components/forms/color_bar.scss | 91 +++++++++++++------ .../cdb-components/forms/option_input.scss | 2 +- 2 files changed, 65 insertions(+), 28 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 1604fdd..13f556b 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -5,26 +5,48 @@ # Forms/Color bar ``` - - - -
- - - - - - + + + + + +
- - - - - - + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ +
+ +
+
``` */ @@ -41,6 +63,7 @@ width: 100%; height: $baseSize / 2; border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; &:last-child { margin-right: 0; @@ -52,16 +75,30 @@ .CDB-ColorBar.CDB-ColorBar--med { width: 29px; } -.CDB-ColorBar.CDB-ColorBar--sBorderRadius { - border-radius: 2px; -} -.CDB-ColorBar.CDB-ColorBar--mBorderRadius { - border-radius: 6px; -} -.CDB-ColorBar.CDB-ColorBar--msBorderRadius { - border-radius: 6px 2px 2px 6px; -} -.CDB-ColorBar.CDB-ColorBar--smBorderRadius { - border-radius: 2px 6px 6px 2px; +.CDB-ColorBar.CDB-ColorBar--long { + width: $baseSize * 12; } +.CDB-ColorBar.CDB-ColorBar--compacted { + border-right: 0; + border-left: 0; + border-radius: 0; + &:first-child { + border-left: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px 0 0 6px; + } + &:last-child { + border-right: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0 6px 6px 0; + } +} +.CDB-ColorBar.CDB-ColorBar--uBorder { + border-radius: 2px; + + &:first-child { + border-radius: 6px 2px 2px 6px; + } + &:last-child { + border-radius: 2px 6px 6px 2px; + } +} diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 3a99b21..47e34cd 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -9,7 +9,7 @@
- +
From 444cb84331e658805ba316af0bf9587649cbe818 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 18 Feb 2016 14:34:02 +0100 Subject: [PATCH 04/19] Color bar component: improvements and gradient border fix --- src/scss/cdb-components/forms/color_bar.scss | 100 ++++++++++-------- .../cdb-components/forms/option_input.scss | 2 +- 2 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 13f556b..76dd2c7 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -6,99 +6,107 @@ ```
- - - - - - + + + + + +
- - - - - - + + + + + +
- - - - - - + + + + + +
- - - - - - +
- -
- -
- +
``` */ -@import '../../cdb-variables/sizes'; -@import '../../cdb-variables/colors'; @import '../../cdb-utilities/mixins'; .CDB-ColorBarContainer { @include display-flex(); @include flex-direction(row); + max-width: 215px; } .CDB-ColorBar { + position: relative; width: 100%; - height: $baseSize / 2; - border: 1px solid rgba(0, 0, 0, 0.2); + height: 6px; border-radius: 6px; + &::after { + content:""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + } &:last-child { margin-right: 0; } } -.CDB-ColorBar.CDB-ColorBar--small { - width: $baseSize * 2; -} -.CDB-ColorBar.CDB-ColorBar--med { - width: 29px; -} -.CDB-ColorBar.CDB-ColorBar--long { - width: $baseSize * 12; -} .CDB-ColorBar.CDB-ColorBar--compacted { - border-right: 0; - border-left: 0; border-radius: 0; + &::after { + border-width: 1px 0; + border-radius: 0; + } &:first-child { - border-left: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px 0 0 6px; + &::after { + border-width: 1px 0 1px 1px; + border-radius: 6px 0 0 6px; + } } &:last-child { - border-right: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0 6px 6px 0; + &::after { + border-width: 1px 1px 1px 0; + border-radius: 0 6px 6px 0; + } } } .CDB-ColorBar.CDB-ColorBar--uBorder { border-radius: 2px; + &::after { + border-radius: 2px; + } &:first-child { border-radius: 6px 2px 2px 6px; + &::after { + border-radius: 6px 2px 2px 6px; + } } &:last-child { border-radius: 2px 6px 6px 2px; + &:after { + border-radius: 2px 6px 6px 2px; + } } } diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 47e34cd..ca2e43a 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -9,7 +9,7 @@
- +
From bde6ec4559093ba84f5515afc14709d0278bcc4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 18 Feb 2016 20:02:29 +0100 Subject: [PATCH 05/19] Option input component: improvements --- src/scss/cdb-components/forms/color_bar.scss | 61 ++++++++-------- .../cdb-components/forms/option_input.scss | 73 +++++++++++++++++-- 2 files changed, 96 insertions(+), 38 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 76dd2c7..1b2ab1c 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -5,40 +5,40 @@ # Forms/Color bar ``` -
- - - - - - -
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
-
- - - - - - -
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
-
- - - - - - -
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
-
- -
+
    +
  • +
-
- -
+
    +
  • +
``` */ @@ -47,6 +47,7 @@ .CDB-ColorBarContainer { @include display-flex(); @include flex-direction(row); + width: 100%; max-width: 215px; } .CDB-ColorBar { diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index ca2e43a..4cc8d86 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -5,15 +5,46 @@ # Forms/Option input ``` -
- -
-
- -
+
+
+ 8px
-
- ``` + +
+ solid +
+ +
    +
  • +
+ + +
+
    +
  • +
+
+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
+
+ +
+
    +
  • +
  • +
  • +
  • +
+
+``` */ @import '../../cdb-variables/sizes'; @@ -23,6 +54,7 @@ .CDB-OptionInput { @include display-flex(); @include align-items(center); + @include align-content(center); width: $baseSize * 20; height: $baseSize * 4; padding: $baseSize; @@ -41,3 +73,28 @@ .CDB-OptionInput.is-active { border: 1px solid $cBlue; } +.CDB-OptionInput-element { + @include display-flex(); + @include align-content(center); + color: $cMainBg; + font-size: $sFontSize-medium; + box-sizing: content-box; + + &::after { + content: "·"; + color: $cHintText; + padding: 9px; + } + &:last-child { + &::after { + content: ""; + padding: 0; + } + } +} +.CDB-OptionInput--text { + padding: 9px 0; +} +.CDB-OptionInput--text.is-active { + border-bottom: 1px solid $cMainBg; +} From 89f0e13faecd3d223817c2bbb63c459670a5d7ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 18 Feb 2016 20:05:07 +0100 Subject: [PATCH 06/19] Color bar component: style fixes --- src/scss/cdb-components/forms/color_bar.scss | 4 ++-- src/scss/cdb-components/forms/option_input.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 1b2ab1c..95e4edb 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -57,7 +57,6 @@ border-radius: 6px; &::after { - content:""; position: absolute; top: 0; right: 0; @@ -65,6 +64,7 @@ left: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; + content:""; } &:last-child { margin-right: 0; @@ -106,7 +106,7 @@ } &:last-child { border-radius: 2px 6px 6px 2px; - &:after { + &::after { border-radius: 2px 6px 6px 2px; } } diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 4cc8d86..f6fb9eb 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -81,14 +81,14 @@ box-sizing: content-box; &::after { - content: "·"; color: $cHintText; padding: 9px; + content: "·"; } &:last-child { &::after { - content: ""; padding: 0; + content: ""; } } } From 3a2513e2a2e727b546c39b3cdfa0e1f16814af8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Thu, 18 Feb 2016 20:06:30 +0100 Subject: [PATCH 07/19] Color bar & option input components: syntax fixes --- src/scss/cdb-components/forms/color_bar.scss | 2 +- src/scss/cdb-components/forms/option_input.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 95e4edb..9e577d3 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -64,7 +64,7 @@ left: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; - content:""; + content: ''; } &:last-child { margin-right: 0; diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index f6fb9eb..4b57d49 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -13,7 +13,7 @@
solid
- +
@@ -81,14 +81,14 @@ box-sizing: content-box; &::after { - color: $cHintText; padding: 9px; - content: "·"; + color: $cHintText; + content: '·'; } &:last-child { &::after { padding: 0; - content: ""; + content: ''; } } } From ff89163f588f88eb920838cfc4e3a0979fe38b83 Mon Sep 17 00:00:00 2001 From: Maria Checa Date: Fri, 19 Feb 2016 16:35:49 +0100 Subject: [PATCH 08/19] Input option markup improvements --- .../cdb-components/forms/option_input.scss | 79 ++++++++++++------- 1 file changed, 49 insertions(+), 30 deletions(-) diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 4b57d49..443e0bd 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -5,43 +5,59 @@ # Forms/Option input ``` -
-
- 8px -
+
+
    +
  • + 8px +
    • -
    - solid -
    - -
      -
    • +
    • + solid +
      • + +
    • +
        +
      • +
      +
-
    -
  • +
      +
    • +
        +
      • +
      +
-
    -
  • -
  • -
  • -
  • -
  • -
  • +
      +
    • +
        +
      • +
      • +
      • +
      • +
      • +
      • +
      +
-
    -
  • -
  • -
  • -
  • +
      +
    • +
        +
      • +
      • +
      • +
      • +
      +
``` @@ -53,11 +69,9 @@ .CDB-OptionInput { @include display-flex(); - @include align-items(center); @include align-content(center); width: $baseSize * 20; height: $baseSize * 4; - padding: $baseSize; border: 1px solid $cMainLine; border-radius: $baseSize / 2; box-sizing: border-box; @@ -73,8 +87,15 @@ .CDB-OptionInput.is-active { border: 1px solid $cBlue; } -.CDB-OptionInput-element { +.CDB-OptionInput-container { @include display-flex(); + @include align-items(center); + @include align-content(center); + margin: 0 $baseSize; +} +.CDB-OptionInput-option { + @include display-flex(); + @include align-items(center); @include align-content(center); color: $cMainBg; font-size: $sFontSize-medium; @@ -92,9 +113,7 @@ } } } -.CDB-OptionInput--text { +.CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { padding: 9px 0; -} -.CDB-OptionInput--text.is-active { border-bottom: 1px solid $cMainBg; } From 9e0a1d463e3866a69a675343cc8c9a86c966b2de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 22 Feb 2016 12:46:12 +0100 Subject: [PATCH 09/19] Input option component: flexbox fixed --- src/scss/cdb-components/forms/option_input.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 443e0bd..1709d26 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -14,7 +14,7 @@
  • solid
    • - +
    • @@ -68,8 +68,6 @@ @import '../../cdb-utilities/mixins'; .CDB-OptionInput { - @include display-flex(); - @include align-content(center); width: $baseSize * 20; height: $baseSize * 4; border: 1px solid $cMainLine; @@ -89,14 +87,16 @@ } .CDB-OptionInput-container { @include display-flex(); - @include align-items(center); @include align-content(center); + @include align-items(center); margin: 0 $baseSize; } .CDB-OptionInput-option { @include display-flex(); @include align-items(center); @include align-content(center); + width: 100%; + height: 100%; color: $cMainBg; font-size: $sFontSize-medium; box-sizing: content-box; From 533dd3b167e50e8c96185f88d9b6a50832649732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 22 Feb 2016 15:43:26 +0100 Subject: [PATCH 10/19] Input option component: minor changes --- .../cdb-components/forms/option_input.scss | 52 +++++++++++++------ 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 1709d26..1d41e53 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -5,25 +5,39 @@ # Forms/Option input ``` -
      +
      + -
      + + +
      + -
      +
      + -
      +
      + ``` */ @@ -95,9 +109,8 @@ @include display-flex(); @include align-items(center); @include align-content(center); - width: 100%; + width: auto; height: 100%; - color: $cMainBg; font-size: $sFontSize-medium; box-sizing: content-box; @@ -107,12 +120,21 @@ content: '·'; } &:last-child { + width: 100%; + &::after { padding: 0; content: ''; } } } +.CDB-OptionInput-optionContent { + color: $cMainBg; + + &:hover { + text-decoration: none; + } +} .CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { padding: 9px 0; border-bottom: 1px solid $cMainBg; From e9bdd7017c97406a553af1c9da78471659cce211 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 22 Feb 2016 17:13:50 +0100 Subject: [PATCH 11/19] Option input content: fixes --- src/scss/cdb-components/forms/option_input.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 1d41e53..0e37183 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -88,6 +88,7 @@ border-radius: $baseSize / 2; box-sizing: border-box; cursor: pointer; + vertical-align: middle; &:hover { border: 1px solid $cHoverLine; @@ -115,7 +116,7 @@ box-sizing: content-box; &::after { - padding: 9px; + padding: 0 9px; color: $cHintText; content: '·'; } @@ -129,6 +130,9 @@ } } .CDB-OptionInput-optionContent { + @include display-flex(); + @include align-items(center); + height: 100%; color: $cMainBg; &:hover { @@ -136,6 +140,5 @@ } } .CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { - padding: 9px 0; border-bottom: 1px solid $cMainBg; } From 475376be43f4893d5103db92bd4072a4ad7bcb0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Mon, 22 Feb 2016 18:09:52 +0100 Subject: [PATCH 12/19] Option input component: ninja fixes --- src/scss/cdb-components/forms/color_bar.scss | 35 ++++++++++++------- .../cdb-components/forms/option_input.scss | 14 ++++---- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 9e577d3..59672e2 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -6,21 +6,21 @@ ```
        -
      • -
      • -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
      • +
      • +
        -
      • -
      • -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
      • +
      • +
        @@ -70,6 +70,13 @@ margin-right: 0; } } +.CDB-ColorBar.CDB-ColorBar--sMargin { + margin-right: 4px; + + &:last-child { + margin-right: 0; + } +} .CDB-ColorBar.CDB-ColorBar--compacted { border-radius: 0; @@ -92,7 +99,8 @@ } } } -.CDB-ColorBar.CDB-ColorBar--uBorder { +.CDB-ColorBar.CDB-ColorBar--sRadius { + margin-right: 2px; border-radius: 2px; &::after { @@ -105,6 +113,7 @@ } } &:last-child { + margin-right: 0; border-radius: 2px 6px 6px 2px; &::after { border-radius: 2px 6px 6px 2px; diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 0e37183..3886b06 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -5,23 +5,23 @@ # Forms/Option input ``` -
      • - solid +
      • - +
      - +
  • - +
    • - + +
  • +
    • -
  • - +
  • +
    • -
  • -
    • -
    +
    + +
      -
    • - +
    • +
      • -
    • -
    - - - +
    + +
    +
    + + + +
    +
    + + ``` */ @@ -82,7 +84,7 @@ @import '../../cdb-utilities/mixins'; .CDB-OptionInput { - width: $baseSize * 20; + width: 100%; height: $baseSize * 4; border: 1px solid $cMainLine; border-radius: $baseSize / 2; @@ -106,7 +108,7 @@ @include align-items(center); margin: 0 $baseSize; } -.CDB-OptionInput-option { +.CDB-OptionInput-item { @include display-flex(); @include align-items(center); @include align-content(center); @@ -129,7 +131,7 @@ } } } -.CDB-OptionInput-optionContent { +.CDB-OptionInput-content { @include display-flex(); @include align-items(center); height: 100%; @@ -141,6 +143,6 @@ text-decoration: none; } } -.CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent { +.CDB-OptionInput-item.is-active > .CDB-OptionInput-content { border-bottom: 1px solid $cMainBg; } From 33608a1197403293714e3dc586836c42247613f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 23 Feb 2016 10:51:27 +0100 Subject: [PATCH 15/19] Color bar component: minor fixes --- src/scss/cdb-components/forms/color_bar.scss | 2 +- .../cdb-components/forms/option_input.scss | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 9e41642..0bfd1ff 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -111,4 +111,4 @@ .CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child { margin-right: 0; border-radius: 3px 6px 6px 3px; -} \ No newline at end of file +} diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index b609508..4e0cd11 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -53,12 +53,12 @@ @@ -69,10 +69,10 @@ From bbc4f383c8a68f25ff53f87dca4ee87ca72d0d4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 23 Feb 2016 11:03:30 +0100 Subject: [PATCH 16/19] Color bar component: minor fix --- src/scss/cdb-components/forms/color_bar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 0bfd1ff..87c5c15 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -63,6 +63,7 @@ height: 6px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; + box-sizing: border-box; &:last-child { margin-right: 0; From 231e72cfd94abe6baf4c67b0c677a283eee07fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 23 Feb 2016 11:10:43 +0100 Subject: [PATCH 17/19] Option input component: minor fix --- 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 4e0cd11..2325393 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -118,7 +118,7 @@ box-sizing: content-box; &::after { - padding: 0 9px; + padding: 0 6px; color: $cHintText; content: '·'; } From b7847b25ab2a9cf7a9e717e4bcf1c03803af29b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 23 Feb 2016 11:23:49 +0100 Subject: [PATCH 18/19] Color bar & option input component: minor improvements --- src/scss/cdb-components/forms/color_bar.scss | 17 +++++++++-------- src/scss/cdb-components/forms/option_input.scss | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss index 87c5c15..6c2efc6 100644 --- a/src/scss/cdb-components/forms/color_bar.scss +++ b/src/scss/cdb-components/forms/color_bar.scss @@ -50,6 +50,7 @@ ``` */ +@import '../../cdb-variables/sizes'; @import '../../cdb-utilities/mixins'; .CDB-ColorBarContainer { @@ -60,9 +61,9 @@ .CDB-ColorBar { position: relative; width: 100%; - height: 6px; + height: $baseSize - 2; border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 6px; + border-radius: $baseSize - 2; box-sizing: border-box; &:last-child { @@ -79,12 +80,12 @@ bottom: 0; left: 0; border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 6px; + border-radius: $baseSize - 2; content: ''; } } .CDB-ColorBar.CDB-ColorBar--spaceMedium { - margin-right: 4px; + margin-right: $baseSize / 2; &:last-child { margin-right: 0; @@ -96,20 +97,20 @@ } .CDB-ColorBar.CDB-ColorBar--spaceless:first-child { border-width: 1px 0 1px 1px; - border-radius: 6px 0 0 6px; + border-radius: $baseSize - 2 0 0 $baseSize - 2; } .CDB-ColorBar.CDB-ColorBar--spaceless:last-child { border-width: 1px 1px 1px 0; - border-radius: 0 6px 6px 0; + border-radius: 0 $baseSize - 2 $baseSize - 2 0; } .CDB-ColorBar.CDB-ColorBar--spaceSmall { margin-right: 2px; border-radius: 2px; } .CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child { - border-radius: 6px 3px 3px 6px; + border-radius: $baseSize - 2 3px 3px $baseSize - 2; } .CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child { margin-right: 0; - border-radius: 3px 6px 6px 3px; + border-radius: 3px $baseSize - 2 $baseSize - 2 3px; } diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 2325393..8bcc2c2 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -118,7 +118,7 @@ box-sizing: content-box; &::after { - padding: 0 6px; + padding: 0 $baseSize - 2; color: $cHintText; content: '·'; } From d91131ae1697023374b0523e7ea78e0b820e35e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa=20Checa?= Date: Tue, 23 Feb 2016 11:39:19 +0100 Subject: [PATCH 19/19] Input option component: minor improvements --- src/scss/cdb-components/forms/option_input.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss index 8bcc2c2..b56f6ad 100644 --- a/src/scss/cdb-components/forms/option_input.scss +++ b/src/scss/cdb-components/forms/option_input.scss @@ -89,7 +89,6 @@ border: 1px solid $cMainLine; border-radius: $baseSize / 2; box-sizing: border-box; - cursor: pointer; vertical-align: middle; &:hover { @@ -126,8 +125,7 @@ width: 100%; &::after { - padding: 0; - content: ''; + display: none; } } }