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

package/assets/styles/base/_variables.scss

@@ -1,5 +1,7 @@
-$header-font: 'Poppins', sans-serif;
-$body-font: 'Lato', arial, helvetica, sans-serif;
+// $header-font: 'Poppins', sans-serif;
+$header-font: 'Microsoft YaHei';
+// $body-font: 'Lato', arial, helvetica, sans-serif;
+$body-font: 'Microsoft YaHei';
 $mono-font: 'Roboto Mono', monospace;
 
 $app-bar-collapsed-width: 70px;
@@ -10,9 +12,14 @@ $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: 18px;
+$input-line-height: 32px;
 
 $column-gutter: 1.75%;
 
@@ -32,13 +39,13 @@ $z-indexes: (
   // ---- Boundary for central content (in `<main>`)
 
   // This covers both relative and content modes of the loading indicator
-  loading: 12,
+  loading: 16,
 
   // Users can click on shell in header and show shell even with most loading indicators showing,
   // so add it above them
-  windowsManager: 13,
+  windowsManager: 17,
 
-  mainHeader: 14,
+  mainHeader: 18,
 
   cruFooter: 19,
 
@@ -74,4 +81,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 21px 0 21px;
+$btn-padding: 0 10px;
 $btn-sm-padding: 0 7px 0 7px;
-$btn-height: 40px;
-$btn-sm-height: 30px;
+$btn-height: 32px;
+$btn-sm-height: 32px;
 
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the button component.
@@ -22,9 +22,12 @@ button,
   border: 0;
   padding: $btn-padding;
   border-radius: var(--border-radius);
-  color: var(--lightest);
-  line-height: $btn-height;
-  min-height: $btn-height;
+  // color: var(--lightest);
+  line-height: $btn-height !important;
+  height: $btn-height !important;
+  min-width: 100px;
+  justify-content: center;
+  
 
   > .icon:not(:only-child) {
     margin-right: 6px;
@@ -32,7 +35,7 @@ button,
 
   &:hover {
     text-decoration: none;
-    color: var(--lightest);
+    // color: var(--lightest);
   }
 
   &.bg-transparent {
@@ -40,6 +43,10 @@ button,
   }
 }
 
+.bg-primary {
+  color: var(--lightest);
+}
+
 //icon button
 .icon-btn {
   padding: 0;
@@ -60,7 +67,8 @@ button,
 .btn-sm .btn-label {
   padding: $btn-sm-padding;
   min-height: $btn-sm-height;
-  line-height: 28px;
+  line-height: 32px;
+  min-width: 100px;
 }
 
 //btn roles
@@ -69,8 +77,9 @@ 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 {
@@ -86,17 +95,25 @@ button,
 
 .role-secondary {
   background: transparent;
-  color: var(--primary) !important;
-  border: solid 1px var(--primary);
+  color: var(--input-label) !important;
+  // border: solid 1px var(--primary);
+  border: solid 1px #d9d9d9;
   line-height: $btn-height - 2px;
+  min-width: 100px;
 
   &:hover, &._hover {
-    color: var(--lightest) !important;
+    // color: var(--lightest) !important;
+    color: var(--input-label) !important;
+    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2)!important;
   }
 
   &:focus, &.focused {
-    background-color: var(--primary-hover-bg);
-    color: var(--primary-text) !important;
+    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;
   }
 
   &.btn-sm {
@@ -106,11 +123,6 @@ button,
       border: 0;
     }
   }
-
-  &:focus-visible {
-    @include focus-outline;
-    outline-offset: 2px;
-  }
 }
 
 .role-tertiary {
@@ -118,9 +130,11 @@ button,
   border: solid 1px var(--primary);
   color: var(--primary);
 
-  &:focus, &.focused {
-    background-color: var(--primary-hover-bg);
-    color: var(--primary-text);
+  &:focus, &.focused, &:hover {
+    // background-color: var(--primary-hover-bg);
+    // color: var(--primary-text);
+    background-color: var(--accent-btn);
+    color: var(--primary);
   }
 
   &.btn:not(.btn-sm) {
@@ -138,7 +152,8 @@ button,
   color: var(--link);
 
   &:hover, &._hover {
-    color: var(--lightest);
+    // color: var(--lightest);
+    color: var(--link);
   }
 
   &:focus, &.focused {
@@ -154,10 +169,13 @@ button,
 }
 
 .role-multi-action {
-  background: var(--accent-btn);
+  background-color: rgba(0,0,0,0);
   border: solid thin var(--primary);
-  color: var(--primary);
+  color: var(--primary) !important;
   border-radius: 2px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
 }
 
 .icon-group i {

package/assets/styles/global/_columns.scss

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

package/assets/styles/global/_form.scss

@@ -19,17 +19,18 @@ TEXTAREA,
   display: block;
   box-sizing: border-box;
   width: 100%;
-  padding: $input-padding-sm;
+  // padding: 4px 11px;
+  // border-radius: var(--border-radius);
+  
+  color: var(--input-text);
   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:not(.labeled-input):not(.unlabeled-select):not(.labeled-select), 
-  &.focused:not(.labeled-input):not(.unlabeled-select):not(.labeled-select) {
-    @include form-focus;
+  &:focus, &.focused {
+    @include form-focus
   }
 
   LABEL {
@@ -55,7 +56,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);
@@ -67,30 +68,54 @@ 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: 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;
 }
 
 TEXTAREA {
-  padding: $input-padding-lg 10px 10px 10px;
+  padding: 6px 11px;
   line-height: $input-line-height;
+  border: solid var(--border-width) var(--input-border);
 }
 
 FORM {
-  LABEL, .key-value-label {
+  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: 14px;
+      font-size: 12px;
     }
 
     &.radio, &.checkbox {
@@ -144,3 +169,10 @@ 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,13 +1,16 @@
 .labeled-input {
   position: relative;
-  display: flex;
+  display: table;
   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;
@@ -26,7 +29,7 @@
     width: calc(100% - 20px);
 
     i {
-      pointer-events: initial;
+      pointer-events: initial
     }
   }
 
@@ -47,7 +50,7 @@
   INPUT,
   SELECT {
     position: relative;
-    font-size: 14px;
+    font-size: 12px;
     display: block;
     width: 100%;
   }
@@ -61,24 +64,27 @@
     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: $input-padding-lg 0 0 0;
-    line-height: calc(#{$input-line-height} + 1px);
-
+    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);
+    }
     &.no-label {
-      padding: $input-padding-sm 0px $input-padding-sm 0px;
+      // padding: $input-padding-sm 0px $input-padding-sm 0px;
     }
   }
 
@@ -97,7 +103,7 @@
 
     .addon,
     .addon.btn {
-      display: flex;
+      display: table-cell;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
@@ -106,17 +112,27 @@
     }
 
     .addon {
-      padding: 6px 12px;
-      font-size: 14px;
+      // 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;
       font-weight: normal;
       line-height: 1;
       text-align: center;
-      border-left: solid thin var(--input-border);
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      // background-color: #fff;
     }
   }
 
   &.suffix INPUT {
-    padding-right: 8px;
+    padding-right: 0px;
+    width: $input-width;
   }
 
   .cron-label,
@@ -124,17 +140,29 @@
     position: absolute;
     top: 100%;
     width: 100%;
-    padding-top: 5px;
+    // padding-top: 5px;
+    padding-top: 0px;
     left: 0;
-    color: var(--input-label);
-    pointer-events: initial;
+    width: 400px !important;
+    color: var(--outline);
+    // 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: 8px;
-    align-self: center;
+    margin-left: 0px;
+    // align-self: center;
     text-align: right;
 
     &.align-start {
@@ -47,6 +47,10 @@ HEADER {
 
   .role-multi-action {
     padding: 0 $input-padding-sm;
+    background-color: var(--body-bg);
+    &:focus{
+      background-color: var(--body-bg);
+    }
   }
 }
 
@@ -69,6 +73,7 @@ HEADER {
   display: grid;
   position: relative;
   flex: 1 1 auto;
+  overflow-y: auto;
   min-height: 0px;
 
   &.dashboard-padding-left {

package/assets/styles/global/_select.scss

@@ -9,17 +9,20 @@
 }
 
 .unlabeled-select:not(.in-input) {
+  // min-height: $unlabeled-input-height;
   min-height: $unlabeled-input-height;
 }
 .col {
   > .unlabeled-select:not(.taggable) {
-    padding-top: 5px;
+    // padding-top: 5px;
   }
 }
 
 .labeled-select,
 .unlabeled-select {
   min-width: 75px;
+  min-height: 32px;
+  width: $input-width;
 
   .required {
     color: var(--error);
@@ -34,11 +37,6 @@
     float: right;
   }
 
-  &:focus-visible, &.focused {
-    @include focus-outline;
-    outline-offset: -1px;
-  }
-
   &.focused {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -53,9 +51,14 @@
 
       .vs__search {
         background-color: transparent;
+        border: 0px;
       }
 
-      .vs__dropdown-toggle,
+      .vs__dropdown-toggle{
+        border: solid var(--border-width) var(--input-border);
+        height: 32px;
+      }
+      // .vs__dropdown-toggle,
       .vs__dropdown-toggle > * {
         background-color: transparent;
         border: transparent;
@@ -95,11 +98,14 @@
     min-height: 30px;
 
     .vs__selected {
-      min-height: 25px;
+      min-height: 20px;
       padding: 0 7px;
+      height: 21px;
+      width: unset !important;
 
       &:not(:only-child) {
-        margin-bottom: 3px;
+        margin-bottom: 2px;
+        margin-top: 2px;
       }
     }
   }
@@ -121,10 +127,10 @@
   }
 
   &.disabled {
-    border: solid var(--border-width) var(--input-disabled-border);
-
+    // border: solid var(--border-width) var(--input-disabled-border);
     .vs__dropdown-toggle, input {
       cursor: not-allowed;
+      background-color: var(--input-disabled-bg);
     }
 
     .v-select {
@@ -134,6 +140,7 @@
 
       .vs__dropdown-toggle, input {
         cursor: not-allowed;
+        background-color: var(--input-disabled-bg);
 
         .vs__selected {
           color: var(--input-disabled-text);
@@ -147,7 +154,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: $unlabaled-select-padding;
+  padding: 0px 0;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;
@@ -159,7 +166,7 @@
       height: 100%;
 
       .vs__dropdown-toggle {
-        height: 100%;
+        // height: 100%;
       }
       .vs__actions {
         width: auto;
@@ -169,25 +176,26 @@
 
   &:not(.view):not(.disabled) {
     background-color: var(--input-bg);
-    border: solid var(--border-width) var(--input-border);
+    // border: solid var(--border-width) var(--input-border);
 
     &:hover:not(.focused):not(.disabled) {
       &,
       .vs__dropdown-menu {
-        border: solid var(--border-width) var(--input-hover-border) !important;
+        box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+        // border: solid var(--border-width) var(--input-hover-border) !important;
       }
     }
 
     &.focused {
       &,
       .vs__dropdown-menu {
-        border: solid var(--border-width) var(--outline) !important;
+        // border: solid var(--border-width) var(--outline) !important;
       }
     }
 
   }
 
   .labeled-tooltip .status-icon {
-    top: $input-padding-sm;
+    // top: $input-padding-sm;
   }
 }

package/assets/styles/global/_table.scss

@@ -14,7 +14,7 @@
 
   thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid var(--border);
+    // border-bottom: 1px solid var(--border);
   }
 
   tbody + tbody {
@@ -104,3 +104,9 @@
       }
     }
   }
+
+  
+  .sortable-table tbody tr.group-row td:first-of-type {
+    background-color: var(--sortable-table-bg) !important;
+  }
+