dashboard-shell-shell 3.0.5-test.5 → 3.0.5-test.6

package/assets/images/pl/half-logo.svg

@@ -1,2 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve" class=""><script xmlns=""/>  <image id="image0" width="32" height="32" x="0" y="0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo AAB1MAAA6mAAADqYAAAXcJy6UTwAAAGSUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAMxmAPmXHfiaG/9VAAAAAAAAAAAAAAAAAPOXF/WYIvWaIfaaIvSYIu6Z EQAAAP//APaXHPWYIPWaIvWZIvWaIvWZIveYIf+eGP8AAPSXIPWaIvWaIvWaIvWZIvWZIfWWHeiL APSaIvSZIf+LF/WaIvWaIv+ZGvSZIvSaIv+AAPOXIPWZIvWaIfaYIP+ZAPSZIPWZIPSZIPWZI/Wa I/aaIfOYIPWZIf+AAPaaIvaZI/SZIvWXIfWYIPWZIvSZIvWYH/eZIfaZIfaaIvWZIt+AAPSZIfaa IvWaIfOXIPaXHfSaIfWaI/WaIvaZIfWZH/WaIvaaIvWZI/WaIvWaIvWZIvSYIfOSGPCHD/eZIfWa IvWaI/aaIvaaIP+VFQAAAAAAAAAAAAAAAPmaHvWaIfWaIfKaGwAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPWaI////xwk1LwAAACDdFJOUwCb9/7EIPj93i7dzFU5 HQUsJgNUy68IFoHe13IPBwEbaNT9/MpcFQFg0fj+9shOC9nBC9vDCtW9BGnSx1kKqGaO+/nXgaAC 2vPBe4bi2nx9xvXLCLz5sFhYuvv3rBnM/evt+sVeFRF64PrbbwzNW0EhK4N8JiJDXPrfKCrhovy9 HL6jAx1MpAAAAAFiS0dEhRXXaucAAAAHdElNRQfpCA4DCx42jYbpAAABHUlEQVQ4y2NgGBmAkYmZ ubm5mZmFFVmUlQUsyMzEyMDWDALsHJyo+ji52MESbAwgldw8vHwQcX4BQSEIi49XWARkCFiBqBhU n7iEpJS0DJQjKwoyAkmBnLyColJLi7KKqpo6NgVyGppa2i1AoK2jq4dNgb5BCwxoG2JTYGQMV9Bi gk2BqZk23ARzbAosLK2UIPLK1jbYFNja2TtIOmprOzm7WLq6YXODu4enl7ePr59/QGAQNgXBIVra oWHhEZFR2tEx6tgCKtY+zjE+IVE7KTklFWtIMjCkpWc4ZmZl52AEdW5efgFYzK2wqLgEHM4MpWXl ueDIqgDHKnNlFWp0V9cwgyUqGGqZmOtAoL4BWZ6vsQIE2NmaBjpB0wkAADZsgegw4PySAAAAJXRF WHRkYXRlOmNyZWF0ZQAyMDI1LTA4LTE0VDAzOjExOjI3KzAwOjAwCSfqsAAAACV0RVh0ZGF0ZTpt b2RpZnkAMjAyNS0wOC0xNFQwMzoxMToyNyswMDowMHh6UgwAAAAodEVYdGRhdGU6dGltZXN0YW1w ADIwMjUtMDgtMTRUMDM6MTE6MzArMDA6MDAmYk3DAAAAAElFTkSuQmCC"/>
-<script xmlns=""/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 89.6399918 80.5510254" style="enable-background:new 0 0 89.6399918 80.5510254;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M63.2230225,8.25H45.4490356c-0.1480103,0-0.3010254,0-0.4490356,0H26.6990356
+		c-0.2260132,0-0.4490356,0-0.6010132,0.0740356V6.6019897C26.0980225,3,25.1990356,0,24.0740356,0
+		S21.5980225,2.9260254,21,6.5230103l-1.875,11.1760254c-0.6019897,3.6019897,1.875,6.5279541,5.5510254,6.5279541H35.625
+		c1.125,0,2.1760254-0.1529541,3.1480103-0.4539795c-0.375,1.875-1.9489746,3.3010254-3.9719849,3.3010254h-15.375
+		c-2.4769897,0-4.3519897-2.25-3.9769897-4.7220459l1.5739746-9.375C17.3980103,10.5,15.5230103,8.25,13.0510254,8.25H0v47.8519897
+		h20.625c2.25,0,4.0510254,1.7960205,4.0510254,4.0460205V76.5c0,2.25,1.7969971,4.0510254,4.0469971,4.0510254h21.75
+		c2.25,0,4.0499878-1.8010254,4.0499878-4.0510254V58.9490356H42.9730225c-3.5980225,0-6.5980225-3-6.5980225-6.5970459V41.0230103
+		c0-2.1710205,1.0510254-4.0460205,2.625-5.25v13.5C39,52.875,42,55.875,45.5980225,55.875H63.375
+		c3.5980225,0,6.5980225-3,6.5980225-6.6019897V14.9260254C69.8240356,11.1760254,66.8980103,8.25,63.2230225,8.25z"/>
+	<path class="st0" d="M89.5510254,17.6990356l-1.875-11.1760254C87.0740356,2.9260254,85.6480103,0,84.5980225,0
+		c-1.125,0-2.0239868,3-2.0239868,6.6019897v2.9210205c0,3.6019897-3,6.6019897-6.6010132,6.6019897h-2.9219971
+		c-0.2269897,0-0.4530029,0-0.6019897,0v8.0230103c0.2269897,0,0.4489746,0,0.6019897,0h11.0230103
+		C87.6760254,24.1480103,90.1480103,21.2269897,89.5510254,17.6990356z"/>
+</g>
+</svg>

