dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.61

package/assets/styles/global/_layout.scss

@@ -2,7 +2,7 @@
 .main-layout {
   grid-area: main;
   overflow: auto;
-
+  overflow-x: hidden;
   .outlet {
     display: flex;
     flex-direction: column;
@@ -36,8 +36,8 @@ HEADER {
 
   .actions-container {
     grid-area: actions;
-    margin-left: 8px;
-    align-self: center;
+    margin-left: 0px;
+    // align-self: center;
     text-align: right;
 
     &.align-start {
@@ -47,6 +47,10 @@ HEADER {
 
   .role-multi-action {
     padding: 0 $input-padding-sm;
+    background-color: var(--body-bg);
+    &:focus{
+      background-color: var(--body-bg);
+    }
   }
 }
 
@@ -69,6 +73,7 @@ HEADER {
   display: grid;
   position: relative;
   flex: 1 1 auto;
+  overflow-y: auto;
   min-height: 0px;
 
   &.dashboard-padding-left {

package/assets/styles/global/_select.scss

@@ -9,17 +9,20 @@
 }
 
 .unlabeled-select:not(.in-input) {
+  // min-height: $unlabeled-input-height;
   min-height: $unlabeled-input-height;
 }
 .col {
   > .unlabeled-select:not(.taggable) {
-    padding-top: 5px;
+    // padding-top: 5px;
   }
 }
 
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
+  min-height: 32px;
+  width: $input-width;
 
   .required {
     color: var(--error);
@@ -34,11 +37,6 @@
     float: right;
   }
 
-  &:focus-visible, &.focused {
-    @include focus-outline;
-    outline-offset: -1px;
-  }
-
   &.focused {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -53,9 +51,14 @@
 
       .vs__search {
         background-color: transparent;
+        border: 0px;
       }
 
-      .vs__dropdown-toggle,
+      .vs__dropdown-toggle{
+        border: solid var(--border-width) var(--input-border);
+        // height: 30px;
+      }
+      // .vs__dropdown-toggle,
       .vs__dropdown-toggle > * {
         background-color: transparent;
         border: transparent;
@@ -95,11 +98,14 @@
     min-height: 30px;
 
     .vs__selected {
-      min-height: 25px;
+      min-height: 20px;
       padding: 0 7px;
+      height: 21px;
+      width: unset !important;
 
       &:not(:only-child) {
-        margin-bottom: 3px;
+        margin-bottom: 2px;
+        margin-top: 2px;
       }
     }
   }
@@ -121,10 +127,10 @@
   }
 
   &.disabled {
-    border: solid var(--border-width) var(--input-disabled-border);
-
+    // border: solid var(--border-width) var(--input-disabled-border);
     .vs__dropdown-toggle, input {
       cursor: not-allowed;
+      background-color: var(--input-disabled-bg);
     }
 
     .v-select {
@@ -134,6 +140,7 @@
 
       .vs__dropdown-toggle, input {
         cursor: not-allowed;
+        background-color: var(--input-disabled-bg);
 
         .vs__selected {
           color: var(--input-disabled-text);
@@ -147,7 +154,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: $unlabaled-select-padding;
+  padding: 0px 0;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;
@@ -159,7 +166,7 @@
       height: 100%;
 
       .vs__dropdown-toggle {
-        height: 100%;
+        // height: 100%;
       }
       .vs__actions {
         width: auto;
@@ -169,25 +176,26 @@
 
   &:not(.view):not(.disabled) {
     background-color: var(--input-bg);
-    border: solid var(--border-width) var(--input-border);
+    // border: solid var(--border-width) var(--input-border);
 
     &:hover:not(.focused):not(.disabled) {
       &,
       .vs__dropdown-menu {
-        border: solid var(--border-width) var(--input-hover-border) !important;
+        box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+        // border: solid var(--border-width) var(--input-hover-border) !important;
       }
     }
 
     &.focused {
       &,
       .vs__dropdown-menu {
-        border: solid var(--border-width) var(--outline) !important;
+        // border: solid var(--border-width) var(--outline) !important;
       }
     }
 
   }
 
   .labeled-tooltip .status-icon {
-    top: $input-padding-sm;
+    // top: $input-padding-sm;
   }
 }

package/assets/styles/global/_table.scss

@@ -14,7 +14,7 @@
 
   thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid var(--border);
+    // border-bottom: 1px solid var(--border);
   }
 
   tbody + tbody {
@@ -104,3 +104,9 @@
       }
     }
   }
+
+  
+  .sortable-table tbody tr.group-row td:first-of-type {
+    background-color: var(--sortable-table-bg) !important;
+  }
+  

package/assets/styles/global/_tooltip.scss

@@ -4,16 +4,32 @@
   $center: calc(50% - #{$triangle-size});
 
   display: block !important;
-  z-index: z-index('tooltip');
+  // z-index: z-index('tooltip');
   max-width: 50vw;
 
   .v-popper__inner {
     background: var(--tooltip-bg);
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     color: var(--tooltip-text);
-    border-radius: var(--border-radius);
+    border-radius: 2px;
     padding: 8px;
   }
 
+
+  // .tooltip-arrow {
+  //   width: 0;
+  //   height: 0;
+  //   border: 0 solid transparent;
+  //   position: absolute;
+  //   z-index: 1;
+
+  //   &:after {
+  //     position: absolute;
+  //     border: $triangle-inner-size solid transparent;
+  //     content: '';
+  //   }
+  // }
+
   .v-popper__arrow-container {
     border: 0 solid transparent;
     z-index: 1;
@@ -27,7 +43,9 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-top-color: var(--tooltip-bg);
+        // border-top-color: var(--tooltip-bg);
+        // border-top-color: var(--tooltip-bg);
+        border-top-color:var(--border);
       }
     }
   }
@@ -37,7 +55,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-bottom-color: var(--tooltip-bg);
+        border-bottom-color: var(--border);
         background: transparent;
       }
     }
@@ -47,7 +65,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-right-color: var(--tooltip-bg);
+        border-right-color: var(--border);
       }
     }
   }
@@ -56,7 +74,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-left-color: var(--tooltip-bg);
+        border-left-color: var(--border);
       }
     }
   }
