@rancher/shell 0.1.0

package/assets/styles/base/_typography.scss

@@ -0,0 +1,69 @@
+HTML, BODY {
+  font-family: $body-font;
+  font-size: 14px;
+}
+
+H1, H2, H3, H4, H5, H6 {
+  color: var(--body-text);
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 0 10px 0;
+}
+
+H1 {
+  font-size: 24px;
+}
+
+H2 {
+  font-size: 21px;
+}
+
+H3 {
+  font-size: 18px;
+}
+
+H4 {
+  font-size: 16px;
+}
+
+H5 {
+  font-size: 14px;
+}
+
+H6 {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+P {
+  font-weight: 400;
+  font-style: normal;
+  margin: 0;
+}
+
+//code
+code, samp, kbd, .monospace {
+  font-family: $mono-font;
+  text-align: left;
+}
+
+pre {
+  padding: 10px;
+  border-radius: var(--border-radius);
+  background: var(--box-bg);
+  margin: 5px;
+  overflow: auto;
+}
+
+code {
+  background-color: var(--box-bg);
+  display: inline-block;
+  padding: 5px;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+}
+
+pre code {
+  background: transparent;
+  padding: 0;
+}

package/assets/styles/base/_variables.scss

@@ -0,0 +1,58 @@
+$header-font: 'Poppins', sans-serif;
+$body-font: 'Lato', arial, helvetica, sans-serif;
+$mono-font: 'Roboto Mono', monospace;
+
+$max-width: 1440px !default;
+$min-width: 75% !default;
+$input-height: 61px;
+$unlabeled-input-height: 40px;
+
+$input-padding-lg: 18px;
+$input-padding-sm: 10px;
+$input-line-height: 18px;
+
+$column-gutter: 1.75%;
+
+$sideways-tabs-width: 200px;
+
+$array-list-remove-margin: 75px;
+
+$z-indexes: (
+  zero: 0,
+  default: 1,
+  overContent: 2,
+  hoverOverContent: 3,
+
+  tableGroup: 10,
+  fixedTableHeader: 11,
+
+  modalOverlay: 20,
+  modalContent: 21,
+
+  tooltip: 30,
+
+  dropdownOverlay: 40,
+  dropdownContent: 41,
+
+  loadingOverlay: 50,
+  loadingContent: 51
+);
+
+// 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
+);
+
+$font-size-h2: 21px;
+
+/*
+ * Global spacing variables
+ */
+$space-s: 10px;
+$space-m: 20px;
+$space-l: 40px;

