@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.8

package/assets/brand/classic/metadata.json

@@ -0,0 +1,3 @@
+{
+  "hasStylesheet": "true"
+}

package/assets/styles/app.scss

@@ -14,6 +14,7 @@
 @import "./fonts/zerowidthspace";
 @import "./fonts/icons";
 
+@import "./themes/modern";
 @import "./themes/light";
 @import "./themes/dark";
 @import './themes/_suse.scss';

package/assets/styles/base/_color.scss

@@ -9,3 +9,19 @@
 .text-disabled {
   color: var(--disabled-text) !important;
 }
+
+$blue001: #1F67DB;
+$blue002: #DFE6F2;
+
+$green001: #007032;
+$green002: #DCE7E1;
+
+$yellow001: #FFE47A;
+$yellow002: #473900;
+
+$red001: #B13333;
+
+$gray001: #EDEFF3;
+$gray002: #DCDEE4;
+$gray003: #FFF;
+$gray004: #6C6C76;

package/assets/styles/base/_helpers.scss

@@ -37,6 +37,16 @@ $spacing-property-map: (
   padding: 20px 0 0 0;
 }
 
+.dashed-spacer {
+  margin: 24px 0;
+  border-bottom: none;
+  background-image: repeating-linear-gradient(to right, var(--border) 0, var(--border) 4px, transparent 4px, transparent 8px);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 8px 1px;
+  padding-bottom: 1px;
+}
+
 .pull-right {
   float: right !important;
 }

package/assets/styles/base/_variables.scss

@@ -73,5 +73,5 @@ $font-size-h2: 21px;
 
 // Global spacing variables
 $space-s: 10px;
-$space-m: 20px;
+$space-m: 24px;
 $space-l: 40px;

package/assets/styles/fonts/_icons.scss

@@ -37,10 +37,6 @@ $icon-inverse:          #fff !default;
 }
 
 // Sizes
-.icon-fw {
-  width: math.div(18em, 14);
-  text-align: center;
-}
 
 .icon-sm {
   font-size: (1em*0.8);
@@ -65,37 +61,10 @@ $icon-inverse:          #fff !default;
   line-height: 1em;
   vertical-align: middle;
 }
-.icon-stack-1x, .icon-stack-2x {
+.icon-stack-1x {
   position: absolute;
   left: 0;
   width: 100%;
   text-align: center;
 }
 .icon-stack-1x { line-height: inherit; }
-.icon-stack-2x { font-size: 2em; }
-.icon-inverse { color: $icon-inverse; }
-
-// List
-.icon-ul {
-  padding-left: 0;
-  margin-left: $icon-li-width;
-  list-style-type: none;
-  > li { position: relative; }
-}
-
-.icon-li {
-  position: absolute;
-  left: -$icon-li-width;
-  width: $icon-li-width;
-  top: math.div(2em, 14);
-  text-align: center;
-  &.icon-lg {
-    left: -$icon-li-width + math.div(4em, 14);
-  }
-}
-
-.icon-rotate-90  { @include icon-rotate(90deg, 1);  }
-.icon-rotate-180 { @include icon-rotate(180deg, 2); }
-.icon-rotate-270 { @include icon-rotate(270deg, 3); }
-.icon-flip-horizontal { @include icon-flip(-1, 1, 0); }
-.icon-flip-vertical   { @include icon-flip(1, -1, 2); }

package/assets/styles/global/_layout.scss

@@ -6,7 +6,7 @@
   .outlet {
     display: flex;
     flex-direction: column;
-    padding: 20px;
+    padding: $space-m;
     min-height: 100%;
   }
 }

package/assets/styles/themes/_dark.scss

