@rancher/shell 3.0.5-rc.6 → 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

@@ -42,30 +42,36 @@ $z-indexes: (
 
   cruFooter: 19,
 
-  modalOverlay: 20,
-  modalContent: 21,
+  loadingMain: 51,
 
-  tooltip: 30,
+  slide-in: 52,
 
-  dropdownOverlay: 40,
-  dropdownContent: 41,
+  modalOverlay: 53,
+  modalContent: 54,
 
-  loadingMain: 51
+  dropdownOverlay: 55,
+  dropdownContent: 56,
+
+  tooltip: 57,
 );
 
 // Usage Example:
 // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {
 // }
 $breakpoints: (
-  '--viewport-4':  480px, // Phone
-  '--viewport-7':  768px, // Tablet
-  '--viewport-9':  992px, // Laptop/Desktop
-  '--viewport-12': 1281px, // Desktop
+  '--viewport-4': 480px,
+  // Phone
+  '--viewport-7': 768px,
+  // Tablet
+  '--viewport-9': 992px,
+  // Laptop/Desktop
+  '--viewport-12': 1281px,
+  // Desktop
 );
 
 $font-size-h2: 21px;
 
 // Global spacing variables
 $space-s: 10px;
-$space-m: 20px;
-$space-l: 40px;
+$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%;
   }
 }