package/assets/styles/fonts/_dots.scss

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'dotsfont';
+  font-weight: normal;
+  font-style: normal;
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAyEABEAAAAAV7gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcgM9Wv0dERUYAAAGcAAAAHQAAAB4AJwDeT1MvMgAAAbwAAABMAAAAYHOnumtjbWFwAAACCAAAAUwAAAGSId/p/mN2dCAAAANUAAAADAAAAAwF+BA6ZnBnbQAAA2AAAAGxAAACZVO0L6dnYXNwAAAFFAAAAAgAAAAIAAAAEGdseWYAAAUcAAABlQAARtxIEfQVaGVhZAAABrQAAAAyAAAANhPqDEtoaGVhAAAG6AAAAB4AAAAkD9kKlmhtdHgAAAcIAAAATAAAA2Cb0mq3bG9jYQAAB1QAAAGfAAABsumd1/5tYXhwAAAI9AAAACAAAAAgAfIAQm5hbWUAAAkUAAABRwAAApIWY2jUcG9zdAAAClwAAAHJAAACkyUTPVZwcmVwAAAMKAAAAFIAAABSWo1sY3dlYmYAAAx8AAAABgAAAAaskFpGAAAAAQAAAADV7pT1AAAAANR0ZLoAAAAA1mxdD3jaY2BkYGDgAWIxIGZiYATC60DMAuYxAAAM2wEGAAAAeNpjYOaUY5zAwMrAwmrMcpaBgWEWhGY6y5DGlAbkA6XggJkBCYR6h/sxODAoqP5hY/gH5LMxMGkoMDAwguQYvzC9A1IKDIwAF8ELN3jaY2BgYGaAYBkGRgYQ6AHyGMF8FoYCIC3BIAAU4WCoY9jC8J/pGNMdBS4FEQVJBX2FeNU///8DVSgwLGDYBpZhUBBQkIDJ/H/8/9D/g39//3324PCDfQ92P1j2oPzWbagtWAEjGwNcmpEJSDChKwA6lYWVjZ2Dk4ubh5ePX0BQSFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTS1tHV0/fwNDI2MTUzNzC0sraxtbO3sHRydnF1c3dw9PL28fXzz8gMCg4JDQsPCIyKjomNi4+IZGhta2ja9L0uYsWLl66ZNmKVStXr1m3dv2GTVs2b92+bfeuPXsZilJSMxnKFxRkM5RlMbTPZChmYEiHuC6nmmH5zobkPBA7t4YhqbFlGgPDxUsMDJev7GA4APNDBRA3dzf1dPb1T+idMpVh8uw5sxgOHioEClcCMQAKvGiaAAAFdQW0BbQARAUReNpdUbtOW0EQ3Q0PA4HE2CA52hSzmZDGe6EFCcTVjWJkO4XlCGk3cpGLcQEfQIFEDdqvGaChpEibBiEXSHxCPiESM2uIojQ7O7NzzpkzS8qRqnfpa89T5ySQwt0GzTb9Tki1swD3pOvrjYy0gwdabGb0ynX7/gsGm9GUO2oA5T1vKQ8ZTTuBWrSn/tH8Cob7/B/zOxi0NNP01DoJ6SEE5ptxS4PvGc26yw/6gtXhYjAwpJim4i4/plL+tzTnasuwtZHRvIMzEfnJNEBTa20Emv7UIdXzcRRLkMumsTaYmLL+JBPBhcl0VVO1zPjawV2ys+hggyrNgQfYw1Z5DB4ODyYU0rckyiwNEfZiq8QIEZMcCjnl3Mn+pED5SBLGvElKO+OGtQbGkdfAoDZPs/88m01tbx3C+FkcwXe/GUs6+MiG2hgRYjtiKYAJREJGVfmGGs+9LAbkUvvPQJSA5fGPf50ItO7YRDyXtXUOMVYIen7b3PLLirtWuc6LQndvqmqo0inN+17OvscDnh4Lw0FjwZvP+/5Kgfo8LK40aA4EQ3o3ev+iteqIq7wXPrIn07+xWgAAAAABAAH//wAPeNrt2jFLI0EUwPH3dncSBeVcOWxssnE97ggYTYxVOlNa2PgNLPwOVgpiYXNe5XewMLOoYDiOuxPtQsDCWGhhuYiFrcrgrkW6a2yE888w8OYx7/emfyOetES8VbMivhRlxqpUm0kxCO5rtmCum4nvZaFYP0+bPJ0UC+a5mWier4dROB2FUcsruVj33JpZedxvBV0RUe3LSHHHbMgnmZR2ULUjmmp7rGpFK3bIS22oFZmd08/jQb0WjzfmvXiqHHja7+hSr6fLvzvusNtzB3+8X6fu/OhEF8/+avO4435iY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2Njv7MtbwH4W4aNjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY39oebC726Y/sCYqNcWcuPLVLmQGZvp7o+77c30++799r/rhwf1EkSlWBrzEkelQLSvRi+0nK0rHXVPbsbduhv31T38X7Py/PFmy2yJL98kyQ4Vq5oOAs3ateXS+lmXfJvXTnNhFOZFj+vZvReYPphnAAAAeNpjYGRgYADiTd8OXoznt/nKIM/BAAJXSlJ2gehrObH8IJrzOmsrkOJgYALxAFBACosAAHjaY2BkYGBj+HuDgYH7KQMQcF5nYGRABTcAYDIEhgAAeNpjesPgwgAETKsYGDhngjDj9VE8EHg07AcaMx1iYGBtBeYFKM14HYgTgZnjNRRvAPKlgLQfalyxP2W8zv0UwQepAekDmQEADJUueHjadcI7KIQBAADg//1+v98vkiQZJEmSDJIkXZcuGS5J0iXDdYMkSZcMMkiSDDJckiTJIIOkSwYZJF2XdBl0SZckA8mq7wMAoP5PAsgCR8ATKIEdYArcAPPgB1QDxaA5aB8qwAzcCo/Bq/A5/IYESB8yjeSQOxRDm9Akuoyeoi+YhXVjaWwbu8EBvAEfwhfxY7xEKEQnMUlsElfEJ1lLxsl58oAsUhzVRo1Ta9QFVaEjup+eoXfpe4ZgmpkRZoU5Y8qsw/awGXaHveUgrpEb5pa4E+6Z1/guforf4q/5L6FOGBQWhEPhURR+tIsT4rp4Kb5L1dKANCvtSQ8yJbfICTkrH8lPiqR0KCllQ8krH2qNGlPn1H21oDFaqzamrWrn2pse6H36tJ7T7wzMaDKSxrJxaryYltltps1t88YCrAZryFq0jq2Srdid9qS9aV/Zn06tE3fmnQOn6HJumzvurrkXbsWLvH5vxtv17n3Cb/ZH/BX/zC8HTtATZIKd4DaEwsZwOFwKT8LnSIu6/jEaZaNclI9eq7yq3l+pb5RddPEAAAEAAADYABAAAgAAAAAAAgABAAIAFgAAAQAALgAAAAB42oWRu0oDQRSGvzFRiEjURiTVFrbGRIjXSpQ0gkVE05rLGqMbL9kkoE/gkwj2VhapvTyBjc9h6b+zQxIWQZaZ8838Z/5zZhaY55UUJp0BLjViNixoFfMUWR4cp9jg0XEaj6HjaXJ8O57R/o/jDEtm2fEcKybveJGsqTh+U86Z43cKZuD4QzlPjj+ZNS8xf6XImSH73HDLPV3atLigp6rPGusUKKpLj7pUj0PNAb6oqjkgtPt5rfe0ChTHDqFd+Yq+4kBzU5lNVYq0c8VrUUX7Lfo6W1NWURkF++1yompVjkTJM6vWd3wqqXsJ11PbQajOIt2bqPKf89/3jW7X03uF7LCmryPtymXmacirk/CJTtcn+os7KNvX8jiQ2rCvvW21knxLbNm5NPoLm+rWl0fNuvbk1XU3Ko98j7mT2pYS1Q9+AfhBY1UAeNpt0UdMVHEUxeHfpczA0DvYFUFRwPfeMBT7DDhYUGyISlEUmBlFRHBUbGgssUSCMWEHEXWjiZpoosaEFQsVe0ACLlzbMCzUnYno+7vzbL7kLM7iXgL4m19e6vlfhkECJJBAggjGgpUQQrERRjgRRBJFNDHEEkc8CSSSRDIpTGAik5jMFKYyjenMIJWZpJHOLGaTwRzmkkkW2cxDQ8fATg4OcskjnwLms4CFLGIxS1iKExeFFLEMN8UsZwUrWUUJq1lDKWtZx3o2sJEyNlHOZrawlQoqqaKabWynRoK4zmnO0EsnHzlLOxfp4iY3JJgLvOcUV8QiVi5xjj4+SAjd3OIH3/nJNW7zjCfcYQc76aCW59TxlH5e84KXvOLT+O0GeMNb7uJhjMsMMcg7vHxhlPPswsdu9tBAI1fZyz6aaKYFP/s5wEE+c4jDtHKEYxzlET20cZwTnOQr33g8/oMRCRWbhEm4REikREm0xEisxEm8JEgi97jPAx5KkiRLisXT0Nrk1U0Mq7/Rp2lOTVlk6lK9y64s+KOhaZpSVxpKuzJH6VDmKvOU+cp/e05TXe3quq3e5/E319XWtHjNynCbOkwd7sLfiLiJTAAAALgB/4WwAY0AS7AIUFixAQGOWbFGBitYIbAQWUuwFFJYIbCAWR2wBitcWACwASBFsAMrRAGwAiBFsAMrRLADIEW6AAJ//wACK7EDRnYrRFmwFCsAAAABWkasjwAA) format('woff');
+}
+
+.conceal:not(:invalid):not(:focus) {
+  font-family: 'dotsfont' !important;
+  font-size: 6px;
+  }
+
+.conceal PRE {
+  font-family: 'dotsfont' !important;
+  font-size: 10px;
+}
+
+

