@rancher/shell 0.2.5 → 0.3.1

package/assets/styles/global/_button.scss

@@ -95,7 +95,11 @@ button,
   }
 
   &.btn-sm {
-    line-height: $btn-sm-height;
+    line-height: $btn-sm-height - 2px;
+
+    &:focus, &.focused {
+      border: 0;
+    }
   }
 }
 

package/assets/styles/global/_columns.scss

@@ -33,6 +33,10 @@ $DEFAULT_COLUMNS: 12;
 .row {
   display: flex;
   // margin-bottom: 20px;
+
+  &--y-center {
+    align-items: center;
+  }
 }
 
 .row:before,

package/assets/styles/global/_layout.scss

@@ -11,14 +11,13 @@
   }
 }
 
-.header-layout {
+HEADER {
   display: grid;
   grid-template-areas:
     'type-banner type-banner'
     'title actions'
     'state-banner state-banner';
   grid-template-columns: auto auto;
-  margin-bottom: 20px;
   align-content: center;
   min-height: 48px;
 

package/assets/styles/global/_select.scss

@@ -9,16 +9,13 @@
 }
 
 .unlabeled-select:not(.in-input) {
-  height: $unlabeled-input-height;
+  min-height: $unlabeled-input-height;
 }
 .col {
   > .unlabeled-select:not(.taggable) {
     padding-top: 5px;
   }
 }
-.unlabeled-select:not(.in-input) {
-  height: $unlabeled-input-height;
-}
 
 .labeled-select,
 .unlabeled-select {

package/assets/styles/themes/_dark.scss

@@ -29,6 +29,7 @@
   $contrasted-dark: $lightest !default;
   $contrasted-light: $darkest !default;
 
+  $drag-over: #DCDEE7;
 
   --default                    : #{$dark};
   --default-text               : #{$light};
@@ -89,19 +90,22 @@
   --checkbox-border            : #{$medium};
   --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
   --checkbox-disabled-bg       : #{$disabled};
-  --checkbox-ticked-bg         : var(--primary);
+  --checkbox-ticked-bg         : var(--link);
+
+  --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
+  --drag-over-outer-bg         : #{rgba($drag-over, 0)};
 
   --dropdown-bg                : #{mix($medium, $dark, 10%)};
   --dropdown-border            : #{$light};
   --dropdown-divider           : #{$light};
   --dropdown-text              : #{$lightest};
   --dropdown-active-text       : #{$lightest};
-  --dropdown-active-bg         : #{$selected};
+  --dropdown-active-bg         : #{$light};
   --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : #{$link};
+  --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-disabled-text     : #{$disabled};
-  --dropdown-highlight-text     : #{$link};
+  --dropdown-highlight-text     : var(--link);
 
   --input-text                 : #{$lightest};
   --input-label                : #{$lighter};

package/assets/styles/themes/_light.scss

@@ -40,6 +40,8 @@ $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;
+
 BODY, .theme-light {
 
   --primary                    : #{$primary};
@@ -313,6 +315,7 @@ BODY, .theme-light {
   --header-bg                  : #{$lightest};
   --header-btn-bg              : transparent;
   --header-btn-text            : #{$darkest};
+  --header-btn-text-hover      : #{$lightest};
   --header-input-text          : #{$darkest};
   --header-height              : 55px;
   --header-border              : #{$medium};
@@ -357,7 +360,10 @@ BODY, .theme-light {
   --checkbox-border            : #{$medium};
   --checkbox-tick-disabled     : #{darken($disabled, 40%)};
   --checkbox-disabled-bg       : #{$disabled};
-  --checkbox-ticked-bg         : #{$link};
+  --checkbox-ticked-bg         : var(--link);
+
+  --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
+  --drag-over-outer-bg         : #{rgba($drag-over, 0)};
 
   --dropdown-bg                : #{$lightest};
   --dropdown-border            : #{$medium};
@@ -366,10 +372,10 @@ BODY, .theme-light {
   --dropdown-active-text       : #{$lightest};
   --dropdown-active-bg         : #{$dark};
   --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : var(--primary);
+  --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-text     : var(--muted);
   --dropdown-disabled-bg       : #{$disabled};
-  --dropdown-highlight-text     : #{$link};
+  --dropdown-highlight-text    : var(--link);
 
   --card-badge-text            : #ffffff;
 

package/assets/styles/themes/_suse.scss

@@ -9,7 +9,7 @@
   --primary-hover-text         : #{saturate($lightest, 20%)};
   --primary-active-bg          : #{darken($primary, 25%)};
   --primary-active-text        : #{contrast-color(darken($primary, 25%))};
-  --primary-border             : #($primary);
+  --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
 

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

@@ -137,7 +137,7 @@
   position: relative;
   width: 100%;
   justify-content: flex-end;
-  flex-shrink: 8;
+  flex-shrink: 8; 
 
   svg {
     display: none;
@@ -146,10 +146,10 @@
   &:after {
     content: $icon-chevron-down;
     font-family: 'icons';
-    font-size: 24px;
     height: 32px;
-    padding-top: 3px;
+    padding-top: 8px;
     color: var(--secondary);
+    margin-right: 3px;
   }
 }
 
@@ -279,6 +279,7 @@ $transition-duration: 150ms;
     content: $icon-close;
     font-family: 'icons';
     color: var(--link);
+    font-size: 10px;
   }
 }