@@ -1,262 +1,264 @@
-.theme-dark {
-  // Local variables for reused colors
-
-  //dark sidebar
-  $darkest: #141419;
-
-  //dark body
-  $darker: #1b1c21;
-
-  //dark inputs
-  $dark: #27292e;
-
-  //dark borders and button
-  $medium: #4a4b52;
-
-  // dark disabled,
-  $light: #6c6c76;
-
-  //dark secondary
-  $lighter: #b6b6c2;
-
-  // dark main text
-  $lightest: #ffffff;
-
-  // menu cluster description active+hover
-  $desc-light: #EEEFF4;
-
-  $secondary: $lighter;
-  $disabled: $light;
-
-  //Contrast colors
-  $contrasted-dark: $lightest !default;
-  $contrasted-light: $darkest !default;
-
-  $drag-over: #DCDEE7;
-
-  $slate: #4B4F6B;
-
-  --slate: #{$slate};
-
-  --default                    : #{$dark};
-  --default-text               : #{$light};
-  --default-hover-bg           : #{darken($dark, 10%)};
-  --default-hover-text         : #{saturate($lightest, 20%)};
-  --default-active-bg          : #{darken($dark, 25%)};
-  --default-active-text        : #{contrast-color(darken($dark, 25%))};
-  --default-border             : #{$dark};
-  --default-banner-bg          : #{rgba($dark, 0.15)};
-  --default-light-bg           : #{rgba($dark, 0.05)};
-  --slider-light-bg            : #{rgba($darker, 1)};
-  --slider-light-bg-right      : #{rgba($darker, 0)};
-
-  --muted                      : #{$disabled};
-  --deemphasized               : #{$disabled};
-
-  --body-bg                    : #{$darker};
-  --body-text                  : #{$lightest};
-  --scrollbar-thumb            : #{$medium};
-  --scrollbar-thumb-dropdown   : #{$medium};
-
-  --side-menu-desc             : #{$desc-light};
-
-  --header-bg                  : #{$darker};
-  --header-border              : #{$medium};
-  --header-btn-bg              : transparent;
-  --header-btn-text            : #{$lightest};
-  --header-btn-text-hover      : #{$lightest};
-  --header-input-text          : #{$lightest};
-
-  // Header, Footer and Consent banner defaults
-  --banner-text-color          : #{$lightest};
-
-  --nav-bg                     : #{$darkest};
-  --nav-active                 : #333;
-  --nav-border                 : #{$medium};
-  --nav-hover                  : var(--primary);
-  --nav-expander-hover         : var(--primary-banner-bg);
-  --nav-icon-badge-bg          : #{$dark};
-
-  --disabled-bg                : #{darken($disabled, 10%)};
-  --disabled-text              : #{$secondary};
-  --box-bg                     : #{$darkest};
-  --subtle-border              : #{$darkest};
-  --border                     : #{$medium};
-
-  --topmenu-bg                 : #{$darkest};
-  --topmenu-text               : #{$lightest};
-  --topmost-border             : #{$medium};
-  --topmost-shadow             : #{lighten($darkest, 5%)};
-  --topmost-light-hover        : #{$medium};
-
-  --accent-btn                 : var(--primary-banner-bg);
-  --accent-btn-hover           : var(--primary);
-  --accent-btn-hover-text      : #{$lightest};
-
-  --modal-bg                   : #{$dark};
-  --modal-border               : #{$medium};
-  --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
-  --overlay-bg                 : #{rgba($darkest, 0.75)};
-  --shadow                     : #{rgba($darkest, 0.9)};
-
-  --checkbox-tick              : #{$lightest};
-  --checkbox-border            : #{$medium};
-  --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
-  --checkbox-disabled-bg       : #{$disabled};
-  --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         : #{$light};
-  --dropdown-hover-text        : #{$lightest};
-  --dropdown-hover-bg          : #{$slate};
-  --dropdown-disabled-bg       : #{$disabled};
-  --dropdown-disabled-text     : #{$disabled};
-  --dropdown-group-text        : #{$lighter};
-  --dropdown-highlight-text    : var(--link);
-
-  --notification-unread-bg     : var(--primary-banner-bg);
-
-  --input-text                 : #{$lightest};
-  --input-label                : #{$lighter};
-  --input-placeholder          : #{$disabled};
-  --input-border               : var(--border);
-  --input-bg                   : var(--body-bg);
-  --input-bg-accent            : #{darken($dark, 3%)};
-  --input-hover-bg             : var(--box-bg);
-  --input-focus-bg             : var(--box-bg);
-  --input-disabled-text        : #{darken($lightest, 50%)};
-  --input-disabled-label       : #{darken($lighter, 30%)};
-  --input-disabled-bg          : #{darken($disabled, 30%)};
-  --input-disabled-border      : #{darken($medium, 30%)};
-  --input-disabled-placeholder : #{darken($disabled, 10%)};
-  --input-addon-bg             : #{$darker};
-
-  --label-secondary           : #{$lighter};
-
-  --progress-bg                : #{$medium};
-  --progress-divider           : #{$lightest};
-
-  --sortable-table-bg          : #{lighten($darkest, 10%)};
-  --sortable-table-row-bg      : #{$darker};;
-  --sortable-table-header-bg   : #{$darkest};
-  --sortable-table-top-divider : var(--border);
-  --sortable-table-hover-bg    : #{$darkest};
-  --sortable-table-selected-bg : var(--primary-light-bg);
-  --sortable-table-group-label : #{$lighter};
-
-  --tag-primary                : #{$lightest};
-  --tag-bg                     : #{$medium};
-
-  --popover-bg                 : #{$darker};
-  --popover-border             : var(--border);
-  --popover-text               : var(--body-text);
-
-  --tooltip-bg                 : #{$medium};
-  --tooltip-border             : var(--tag-primary);
-  --tooltip-text               : var(--body-text);
-  --tooltip-text-warning       : var(--body-text);
-
-
-  --tabbed-border              : #{$medium};
-  --tabbed-sidebar-bg          : #{$darkest};
-  --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
-
-  --yaml-editor-bg             : #{$darkest};
-  --drawer-body-bg             : #{$darkest};
-
-  --diff-border                : var(--border);
-  --diff-header-bg             : var(--nav-bg);
-  --diff-header-border         : var(--border);
-  --diff-header                : #{rgba($darkest, 0.3)};
-  --diff-linenum-bg            : var(--nav-bg);
-  --diff-linenum               : var(--muted);
-  --diff-linenum-border        : var(--border);
-  --diff-line-ins-bg           : $success;
-  --diff-line-del-bg           : #{rgba($error, 0.75)};
-  --diff-del-bg                : #{rgba($error, 0.3)};
-  --diff-del-border            : #{$error};
-  --diff-ins-bg                : #{rgba($success, 0.3)};
-  --diff-ins-border            : #{rgba($success, 0.5)};
-  --diff-chg-ins               : #{rgba($success, 0.25)};
-  --diff-chg-del               : #{rgba($warning, 0.5)};
-  --diff-chg-dela               : #{rgba($warning, 1)};
-  --diff-empty-placeholder     : #{$darker};
-
-
-  --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
-  --wm-tab-bg                  : #{$darkest};
-  --wm-closer-hover-bg         : #{$medium};
-  --wm-tab-active-bg           : #{$darker};
-  --wm-title-bg                : #{$darkest};
-  --wm-title-border            : #{$medium};
-  --wm-body-bg                 : #{$darkest};
-  --wm-border                  : black;
-
-  --glance-divider             : #{$medium};
-
-  --resource-gauge-back-circle : 74, 75, 82, 0.5;
-
-  --simple-box-bg              : #{$darker};
-  --simple-box-border          : #{$medium};
-  --simple-box-divider         : #{$medium};
-  --simple-box-shadow          : none;
-
-  --terminal-bg                : var(--wm-body-bg);
-  --terminal-cursor            : var(--warning);
-  --terminal-selection         : #{$selected};
-  --terminal-text              : var(--body-text);
-
-  --logs-bg                    : var(--wm-body-bg);
-  --logs-highlight             : var(--wm-body-bg);
-  --logs-highlight-bg          : var(--warning);
-  --logs-text                  : var(--body-text);
-
-  --gauge-divider              : rgba(255, 255, 255, 0.3);
-  --gauge-success-primary      : 75, 95, 64;
-  --gauge-success-secondary    : 150, 189, 127;
-  --gauge-warning-primary      : 218, 195, 66;
-  --gauge-warning-secondary    : 109, 98, 33;
-  --gauge-error-primary        : 239, 90, 83;
-  --gauge-error-secondary      : 120, 45, 42;
-
-  --product-icon               : #{$lighter};
-  --product-icon-active        : #{$lightest};
-
-  --badge-state-disabled-text  : #{$desc-light};
-  --badge-state-disabled-bg    : #{$medium};
-  --badge-state-disabled-border: #{$lighter};
-
-  --click-badge-error          : #{$lightest};
-  --click-badge-error-bg       : #F43434;
-  --click-badge-error-border   : #FF8080;
-
-  --click-badge-warning        : #662E00;
-  --click-badge-warning-bg     : #FFCA4D;
-  --click-badge-warning-border : #F2870D;
-
-  --click-badge-success        : #00FF32;
-  --click-badge-success-bg     : #354240;
-  --click-badge-success-border : #4DFF70;
-  
-  --click-badge-info           : #{$lightest};
-  --click-badge-info-bg        : #{$info};
-  --click-badge-info-border    : #ACD2EC;
-  --bubble-bg                  : #{$darkest};
-
-  $slate: #4B4F6B;
-
-  --slate: #{$slate};
-
-  --link-text-secondary: #{$secondary};
-
-  .secondary-text-link {
-    color: var(--link-text-secondary);
+.classic {
+  &.theme-dark {
+    // Local variables for reused colors
+
+    //dark sidebar
+    $darkest: #141419;
+
+    //dark body
+    $darker: #1b1c21;
+
+    //dark inputs
+    $dark: #27292e;
+
+    //dark borders and button
+    $medium: #4a4b52;
+
+    // dark disabled,
+    $light: #6c6c76;
+
+    //dark secondary
+    $lighter: #b6b6c2;
+
+    // dark main text
+    $lightest: #ffffff;
+
+    // menu cluster description active+hover
+    $desc-light: #EEEFF4;
+
+    $secondary: $lighter;
+    $disabled: $light;
+
+    //Contrast colors
+    $contrasted-dark: $lightest !default;
+    $contrasted-light: $darkest !default;
+
+    $drag-over: #DCDEE7;
+
+    $slate: #4B4F6B;
+
+    --slate: #{$slate};
+
+    --default                    : #{$dark};
+    --default-text               : #{$light};
+    --default-hover-bg           : #{darken($dark, 10%)};
+    --default-hover-text         : #{saturate($lightest, 20%)};
+    --default-active-bg          : #{darken($dark, 25%)};
+    --default-active-text        : #{contrast-color(darken($dark, 25%))};
+    --default-border             : #{$dark};
+    --default-banner-bg          : #{rgba($dark, 0.15)};
+    --default-light-bg           : #{rgba($dark, 0.05)};
+    --slider-light-bg            : #{rgba($darker, 1)};
+    --slider-light-bg-right      : #{rgba($darker, 0)};
+
+    --muted                      : #{$disabled};
+    --deemphasized               : #{$disabled};
+
+    --body-bg                    : #{$darker};
+    --body-text                  : #{$lightest};
+    --scrollbar-thumb            : #{$medium};
+    --scrollbar-thumb-dropdown   : #{$medium};
+
+    --side-menu-desc             : #{$desc-light};
+
+    --header-bg                  : #{$darker};
+    --header-border              : #{$medium};
+    --header-btn-bg              : transparent;
+    --header-btn-text            : #{$lightest};
+    --header-btn-text-hover      : #{$lightest};
+    --header-input-text          : #{$lightest};
+
+    // Header, Footer and Consent banner defaults
+    --banner-text-color          : #{$lightest};
+
+    --nav-bg                     : #{$darkest};
+    --nav-active                 : #333;
+    --nav-border                 : #{$medium};
+    --nav-hover                  : var(--primary);
+    --nav-expander-hover         : var(--primary-banner-bg);
+    --nav-icon-badge-bg          : #{$dark};
+
+    --disabled-bg                : #{darken($disabled, 10%)};
+    --disabled-text              : #{$secondary};
+    --box-bg                     : #{$darkest};
+    --subtle-border              : #{$darkest};
+    --border                     : #{$medium};
+
+    --topmenu-bg                 : #{$darkest};
+    --topmenu-text               : #{$lightest};
+    --topmost-border             : #{$medium};
+    --topmost-shadow             : #{lighten($darkest, 5%)};
+    --topmost-light-hover        : #{$medium};
+
+    --accent-btn                 : var(--primary-banner-bg);
+    --accent-btn-hover           : var(--primary);
+    --accent-btn-hover-text      : #{$lightest};
+
+    --modal-bg                   : #{$dark};
+    --modal-border               : #{$medium};
+    --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
+    --overlay-bg                 : #{rgba($darkest, 0.75)};
+    --shadow                     : #{rgba($darkest, 0.9)};
+
+    --checkbox-tick              : #{$lightest};
+    --checkbox-border            : #{$medium};
+    --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
+    --checkbox-disabled-bg       : #{$disabled};
+    --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         : #{$light};
+    --dropdown-hover-text        : #{$lightest};
+    --dropdown-hover-bg          : #{$slate};
+    --dropdown-disabled-bg       : #{$disabled};
+    --dropdown-disabled-text     : #{$disabled};
+    --dropdown-group-text        : #{$lighter};
+    --dropdown-highlight-text    : var(--link);
+
+    --notification-unread-bg     : var(--primary-banner-bg);
+
+    --input-text                 : #{$lightest};
+    --input-label                : #{$lighter};
+    --input-placeholder          : #{$disabled};
+    --input-border               : var(--border);
+    --input-bg                   : var(--body-bg);
+    --input-bg-accent            : #{darken($dark, 3%)};
+    --input-hover-bg             : var(--box-bg);
+    --input-focus-bg             : var(--box-bg);
+    --input-disabled-text        : #{darken($lightest, 50%)};
+    --input-disabled-label       : #{darken($lighter, 30%)};
+    --input-disabled-bg          : #{darken($disabled, 30%)};
+    --input-disabled-border      : #{darken($medium, 30%)};
+    --input-disabled-placeholder : #{darken($disabled, 10%)};
+    --input-addon-bg             : #{$darker};
+
+    --label-secondary           : #{$lighter};
+
+    --progress-bg                : #{$medium};
+    --progress-divider           : #{$lightest};
+
+    --sortable-table-bg          : #{lighten($darkest, 10%)};
+    --sortable-table-row-bg      : #{$darker};;
+    --sortable-table-header-bg   : #{$darkest};
+    --sortable-table-top-divider : var(--border);
+    --sortable-table-hover-bg    : #{$darkest};
+    --sortable-table-selected-bg : var(--primary-light-bg);
+    --sortable-table-group-label : #{$lighter};
+
+    --tag-primary                : #{$lightest};
+    --tag-bg                     : #{$medium};
+
+    --popover-bg                 : #{$darker};
+    --popover-border             : var(--border);
+    --popover-text               : var(--body-text);
+
+    --tooltip-bg                 : #{$medium};
+    --tooltip-border             : var(--tag-primary);
+    --tooltip-text               : var(--body-text);
+    --tooltip-text-warning       : var(--body-text);
+
+
+    --tabbed-border              : #{$medium};
+    --tabbed-sidebar-bg          : #{$darkest};
+    --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
+
+    --yaml-editor-bg             : #{$darkest};
+    --drawer-body-bg             : #{$darkest};
+
+    --diff-border                : var(--border);
+    --diff-header-bg             : var(--nav-bg);
+    --diff-header-border         : var(--border);
+    --diff-header                : #{rgba($darkest, 0.3)};
+    --diff-linenum-bg            : var(--nav-bg);
+    --diff-linenum               : var(--muted);
+    --diff-linenum-border        : var(--border);
+    --diff-line-ins-bg           : $success;
+    --diff-line-del-bg           : #{rgba($error, 0.75)};
+    --diff-del-bg                : #{rgba($error, 0.3)};
+    --diff-del-border            : #{$error};
+    --diff-ins-bg                : #{rgba($success, 0.3)};
+    --diff-ins-border            : #{rgba($success, 0.5)};
+    --diff-chg-ins               : #{rgba($success, 0.25)};
+    --diff-chg-del               : #{rgba($warning, 0.5)};
+    --diff-chg-dela               : #{rgba($warning, 1)};
+    --diff-empty-placeholder     : #{$darker};
+
+
+    --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
+    --wm-tab-bg                  : #{$darkest};
+    --wm-closer-hover-bg         : #{$medium};
+    --wm-tab-active-bg           : #{$darker};
+    --wm-title-bg                : #{$darkest};
+    --wm-title-border            : #{$medium};
+    --wm-body-bg                 : #{$darkest};
+    --wm-border                  : black;
+
+    --glance-divider             : #{$medium};
+
+    --resource-gauge-back-circle : 74, 75, 82, 0.5;
+
+    --simple-box-bg              : #{$darker};
+    --simple-box-border          : #{$medium};
+    --simple-box-divider         : #{$medium};
+    --simple-box-shadow          : none;
+
+    --terminal-bg                : var(--wm-body-bg);
+    --terminal-cursor            : var(--warning);
+    --terminal-selection         : #{$selected};
+    --terminal-text              : var(--body-text);
+
+    --logs-bg                    : var(--wm-body-bg);
+    --logs-highlight             : var(--wm-body-bg);
+    --logs-highlight-bg          : var(--warning);
+    --logs-text                  : var(--body-text);
+
+    --gauge-divider              : rgba(255, 255, 255, 0.3);
+    --gauge-success-primary      : 75, 95, 64;
+    --gauge-success-secondary    : 150, 189, 127;
+    --gauge-warning-primary      : 218, 195, 66;
+    --gauge-warning-secondary    : 109, 98, 33;
+    --gauge-error-primary        : 239, 90, 83;
+    --gauge-error-secondary      : 120, 45, 42;
+
+    --product-icon               : #{$lighter};
+    --product-icon-active        : #{$lightest};
+
+    --badge-state-disabled-text  : #{$desc-light};
+    --badge-state-disabled-bg    : #{$medium};
+    --badge-state-disabled-border: #{$lighter};
+
+    --click-badge-error          : #{$lightest};
+    --click-badge-error-bg       : #F43434;
+    --click-badge-error-border   : #FF8080;
+
+    --click-badge-warning        : #662E00;
+    --click-badge-warning-bg     : #FFCA4D;
+    --click-badge-warning-border : #F2870D;
+
+    --click-badge-success        : #00FF32;
+    --click-badge-success-bg     : #354240;
+    --click-badge-success-border : #4DFF70;
+    
+    --click-badge-info           : #{$lightest};
+    --click-badge-info-bg        : #{$info};
+    --click-badge-info-border    : #ACD2EC;
+    --bubble-bg                  : #{$darkest};
+
+    $slate: #4B4F6B;
+
+    --slate: #{$slate};
+
+    --link-text-secondary: #{$secondary};
+
+    .secondary-text-link {
+      color: var(--link-text-secondary);
+    }
   }
 }