beyond-webui 1.0.45 → 1.0.46

package/theme-chalk/src/input.scss

@@ -6,22 +6,22 @@
 
 @mixin inset-prepend-border($color) {
   box-shadow: 1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
-  0 -1px 0 0 $color inset;
+    0 -1px 0 0 $color inset;
 }
 
 @mixin inset-append-border($color) {
   box-shadow: 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset,
-  -1px 0 0 0 $color inset;
+    -1px 0 0 0 $color inset;
 }
 
 @mixin inset-prepend-input-border($color) {
   box-shadow: 1px 0 0 0 $color inset, 1px 0 0 0 $color, 0 1px 0 0 $color inset,
-  0 -1px 0 0 $color inset !important;
+    0 -1px 0 0 $color inset !important;
 }
 
 @mixin inset-append-input-border($color) {
   box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
-  0 -1px 0 0 $color inset !important;
+    0 -1px 0 0 $color inset !important;
 }
 
 @mixin mixed-input-border($color) {
@@ -50,32 +50,32 @@
     font-size: inherit;
     font-family: inherit;
     color: var(
-        #{getCssVarName('input-text-color')},
-        map.get($input, 'text-color')
+      #{getCssVarName('input-text-color')},
+      map.get($input, 'text-color')
     );
     background-color: var(
-        #{getCssVarName('input-bg-color')},
-        map.get($input, 'bg-color')
+      #{getCssVarName('input-bg-color')},
+      map.get($input, 'bg-color')
     );
     background-image: none;
     -webkit-appearance: none;
     @include inset-input-border(
-        var(
-            #{getCssVarName('input-border-color')},
-            map.get($input, 'border-color')
-        )
+      var(
+        #{getCssVarName('input-border-color')},
+        map.get($input, 'border-color')
+      )
     );
     border-radius: getCssVarWithDefault(
-        'input-border-radius',
-        map.get($input, 'border-radius')
+      'input-border-radius',
+      map.get($input, 'border-radius')
     );
     transition: getCssVar('transition-box-shadow');
     border: none;
 
     &::placeholder {
       color: getCssVarWithDefault(
-          'input-placeholder-color',
-          map.get($input, 'placeholder-color')
+        'input-placeholder-color',
+        map.get($input, 'placeholder-color')
       );
     }
 
@@ -183,7 +183,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: 95%;
+    width: calc(100% - 20px);
 
     &.float-focused {
       color: $color-primary;
@@ -200,21 +200,21 @@
     justify-content: center;
     padding: 1px 16px;
     background-color: var(
-        #{getCssVarName('input-bg-color')},
-        map.get($input, 'bg-color')
+      #{getCssVarName('input-bg-color')},
+      map.get($input, 'bg-color')
     );
     background-image: none;
     border-radius: getCssVarWithDefault(
-        'input-border-radius',
-        map.get($input, 'border-radius')
+      'input-border-radius',
+      map.get($input, 'border-radius')
     );
     transition: getCssVar('transition-box-shadow');
     transform: translate3d(0, 0, 0);
     @include inset-input-border(
-        var(
-            #{getCssVarName('input-border-color')},
-            map.get($input, 'border-color')
-        )
+      var(
+        #{getCssVarName('input-border-color')},
+        map.get($input, 'border-color')
+      )
     );
 
     &:hover {
@@ -229,19 +229,21 @@
   @include e(inner) {
     // use map.get as default value for date picker range
     @include set-css-var-value(
-        'input-inner-height',
-        calc(
-          var(#{getCssVarName('input-height')},
-            #{map.get($input-height, 'default')}) - $border-width * 2
-        )
+      'input-inner-height',
+      calc(
+        var(
+            #{getCssVarName('input-height')},
+            #{map.get($input-height, 'default')}
+          ) - $border-width * 2
+      )
     );
 
     width: 100%;
     flex-grow: 1;
     -webkit-appearance: none;
     color: var(
-        #{getCssVarName('input-text-color')},
-        map.get($input, 'text-color')
+      #{getCssVarName('input-text-color')},
+      map.get($input, 'text-color')
     );
     font-size: inherit;
     height: getCssVar('input-inner-height');
@@ -258,8 +260,8 @@
 
     &::placeholder {
       color: getCssVarWithDefault(
-          'input-placeholder-color',
-          map.get($input, 'placeholder-color')
+        'input-placeholder-color',
+        map.get($input, 'placeholder-color')
       );
     }
 
@@ -278,8 +280,8 @@
       height: 100%;
       text-align: center;
       color: var(
-          #{getCssVarName('input-icon-color')},
-          map.get($input, 'icon-color')
+        #{getCssVarName('input-icon-color')},
+        map.get($input, 'icon-color')
       );
       transition: all getCssVar('transition-duration');
       pointer-events: none;
@@ -337,10 +339,10 @@
   @include when(active) {
     .#{$namespace}-input__wrapper {
       @include mixed-input-border(
-          var(
-              #{getCssVarName('input-focus-color')},
-              map.get($input, 'focus-color')
-          )
+        var(
+          #{getCssVarName('input-focus-color')},
+          map.get($input, 'focus-color')
+        )
       );
     }
   }
@@ -392,11 +394,13 @@
 
       @include e(inner) {
         @include set-css-var-value(
-            'input-inner-height',
-            calc(
-              var(#{getCssVarName('input-height')},
-                #{map.get($input-height, $size)}) - $border-width * 2
-            )
+          'input-inner-height',
+          calc(
+            var(
+                #{getCssVarName('input-height')},
+                #{map.get($input-height, $size)}
+              ) - $border-width * 2
+          )
         );
       }
     }
@@ -485,7 +489,7 @@
 
             .#{$namespace}-input__wrapper {
               @include inset-prepend-input-border(
-                  getCssVar('input-focus-border-color')
+                getCssVar('input-focus-border-color')
               );
               z-index: 2;
 
@@ -493,7 +497,7 @@
                 outline: none;
                 z-index: 2;
                 @include inset-prepend-input-border(
-                    getCssVar('input-focus-border-color')
+                  getCssVar('input-focus-border-color')
                 );
               }
             }
@@ -508,7 +512,7 @@
           .#{$namespace}-input__wrapper {
             z-index: 1;
             @include inset-prepend-input-border(
-                getCssVar('input-hover-border-color')
+              getCssVar('input-hover-border-color')
             );
           }
         }
@@ -542,7 +546,7 @@
             .#{$namespace}-input__wrapper {
               z-index: 2;
               @include inset-append-input-border(
-                  getCssVar('input-focus-border-color')
+                getCssVar('input-focus-border-color')
               );
             }
           }
@@ -556,7 +560,7 @@
           .#{$namespace}-input__wrapper {
             z-index: 1;
             @include inset-append-input-border(
-                getCssVar('input-hover-border-color')
+              getCssVar('input-hover-border-color')
             );
           }
         }