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

package/assets/styles/global/_select.scss

@@ -9,20 +9,17 @@
 }
 
 .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);
@@ -37,6 +34,11 @@
     float: right;
   }
 
+  &:focus-visible, &.focused {
+    @include focus-outline;
+    outline-offset: -1px;
+  }
+
   &.focused {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -51,14 +53,9 @@
 
       .vs__search {
         background-color: transparent;
-        border: 0px;
       }
 
-      .vs__dropdown-toggle{
-        border: solid var(--border-width) var(--input-border);
-        height: 32px;
-      }
-      // .vs__dropdown-toggle,
+      .vs__dropdown-toggle,
       .vs__dropdown-toggle > * {
         background-color: transparent;
         border: transparent;
@@ -98,14 +95,11 @@
     min-height: 30px;
 
     .vs__selected {
-      min-height: 20px;
+      min-height: 25px;
       padding: 0 7px;
-      height: 21px;
-      width: unset !important;
 
       &:not(:only-child) {
-        margin-bottom: 2px;
-        margin-top: 2px;
+        margin-bottom: 3px;
       }
     }
   }
@@ -127,10 +121,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 {
@@ -140,7 +134,6 @@
 
       .vs__dropdown-toggle, input {
         cursor: not-allowed;
-        background-color: var(--input-disabled-bg);
 
         .vs__selected {
           color: var(--input-disabled-text);
@@ -154,7 +147,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: 0px 0;
+  padding: $unlabaled-select-padding;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;
@@ -166,7 +159,7 @@
       height: 100%;
 
       .vs__dropdown-toggle {
-        // height: 100%;
+        height: 100%;
       }
       .vs__actions {
         width: auto;
@@ -176,26 +169,25 @@
 
   &: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 {
-        box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-        // border: solid var(--border-width) var(--input-hover-border) !important;
+        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: 1px solid var(--border);
+    border-bottom: 2px solid var(--border);
   }
 
   tbody + tbody {
@@ -104,9 +104,3 @@
       }
     }
   }
-
-  
-  .sortable-table tbody tr.group-row td:first-of-type {
-    background-color: var(--sortable-table-bg) !important;
-  }
-  

package/assets/styles/global/_tooltip.scss

@@ -4,32 +4,16 @@
   $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: 2px;
+    border-radius: var(--border-radius);
     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;
@@ -43,9 +27,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        // border-top-color: var(--tooltip-bg);
-        // border-top-color: var(--tooltip-bg);
-        border-top-color:var(--border);
+        border-top-color: var(--tooltip-bg);
       }
     }
   }
@@ -55,7 +37,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-bottom-color: var(--border);
+        border-bottom-color: var(--tooltip-bg);
         background: transparent;
       }
     }
@@ -65,7 +47,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-right-color: var(--border);
+        border-right-color: var(--tooltip-bg);
       }
     }
   }
@@ -74,7 +56,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-left-color: var(--border);
+        border-left-color: var(--tooltip-bg);
       }
     }
   }
