Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/radio/radio.scss

@@ -0,0 +1,110 @@
+.RadioGroup {
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &.buttonsView {
+    display: inline-flex;
+
+    .Radio {
+      display: inline-block;
+      border: 1px solid $borderFaintColor;
+      border-radius: $radius;
+      text-align: center;
+      padding: round($padding * .7) $padding;
+      white-space: nowrap;
+      transition: 250ms color;
+
+      &:not(.checked):not(.disabled) {
+        cursor: pointer;
+        &:not(:active):focus {
+          position: relative;
+          border-color: $primary;
+          box-shadow: inset 0 0 0 1px $primary;
+        }
+      }
+
+      &.checked {
+        background-color: $radioActiveBackground;
+        color: $textColorAccent;
+        * {
+          cursor: default;
+        }
+      }
+
+      &:hover {
+        color: $textColorAccent
+      }
+
+      + .Radio {
+        margin-left: -1px;
+      }
+
+      .tick {
+        display: none;
+
+        + * {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+.Radio {
+  $tickSize: round(1.8 * $unit);
+  $tickColor: currentColor;
+  $tickColorActive: $colorInfo;
+  $tickColorFocus: $colorInfo;
+  $labelColorActive: $textColorAccent;
+
+  input[type="radio"] {
+    display: none;
+    &:checked {
+      ~ .tick {
+        color: $tickColorActive;
+        &:after {
+          content: "radio_button_checked";
+        }
+      }
+    }
+    &:disabled {
+      ~ .tick {
+        color: $tickColor;
+      }
+      ~ * {
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+    &:not(:disabled) ~ * {
+      cursor: pointer;
+    }
+  }
+
+  &:focus {
+    .tick {
+      color: $tickColorActive;
+    }
+  }
+
+  &.checked {
+    .label {
+      color: $labelColorActive;
+    }
+  }
+
+  .tick {
+    color: $tickColor;
+    font: $font-size * 1.3 "Material Icons";
+
+    &:after {
+      content: "radio_button_unchecked";
+    }
+
+    + * {
+      margin-left: .5em;
+    }
+  }
+}