package/assets/styles/app.scss

@@ -33,7 +33,3 @@
 
 @import "./vendor/vue-select";
 @import "./vendor/code-mirror";
-
-@import './all.scss';
-@import '../icons/iconfont.css';
-

package/assets/styles/base/_basic.scss

@@ -98,8 +98,8 @@ A {
 
   &:hover,
   &:active {
-    text-decoration: none;
-    color: var(--link);
+    text-decoration: underline;
+    color: var(--body-text);
   }
 
   &:focus-visible {

package/assets/styles/base/_mixins.scss

@@ -159,5 +159,5 @@
 @mixin focus-outline {
   // Focus for form like elements (not to be confused with basic :focus style)
   // we need to use !important because it needs to superseed other classes that might impact outlines
-  // outline: 2px solid var(--primary-keyboard-focus);
+  outline: 2px solid var(--primary-keyboard-focus);
 }

package/assets/styles/base/_typography.scss

@@ -1,6 +1,6 @@
 HTML, BODY {
   font-family: $body-font;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 H1, H2, H3, H4, H5, H6 {
@@ -24,7 +24,6 @@ H3 {
 
 H4 {
   font-size: 16px;
-  margin: 0px;
 }
 
 H5 {

package/assets/styles/base/_variables.scss

@@ -1,7 +1,5 @@
-// $header-font: 'Poppins', sans-serif;
-$header-font: 'Microsoft YaHei';
-// $body-font: 'Lato', arial, helvetica, sans-serif;
-$body-font: 'Microsoft YaHei';
+$header-font: 'Poppins', sans-serif;
+$body-font: 'Lato', arial, helvetica, sans-serif;
 $mono-font: 'Roboto Mono', monospace;
 
 $app-bar-collapsed-width: 70px;
@@ -12,14 +10,9 @@ $unlabeled-input-height: 40px;
 $unlabaled-select-padding: 3px 0;
 $footer-height: 60px;
 
-$input-height: 32px;
-$unlabeled-input-height: 32px;
-$input-width: 400px;
-
-
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;
-$input-line-height: 32px;
+$input-line-height: 18px;
 
 $column-gutter: 1.75%;
 
@@ -81,4 +74,4 @@ $font-size-h2: 21px;
 // Global spacing variables
 $space-s: 10px;
 $space-m: 20px;
-$space-l: 40px;
+$space-l: 40px;

package/assets/styles/global/_button.scss

@@ -1,7 +1,7 @@
-$btn-padding: 0 10px;
+$btn-padding: 0 21px 0 21px;
 $btn-sm-padding: 0 7px 0 7px;
-$btn-height: 32px;
-$btn-sm-height: 32px;
+$btn-height: 40px;
+$btn-sm-height: 30px;
 
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the button component.
@@ -22,12 +22,9 @@ button,
   border: 0;
   padding: $btn-padding;
   border-radius: var(--border-radius);
-  // color: var(--lightest);
-  line-height: $btn-height !important;
-  height: $btn-height !important;
-  min-width: 100px;
-  justify-content: center;
-  
+  color: var(--lightest);
+  line-height: $btn-height;
+  min-height: $btn-height;
 
   > .icon:not(:only-child) {
     margin-right: 6px;
@@ -35,7 +32,7 @@ button,
 
   &:hover {
     text-decoration: none;
-    // color: var(--lightest);
+    color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -43,10 +40,6 @@ button,
   }
 }
 
-.bg-primary {
-  color: var(--lightest);
-}
-
 //icon button
 .icon-btn {
   padding: 0;
@@ -67,8 +60,7 @@ button,
 .btn-sm .btn-label {
   padding: $btn-sm-padding;
   min-height: $btn-sm-height;
-  line-height: 32px;
-  min-width: 100px;
+  line-height: 28px;
 }
 
 //btn roles
@@ -77,9 +69,8 @@ button,
   color: var(--primary-text);
 
   &:hover, &._hover {
-    // background-color: var(--primary-hover-bg);
+    background-color: var(--primary-hover-bg);
     color: var(--primary-text);
-    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
   }
 
   &:focus, &.focused {
@@ -95,25 +86,17 @@ button,
 
 .role-secondary {
   background: transparent;
-  color: var(--input-label) !important;
-  // border: solid 1px var(--primary);
-  border: solid 1px #d9d9d9;
+  color: var(--primary) !important;
+  border: solid 1px var(--primary);
   line-height: $btn-height - 2px;
-  min-width: 100px;
 
   &:hover, &._hover {
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
-    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
+    color: var(--lightest) !important;
   }
 
   &:focus, &.focused {
-    background: transparent;
-    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
-    // background-color: var(--primary-hover-bg);
-    // color: var(--lightest) !important;
-    color: var(--input-label) !important;
-    // color: var(--primary-text) !important;
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text) !important;
   }
 
   &.btn-sm {
@@ -123,6 +106,11 @@ button,
       border: 0;
     }
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-tertiary {
@@ -130,11 +118,9 @@ button,
   border: solid 1px var(--primary);
   color: var(--primary);
 
-  &:focus, &.focused, &:hover {
-    // background-color: var(--primary-hover-bg);
-    // color: var(--primary-text);
-    background-color: var(--accent-btn);
-    color: var(--primary);
+  &:focus, &.focused {
+    background-color: var(--primary-hover-bg);
+    color: var(--primary-text);
   }
 
   &.btn:not(.btn-sm) {
@@ -152,8 +138,7 @@ button,
   color: var(--link);
 
   &:hover, &._hover {
-    // color: var(--lightest);
-    color: var(--link);
+    color: var(--lightest);
   }
 
   &:focus, &.focused {
@@ -169,13 +154,10 @@ button,
 }
 
 .role-multi-action {
-  background-color: var(--body-bg);
+  background: var(--accent-btn);
   border: solid thin var(--primary);
-  color: var(--primary) !important;
+  color: var(--primary);
   border-radius: 2px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
 }
 
 .icon-group i {

package/assets/styles/global/_columns.scss

@@ -17,8 +17,7 @@ $DEFAULT_COLUMNS: 12;
 /* COLUMN SETUP */
 .col {
   flex: 0 0 auto;
-  margin-bottom: 24px;
-  // margin: 0 $column-gutter 0 0;
+  margin: 0 $column-gutter 0 0;
 
   &:last-child {
     margin-right: 0;
@@ -33,7 +32,6 @@ $DEFAULT_COLUMNS: 12;
 /* ROWS */
 .row {
   display: flex;
-  flex-wrap: wrap;
   // margin-bottom: 20px;
 
   &--y-center {

package/assets/styles/global/_form.scss

@@ -19,18 +19,17 @@ TEXTAREA,
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // padding: 4px 11px;
-  // border-radius: var(--border-radius);
-  
-  color: var(--input-text);
+  padding: $input-padding-sm;
   background-color: var(--input-bg);
+  border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
-
+  color: var(--input-text);
 
   @include input-status-color;
 
-  &:focus, &.focused {
-    @include form-focus
+  &:focus:not(.labeled-input):not(.unlabeled-select):not(.labeled-select), 
+  &.focused:not(.labeled-input):not(.unlabeled-select):not(.labeled-select) {
+    @include form-focus;
   }
 
   LABEL {
@@ -56,7 +55,7 @@ TEXTAREA,
     color: var(--input-disabled-text);
     background-color: var(--input-disabled-bg);
     outline-width: 0;
-    // border-color: var(--input-disabled-border);
+    border-color: var(--input-disabled-border);
     cursor: not-allowed;
     label {
       color: var(--input-disabled-label);
@@ -68,54 +67,30 @@ TEXTAREA,
     }
   }
 
-
   LABEL {
     margin: $spacing 0 0 0;
   }
 }
 
-INPUT[type='text']{
-  height: 32px;
-  border: solid var(--border-width) var(--input-border);
-  line-height: 30px;
-  padding: 0px 11px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  &:hover{
-    box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-  }
-}
-
-
 INPUT[type='search']:not(.vs__search) {
-  // padding: calc(#{$input-padding-sm} + 2px);
-  padding: 4px 11px;
-  &:hover{
-    box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-  }
-}
-INPUT[type='search']::-webkit-search-cancel-button {
-  display: none;
+  padding: calc(#{$input-padding-sm} + 2px);
 }
 
 TEXTAREA {
-  padding: 6px 11px;
+  padding: $input-padding-lg 10px 10px 10px;
   line-height: $input-line-height;
-  border: solid var(--border-width) var(--input-border);
 }
 
 FORM {
-  LABEL {
+  LABEL, .key-value-label {
     color: var(--input-label);
     display: inline-block;
-    // margin: $spacing 0 $spacing 0;
+    margin: $spacing 0 $spacing 0;
     font-size: 12px;
-    .required{
-      color: red;
-    }
+
     .radio-label,
     .checkbox-label {
-      font-size: 12px;
+      font-size: 14px;
     }
 
     &.radio, &.checkbox {
@@ -169,10 +144,3 @@ INPUT.inline-input {
 .fixed select, .fixed.v-select, .fixed input:not(.vs__search){
   height: 50px;
 }
-
-
-INPUT:not([type]){
-  border: solid var(--border-width) var(--input-border);
-  height: 32px;
-  padding: 4px 11px;
-}

package/assets/styles/global/_labeled-input.scss

@@ -1,16 +1,13 @@
 .labeled-input {
   position: relative;
-  display: table;
+  display: flex;
   border-collapse: separate;
   min-height: $input-height;
-  width: $input-width;
-  // flex: 1;
   z-index: 0; // Prevent label from cover other elements outside of the input
-  height: $input-height;
 
   &.compact-input {
     min-height: $unlabeled-input-height;
-    // padding: 0 10px;
+    padding: 0 10px;
 
     INPUT.no-label {
       line-height: $input-line-height;
@@ -29,7 +26,7 @@
     width: calc(100% - 20px);
 
     i {
-      pointer-events: initial
+      pointer-events: initial;
     }
   }
 
@@ -50,7 +47,7 @@
   INPUT,
   SELECT {
     position: relative;
-    font-size: 12px;
+    font-size: 14px;
     display: block;
     width: 100%;
   }
@@ -64,27 +61,24 @@
     user-select: none;
   }
 
-  INPUT, INPUT:hover, INPUT:focus,
-  TEXTAREA, TEXTAREA:hover, TEXTAREA:focus,
-  SELECT, SELECT:hover, SELECT:focus {
+  INPUT,
+  INPUT:hover,
+  INPUT:focus,
+  TEXTAREA,
+  TEXTAREA:hover,
+  TEXTAREA:focus,
+  SELECT,
+  SELECT:hover,
+  SELECT:focus {
     border: none;
     background-color: transparent;
     outline: 0;
     box-shadow: none;
-    padding: 0 0 0 0;
-    // line-height: calc(#{$input-line-height} + 1px);
-    line-height: calc(29px + 1px);
-    // border: solid var(--border-width) var(--input-border);
-    padding: 0px 11px;
-    box-sizing: border-box;
-    border-radius: 2px;
-
-    &:hover{
-      border-color: var(--input-border);
-      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-    }
+    padding: $input-padding-lg 0 0 0;
+    line-height: calc(#{$input-line-height} + 1px);
+
     &.no-label {
-      // padding: $input-padding-sm 0px $input-padding-sm 0px;
+      padding: $input-padding-sm 0px $input-padding-sm 0px;
     }
   }
 
@@ -103,7 +97,7 @@
 
     .addon,
     .addon.btn {
-      display: table-cell;
+      display: flex;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
@@ -112,27 +106,17 @@
     }
 
     .addon {
-      // padding: 6px 12px;
-      // font-size: 14px;
-      // font-weight: normal;
-      // line-height: 1;
-      // text-align: center;
-      // border-left: solid thin var(--input-border);
-      padding: 4px 0px 4px 4px;
-      font-size: 12px;
+      padding: 6px 12px;
+      font-size: 14px;
       font-weight: normal;
       line-height: 1;
       text-align: center;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      // background-color: #fff;
+      border-left: solid thin var(--input-border);
     }
   }
 
   &.suffix INPUT {
-    padding-right: 0px;
-    width: $input-width;
+    padding-right: 8px;
   }
 
   .cron-label,
@@ -140,29 +124,17 @@
     position: absolute;
     top: 100%;
     width: 100%;
-    // padding-top: 5px;
-    padding-top: 0px;
+    padding-top: 5px;
     left: 0;
-    width: 400px !important;
-    color: var(--outline);
-    // color: var(--input-label);
-    pointer-events:initial;
+    color: var(--input-label);
+    pointer-events: initial;
   }
 
   .validation-message,
   .sub-label.validation-message {
     color: var(--error);
   }
-}
 
-.TEXTAREA, TEXTAREA:hover, TEXTAREA:focus{
-  border: solid var(--border-width) var(--input-border);
-}
 
-@media(max-width:1400px) {
-  .labeled-input{
-    &.suffix INPUT {
-      width: 370px;
-    }
-  }
+
 }

package/assets/styles/global/_layout.scss

@@ -2,7 +2,7 @@
 .main-layout {
   grid-area: main;
   overflow: auto;
-  overflow-x: hidden;
+
   .outlet {
     display: flex;
     flex-direction: column;
@@ -36,8 +36,8 @@ HEADER {
 
   .actions-container {
     grid-area: actions;
-    margin-left: 0px;
-    // align-self: center;
+    margin-left: 8px;
+    align-self: center;
     text-align: right;
 
     &.align-start {
@@ -47,10 +47,6 @@ HEADER {
 
   .role-multi-action {
     padding: 0 $input-padding-sm;
-    background-color: var(--body-bg);
-    &:focus{
-      background-color: var(--body-bg);
-    }
   }
 }
 
@@ -73,7 +69,6 @@ HEADER {
   display: grid;
   position: relative;
   flex: 1 1 auto;
-  overflow-y: auto;
   min-height: 0px;
 
   &.dashboard-padding-left {