scss update

Author: mathertel

css/iot.scss

@@ -1,3 +1,5 @@
+@use "base";
+
 // file: iot.scss
 // Element and card rules for iot dashboards
 // This is part of the micro css implementation.
@@ -23,11 +25,11 @@
   display: flex;
   flex-direction: column;
   background-color: var(--card-back);
-  border: $u-card-border;
-  border-radius: $u-card-radius;
+  border: base.$u-card-border;
+  border-radius: base.$u-card-radius;
 
   @media print {
-    border: 1px solid $u-text;
+    border: 1px solid base.$u-text;
   }
 
   &.small {
@@ -45,11 +47,11 @@
 
   &.active {
     .border {
-      border-color: $u-border-color-active;
+      border-color: base.$u-border-color-active;
     }
 
     .band::-webkit-slider-thumb {
-      border-color: $u-border-color-active transparent;
+      border-color: base.$u-border-color-active transparent;
     }
 
     >.block.header {
@@ -61,7 +63,7 @@
     width: 2.75rem;
     height: 2.75rem;
     float: left;
-    margin-right: $u-gutter;
+    margin-right: base.$u-gutter;
     overflow: hidden;
   }
 
@@ -75,13 +77,13 @@
   >.block {
     position: relative;
     flex: 1 1 auto;
-    padding: $u-padding-block;
+    padding: base.$u-padding-block;
     min-height: 2rem;
 
     &.header {
       background-color: var(--card-head);
-      border-top-right-radius: $u-card-radius;
-      border-top-left-radius: $u-card-radius;
+      border-top-right-radius: base.$u-card-radius;
+      border-top-left-radius: base.$u-card-radius;
       min-height: 2.75em; // with or without icon
       max-height: 4rem;
 
@@ -158,11 +160,11 @@ button,
   min-width: 6.5ch;
 
   // height: 1.4em;
-  padding: calc($u-padding-text / 2) $u-padding-text;
-  border-radius: $u-btn-radius;
-  border-color: $u-primary;
-  background-color: $u-primary;
-  color: $u-primary-text;
+  padding: calc(base.$u-padding-text / 2) base.$u-padding-text;
+  border-radius: base.$u-btn-radius;
+  border-color: base.$u-primary;
+  background-color: base.$u-primary;
+  color: base.$u-primary-text;
   cursor: pointer;
   user-select: none;
 
@@ -172,8 +174,8 @@ button,
 
   &:disabled,
   &:disabled:focus {
-    border-color: $u-disabled;
-    background-color: $u-disabled;
+    border-color: base.$u-disabled;
+    background-color: base.$u-disabled;
   }
 
   &.active {
@@ -190,7 +192,7 @@ button,
 // standard input elements
 
 option[disabled] {
-  color: $u-disabled;
+  color: base.$u-disabled;
 }
 
 // slider implemented using input[type=range] element
@@ -244,13 +246,13 @@ input.switch[type='range'] {
   }
 
   >*:first-child {
-    border-top-left-radius: $u-btn-radius;
-    border-bottom-left-radius: $u-btn-radius;
+    border-top-left-radius: base.$u-btn-radius;
+    border-bottom-left-radius: base.$u-btn-radius;
   }
 
   >*:last-child {
-    border-top-right-radius: $u-btn-radius;
-    border-bottom-right-radius: $u-btn-radius;
+    border-top-right-radius: base.$u-btn-radius;
+    border-bottom-right-radius: base.$u-btn-radius;
   }
 }
 
@@ -285,7 +287,7 @@ input.switch[type='range'] {
 .form-actions {
   display: flex;
   flex-flow: row wrap;
-  gap: $u-gutter2;
+  gap: base.$u-gutter2;
 }
 
 
@@ -344,17 +346,17 @@ input.switch[type='range'] {
 }
 
 .u-bool[value='1'] {
-  background-image: linear-gradient(145deg, color.adjust($u-on, $lightness: 30%), $u-on);
+  background-image: linear-gradient(145deg, color.adjust(base.$u-on, $lightness: 30%), base.$u-on);
 }
 
 .u-bool[value='0'] {
-  background-image: linear-gradient(145deg, color.adjust($u-off, $lightness: 30%), $u-off);
+  background-image: linear-gradient(145deg, color.adjust(base.$u-off, $lightness: 30%), base.$u-off);
 }
 
 // visualizing the output level 0...max
 .ux-levelbar {
   display: inline-block;
-  border-color: $u-primary;
+  border-color: base.$u-primary;
   border-style: solid;
   border-width: 1px;
   width: 32px;
@@ -402,7 +404,7 @@ input.switch[type='range'] {
 }
 
 .border {
-  border: $u-border;
+  border: base.$u-border;
 }
 
 /* === Display Element === */
@@ -414,7 +416,7 @@ input.switch[type='range'] {
   line-height: 10px;
   font-size: 10px;
   font-family: Verdana, Geneva, sans-serif;
-  border: 2px solid $u-border-color;
+  border: 2px solid base.$u-border-color;
 
   >span {
     box-sizing: border-box;
@@ -427,7 +429,7 @@ input.switch[type='range'] {
     background-color: transparent;
 
     &.text {
-      color: $u-text;
+      color: base.$u-text;
     }
 
     &.dot {
@@ -450,7 +452,7 @@ input.switch[type='range'] {
     height: 10px;
     overflow: hidden;
     background-color: pink;
-    color: $u-text;
+    color: base.$u-text;
     border-radius: 0.4em;
   }
 

docstyle.scss

@@ -1,4 +1,4 @@
 // file: iotstyle.scss
 
-@import './css/base';
-@import './css/doc';
+@use 'css/base';
+@use 'css/doc';

iotstyle.css

@@ -1,4 +1,4 @@
 // file: iotstyle.scss
 
-@import './css/base';
-@import './css/iot';
+@use 'css/base';
+@use 'css/iot';