fix(inputs): styles fixes

core-ds · Apr 29, 2020 · 9a3199e · 9a3199e
1 parent f8faadf
commit 9a3199e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 34 deletions.
diff --git a/packages/input/src/index.module.css b/packages/input/src/index.module.css
@@ -2,12 +2,15 @@
 
 :root {
     --input-border-radius: 4px 4px 0 0;
-    --input-side-paddings: 12px;
-    --input-paddings: 1px var(--input-side-paddings) 0;
     --input-border-bottom: 1px solid var(--color-dark-indigo-30-flat);
     --input-bg-color: var(--color-dark-indigo-07);
-    --input-labeled-paddings: 21px var(--input-side-paddings) 0;
-    --input-labeled-s-paddings: 20px var(--input-side-paddings) 0;
+
+    /* paddings */
+    --input-paddings: 1px var(--gap-s) 0;
+    --input-l-paddings: 1px var(--gap-m) 0;
+    --input-labeled-s-paddings: 23px var(--gap-s) 4px;
+    --input-labeled-m-paddings: 28px var(--gap-s) 7px;
+    --input-labeled-l-paddings: 34px var(--gap-m) 13px;
 
     /* disabled */
     --input-disabled-bg-color: var(--color-dark-indigo-15);
@@ -28,7 +31,6 @@
 
 .component {
     display: inline-block;
-    font-family: var(--font-family);
 }
 
 .inner {
@@ -43,6 +45,8 @@
 }
 
 .input {
+    @mixin system_16-20_regular;
+
     position: relative;
     width: 100%;
     height: 100%;
@@ -51,8 +55,6 @@
     border: none;
     margin: 0;
     outline: none;
-    font-size: 16px;
-    line-height: 20px;
     padding: var(--input-paddings);
     text-overflow: ellipsis;
     box-sizing: border-box;
@@ -71,15 +73,15 @@
 }
 
 .label {
+    @mixin system_16-20_regular;
+
     overflow: hidden;
     position: absolute;
     display: flex;
     align-items: center;
     height: 100%;
-    left: var(--input-side-paddings);
+    left: var(--gap-s);
     color: var(--color-dark-indigo-60-flat);
-    font-size: 16px;
-    line-height: 20px;
     text-overflow: ellipsis;
     white-space: nowrap;
     transform: translateY(0);
@@ -95,18 +97,18 @@
     align-items: center;
 }
 
-.addons:last-child {
-    padding-right: var(--gap-s);
+.addons:first-child {
+    padding-left: var(--gap-s);
 }
 
-.addons:first-child {
+.addons:last-child {
     padding-right: var(--gap-s);
 }
 
 .sub {
+    @mixin system_14-18_regular;
+
     display: block;
-    font-size: 14px;
-    line-height: 18px;
     margin-top: var(--gap-2xs);
     color: var(--color-dark-indigo-60-flat);
 }
@@ -116,10 +118,16 @@
     color: var(--color-dark-indigo-30-flat);
 }
 
+.hasLabel .input {
+    padding: var(--input-labeled-s-paddings);
+}
+
 .block {
     width: 100%;
 }
 
+/* SIZES */
+
 .s {
     height: 48px;
 }
@@ -128,21 +136,41 @@
     height: 56px;
 }
 
+.m.hasLabel .input {
+    padding: var(--input-labeled-m-paddings);
+}
+
 .l {
     height: 68px;
 }
 
 .l .input {
-    padding-left: 16px;
-    padding-right: 16px;
+    padding: var(--input-l-paddings);
 }
 
-.hasLabel.s .input {
-    padding: var(--input-labeled-s-paddings);
+.l.hasLabel .input {
+    padding: var(--input-labeled-l-paddings);
 }
 
-.hasLabel .input {
-    padding: var(--input-labeled-paddings);
+.l .label {
+    left: var(--gap-m);
+}
+
+.l .addons:first-child {
+    padding-left: var(--gap-m);
+}
+
+.l .addons:last-child {
+    padding-right: var(--gap-m);
+}
+
+.l .addons:first-child + .input-wrapper .input {
+    padding-left: var(--gap-s);
+    padding-right: var(--gap-s);
+}
+
+.l .addons:first-child + .input-wrapper .label {
+    left: var(--gap-s);
 }
 
 /* DISABLED STATE */
@@ -173,8 +201,8 @@
 
 .focused .label,
 .filled .label {
-    font-size: 14px;
-    line-height: 18px;
+    @mixin system_14-18_regular;
+
     transform: translateY(-10px);
 }
 

diff --git a/packages/pure-input/src/index.module.css b/packages/pure-input/src/index.module.css
@@ -2,12 +2,13 @@
 
 :root {
     --pure-input-border-radius: 4px 4px 0 0;
-    --pure-input-side-paddings: 12px;
-    --pure-input-paddings: 1px var(--pure-input-side-paddings) 0;
     --pure-input-border-bottom: 1px solid var(--color-dark-indigo-30-flat);
-    --pure-input-paddings: 1px var(--pure-input-side-paddings) 0;
     --pure-input-bg-color: var(--color-dark-indigo-07);
 
+    /* paddings */
+    --pure-input-paddings: 1px var(--gap-s) 0;
+    --pure-input-l-paddings: 1px var(--gap-m) 0;
+
     /* disabled */
     --pure-input-disabled-bg-color: var(--color-dark-indigo-15);
     --pure-input-disabled-border-bottom: 1px dashed var(--color-dark-indigo-30-flat);
@@ -21,17 +22,14 @@
 }
 
 .component {
+    @mixin system_16-20_regular;
+
     display: inline-flex;
-    position: relative;
-    font-family: var(--font-family);
-    font-size: 16px;
-    line-height: 20px;
     box-sizing: border-box;
     color: var(--color-dark-indigo);
     background-color: var(--pure-input-bg-color);
     border-radius: var(--pure-input-border-radius);
-    transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, opacity 0.2s ease,
-        color 0.2s ease;
+    transition: background 0.2s ease, box-shadow 0.2s ease, border 0.2s ease, color 0.2s ease;
     border: none;
     margin: 0;
     padding: var(--pure-input-paddings);
@@ -45,6 +43,7 @@
 .component::placeholder {
     text-overflow: ellipsis;
     color: var(--color-dark-indigo-60-flat);
+    transition: color 0.2s ease;
 }
 
 .block {
@@ -63,8 +62,7 @@
 
 .l {
     height: 68px;
-    padding-left: 16px;
-    padding-right: 16px;
+    padding: var(--pure-input-l-paddings);
 }
 
 /* DISABLED STATE */