Improvements: Option input & color bar components

2016-02-16 19:10:37 +01:00
parent fee10f9e2e
commit 351b645ac8
2 changed files with 74 additions and 12 deletions
@@ -0,0 +1,43 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Option input
+
+```
+<fieldset>
+  <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
+  <div class="u-iBlock">
+    <div class="CDB-OptionInput">
+      <span class="CDB-ColorBar CDB-ColorBar--mBorderRadius" style="background-color: #9DE0AD;"></span>
+    </div>
+  </div>
+</fieldset>
+ ```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-OptionInput {
+  @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-OptionInput.is-active {
+  border: 1px solid $cBlue;
+}