fix(Input): [BLA-719] Fix styles in Input

otto-de · Apr 11, 2024 · 839a856 · 839a856
1 parent 8ccfe4a
commit 839a856
Show file tree

Hide file tree

Showing 25 changed files with 6 additions and 4 deletions.
diff --git a/...re-components/__snapshots__/components-form-input--all-properties-specified.png b/...re-components/__snapshots__/components-form-input--all-properties-specified.png
diff --git a/packages/core-components/__snapshots__/components-form-input--default.png b/packages/core-components/__snapshots__/components-form-input--default.png
diff --git a/packages/core-components/__snapshots__/components-form-input--disabled.png b/packages/core-components/__snapshots__/components-form-input--disabled.png
diff --git a/packages/core-components/__snapshots__/components-form-input--error.png b/packages/core-components/__snapshots__/components-form-input--error.png
diff --git a/packages/core-components/__snapshots__/components-form-input--hint.png b/packages/core-components/__snapshots__/components-form-input--hint.png
diff --git a/packages/core-components/__snapshots__/components-form-input--icon-end.png b/packages/core-components/__snapshots__/components-form-input--icon-end.png
diff --git a/packages/core-components/__snapshots__/components-form-input--placeholder.png b/packages/core-components/__snapshots__/components-form-input--placeholder.png
diff --git a/...ages/core-components/__snapshots__/components-form-input--prefix-and-suffix.png b/...ages/core-components/__snapshots__/components-form-input--prefix-and-suffix.png
diff --git a/packages/core-components/__snapshots__/components-form-input--prefix.png b/packages/core-components/__snapshots__/components-form-input--prefix.png
diff --git a/packages/core-components/__snapshots__/components-form-input--required.png b/packages/core-components/__snapshots__/components-form-input--required.png
diff --git a/...ore-components/__snapshots__/components-form-input-group--story-010-default.png b/...ore-components/__snapshots__/components-form-input-group--story-010-default.png
diff --git a/...re-components/__snapshots__/components-form-input-group--story-020-disabled.png b/...re-components/__snapshots__/components-form-input-group--story-020-disabled.png
diff --git a/.../core-components/__snapshots__/components-form-input-group--story-030-error.png b/.../core-components/__snapshots__/components-form-input-group--story-030-error.png
diff --git a/...ore-components/__snapshots__/components-form-input-group--story-040-complex.png b/...ore-components/__snapshots__/components-form-input-group--story-040-complex.png
diff --git a/packages/core-components/__snapshots__/components-form-input-list--custom-list.png b/packages/core-components/__snapshots__/components-form-input-list--custom-list.png
diff --git a/...nts/__snapshots__/components-form-input-list--disabled-with-selected-option.png b/...nts/__snapshots__/components-form-input-list--disabled-with-selected-option.png
diff --git a/.../__snapshots__/components-form-input-list--disabled-without-selected-option.png b/.../__snapshots__/components-form-input-list--disabled-without-selected-option.png
diff --git a/packages/core-components/__snapshots__/components-form-input-list--focused.png b/packages/core-components/__snapshots__/components-form-input-list--focused.png
diff --git a/packages/core-components/__snapshots__/components-form-input-list--input-list.png b/packages/core-components/__snapshots__/components-form-input-list--input-list.png
diff --git a/...core-components/__snapshots__/components-form-multiselect-dropdown--default.png b/...core-components/__snapshots__/components-form-multiselect-dropdown--default.png
diff --git a/...ponents/__snapshots__/components-form-required-separator--story-010-default.png b/...ponents/__snapshots__/components-form-required-separator--story-010-default.png
diff --git a/...ages/core-components/__snapshots__/components-form-search--story-010-search.png b/...ages/core-components/__snapshots__/components-form-search--story-010-search.png
diff --git a/...-components/__snapshots__/components-form-search--story-020-search-disabled.png b/...-components/__snapshots__/components-form-search--story-020-search-disabled.png
diff --git a/...re-components/__snapshots__/components-form-search--story-030-custom-search.png b/...re-components/__snapshots__/components-form-search--story-030-custom-search.png
diff --git a/packages/core-components/src/components/input/input.scss b/packages/core-components/src/components/input/input.scss
@@ -6,7 +6,8 @@
 
   display: block;
   width: 100%;
-  min-width: var(--b2b-size-200);
+  min-width: var(--b2b-size-120);
+  max-width: 600px;
   font-family: var(--b2b-font-family-default);
 
   .b2b-input__wrapper {
@@ -16,7 +17,7 @@
     border: 1px solid var(--b2b-color-grey-200);
     border-right: var(--b2b-border-right);
     border-radius: var(--b2b-border-radius);
-    padding: 5px var(--b2b-size-30) 5px;
+    padding: 5px var(--b2b-size-25) 5px;
     background-color: var(--b2b-color-white-100);
     color: var(--b2b-color-black-100);
     position: relative;
@@ -65,14 +66,15 @@
 
   b2b-input-label {
     display: block;
-    margin-bottom: var(--b2b-size-10);
+    margin-bottom: var(--b2b-size-5);
+    color: var(--b2b-color-black-100);
   }
 
   span {
     font-size: var(--b2b-size-copy-50);
     line-height: var(--b2b-size-copy-line-height-75);
     display: block;
-    margin-top: var(--b2b-size-10);
+    margin-top: var(--b2b-size-7);
     color: var(--b2b-color-grey-300);
   }
 }