number input mode 1 updated (#597)

deven-org · Nov 21, 2023 · b56a04b · b56a04b
1 parent 1b0235e
commit b56a04b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts
@@ -21,6 +21,9 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
       }
 
       &.mode1 {
+        display: grid;
+        grid-template-columns: 10% 40% 40% 10%;
+
         &.sm {
           > .custom-stepper-button {
             width: ${StepperCombo.SM.Vertical.Width};
@@ -38,8 +41,17 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
             width: ${StepperCombo.LG.Vertical.Width};
           }
         }
+        > .unit {
+          text-align: left;
+        }
+  
+        > input {
+          text-align: right;
+        }
       }
 
+   
+
       > .unit,
       input {
         &.sm {
@@ -277,15 +289,20 @@ export const baseStyle = typeSafeNestedCss`
       }
 
       .unit {
-        order: -1;
+        order: 0;
       }
 
       .unit.prepend {
-        order: 0;
+        order: -1;
+        text-align: right;
       }
 
-      & > input {
-        text-align: center;
+      > input.prepend {
+        text-align: left;
+      }
+      
+      > button:last-of-type {
+        margin-left:auto;
       }
     }
 

diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/forms/number-input/index.ts
@@ -156,7 +156,8 @@ export class BlrNumberInput extends LitElement {
           : [wrapperDark, actionDark, StepperComboDark];
 
       const inputClasses = classMap({
-        [`${this.size}`]: this.size,
+        [this.size]: this.size,
+        prepend: !!this.prependUnit,
       });
 
       const unitClasses = classMap({