fix(vuetify): changed heading styles to be generated

Also added `$heading-style-tags` variable to decide whether to style the `h#` tags.
nmsmith22389 · Oct 29, 2018 · b29c11f · b29c11f
1 parent 3b7dcb7
commit b29c11f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 73 deletions.
diff --git a/elements/_typography.scss b/elements/_typography.scss
@@ -1,78 +1,39 @@
 @import '../tools/helpers/all';
 
-// TODO: Reformat these using a loop or something.
-
-h1,
-.display-4 {
-    font-size: map-deep-get($headings, h1, size) !important;
-    font-weight: map-deep-get($headings, h1, weight);
-    letter-spacing: map-deep-get($headings, h1, letter-spacing) !important;
-    line-height: map-deep-get($headings, h1, line-height) !important;
-}
-
-h2,
-.display-3 {
-    font-size: map-deep-get($headings, h2, size) !important;
-    font-weight: map-deep-get($headings, h2, weight);
-    letter-spacing: map-deep-get($headings, h2, letter-spacing) !important;
-    line-height: map-deep-get($headings, h2, line-height) !important;
-}
-
-h3,
-.display-2 {
-    font-size: map-deep-get($headings, h3, size) !important;
-    font-weight: map-deep-get($headings, h3, weight);
-    letter-spacing: map-deep-get($headings, h3, letter-spacing) !important;
-    line-height: map-deep-get($headings, h3, line-height) !important;
-}
-
-h4,
-.display-1 {
-    font-size: map-deep-get($headings, h4, size) !important;
-    font-weight: map-deep-get($headings, h4, weight);
-    letter-spacing: map-deep-get($headings, h4, letter-spacing) !important;
-    line-height: map-deep-get($headings, h4, line-height) !important;
-}
-
-h5,
-.headline {
-    font-size: map-deep-get($headings, h5, size) !important;
-    font-weight: map-deep-get($headings, h5, weight);
-    letter-spacing: map-deep-get($headings, h5, letter-spacing) !important;
-    line-height: map-deep-get($headings, h5, line-height) !important;
-}
-
-h6,
-.title {
-    font-size: map-deep-get($headings, h6, size) !important;
-    font-weight: map-deep-get($headings, h6, weight);
-    letter-spacing: map-deep-get($headings, h6, letter-spacing) !important;
-    line-height: map-deep-get($headings, h6, line-height) !important;
-}
-
-.subheading {
-    font-size: map-deep-get($headings, subheading, size) !important;
-    font-weight: map-deep-get($headings, subheading, weight);
-}
-
-.body-2 {
-    font-size: map-deep-get($headings, body-2, size) !important;
-    font-weight: map-deep-get($headings, body-2, weight);
-}
-
-.body-1 {
-    font-size: map-deep-get($headings, body-1, size) !important;
-    font-weight: map-deep-get($headings, body-1, weight);
-}
-
-.caption {
-    font-size: map-deep-get($headings, caption, size) !important;
-    font-weight: map-deep-get($headings, caption, weight);
-}
-
-.v-btn {
-    font-size: map-deep-get($headings, button, size);
-    font-weight: map-deep-get($headings, button, weight);
+$_heading-classes: (
+    h1: 'display-4',
+    h2: 'display-3',
+    h3: 'display-2',
+    h4: 'display-1',
+    h5: 'headline',
+    h6: 'title',
+    subheading: 'subheading',
+    body-2: 'body-2',
+    body-1: 'body-1',
+    caption: 'caption',
+    button: 'v-btn',
+) !default;
+$_heading-classes-large: (h1, h2, h3, h4, h5, h6) !default;
+
+@each $heading, $props in $headings {
+    $selector: if(
+        map-has-key($_heading-classes, $heading),
+        if(
+            $heading-style-tags and index($_heading-classes-large, $heading),
+            '#{$heading}, .#{map-get($_heading-classes, $heading)}',
+            '.#{map-get($_heading-classes, $heading)}'
+        ),
+        #{$heading}
+    );
+
+    #{$selector} {
+        font-size: map-get($props, size) !important;
+        font-weight: map-get($props, weight);
+        @if index($_heading-classes-large, $heading) {
+            letter-spacing: map-get($props, letter-spacing) !important;
+            line-height: map-get($props, line-height) !important;
+        }
+    }
 }
 
 p {

diff --git a/settings/_variables.scss b/settings/_variables.scss
@@ -107,6 +107,7 @@ $font-weights: (
 // Headings
 // ============================================================
 $heading-font-family: $body-font-family !default;
+$heading-style-tags: true !default;
 $headings: (
     h1: (
         size: 7rem,