Changeset 35276 for main/trunk/model-interfaces-dev/atea/style

Timestamp:

2021-08-10T11:18:31+12:00 (3 years ago)

Author:

davidb

Message:

Add grunt file watcher and tidy up sass files

Location:

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

Files:

• . (modified) (1 prop)
• asr.scss (modified) (8 diffs)

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

@@ -18 +18 @@
     --monospace-font: 16px 'Roboto Mono', sans-serif;
 }
+
+.theme-error {
+    --primary-bg-color: #ff4242;
+    --primary-fg-color: black;
+}
+
+.theme-flat {
+    --primary-bg-color: transparent;
+    --primary-fg-color: #222;
+    --primary-box-shadow: none;
+
+    &:hover {
+        --primary-bg-color: #EEE;
+    }
+}
+
+/* === End theme definitions */
+
+/* === Start component definitions === */
 
 .paper {
@@ -90 +109 @@
 }
 
-.color-primary {
-    background-color: var(--primary-bg-color);
-    color: var(--primary-fg-color);
-}
-
-.color-error {
-    background-color: var(--error-bg-color);
-    color: var(--error-fg-color);
-}
-
-.color-flat {
-    background-color: transparent;
-    color: #222;
-    box-shadow: none;
-}
-
-.color-flat:hover {
-    background-color: #EEE;
-}
+/* === End component definitions === */
 
 /* Material Design Icon sizes */
@@ -188 +189 @@
 .transcription__container {
     margin-bottom: 1em;
-}
-
-.transcription__container:last-child {
-    margin-bottom: 0;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
@@ -225 +226 @@
 .error-list-item .spaced-block {
     margin-bottom: 8px;
-}
-
-.error-list-item .spaced-block:last-child {
-    margin-bottom: 0;
+
+    &:last-child {
+        margin-bottom: 0;
+    }    
 }
 
@@ -249 +250 @@
     text-align: center;
     vertical-align: middle;
+
+    p {
+        margin: 0;
+    }
+
+    button {
+        padding: 0;
+        margin: 0;
+    }
 }
 
@@ -254 +264 @@
     width: 100%;
     border-right: 1px solid black;
-}
-
-.metadata-list-item .spaced-block:last-child {
-    margin-top: -10%;
-    margin-bottom: 20%;
-    border-right: none;
-}
-
-.metadata-list-item p {
-    margin: 0;
-}
-
-.metadata-list-item button {
-    padding: 0;
-    margin: 0;
+
+    &:last-child {
+        margin-top: -10%;
+        margin-bottom: 20%;
+        border-right: none;
+    }
 }
 
@@ -320 +321 @@
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-}
-
-.audio-slider__range:hover {
-    opacity: 1;
+
+    &:hover {
+        opacity: 1;
+    }
 }
 
@@ -336 +337 @@
     margin-left: 8px;
     width: 300;
-}
-
-.audio-slider__value::after {
-    position: absolute; 
-    top: 8px;
-    left: -7px;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-right: 7px solid rgb(85, 95, 100);
-    border-bottom: 7px solid transparent;
-    content: '';
+
+    &::after {
+        position: absolute; 
+        top: 8px;
+        left: -7px;
+        width: 0;
+        height: 0;
+        border-top: 7px solid transparent;
+        border-right: 7px solid rgb(85, 95, 100);
+        border-bottom: 7px solid transparent;
+        content: '';
+    }
 }