package/assets/styles/fonts/_fontstack.scss

@@ -0,0 +1,49 @@
+/* poppins-300 - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''),
+       url('~shell/assets/fonts/poppins/poppins-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~shell/assets/fonts/poppins/poppins-v15-latin-300.woff') format('woff'), /* Modern Browsers */
+}
+
+/* poppins-500 - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: bold;
+  src: local(''),
+       url('~shell/assets/fonts/poppins/poppins-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~shell/assets/fonts/poppins/poppins-v15-latin-500.woff') format('woff'), /* Modern Browsers */
+}
+
+/* lato-regular - latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''),
+       url('~shell/assets/fonts/lato/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~shell/assets/fonts/lato/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
+}
+
+/* lato-700 - latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: bold;
+  src: local(''),
+       url('~shell/assets/fonts/lato/lato-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~shell/assets/fonts/lato/lato-v17-latin-700.woff') format('woff'), /* Modern Browsers */
+}
+
+/* roboto-mono-regular - latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''),
+       url('~shell/assets/fonts/roboto-mono/roboto-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~shell/assets/fonts/roboto-mono/roboto-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
+}

package/assets/styles/fonts/_icons.scss

@@ -0,0 +1,101 @@
+
+@use "sass:math";
+
+@import "~rancher-icons/style.scss";
+
+// Animated Icons
+// --------------------------
+.icon-spin {
+  -webkit-animation: icon-spin 5000ms infinite linear;
+          animation: icon-spin 5000ms infinite linear;
+}
+
+@-webkit-keyframes icon-spin {
+  from {
+      transform:rotate(0deg);
+  }
+  to {
+      transform:rotate(360deg);
+  }
+}
+
+@keyframes icon-spin {
+  from {
+      transform:rotate(0deg);
+  }
+  to {
+      transform:rotate(360deg);
+  }
+}
+
+// FontAwesomeness
+$icon-li-width:         math.div(30em, 14) !default;
+$icon-inverse:          #fff !default;
+
+.icon {
+  display: inline-block;
+}
+
+// Sizes
+.icon-fw {
+  width: math.div(18em, 14);
+  text-align: center;
+}
+
+.icon-sm {
+  font-size: (1em*0.8);
+}
+
+.icon-lg {
+  font-size: math.div(4em, 3);
+  line-height: (3em * 0.25);
+  vertical-align: -15%;
+}
+.icon-2x { font-size: 2em; }
+.icon-3x { font-size: 3em; }
+.icon-4x { font-size: 4em; }
+.icon-5x { font-size: 5em; }
+
+// Stacked
+.icon-stack {
+  position: relative;
+  display: inline-block;
+  // width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.icon-stack-1x, .icon-stack-2x {
+  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/fonts/_zerowidthspace.scss

@@ -0,0 +1,8 @@
+// Zero-width space font, for killing space between inline-block elements
+
+@font-face {
+  font-family: 'zerowidthspace';
+  font-weight: normal;
+  font-style: normal;
+  src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+}

package/assets/styles/global/_button.scss

@@ -0,0 +1,182 @@
+$btn-padding: 0 21px 0 21px;
+$btn-sm-padding: 0 7px 0 7px;
+$btn-height: 40px;
+$btn-sm-height: 30px;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
+.btn,
+button,
+[class^='btn-'] {
+  align-items: center;
+  display: inline-flex;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 0;
+  padding: $btn-padding;
+  border-radius: var(--border-radius);
+  color: var(--lightest);
+  line-height: $btn-height;
+  min-height: $btn-height;
+
+  > .icon:not(:only-child) {
+    margin-right: 6px;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: var(--lightest);
+  }
+
+  &.bg-transparent {
+    color: var(--body-text);
+  }
+}
+
+//icon button
+.icon-btn {
+  padding: 0;
+  line-height: initial;
+
+  &.btn-sm {
+    padding: 0;
+  }
+
+  span {
+    padding: 0 10px 0 5px;
+    vertical-align: middle;
+  }
+}
+
+.btn-sm,
+.btn-group-sm > .btn,
+.btn-sm .btn-label {
+  padding: $btn-sm-padding;
+  min-height: $btn-sm-height;
+  line-height: 28px;
+}
+
+//btn roles
+.role-primary {
+  background: var(--primary);
+  color: var(--primary-text);
+
+  &:hover, &._hover {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text);
+  }
+
+  &:focus, &.focused {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text);
+  }
+}
+
+.role-secondary {
+  background: transparent;
+  color: var(--primary) !important;
+  border: solid 1px var(--primary);
+  line-height: $btn-height - 2px;
+
+  &:hover, &._hover {
+    color: var(--lightest) !important;
+  }  
+
+  &:focus, &.focused {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text) !important;
+  }
+
+  &.btn-sm {
+    line-height: $btn-sm-height;
+  }
+}
+
+.role-tertiary {
+  background: var(--accent-btn);
+  border: solid 1px var(--primary);
+  color: var(--primary);
+
+  &:focus, &.focused {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text);
+  }
+
+  &.btn:not(.btn-sm) {
+    line-height: $btn-height - 2px;
+  }
+}
+
+.role-link {
+  background: transparent;
+  color: var(--link) !important;
+}
+
+.role-multi-action {
+  background: var(--accent-btn);
+  border: solid thin var(--primary);
+  color: var(--primary);
+  border-radius: 2px;
+}
+
+.icon-group i {
+  font-size: 1.5em;
+}
+
+//disabled
+.btn-disabled,
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  cursor: not-allowed;
+  color: var(--disabled-text) !important;
+  &:not(.role-link){
+    background-color: var(--disabled-bg) !important;
+  }
+}
+
+.btn-group {
+  position: relative;
+  text-align: initial;
+  vertical-align: middle;
+  padding: 0;
+  border-radius: var(--border-radius);
+
+  .btn {
+    position: relative;
+    display: inline-flex;
+    border-radius: 0;
+    text-align: center;
+
+    &:focus {
+      // Move the focused one to the top so that the focus ring is all visible
+      z-index: 1;
+    }
+
+    &.active {
+      @extend .bg-primary;
+    }
+
+    &:first-child {
+      border-top-left-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+
+  .btn[disabled] {
+    // Ensure disabled button's border remains as-is, otherwise button appears vertically shorter than others in group
+    border: inherit;
+  }
+}

package/assets/styles/global/_cards.scss

@@ -0,0 +1,94 @@
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  .link-container {
+    position: relative;
+    background-color: var(--input-bg);
+    border-radius: var(--border-radius);
+    border: solid 1px var(--input-border);
+    display: flex;
+    flex-basis: 40%;
+    margin: 0 10px 10px 0;
+    max-width: 325px;
+    min-height: 100px;
+    border-left: solid 10px var(--primary);
+
+    a[disabled], &.disabled {
+      cursor: not-allowed;
+      color: var(--disabled-text);
+    }
+
+    &.disabled{
+      background-color: var(--disabled-bg);
+      border-left: solid 10px var(--disabled-text);
+      > * {
+        opacity: .3;
+      }
+
+     .disabled-msg{
+      position:absolute;
+      color: var(--error);
+      z-index: z-index('hoverOverContent');
+      opacity: 1;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      }
+    }
+
+    &:hover:not(.disabled) {
+      box-shadow: 0px 0px 1px var(--outline-width) var(--outline);
+    }
+
+    > * {
+      align-items: center;
+      display: flex;
+      flex: 1 0;
+      padding: 10px;
+
+      .link-logo,
+      .link-content {
+        display: inline-block;
+        height: 100%;
+      }
+
+      .link-logo {
+        text-align: center;
+        width: 60px;
+        height: 60px;
+        border-radius: calc(2 * var(--border-radius));
+        background-color: white;
+
+        img {
+          width: 56px;
+          height: 56px;
+          -o-object-fit: contain;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      .link-content {
+        width: 100%;
+        margin-left: 10px;
+      }
+
+      .description {
+        margin-top: 10px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        // -webkit-line-clamp: 3;
+        // line-clamp: 3;
+        text-overflow: ellipsis;
+        color: var(--secondary);
+      }
+    }
+  }
+}

package/assets/styles/global/_columns.scss

@@ -0,0 +1,122 @@
+@use "sass:math";
+
+@import "~shell/assets/styles/base/functions";
+@import "~shell/assets/styles/base/_variables";
+
+
+$COLUMNS: 6 10 11 12 23 24;
+$DEFAULT_COLUMNS: 12;
+
+/* SECTIONS */
+.section {
+  clear: both;
+  padding: 0px;
+  margin: 0px;
+}
+
+/* COLUMN SETUP */
+.col {
+  flex: 0 0 auto;
+  margin: 0 $column-gutter 0 0;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &.equal-height {
+    display: flex;
+    flex: 1;
+  }
+}
+
+/* ROWS */
+.row {
+  display: flex;
+  // margin-bottom: 20px;
+}
+
+.row:before,
+.row:after {
+  content:"";
+  display:table;
+}
+.row:after {
+  clear:both;
+}
+
+/* COLUMNS */
+@each $cols in $COLUMNS {
+  $span: $cols;
+  $suffix: null;
+
+  @if ( $cols != $DEFAULT_COLUMNS ) {
+    $suffix: -of-#{$cols}
+  }
+
+  @while $span > 0 {
+    // Normal column with a gutter
+    .span-#{$span}#{$suffix} { width: decimal-round( (math.div(100 - ($column-gutter * ($cols - 1)), $cols) * $span) + (($span - 1) * $column-gutter) , 3, 'floor'); }
+
+    // Gutterless column
+    .gutless .span-#{$span}#{$suffix} { margin-right: 0; width: decimal-round( math.div($span, $cols) * 100%, 3, 'floor'); }
+
+    // Offsets
+    .offset-#{$span}#{$suffix} {
+      margin-left: decimal-round( (math.div($span, $cols)*100%) + $span*math.div($column-gutter, $cols), 3, 'floor' );
+    }
+
+    // Gutterless offset
+    .gutless .offset-#{$span}#{$suffix} { margin-left: decimal-round( (math.div($span, $cols)*100%), 3, 'floor' ); }
+
+    $span: $span - 1;
+  }
+}
+
+//flex grid
+.container-flex {
+  display: flex;
+  flex-wrap: wrap;
+
+  .flex-item-half {
+    flex-grow: 1;
+    display: flex;
+    width: 50%;
+  }
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-justify-right {
+  justify-content: right;
+}
+
+.flex-justify-left {
+  justify-content: left;
+}
+
+.container-flex-center {
+  @extend .container-flex;
+  align-items: center;
+}
+
+// Equal height columns
+.row-full-height {
+  height: 100%;
+}
+
+.col-full-height {
+  height: 100%;
+  vertical-align: middle;
+}
+
+.row-same-height {
+  display: table;
+  width: 100%;
+  /* fix overflow */
+  table-layout: fixed;
+}
+
+
+//breakpoint stuff here