@@ -105,13 +123,14 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
+  border-radius: 2px;
 
   .v-popper__inner {
+    border-radius: 2px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: var(--border-radius-lg);
+    border-radius: 0px;
     border: none;
 
     a {
@@ -128,7 +147,9 @@
 }
 
 .v-popper__popper.v-popper--theme-dropdown {
+  border-radius: 0px;
   z-index: z-index('tooltip');
+  border: 1px solid #d9d9d9 !important;
 
   &.containerLogsDropdown, &.fleet-summary-tooltip{
     .v-popper__arrow-container {
@@ -136,6 +157,10 @@
     }
   }
 }
+.v-popper__popper .v-popper__arrow-container {
+  display: none;
+}
+
 
 .v-popper {
   display: inline;
@@ -162,4 +187,31 @@
 //icon tooltip
 .icon-info.v-popper--has-tooltip {
   font-size: 14px;
+  color: var(--primary);
+}
+
+// .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner, .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
+//   left: -3px;
+// }
+.v-popper__popper.v-popper--theme-tooltip .v-popper__arrow-container .v-popper__arrow-inner{
+  border: 7px solid #fff;
+}
+.v-popper__arrow-inner{
+  visibility: visible
 }
+
+.v-popper__popper{
+
+  border: 0px;
+}
+
+
+.custom-dropdown{
+  .v-popper__inner {
+    padding: 0px;
+  }
+}
+
+// .v-popper__arrow-container {
+//   display: none; 
+// }

package/assets/styles/themes/_dark.scss

@@ -38,6 +38,8 @@
 
   --slate: #{$slate};
 
+  --lightest                   : #{rgba($lightest, 1)};
+
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};
@@ -97,6 +99,7 @@
   --modal-border               : #{$medium};
   --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
   --overlay-bg                 : #{rgba($darkest, 0.75)};
+  --overlay-model-bg           : rgba($darkest, 0.45);
   --shadow                     : #{rgba($darkest, 0.9)};
 
   --checkbox-tick              : #{$lightest};

package/assets/styles/themes/_light.scss

@@ -1,18 +1,20 @@
 // Local variables for reused colors
 //light main text
-$darkest   : #141419;
+$darkest   : #333;
 
 //light secondary
-$darker    : #6C6C76;
+$darker    : #333;
 
 //light disabled
-$dark      : #B6B6C2;
+$dark      : #ffffff;
+
+$scroll_dark: #8b8b8b;
 
 //light border and buttons
-$medium    : #DCDEE7;
+$medium    : #d7d7d7;
 
-//light inputs
-$light     : #EEEFF4;
+//light inputs 
+$light     : #E8F4FF;
 
 //light sidebar and box
 $lighter   : #F4F5FA;
@@ -21,17 +23,20 @@ $lighter   : #F4F5FA;
 $lightest  : #FFFFFF;
 
 //color for items that are not enabled
-$disabled  : $medium;
+// $disabled  : $medium;
+$disabled  : #f5f5f5;
 
-$primary         : #3D98D3;
+$primary         : #1890FF;
 $secondary       : $darker;
-$link            : #3D98D3;
+// $link            : #3D98D3;
+$link            : #1890FF;
 
 // Status colors
-$success         : #5D995D;
+$success         : #1890FF;
 $warning         : #DAC342;
 $error           : #F64747;
-$info            : #3D98D3;
+// $error           : #A30014;
+$info            : #1890FF;
 
 $contrasted-dark: $darkest !default;
 $contrasted-light: $lightest !default;
@@ -40,20 +45,20 @@ $contrasted-light: $lightest !default;
 // The terminal alway uses a light background, so okay to use a fixed color
 $selected: rgba(#3D98D3, .5);
 
-$drag-over: #DCDEE7;
+$drag-over: #E8F4FF;
 
 BODY, .theme-light {
 
   --primary                    : #{$primary};
   --primary-text               : #{contrast-color($primary)};
-  --primary-hover-bg           : #{darken($primary, 10%)};
+  // --primary-hover-bg           : #{darken($primary, 10%)};
+  --primary-hover-bg           : #{$primary};
   --primary-hover-text         : #{saturate($lightest, 20%)};
   --primary-active-bg          : #{darken($primary, 25%)};
   --primary-active-text        : #{contrast-color(darken($primary, 25%))};
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
-  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
 
 
   .text-primary {
@@ -66,7 +71,8 @@ BODY, .theme-light {
 
     &.btn:hover {
       color: var(--primary-hover-text);
-      background: var(--primary-hover-bg);
+      // background: var(--primary-hover-bg);
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2) !important;
       transition: all 0.3s ease;
     }
 
@@ -86,15 +92,12 @@ BODY, .theme-light {
   --link-border             : #{$link};
   --link-banner-bg          : #{rgba($link, 0.15)};
   --link-light-bg           : #{rgba($link, 0.05)};
+ 
 
-
-
+  
   .text-link {
     color: var(--link) !important;
 
-    &.disabled {
-      color: var(--disabled-text) !important;
-    }
   }
 
   .secondary-text-link {
@@ -122,6 +125,8 @@ BODY, .theme-light {
       }
   }
 
+  --lightest                   : #{rgba($lightest, 1)};
+
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -155,7 +160,7 @@ BODY, .theme-light {
       }
   }
 
-  --muted                      : #{$dark};
+  --muted                      : #A8ABB2;
   --deemphasized               : #717179;
 
   .text-muted {
@@ -181,7 +186,8 @@ BODY, .theme-light {
   }
 
   .bg-darker {
-    background-color: var(--darker);
+    // background-color: var(--darker);
+    background-color: #dd0c17;
     color: var(--darker-text);
 
     &.btn:hover {
@@ -199,6 +205,7 @@ BODY, .theme-light {
 
 
   --success                    : #{$success};
+  --success-new                    : #{$info};
   --success-text               : #{contrast-color($success)};
   --success-hover-bg           : #{darken($success, 10%)};
   --success-hover-text         : #{saturate($lightest, 20%)};
@@ -261,9 +268,9 @@ BODY, .theme-light {
 
 
   --warning                    : #{$warning};
-  --warning-text               : #{contrast-color($warning)};
+  --warning-text               : #fff;
   --warning-hover-bg           : #{darken($warning, 10%)};
-  --warning-hover-text         : #{saturate($lightest, 20%)};
+  --warning-hover-text         : #fff;
   --warning-active-bg          : #{darken($warning, 25%)};
   --warning-active-text        : #{contrast-color(darken($warning, 25%))};
   --warning-border             : #{$warning};
@@ -271,7 +278,9 @@ BODY, .theme-light {
   --warning-light-bg           : #{rgba($warning, 0.05)};
 
   .text-warning {
-    color: var(--warning) !important;
+    // color: var(--error) !important;
+    color: #A30014 !important;
+    line-height: 20px;
   }
 
   .bg-warning {
@@ -304,6 +313,7 @@ BODY, .theme-light {
 
   .text-error {
     color: var(--error) !important;
+    line-height: 16px;
   }
 
   .bg-error {
@@ -343,7 +353,7 @@ BODY, .theme-light {
 
     &.btn:hover {
       color: var(--disabled-hover-text);
-      background: var(--disabled-hover-bg);
+      background-color: #ccc !important;
       transition: all 0.3s ease;
     }
 
@@ -352,11 +362,11 @@ BODY, .theme-light {
       background: var(--disabled-active-bg);
     }
   }
-
+  
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$dark};
+  --scrollbar-thumb            : #{$scroll_dark};
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 
@@ -368,17 +378,18 @@ BODY, .theme-light {
   --header-btn-text            : #{$darkest};
   --header-btn-text-hover      : #{$lightest};
   --header-input-text          : #{$darkest};
-  --header-height              : 55px;
+  --header-height              : 50px;
   --header-border              : #{$medium};
   --header-border-size         : 1px;
-  --nav-width                  : 250px;
+  --nav-width                  : 205px;
   --nav-bg                     : #{$lightest};
   --nav-active                 : #{$light};
   --nav-hover                  : #{$medium};
+  --nav-hover-color            :#1890FF;
   --nav-expander-hover         : #{darken($medium, 10%)};
+  --nav-icon-badge-bg          : #{$dark};
   --nav-border                 : #{$medium};
   --nav-border-size            : 1px;
-  --nav-icon-badge-bg          : #{$lightest};
 
   --footer-bg                  : transparent;
   --footer-height              : 0px;
@@ -390,15 +401,17 @@ BODY, .theme-light {
   --topmost-light-hover        : #{$light};
 
   --disabled-bg                : #{$disabled};
-  --disabled-text              : #{$secondary};
+  // --disabled-text              : #{$secondary};
+  --disabled-text              : #b8b8b8;;
   --box-bg                     : #{$lighter};
   --subtle-border              : #{$medium};
   --border                     : #{$medium};
   --border-width               : 1px;
-  --border-radius              : 4px;
+  --border-radius              : 2px;
   --border-radius-md           : 6px;
   --border-radius-lg           : 8px;
-  --outline                    : var(--primary);
+  // --outline                    : var(--primary);
+  --outline                    : #d9d9d9;
   --outline-width              : 1px;
 
   --accent-btn                 : var(--primary-banner-bg);
@@ -409,6 +422,8 @@ BODY, .theme-light {
   --modal-border               : #{$dark};
   --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
   --overlay-bg                 : rgba(38, 42, 64, 0.35);
+  --overlay-model-bg           : rgba(0, 0, 0, 0.45);
+  --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --shadow                     : #{rgba($medium, 0.85)};
 
   --checkbox-tick              : #{$lightest};
@@ -424,13 +439,16 @@ BODY, .theme-light {
   --dropdown-border            : #{$medium};
   --dropdown-divider           : #{$medium};
   --dropdown-text              : #{$darkest};
-  --dropdown-active-text       : #{$lightest};
-  --dropdown-active-bg         : #{$dark};
-  --dropdown-hover-text        : var(--body-text);
-  --dropdown-hover-bg          : #{$light};
+  // --dropdown-active-text       : #{$lightest};
+  --dropdown-active-text       : #333;
+  // --dropdown-active-bg         : #{$dark};
+  --dropdown-active-bg         : #f7f9fa;
+  // --dropdown-hover-text        : #{$lightest};
+  --dropdown-hover-text        : #333;
+   // --dropdown-hover-bg          : var(--link);
+  --dropdown-hover-bg          : #f7f9fa;
   --dropdown-disabled-text     : var(--muted);
   --dropdown-disabled-bg       : #{$disabled};
-  --dropdown-group-text        : #{$darker};
   --dropdown-highlight-text    : var(--link);
 
   --notification-unread-bg     : var(--primary-banner-bg);
@@ -444,17 +462,18 @@ BODY, .theme-light {
   --input-label                : #{$secondary};
   --input-placeholder          : #{darken($disabled, 10%)};
   --input-border               : var(--border);
+  --input-border-box-shadow    : rgba(0,0,0,.2);
   --input-bg                   : var(--body-bg);
   --input-bg-accent            : #{darken($light, 2%)};
   --input-hover-bg             : var(--box-bg);
   --input-focus-bg             : var(--box-bg);
   --input-disabled-text        : #{darken($disabled, 60%)};
   --input-disabled-label       : #{darken($disabled, 40%)};
-  --input-disabled-bg          : #{$disabled};
+  --input-disabled-bg          : #f5f5f5;
   --input-disabled-border      : #{darken($medium, 10%)};
   --input-disabled-placeholder : #{darken($medium, 15%)};
   --input-addon-bg             : #{$darker};
-  --input-hover-border         : #{darken($medium, 25%)};
+  --input-hover-border         : #d7d7d7;
 
   --label-secondary           : #{$darker};
 
@@ -463,24 +482,28 @@ BODY, .theme-light {
 
   --sortable-table-bg          : #{darken($lightest, 5%)};
   --sortable-table-row-bg      : #{$lightest};
-  --sortable-table-header-bg   : #{$lighter};
+  // --sortable-table-header-bg   : #{$lighter};
+  --sortable-table-header-bg   : #f8f9fa;
   --sortable-table-top-divider : var(--border);
   --sortable-table-body-divider : #{$medium};
 
-  --sortable-table-hover-bg    : #{$lighter};
+  // --sortable-table-hover-bg    : #{$lighter};
+  --sortable-table-hover-bg    :#ebf4fa;
   //--sortable-table-selected-bg : #{rgba($primary, 0.02)};
 
-  --sortable-table-selected-bg : var(--primary-light-bg);
+  // --sortable-table-selected-bg : var(--primary-light-bg);
+  --sortable-table-selected-bg : #ebf4fa;
   --sortable-table-group-label : #{$secondary};
 
   --tag-primary                : #{$darkest};
-  --tag-bg                     : #EEEFF5;
+  --tag-bg                     : #{$medium};
 
   --popover-bg                 : var(--body-bg);
   --popover-border             : var(--border);
   --popover-text               : var(--body-text);
   --popover-border-radius      : var(--border-radius);
-  --tooltip-bg                 : #{$medium};
+  // --tooltip-bg                 : #{$medium};
+  --tooltip-bg                 : #fff;
   --tooltip-border             : var(--tag-primary);
   --tooltip-text               : var(--tag-primary);
   --tooltip-bg-warning         : #{rgba($warning, 0.8)};