dashboard-shell-shell 1.0.111 → 1.0.113

package/assets/styles/global/_select.scss

@@ -2,13 +2,16 @@
   cursor: text;
   padding: 0;
   width: 100%;
-
+ &:hover{
+  box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+ }
   .selected {
     padding-top: $input-padding-lg;
   }
 }
 
 .unlabeled-select:not(.in-input) {
+  // min-height: $unlabeled-input-height;
   min-height: $unlabeled-input-height;
 }
 .col {
@@ -20,6 +23,8 @@
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
+  height: 32px;
+  width: $input-width;
 
   .required {
     color: var(--error);
@@ -34,11 +39,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 +53,14 @@
 
       .vs__search {
         background-color: transparent;
+        border: 0px;
       }
 
-      .vs__dropdown-toggle,
+      .vs__dropdown-toggle{
+        border: solid var(--border-width) var(--input-border);
+        height: 32px;
+      }
+      // .vs__dropdown-toggle,
       .vs__dropdown-toggle > * {
         background-color: transparent;
         border: transparent;
@@ -121,10 +126,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 +139,7 @@
 
       .vs__dropdown-toggle, input {
         cursor: not-allowed;
+        background-color: var(--input-disabled-bg);
 
         .vs__selected {
           color: var(--input-disabled-text);
@@ -147,7 +153,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;
@@ -169,19 +175,20 @@
 
   &: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;
       }
     }
 

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 {

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: 4px;
     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);
       }
     }
   }
@@ -162,4 +180,27 @@
 //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;
+  }
+}

package/assets/styles/themes/_dark.scss

@@ -95,6 +95,7 @@
   --modal-bg                   : #{$dark};
   --modal-border               : #{$medium};
   --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,18 @@
 // Local variables for reused colors
 //light main text
-$darkest   : #141419;
+$darkest   : #333;
 
 //light secondary
-$darker    : #6C6C76;
+$darker    : #333;
 
 //light disabled
 $dark      : #B6B6C2;
 
 //light border and buttons
-$medium    : #DCDEE7;
+$medium    : #d7d7d7;
 
-//light inputs
-$light     : #EEEFF4;
+//light inputs 
+$light     : #E8F4FF;
 
 //light sidebar and box
 $lighter   : #F4F5FA;
@@ -21,18 +21,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;
-$keyboard-focus  : #{darken($primary, 10%)};
+// $link            : #3D98D3;
+$link            : #1890FF;
 
 // Status colors
 $success         : #5D995D;
 $warning         : #DAC342;
 $error           : #F64747;
-$info            : #3D98D3;
+// $error           : #A30014;
+$info            : #1890FF;
 
 $contrasted-dark: $darkest !default;
 $contrasted-light: $lightest !default;
@@ -41,20 +43,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     : #{$keyboard-focus};
 
 
   .text-primary {
@@ -67,7 +69,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 +89,11 @@ 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;
-    }
   }
 
   .bg-link {
@@ -146,7 +145,8 @@ BODY, .theme-light {
       }
   }
 
-  --muted                      : #{$dark};
+  // --muted                      : #{$dark};
+  --muted                      : #A8ABB2;
 
   .text-muted {
     color: var(--muted) !important;
@@ -167,7 +167,8 @@ BODY, .theme-light {
   }
 
   .bg-darker {
-    background-color: var(--darker);
+    // background-color: var(--darker);
+    background-color: #dd0c17;
     color: var(--darker-text);
 
     &.btn:hover {
@@ -185,6 +186,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%)};
@@ -257,7 +259,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 {
@@ -290,6 +294,7 @@ BODY, .theme-light {
 
   .text-error {
     color: var(--error) !important;
+    line-height: 16px;
   }
 
   .bg-error {
@@ -307,7 +312,7 @@ BODY, .theme-light {
       background: var(--error-active-bg);
       }
   }
-
+  
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
@@ -323,17 +328,17 @@ 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-border                 : #{$medium};
   --nav-border-size            : 1px;
-  --nav-icon-badge-bg          : #{$lightest};
 
   --footer-bg                  : transparent;
   --footer-height              : 0px;
@@ -345,14 +350,15 @@ 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-lg           : 8px;
-  --outline                    : var(--primary);
+  --border-radius              : 2px;
+  // --outline                    : var(--primary);
+  --outline                    : #d9d9d9;
   --outline-width              : 1px;
 
   --accent-btn                 : var(--primary-banner-bg);
@@ -362,6 +368,8 @@ BODY, .theme-light {
   --modal-bg                   : #{$lightest};
   --modal-border               : #{$dark};
   --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --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};
@@ -377,13 +385,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);
 
   --card-badge-text            : #ffffff;
@@ -395,31 +406,36 @@ 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;
+
 
   --progress-bg                : #{$medium};
   --progress-divider           : #{$medium};
 
   --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};
@@ -429,7 +445,8 @@ BODY, .theme-light {
   --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)};
@@ -549,8 +566,4 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
-
-  --badge-state-disabled-text  : #{$darker};
-  --badge-state-disabled-bg    : #{$lighter};
-  --badge-state-disabled-border: #{$medium};
 }

package/assets/styles/themes/_suse.scss

@@ -12,6 +12,7 @@
   --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));
 
   --info                    : #{$info};
   --info-text               : #{contrast-color($info)};

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

@@ -29,11 +29,12 @@
 }
 
 .vs__dropdown-menu {
+  padding-inline-start: 0px;
   display: block;
   position: absolute;
   left: -2px;
   z-index: z-index('dropdownContent');
-  padding: $input-padding-sm 0;
+  // padding: $input-padding-sm 0;
   margin: 0;
   width: calc(100% + 4px);
   max-height: 350px;
@@ -67,14 +68,15 @@
 }
 
 .vs__dropdown-option {
-  line-height: 1.42857143; /* Normalize line height */
+  line-height: 32px; /* Normalize line height */
   display: block;
-  padding: 0 calc(#{$input-padding-sm}/2);
+  // padding: 0 calc(#{$input-padding-sm}/2);
+  padding: 0 12px;
   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;
@@ -158,7 +160,7 @@
     height: 32px;
     padding-top: 8px;
     color: var(--secondary);
-    margin-right: 3px;
+    margin-right: 9px;
   }
 }
 
@@ -262,6 +264,13 @@ $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;
@@ -273,12 +282,13 @@ $transition-duration: 150ms;
 .vs__deselect {
   display: inline-flex;
   appearance: none;
-  margin-left: 8px;
+  margin-left: 3px;
   padding: 0;
   border: 0;
   cursor: pointer;
   background: none;
   fill: var(--primary);
+  min-width: 32px;
 
   svg {
     display: none;
@@ -377,7 +387,8 @@ header .vs-select .vs__dropdown-toggle {
 
 .vs__no-options {
   color: var(--dropdown-text);
-  padding: 3px 20px;
+  padding: 0px 20px;
+  line-height: 32px;
 }
 
 header {