Change form border color, move label below line

marcoacierno · marcoacierno · commit 1b672115924b · 2019-06-15T17:36:27.000+01:00
diff --git a/src/components/contact-us/index.css b/src/components/contact-us/index.css
@@ -1,8 +1,4 @@
 .ContactUs {
   margin-top: 10rem;
   margin-bottom: 10rem;
-
-  p {
-    margin-bottom: 2rem;
-  }
 }
diff --git a/src/components/form/index.css b/src/components/form/index.css
@@ -1,7 +1,9 @@
 .Form {
+  --input-label-active-position: 1.3rem;
+
   label {
     display: block;
-    margin-top: 1rem;
+    margin: 3rem 0;
     font-family: var(--font-name--paragraph);
 
     &:after {
@@ -11,20 +13,22 @@
 
       width: 100%;
       height: 1px;
-      background: #ccc;
+      background: #e8e8e8;
+
+      margin-top: -1rem;
     }
   }
 
   input:focus,
   textarea:focus {
     ~ span {
-      transform: translateY(0);
+      transform: translateY(var(--input-label-active-position));
     }
   }
 
   label.has-input {
     span {
-      transform: translateY(0);
+      transform: translateY(var(--input-label-active-position));
     }
   }
 
@@ -35,7 +39,7 @@
     font-weight: bold;
     font-size: 1.2rem;
 
-    transform: translateY(-1rem);
+    transform: translateY(-1.5rem);
     transition: transform 0.3s;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,9 @@`
`1`	`1`	`.Form {`
	`2`	`+ --input-label-active-position: 1.3rem;`
	`3`	`+`
`2`	`4`	`label {`
`3`	`5`	`display: block;`
`4`		`- margin-top: 1rem;`
	`6`	`+ margin: 3rem 0;`
`5`	`7`	`font-family: var(--font-name--paragraph);`
`6`	`8`
`7`	`9`	`&:after {`
`@@ -11,20 +13,22 @@`
`11`	`13`
`12`	`14`	`width: 100%;`
`13`	`15`	`height: 1px;`
`14`		`- background: #ccc;`
	`16`	`+ background: #e8e8e8;`
	`17`	`+`
	`18`	`+ margin-top: -1rem;`
`15`	`19`	`}`
`16`	`20`	`}`
`17`	`21`
`18`	`22`	`input:focus,`
`19`	`23`	`textarea:focus {`
`20`	`24`	`~ span {`
`21`		`- transform: translateY(0);`
	`25`	`+ transform: translateY(var(--input-label-active-position));`
`22`	`26`	`}`
`23`	`27`	`}`
`24`	`28`
`25`	`29`	`label.has-input {`
`26`	`30`	`span {`
`27`		`- transform: translateY(0);`
	`31`	`+ transform: translateY(var(--input-label-active-position));`
`28`	`32`	`}`
`29`	`33`	`}`
`30`	`34`
`@@ -35,7 +39,7 @@`
`35`	`39`	`font-weight: bold;`
`36`	`40`	`font-size: 1.2rem;`
`37`	`41`
`38`		`- transform: translateY(-1rem);`
	`42`	`+ transform: translateY(-1.5rem);`
`39`	`43`	`transition: transform 0.3s;`
`40`	`44`	`}`
`41`	`45`