Changeset 35300

Timestamp:

2021-08-17T10:22:24+12:00 (3 years ago)

Author:

davidb

Message:

Implement checkbox styles

Location:

main/trunk/model-interfaces-dev/atea/style

Files:

• asr.scss (modified) (2 diffs)
• material.scss (modified) (2 diffs)

main/trunk/model-interfaces-dev/atea/style/asr.scss

@@ -14 +14 @@
 hr {
     @extend .divider;
+}
+
+input[type="checkbox"] {
+    @extend .switch;
 }
 
@@ -97 +101 @@
 
     & .transcription__list {
-        margin-left: 1em;
+        margin-left: 2em;
     }
 }

main/trunk/model-interfaces-dev/atea/style/material.scss

@@ -1 +1 @@
 /* === Start theme definitions === */
 
+$primary-bg-color-l1: #249ccf;
+
 :root {
+    --primary-bg-color-l1: #249ccf;
     --primary-bg-color: #2191c0;
     --primary-bg-color-d1: #2785ad;
@@ -182 +185 @@
 }
 
+/* Switches */
+
+// https://codepen.io/avstorm/pen/jOEpBLW
+.switch
+{
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+
+    height: 16px;
+    width: 38px;
+    border-radius: 8px;
+    display: inline-block;
+    position: relative;
+    margin: 1em;
+    background-color: #c7c7c7;
+    @include transition-set;
+
+    &:focus {
+        outline: 0;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        display: inline-block;
+        top: -4px;
+        left: -4px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: white;
+        box-shadow: var(--primary-box-shadow-thin);
+        @include transition-set;
+    }
+
+    &:checked {
+        background-color: scale-color($primary-bg-color-l1, $alpha: -60%);
+
+        &::after {
+            transform: translatex(22px);
+            background: var(--primary-bg-color-l1);
+        }
+    }
+}
+
 /* === End component definitions === */