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 @@