@@ -123,14 +105,13 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: 2px;
+  border-radius: var(--border-radius-lg);
 
   .v-popper__inner {
-    border-radius: 2px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: 0px;
+    border-radius: var(--border-radius-lg);
     border: none;
 
     a {
@@ -147,9 +128,7 @@
 }
 
 .v-popper__popper.v-popper--theme-dropdown {
-  border-radius: 4px;
   z-index: z-index('tooltip');
-  border: 1px solid #d9d9d9 !important;
 
   &.containerLogsDropdown, &.fleet-summary-tooltip{
     .v-popper__arrow-container {
@@ -183,31 +162,4 @@
 //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,8 +38,6 @@
 
   --slate: #{$slate};
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};
@@ -99,7 +97,6 @@
   --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,20 +1,18 @@
 // Local variables for reused colors
 //light main text
-$darkest   : #333;
+$darkest   : #141419;
 
 //light secondary
-$darker    : #333;
+$darker    : #6C6C76;
 
 //light disabled
-$dark      : #ffffff;
-
-$scroll_dark: #8b8b8b;
+$dark      : #B6B6C2;
 
 //light border and buttons
-$medium    : #d7d7d7;
+$medium    : #DCDEE7;
 
-//light inputs 
-$light     : #E8F4FF;
+//light inputs
+$light     : #EEEFF4;
 
 //light sidebar and box
 $lighter   : #F4F5FA;
@@ -23,20 +21,17 @@ $lighter   : #F4F5FA;
 $lightest  : #FFFFFF;
 
 //color for items that are not enabled
-// $disabled  : $medium;
-$disabled  : #f5f5f5;
+$disabled  : $medium;
 
-$primary         : #1890FF;
+$primary         : #3D98D3;
 $secondary       : $darker;
-// $link            : #3D98D3;
-$link            : #1890FF;
+$link            : #3D98D3;
 
 // Status colors
-$success         : #1890FF;
+$success         : #5D995D;
 $warning         : #DAC342;
 $error           : #F64747;
-// $error           : #A30014;
-$info            : #1890FF;
+$info            : #3D98D3;
 
 $contrasted-dark: $darkest !default;
 $contrasted-light: $lightest !default;
@@ -45,20 +40,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: #E8F4FF;
+$drag-over: #DCDEE7;
 
 BODY, .theme-light {
 
   --primary                    : #{$primary};
   --primary-text               : #{contrast-color($primary)};
-  // --primary-hover-bg           : #{darken($primary, 10%)};
-  --primary-hover-bg           : #{$primary};
+  --primary-hover-bg           : #{darken($primary, 10%)};
   --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 {
@@ -71,8 +66,7 @@ BODY, .theme-light {
 
     &.btn:hover {
       color: var(--primary-hover-text);
-      // background: var(--primary-hover-bg);
-      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2) !important;
+      background: var(--primary-hover-bg);
       transition: all 0.3s ease;
     }
 
@@ -92,12 +86,15 @@ 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 {
@@ -125,8 +122,6 @@ BODY, .theme-light {
       }
   }
 
-  --lightest                   : #{rgba($lightest, 1)};
-
   --default                    : #{$light};
   --default-text               : #{contrast-color($light)};
   --default-hover-bg           : #{darken($light, 10%)};
@@ -160,7 +155,7 @@ BODY, .theme-light {
       }
   }
 
-  --muted                      : #A8ABB2;
+  --muted                      : #{$dark};
   --deemphasized               : #717179;
 
   .text-muted {
@@ -186,8 +181,7 @@ BODY, .theme-light {
   }
 
   .bg-darker {
-    // background-color: var(--darker);
-    background-color: #dd0c17;
+    background-color: var(--darker);
     color: var(--darker-text);
 
     &.btn:hover {
@@ -205,7 +199,6 @@ 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%)};
@@ -278,9 +271,7 @@ BODY, .theme-light {
   --warning-light-bg           : #{rgba($warning, 0.05)};
 
   .text-warning {
-    // color: var(--error) !important;
-    color: #A30014 !important;
-    line-height: 20px;
+    color: var(--warning) !important;
   }
 
   .bg-warning {
@@ -313,7 +304,6 @@ BODY, .theme-light {
 
   .text-error {
     color: var(--error) !important;
-    line-height: 16px;
   }
 
   .bg-error {
@@ -362,11 +352,11 @@ BODY, .theme-light {
       background: var(--disabled-active-bg);
     }
   }
-  
+
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$scroll_dark};
+  --scrollbar-thumb            : #{$dark};
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 
@@ -378,18 +368,17 @@ BODY, .theme-light {
   --header-btn-text            : #{$darkest};
   --header-btn-text-hover      : #{$lightest};
   --header-input-text          : #{$darkest};
-  --header-height              : 50px;
+  --header-height              : 55px;
   --header-border              : #{$medium};
   --header-border-size         : 1px;
-  --nav-width                  : 205px;
+  --nav-width                  : 250px;
   --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;
@@ -401,17 +390,15 @@ BODY, .theme-light {
   --topmost-light-hover        : #{$light};
 
   --disabled-bg                : #{$disabled};
-  // --disabled-text              : #{$secondary};
-  --disabled-text              : #b8b8b8;;
+  --disabled-text              : #{$secondary};
   --box-bg                     : #{$lighter};
   --subtle-border              : #{$medium};
   --border                     : #{$medium};
   --border-width               : 1px;
-  --border-radius              : 2px;
+  --border-radius              : 4px;
   --border-radius-md           : 6px;
   --border-radius-lg           : 8px;
-  // --outline                    : var(--primary);
-  --outline                    : #d9d9d9;
+  --outline                    : var(--primary);
   --outline-width              : 1px;
 
   --accent-btn                 : var(--primary-banner-bg);
@@ -422,8 +409,6 @@ 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};
@@ -439,16 +424,13 @@ BODY, .theme-light {
   --dropdown-border            : #{$medium};
   --dropdown-divider           : #{$medium};
   --dropdown-text              : #{$darkest};
-  // --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-active-text       : #{$lightest};
+  --dropdown-active-bg         : #{$dark};
+  --dropdown-hover-text        : var(--body-text);
+  --dropdown-hover-bg          : #{$light};
   --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);
@@ -462,18 +444,17 @@ 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          : #f5f5f5;
+  --input-disabled-bg          : #{$disabled};
   --input-disabled-border      : #{darken($medium, 10%)};
   --input-disabled-placeholder : #{darken($medium, 15%)};
   --input-addon-bg             : #{$darker};
-  --input-hover-border         : #d7d7d7;
+  --input-hover-border         : #{darken($medium, 25%)};
 
   --label-secondary           : #{$darker};
 
@@ -482,28 +463,24 @@ BODY, .theme-light {
 
   --sortable-table-bg          : #{darken($lightest, 5%)};
   --sortable-table-row-bg      : #{$lightest};
-  // --sortable-table-header-bg   : #{$lighter};
-  --sortable-table-header-bg   : #f8f9fa;
+  --sortable-table-header-bg   : #{$lighter};
   --sortable-table-top-divider : var(--border);
   --sortable-table-body-divider : #{$medium};
 
-  // --sortable-table-hover-bg    : #{$lighter};
-  --sortable-table-hover-bg    :#ebf4fa;
+  --sortable-table-hover-bg    : #{$lighter};
   //--sortable-table-selected-bg : #{rgba($primary, 0.02)};
 
-  // --sortable-table-selected-bg : var(--primary-light-bg);
-  --sortable-table-selected-bg : #ebf4fa;
+  --sortable-table-selected-bg : var(--primary-light-bg);
   --sortable-table-group-label : #{$secondary};
 
   --tag-primary                : #{$darkest};
-  --tag-bg                     : #{$medium};
+  --tag-bg                     : #EEEFF5;
 
   --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                 : #fff;
+  --tooltip-bg                 : #{$medium};
   --tooltip-border             : var(--tag-primary);
   --tooltip-text               : var(--tag-primary);
   --tooltip-bg-warning         : #{rgba($warning, 0.8)};

package/assets/styles/vendor/vue-select.scss

@@ -29,13 +29,11 @@
 }
 
 .vs__dropdown-menu {
-  padding-inline-start: 0px;
   display: block;
   position: absolute;
   left: -2px;
-  // z-index: z-index('dropdownContent');
-  z-index: 50;
-  // padding: $input-padding-sm 0;
+  z-index: z-index('dropdownContent');
+  padding: $input-padding-sm 0;
   margin: 0;
   width: calc(100% + 4px);
   max-height: 350px;
@@ -69,15 +67,14 @@
 }
 
 .vs__dropdown-option {
-  line-height: 32px; /* Normalize line height */
+  line-height: 1.42857143; /* Normalize line height */
   display: block;
-  // padding: 0 calc(#{$input-padding-sm}/2);
-  padding: 0 12px;
+  padding: 0 calc(#{$input-padding-sm}/2);
   clear: both;
   color: var(--dropdown-text);
   white-space: nowrap;
   z-index: 1000;
-  // overflow-y: auto;
+  overflow-y: auto;
   // needs overflow-x hidden so that select for type of charts in cluster chart page
   // doesn't show a horizontal scroll https://github.com/rancher/dashboard/pull/13139/files/9e6a8e64181de4525ad378d4d1b93c8efc2ed6d5#r1929296126
   overflow-x: hidden;
@@ -161,7 +158,7 @@
     height: 32px;
     padding-top: 8px;
     color: var(--secondary);
-    margin-right: 9px;
+    margin-right: 8px;
   }
 }
 
@@ -265,13 +262,6 @@ $transition-duration: 150ms;
   &:not(:last-of-type) {
     margin-right: 2px;
   }
-  button:hover{
-    background-color: unset !important;
-    &::after{
-      color: var(--link) !important;
-    }
-
-  }
 
   button.vs__deselect {
     line-height: unset;
@@ -283,13 +273,12 @@ $transition-duration: 150ms;
 .vs__deselect {
   display: inline-flex;
   appearance: none;
-  margin-left: 3px;
+  margin-left: 8px;
   padding: 0;
   border: 0;
   cursor: pointer;
   background: none;
   fill: var(--primary);
-  min-width: 32px;
 
   svg {
     display: none;
@@ -321,7 +310,6 @@ $transition-duration: 150ms;
     }
     .vs__selected {
       color: var(--input-text);
-      background-color: rgba(0, 0, 0, 0);
     }
   }
 
@@ -331,7 +319,7 @@ $transition-duration: 150ms;
   }
   .vs__dropdown-toggle {
     background-color: var(--input-bg);
-    border: none !important;
+    border: none;
     padding: none;
     border-radius: var(--border-radius);
     border: 1px solid var(--dropdown-border);
@@ -389,8 +377,7 @@ header .vs-select .vs__dropdown-toggle {
 
 .vs__no-options {
   color: var(--dropdown-text);
-  padding: 0px 20px;
-  line-height: 32px;
+  padding: 3px 20px;
 }
 
 header {