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

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

@@ -1,23 +1,2 @@
-<?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>
+<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>

package/assets/images/promp-yellow.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="normal_u801" transform="translate(0 -10)">
+    <path id="路径_23553" data-name="路径 23553" d="M4.98,1.341A9.782,9.782,0,0,1,10,0a9.782,9.782,0,0,1,5.019,1.341,9.955,9.955,0,0,1,3.64,3.639A9.782,9.782,0,0,1,20,10a9.782,9.782,0,0,1-1.341,5.019,9.956,9.956,0,0,1-3.639,3.639A9.782,9.782,0,0,1,10,20a9.782,9.782,0,0,1-5.02-1.341A9.955,9.955,0,0,1,1.341,15.02,9.782,9.782,0,0,1,0,10,9.782,9.782,0,0,1,1.341,4.98,9.955,9.955,0,0,1,4.98,1.341Zm6.569,15.2a.428.428,0,0,0,.117-.306V13.763a.428.428,0,0,0-.117-.306.38.38,0,0,0-.287-.124h-2.5a.445.445,0,0,0-.43.43v2.474a.445.445,0,0,0,.43.43h2.5a.38.38,0,0,0,.288-.124ZM11.5,11.986a.329.329,0,0,0,.137-.228l.234-8.086a.256.256,0,0,0-.13-.234.485.485,0,0,0-.312-.1H8.568a.485.485,0,0,0-.312.1.256.256,0,0,0-.13.234l.221,8.086a.282.282,0,0,0,.13.228.506.506,0,0,0,.313.1H11.2A.479.479,0,0,0,11.5,11.986Z" transform="translate(0 10)" fill="#ef9c3e"/>
+  </g>
+</svg>

package/assets/styles/all.scss

@@ -0,0 +1,83 @@
+/* Chrome, Edge, Safari */
+input[type="password"]::-webkit-textfield-decoration-container,
+input[type="password"]::-webkit-inner-spin-button,
+input[type="password"]::-webkit-clear-button {
+    display: none !important;
+}
+
+/* Edge / IE */
+input[type="password"]::-ms-reveal {
+    display: none !important;
+}
+
+/* Firefox */
+input[type="password"]::-moz-reveal {
+    display: none !important;
+}
+
+
+.info-tab-title{
+  font-size: 14px;
+  line-height: 19px;
+  margin-bottom: 14px;
+}
+
+.required{
+  color: red;
+}
+.text-label{
+  width: 160px;
+}
+ul{
+  padding-left: 0px;
+}
+.basic-title{
+  font-size: 14px;
+  margin-bottom: 32px;
+}
+.basic-title-more-set{
+  margin-top: 32px;
+}
+
+.radio-group{
+  display: flex !important;
+}
+
+  .clearFix{
+    font-size: 16px;
+  }
+
+  .name-td{
+    overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  display: inline-block;
+  max-width: 180px;
+  A{
+    display: unset;
+  }
+  }
+
+  INPUT[type=number]:hover:not(.focused):not(:focus):not(.disabled):not(:disabled):not(.view){
+    padding: 0px 0px 0px 11px;
+  }
+  INPUT[type=number]:focus{
+    padding: 0px 0px 0px 11px !important;
+  }
+
+  .vs__dropdown-menu{
+    min-width: 100px !important;
+  }
+
+  .more{
+    margin-top: 32px;
+  }
+
+  :deep() .vs__actions:after {
+    // padding-top: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .TEXTAREA{
+    border: solid var(--border-width) var(--input-border);
+  }

package/assets/styles/app.scss

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

package/assets/styles/base/_basic.scss

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

package/assets/styles/base/_helpers.scss

@@ -30,7 +30,7 @@ $spacing-property-map: (
 }
 
 .spacer {
-  padding: 40px 0 0 0;
+  padding: 20px 0 0 0;
 }
 
 .spacer-small {

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: 14px;
+  font-size: 12px;
 }
 
 H1, H2, H3, H4, H5, H6 {
@@ -24,6 +24,7 @@ H3 {
 
 H4 {
   font-size: 16px;
+  margin: 0px;
 }
 
 H5 {

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: 30px;
+$unlabeled-input-height: 30px;
+$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/fonts/_icons.scss

@@ -38,8 +38,9 @@ $icon-inverse:          #fff !default;
 
 // Sizes
 .icon-fw {
-  width: math.div(18em, 14);
-  text-align: center;
+  width: 32px;
+  // width: math.div(18em, 14);
+  // text-align: center;
 }
 
 .icon-sm {

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,31 +95,34 @@ 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 {
     line-height: $btn-sm-height - 2px;
 
     &:focus, &.focused {
-      border: 0;
+      // 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,23 +19,25 @@ 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 {
     color: var(--input-label);
   }
   &:hover:not(.focused):not(:focus):not(.disabled):not(:disabled):not(.view) {
+    box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
     &, .vs__dropdown-menu {
       border-color: var(--input-hover-border);
     }
@@ -55,7 +57,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 +69,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 +170,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;
+    }
+  }
 }