feat: I removed the old font size variables, replacing them with new …

…variables in levels, impacting all the scss files. I've talked to Santiago and he agrees.
FromDoppler · Apr 11, 2019 · eb3fdad · eb3fdad
1 parent 225f062
commit eb3fdad
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 70 deletions.
diff --git a/assets/scss/core/_base.scss b/assets/scss/core/_base.scss
@@ -17,7 +17,7 @@ label {
   padding: 0;
   color: $dp-color-grey;
   font-weight: $dp-font-weight-bold;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   font-family: $dp-font-family;
 }
 /* span with class .dropdown-arrow to draw arrow dropdown */
@@ -42,7 +42,7 @@ select {
   background-color: $dp-color-white;
   border: 1px solid $dp-color-sylver;
   border-radius: $dp-border-radius;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   padding: 0 40px 0 10px;
   text-align: left;
   line-height: 40px;
@@ -65,7 +65,7 @@ textarea {
   padding: 10px;
   color: $dp-color-grey;
   border-radius: $dp-border-radius;
-  font-size: $dp-font-size-form;
+  font-size: $dp-font-size--lv5;
   border: 1px solid $dp-color-sylver;
 
   &::placeholder {
@@ -137,7 +137,7 @@ textarea {
     /* Field to 50% percent */
     .show-hide {
       float: right;
-      font-size: $dp-font-size-small;
+      font-size: $dp-font-size--lv4;
       font-weight: normal;
       font-style: normal;
       color: $dp-color-lightbrown;
@@ -157,7 +157,7 @@ textarea {
 
     .content-eye {
       font-family: $dp-font-family-proximanova;
-      font-size: $dp-font-size-small;
+      font-size: $dp-font-size--lv4;
       font-style: italic;
     }
   }
@@ -201,7 +201,7 @@ input:not([type='checkbox']) {
   border: 1px solid $dp-color-lightbrown;
   border-radius: $dp-border-radius;
   background-color: $dp-color-white;
-  font-size: $dp-font-size-form;
+  font-size: $dp-font-size--lv5;
   font-family: $dp-font-family-proximanova;
   line-height: 20px;
 
@@ -252,7 +252,7 @@ input[type="tel"] {
     .error-message {
       margin: $dp-spaces--lv0;
       color: $dp-color-red;
-      font-size: $dp-font-size-small;
+      font-size: $dp-font-size--lv4;
     }
   }
   /* animation to show the errors (optional) */
@@ -306,7 +306,7 @@ input[type="tel"] {
 
   .password-message {
     margin: $dp-spaces--lv0;
-    font-size: $dp-font-size-small;
+    font-size: $dp-font-size--lv4;
     font-family: $dp-font-family-proximanova;
   }
 

diff --git a/assets/scss/core/_typography.scss b/assets/scss/core/_typography.scss
@@ -22,7 +22,7 @@ h6 {
 
 h1 {
   margin: 0;
-  font-size: $dp-headers-h1-font-size;
+  font-size: $dp-font-size--lv18;
   font-weight: $dp-font-weight-bold;
   line-height: 1.2;
   text-transform: uppercase;
@@ -31,25 +31,25 @@ h1 {
 
 h2 {
   margin: 0;
-  font-size: $dp-headers-h2-font-size;
+  font-size: $dp-font-size--lv17;
   line-height: 1.4;
   font-family: $dp-font-family;
 }
 
 h3 {
-  font-size: $dp-headers-h3-font-size;
+  font-size: $dp-font-size--lv16;
 }
 
 h4 {
-  font-size: $dp-headers-h4-font-size;
+  font-size: $dp-font-size--lv13;
 }
 
 h5 {
-  font-size: $dp-headers-h5-font-size;
+  font-size: $dp-font-size--lv9;
 }
 
 h6 {
-  font-size: $dp-headers-h6-font-size;
+  font-size: $dp-font-size--lv4;
 }
 
 strong {
@@ -64,7 +64,7 @@ p {
 
 small {
   font: $dp-font;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   line-height: $dp-font-small-lineheight;
 }
 

diff --git a/assets/scss/core/_variables.scss b/assets/scss/core/_variables.scss
@@ -10,6 +10,7 @@
 ////
 
 $dp-font-lineheight: 22px !default;
+$dp-font-small-lineheight: 18px;
 $dp-font-weight: 400 !default;
 $dp-font-family: Arial, sans-serif !default;
 $dp-font-family-proximanova: "proxima-nova", Helvetica;
@@ -25,26 +26,33 @@ $dp-font-color-dark: $dp-font-color !default;
 $dp-font-color-white: #fff !default;
 
 
-$dp-font-size-xxl: 60px;
-$dp-headers-h1-font-size: 50px;
-$dp-headers-h2-font-size: 40px;
-$dp-headers-h3-font-size: 30px;
-$dp-headers-h4-font-size: 22px;
-$dp-form-font-size: 20px;
-$dp-headers-h5-font-size: 18px;
-$dp-headers-h6-font-size: 13px;
-$dp-font-size-small: 13px;
-$dp-font-size-xsmall: 11px;
-$dp-font-size-form: 14px;
-$dp-font-button-big: 15px;
-$dp-font-button-medium: 13px;
-$dp-font-button-small: 11px;
-$dp-font-size-15: 15px;
-$dp-font-size-24: 24px;
-$dp-font-small-lineheight: 18px;
+////
+/// Font Size settings
+///
+
+$dp-font-size--lv0: 0;
+$dp-font-size--lv1: 10px;
+$dp-font-size--lv2: 11px;
+$dp-font-size--lv3: 12px;
+$dp-font-size--lv4: 13px;
+$dp-font-size--lv5: 14px;
+$dp-font-size--lv6: 15px;
+$dp-font-size--lv7: 16px;
+$dp-font-size--lv8: 17px;
+$dp-font-size--lv9: 18px;
+$dp-font-size--lv10: 19px;
+$dp-font-size--lv11: 20px;
+$dp-font-size--lv12: 21px;
+$dp-font-size--lv13: 22px;
+$dp-font-size--lv14: 23px;
+$dp-font-size--lv15: 24px;
+$dp-font-size--lv16: 30px;
+$dp-font-size--lv17: 40px;
+$dp-font-size--lv18: 50px;
+$dp-font-size--lv19: 60px;
 
 //
-// variables margin bottom
+// variables margins/paddings
 //
 
 $dp-spaces--lv0: 0;
@@ -63,7 +71,9 @@ $dp-spaces--lv12: 72px;
 $dp-spaces--lv13: 78px;
 $dp-spaces--lv14: 84px;
 $dp-spaces--lv15: 90px;
-$dp-spaces--lv16: 96px; /// Settings File
+$dp-spaces--lv16: 96px;
+
+/// Settings File
 /// Init colors variables
 /// @group Colors
 ////

diff --git a/assets/scss/modules/_buttons.scss b/assets/scss/modules/_buttons.scss
@@ -12,21 +12,21 @@
     @include transition-all;
 
     &.button-big {
-      font-size: $dp-font-button-big;
+      font-size: $dp-font-size--lv6;
       line-height: 15px;
       font-weight: $dp-font-weight-light;
       padding: 16px 35px;
     }
 
     &.button-medium {
-      font-size: $dp-font-button-medium;
+      font-size: $dp-font-size--lv4;
       line-height: 13px;
       font-weight: $dp-font-weight-light;
       padding: 13px 25px;
     }
 
     &.button-small {
-      font-size: $dp-font-button-small;
+      font-size: $dp-font-size--lv2;
       line-height: 11px;
       font-weight: $dp-font-weight-light;
       padding: 10px 15px;

diff --git a/assets/scss/modules/_forms.scss b/assets/scss/modules/_forms.scss
@@ -71,7 +71,7 @@
   margin-top: $dp-spaces--lv6;
 
   .legend {
-    font-size: $dp-font-size-small;
+    font-size: $dp-font-size--lv4;
     float: right;
     color: $dp-color-sylver;
     font-style: italic;
@@ -82,7 +82,7 @@
 .forgot-link {
   display: block;
   margin: $dp-spaces--lv4 $dp-spaces--lv0;
-  font-size: $dp-font-size-form;
+  font-size: $dp-font-size--lv5;
   font-style: italic;
   font-family: $dp-font-family;
   position: relative;

diff --git a/assets/scss/modules/_language.scss b/assets/scss/modules/_language.scss
@@ -21,7 +21,7 @@ Language selector
     line-height: 20px;
     padding: 7px 13px 7px 35px;
     color: $dp-color-darkgrey;
-    font-size: $dp-font-size-xsmall;
+    font-size: $dp-font-size--lv2;
     font-weight: $dp-font-weight-bold;
     text-align: right;
     background-repeat: no-repeat;

diff --git a/assets/scss/modules/_modal.scss b/assets/scss/modules/_modal.scss
@@ -29,7 +29,7 @@
   }
 
   .modal-title {
-    font-size: $dp-form-font-size;
+    font-size: $dp-font-size--lv11;
     text-align: left;
     font-family: $dp-font-family;
     color: $dp-color-darkgrey;

diff --git a/assets/scss/templates/_confirmation.scss b/assets/scss/templates/_confirmation.scss
@@ -37,7 +37,7 @@
     }
 
     .text-italic {
-      font-size: $dp-font-size-form;
+      font-size: $dp-font-size--lv5;
     }
   }
 

diff --git a/assets/scss/templates/_guidelines.scss b/assets/scss/templates/_guidelines.scss
@@ -21,7 +21,7 @@
   text-decoration: none;
   position: relative;
   color: $dp-color-darkgrey;
-  font-size: $dp-font-size-15;
+  font-size: $dp-font-size--lv6;
   font-weight: $dp-font-weight-bold;
   font-family: $dp-font-family-proximanova;
   display: block;
@@ -97,7 +97,7 @@
   padding: 0;
   margin: 20px 0;
   list-style: none;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   font-family: $dp-font-family;
 
   li {
@@ -176,7 +176,7 @@
   padding: 0;
   margin: 0;
   list-style: none;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   font-family: $dp-font-family;
 
   li {

diff --git a/assets/scss/templates/_header.scss b/assets/scss/templates/_header.scss
@@ -60,7 +60,7 @@
     color: $dp-color-grey;
     text-transform: uppercase;
     font-family: $dp-font-family;
-    font-size: $dp-font-size-small;
+    font-size: $dp-font-size--lv4;
   }
 
   a.active {
@@ -96,7 +96,7 @@
     text-decoration: none;
     color: $dp-color-grey;
     font-family: $dp-font-family;
-    font-size: $dp-font-size-small;
+    font-size: $dp-font-size--lv4;
     padding-bottom: 12px;
     text-transform: none;
   }
@@ -135,7 +135,7 @@
     text-decoration: none;
     position: relative;
     color: $dp-color-lightgrey;
-    font-size: $dp-headers-h5-font-size;
+    font-size: $dp-font-size--lv9;
     transition: all 0.3s ease;
   }
 
@@ -250,7 +250,7 @@
 
     .email {
       color: $dp-color-grey;
-      font-size: $dp-font-size-small;
+      font-size: $dp-font-size--lv4;
     }
 
     .name {
@@ -268,7 +268,7 @@
     }
 
     a {
-      font-size: $dp-font-size-small;
+      font-size: $dp-font-size--lv4;
       color: $dp-color-grey;
     }
   }
@@ -302,7 +302,7 @@
 
   p {
     margin: 0;
-    font-size: $dp-font-size-small;
+    font-size: $dp-font-size--lv4;
   }
 }
 

diff --git a/assets/scss/templates/_messages-header.scss b/assets/scss/templates/_messages-header.scss
@@ -16,7 +16,7 @@
 
 .messages-container p {
   color: $dp-color-white;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
 }
 
 .messages-container.blocker .button {
@@ -48,7 +48,7 @@
   border-radius: 3px;
   color: $dp-color-white;
   cursor: pointer;
-  font-size: $dp-font-size-small;
+  font-size: $dp-font-size--lv4;
   line-height: 45px;
   padding-left: 20px;
   padding-right: 20px;
@@ -64,7 +64,7 @@
 }
 
 .button--tiny {
-  font-size: $dp-font-button-medium;
+  font-size: $dp-font-size--lv4;
   height: 30px;
   line-height: 30px;
   padding-left: 20px;