feat: add atomic class for text italic and add more level space

FromDoppler · Mar 29, 2019 · 7907954 · 7907954
1 parent db73e80
commit 7907954
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 6 deletions.
diff --git a/assets/scss/core/_typography.scss b/assets/scss/core/_typography.scss
@@ -79,6 +79,11 @@ small {
 .cursive {
   font-family: 'hand-of-sean';
 }
+
+.text-italic {
+  font-style: italic;
+}
+
 @font-face {
   font-family: "proxima-nova";
   src: url("../fonts/proxima-nova.eot");

diff --git a/assets/scss/core/_variables.scss b/assets/scss/core/_variables.scss
@@ -39,9 +39,7 @@ $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;
-
-//
+$dp-font-small-lineheight: 18px; //
 // variables margin bottom
 //
 
@@ -58,9 +56,10 @@ $dp-spaces--lv9: 54px;
 $dp-spaces--lv10: 60px;
 $dp-spaces--lv11: 66px;
 $dp-spaces--lv12: 72px;
-
-////
-/// Settings File
+$dp-spaces--lv13: 78px;
+$dp-spaces--lv14: 84px;
+$dp-spaces--lv15: 90px;
+$dp-spaces--lv16: 96px; /// Settings File
 /// Init colors variables
 /// @group Colors
 ////
@@ -111,6 +110,86 @@ $dp-line-height-rpgd: 16px;
   color: $dp-color-grey;
   text-transform: uppercase;
 }
+/* TEXT COLORS - grey */
+.c-dark-grey {
+  color: $dp-color-darkgrey;
+  /* text */
+}
+
+.c-grey {
+  color: $dp-color-grey;
+  /* icons fonts */
+}
+
+.c-light-grey {
+  color: $dp-color-lightgrey;
+  /* placeholders, hovers*/
+}
+/* VERTICAL SPACES */
+.space-0 {
+  margin-bottom: 0;
+}
+
+.space-8 {
+  margin-bottom: 8px;
+  /* drag boxes distanse, inputs conditional boxes */
+}
+
+.space-24 {
+  margin-bottom: 24px;
+  /* inputs distance */
+}
+
+.space-48 {
+  margin-bottom: 48px;
+  /* forms distance */
+}
+
+.space-64 {
+  margin-bottom: 64px;
+}
+/* SPACES */
+/* TEXT COLORS - grey */
+
+.c-dark-grey {
+  color: $dp-color-darkgrey;
+  /* text */
+}
+
+.c-grey {
+  color: $dp-color-grey;
+  /* icons fonts */
+}
+
+.c-light-grey {
+  color: $dp-color-lightgrey;
+  /* placeholders, hovers*/
+}
+/* VERTICAL SPACES */
+
+.space-0 {
+  margin-bottom: 0;
+}
+
+.space-8 {
+  margin-bottom: 8px;
+  /* drag boxes distanse, inputs conditional boxes */
+}
+
+.space-24 {
+  margin-bottom: 24px;
+  /* inputs distance */
+}
+
+.space-48 {
+  margin-bottom: 48px;
+  /* forms distance */
+}
+
+.space-64 {
+  margin-bottom: 64px;
+}
+/* SPACES */
 
 .margin--0 {
   margin: 0;