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] 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; +}