iguazio.dashboard-react-controls 2.2.25 → 3.0.1

package/dist/scss/common.scss

@@ -1,8 +1,23 @@
-@import './colors';
-@import './borders';
-@import './variables';
-@import './shadows';
-@import './mixins';
+@use './colors';
+@use './borders';
+@use './variables';
+@use './shadows';
+@use './mixins';
+
+:root {
+  --tipArrowLength: 10px;
+  --tipIconLength: 16px;
+  --tipArrowOffset: 20px;
+  --amethystColor: #{colors.$amethyst};
+  --brightTurquoiseColor: #{colors.$brightTurquoise};
+  --ceriseRedColor: #{colors.$ceriseRed};
+  --cornflowerBlueTwoColor: #{colors.$cornflowerBlueTwo};
+  --doveGrayColor: #{colors.$doveGray};
+  --grandisColor: #{colors.$grandis};
+  --javaColor: #{colors.$java};
+  --mulledWineColor: #{colors.$mulledWine};
+  --mischkaColor: #{colors.$mischka};
+}
 
 #root {
   z-index: 1;
@@ -59,27 +74,27 @@ textarea {
   resize: none;
 
   &::placeholder {
-    color: $spunPearl;
+    color: colors.$spunPearl;
   }
 
   &::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
-    color: $spunPearl;
+    color: colors.$spunPearl;
   }
 
   &::-moz-placeholder {
     /* Firefox 19+ */
-    color: $spunPearl;
+    color: colors.$spunPearl;
   }
 
   &:-ms-input-placeholder {
     /* IE 10+ */
-    color: $spunPearl;
+    color: colors.$spunPearl;
   }
 
   &:-moz-placeholder {
     /* Firefox 18- */
-    color: $spunPearl;
+    color: colors.$spunPearl;
   }
 
   &:disabled {
@@ -95,7 +110,7 @@ textarea {
 }
 
 .link {
-  color: $cornflowerBlue;
+  color: colors.$cornflowerBlue;
   cursor: pointer;
   line-height: 20px;
 
@@ -106,7 +121,7 @@ textarea {
 }
 
 .warning-text {
-  color: $amaranth;
+  color: colors.$amaranth;
   padding: 5px 0;
   line-height: 1.5;
   font-size: 13px;
@@ -141,19 +156,19 @@ textarea {
   max-height: 500px;
   overflow: hidden;
   overflow-y: auto;
-  background-color: $white;
+  background-color: colors.$white;
 
   .form-table__row {
     display: flex;
     align-items: center;
     min-height: $tableHeaderHeight;
-    border-bottom: $primaryBorder;
-    background-color: $white;
+    border-bottom: borders.$primaryBorder;
+    background-color: colors.$white;
     padding: 5px 0;
 
     &.form-table__row_excluded {
       .form-table__cell {
-        color: $spunPearl;
+        color: colors.$spunPearl;
       }
     }
 
@@ -163,7 +178,7 @@ textarea {
 
     &:not(.no-hover):hover {
       &:not(.form-table__row_invalid) {
-        background-color: $alabaster;
+        background-color: colors.$alabaster;
       }
 
       .form-table__actions-cell {
@@ -172,7 +187,7 @@ textarea {
     }
 
     &.form-table__row_active {
-      background-color: $alabaster;
+      background-color: colors.$alabaster;
 
       .form-table__cell {
         &:not(.form-table__actions-cell) {
@@ -183,7 +198,7 @@ textarea {
     }
 
     &.form-table__row_invalid {
-      background-color: rgba($amaranth, 0.15);
+      background-color: rgba(colors.$amaranth, 0.15);
     }
 
     &_multiline {
@@ -202,7 +217,7 @@ textarea {
   }
 
   .form-table__header-row {
-    border-top: $primaryBorder;
+    border-top: borders.$primaryBorder;
     font-size: 18px;
     font-weight: bold;
     top: 0;
@@ -225,7 +240,7 @@ textarea {
       justify-content: space-between;
       min-width: 44px;
       padding: 10px;
-      color: $cornflowerBlue;
+      color: colors.$cornflowerBlue;
       font-size: 15px;
       line-height: 18px;
 
@@ -234,7 +249,7 @@ textarea {
         height: 20px;
 
         rect {
-          fill: $cornflowerBlue;
+          fill: colors.$cornflowerBlue;
         }
       }
     }
@@ -245,10 +260,10 @@ textarea {
     overflow: hidden;
     align-items: center;
     padding: 3px 10px;
-    color: $primary;
+    color: colors.$primary;
 
     &.disabled {
-      color: $spunPearl;
+      color: colors.$spunPearl;
     }
 
     .form-table__name {
@@ -258,7 +273,7 @@ textarea {
       &.form-table__name_with-asterisk {
         &::after {
           content: ' * ';
-          color: $amaranth;
+          color: colors.$amaranth;
           margin-right: 10px;
         }
       }
@@ -294,7 +309,7 @@ textarea {
     flex: 0 1 auto;
     visibility: hidden;
     justify-content: flex-end;
-    min-width: $actionsCellWidth;
+    min-width: variables.$actionsCellWidth;
     padding: 0;
 
     & > * {
@@ -314,11 +329,11 @@ textarea {
 
   .form-table__action-row {
     button {
-      color: $spunPearl;
+      color: colors.$spunPearl;
 
       svg {
         rect {
-          fill: $spunPearl;
+          fill: colors.$spunPearl;
         }
       }
     }
@@ -339,9 +354,9 @@ textarea {
   max-width: 100%;
   max-height: 100%;
   padding: 10px;
-  background-color: $white;
-  border-radius: $mainBorderRadius;
-  box-shadow: $hiddenChipsBlockShadow;
+  background-color: colors.$white;
+  border-radius: variables.$mainBorderRadius;
+  box-shadow: shadows.$hiddenChipsBlockShadow;
   z-index: 9;
   opacity: 0;
 
@@ -354,7 +369,7 @@ textarea {
 
   &_bottom {
     &::after {
-      @include hiddenChipBlockArrow();
+      @include mixins.hiddenChipBlockArrow();
 
       top: -6px;
     }
@@ -362,7 +377,7 @@ textarea {
 
   &_top {
     &::before {
-      @include hiddenChipBlockArrow();
+      @include mixins.hiddenChipBlockArrow();
 
       top: calc(100% - 6px);
     }

package/dist/scss/fonts.scss

@@ -12,6 +12,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-300.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg');
 }
+
 /* roboto-regular - latin */
 @font-face {
   font-family: 'Roboto';
@@ -26,6 +27,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg');
 }
+
 /* roboto-italic - latin */
 @font-face {
   font-family: 'Roboto';
@@ -40,6 +42,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg');
 }
+
 /* roboto-500 - latin */
 @font-face {
   font-family: 'Roboto';
@@ -54,6 +57,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg');
 }
+
 /* roboto-500italic - latin */
 @font-face {
   font-family: 'Roboto';
@@ -68,6 +72,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg');
 }
+
 /* roboto-700 - latin */
 @font-face {
   font-family: 'Roboto';
@@ -82,6 +87,7 @@
     /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700.ttf') format('truetype'),
     /* Legacy iOS */ url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg');
 }
+
 /* roboto-700italic - latin */
 @font-face {
   font-family: 'Roboto';