Merge pull request #3 from evanshunt/order-fix

Various fixes
evanshunt · Aug 7, 2020 · 8218904 · 8218904
2 parents 70f0c3d + 04510ae
commit 8218904
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@evanshunt/derekstrap",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A base layout and styles library by Evans Hunt",
   "main": "dist/main.js",
   "keywords": [

diff --git a/proportional-text/_index.scss b/proportional-text/_index.scss
@@ -1,10 +1,10 @@
+@forward 'mixins';
+
 @use '~breakpoint-sass/stylesheets/breakpoint' as *;
 @use '../breakpoints/index' as *;
 @use '../text-sizing/index' as *;
 @use 'mixins' as *;
 
-@forward 'mixins';
-
 html {
     font-size: proportional-text($base-font-size, 320px);
 

diff --git a/spacing/_mixins.scss b/spacing/_mixins.scss
@@ -41,6 +41,30 @@
     }
 }
 
+@mixin horizontal-spacing($sizes, $side: 'both', $attribute: $horizontal-spacing-attribute) {
+    @each $breakpoint, $size in $sizes {
+        @if $breakpoint == 'base' {
+            @include horizontal-spacer($size, $side, $attribute);
+        } @else {
+            @include breakpoint(map-get($breakpointList, $breakpoint)) {
+                @include horizontal-spacer($size, $side, $attribute);
+            }
+        }
+    }
+}
+
+@mixin vertical-spacing($sizes, $side: 'both', $attribute: $vertical-spacing-attribute) {
+    @each $breakpoint, $size in $sizes {
+        @if $breakpoint == 'base' {
+            @include vertical-spacer($size, $side, $attribute);
+        } @else {
+            @include breakpoint(map-get($breakpointList, $breakpoint)) {
+                @include vertical-spacer($size, $side, $attribute);
+            }
+        }
+    }
+}
+
 @mixin no-horizontal-spacing($side: 'both', $attribute: $horizontal-spacing-attribute) {
     @include horizontal-spacer(0, $side, $attribute);
 

diff --git a/text-sizing/_index.scss b/text-sizing/_index.scss
@@ -1,37 +1,71 @@
-@use 'mixins' as *;
 @forward 'mixins';
 @forward 'variables';
 
-body {
-    @include base-text();
+@use '~sass-rem/rem' as *;
+@use '../breakpoints/index' as *;
+@use 'mixins' as *;
+@use 'variables' as *;
+
+%heading-style {
+    font-family: $heading-font-family;
+    line-height: $heading-line-height;
+    font-weight: $heading-font-weight;
+    margin-bottom: $heading-margin-bottom;
+    margin-top: $heading-margin-top;
+    color: $heading-font-color;
+}
+
+%body-style {
+    font-family: $base-font-family;
+    line-height: $base-line-height;
+    font-weight: $base-font-weight;
+    color: $base-font-color;
+}
+
+body,
+%base-text {
+    @extend %body-style;
+    @include responsive-sizing($base-sizes);
 }
 
 h1,
-.h1-text {
-    @include h1-text();
+.h1-text,
+%h1-text {
+    @extend %heading-style;
+    @include responsive-sizing($h1-sizes);
 }
 
 h2,
-.h2-text {
-    @include h2-text();
+.h2-text,
+%h2-text {
+    @extend %heading-style;
+    @include responsive-sizing($h2-sizes);
 }
 
 h3,
-.h3-text {
-    @include h3-text();
+.h3-text,
+%h3-text {
+    @extend %heading-style;
+    @include responsive-sizing($h3-sizes);
 }
 
 h4,
-.h4-text {
-    @include h4-text();
+.h4-text,
+%h4-text {
+    @extend %heading-style;
+    @include responsive-sizing($h4-sizes);
 }
 
 h5,
-.h5-text {
-    @include h5-text();
+.h5-text,
+%h5-text {
+    @extend %heading-style;
+    @include responsive-sizing($h5-sizes);
 }
 
 h6,
-.h6-text {
-    @include h6-text();
+.h6-text,
+%h6-text {
+    @extend %heading-style;
+    @include responsive-sizing($h6-sizes);
 }
diff --git a/text-sizing/_mixins.scss b/text-sizing/_mixins.scss
@@ -1,77 +1,15 @@
 @use '~sass-rem/rem' as *;
 @use '~breakpoint-sass/stylesheets/breakpoint' as *;
 @use '../breakpoints/index' as *;
-@use 'variables' as *;
-
-@mixin heading-style() {
-    font-family: $heading-font-family;
-    line-height: $heading-line-height;
-    font-weight: $heading-font-weight;
-    margin-bottom: $heading-margin-bottom;
-    margin-top: $heading-margin-top;
-    color: $heading-font-color;
-}
-
-@mixin body-style() {
-    font-family: $base-font-family;
-    line-height: $base-line-height;
-    font-weight: $base-font-weight;
-    color: $base-font-color;
-}
 
 @mixin responsive-sizing($sizes) {
     @each $breakpoint, $size in $sizes {
-        @include breakpoint(map-get($breakpointList, $breakpoint)) {
+        @if $breakpoint == 'base' {
             font-size: rem($size);
+        } @else {
+            @include breakpoint(map-get($breakpointList, $breakpoint)) {
+                font-size: rem($size);
+            }
         }
     }
 }
-
-@mixin base-text() {
-    @include body-style();
-    @include responsive-sizing($base-sizes);
-}
-
-@mixin h1-text() {
-    @include heading-style();
-    @include responsive-sizing($h1-sizes);
-
-    font-size: rem($h1-font-size);
-}
-
-@mixin h2-text() {
-    @include heading-style();
-    @include responsive-sizing($h2-sizes);
-
-    font-size: rem($h2-font-size);
-}
-
-@mixin h3-text() {
-    @include heading-style();
-    @include responsive-sizing($h3-sizes);
-
-    font-size: rem($h3-font-size);
-}
-
-@mixin h4-text() {
-    @include heading-style();
-    @include responsive-sizing($h4-sizes);
-
-    font-size: rem($h4-font-size);
-}
-
-@mixin h5-text() {
-    @include heading-style();
-    @include responsive-sizing($h5-sizes);
-
-    font-size: rem($h5-font-size);
-}
-
-@mixin h6-text() {
-    @include heading-style();
-    @include responsive-sizing($h6-sizes);
-
-    font-size: rem($h6-font-size);
-}
-
-
diff --git a/text-sizing/_variables.scss b/text-sizing/_variables.scss
@@ -30,6 +30,7 @@ $h5-font-size: 16px !default;
 $h6-font-size: 15px !default;
 
 $base-sizes: (
+    'base': $base-font-size,
     'large-phone': $base-font-size,
     'tablet': $base-font-size,
     'desktop': $base-font-size,
@@ -38,6 +39,7 @@ $base-sizes: (
 ) !default;
 
 $h1-sizes: (
+    'base': $h1-font-size,
     'large-phone': $h1-font-size,
     'tablet': $h1-font-size,
     'desktop': $h1-font-size,
@@ -46,6 +48,7 @@ $h1-sizes: (
 ) !default;
 
 $h2-sizes: (
+    'base': $h2-font-size,
     'large-phone': $h2-font-size,
     'tablet': $h2-font-size,
     'desktop': $h2-font-size,
@@ -54,6 +57,7 @@ $h2-sizes: (
 ) !default;
 
 $h3-sizes: (
+    'base': $h3-font-size,
     'large-phone': $h3-font-size,
     'tablet': $h3-font-size,
     'desktop': $h3-font-size,
@@ -62,6 +66,7 @@ $h3-sizes: (
 ) !default;
 
 $h4-sizes: (
+    'base': $h4-font-size,
     'large-phone': $h4-font-size,
     'tablet': $h4-font-size,
     'desktop': $h4-font-size,
@@ -70,6 +75,7 @@ $h4-sizes: (
 ) !default;
 
 $h5-sizes: (
+    'base': $h5-font-size,
     'large-phone': $h5-font-size,
     'tablet': $h5-font-size,
     'desktop': $h5-font-size,
@@ -78,6 +84,7 @@ $h5-sizes: (
 ) !default;
 
 $h6-sizes: (
+    'base': $h6-font-size,
     'large-phone': $h6-font-size,
     'tablet': $h6-font-size,
     'desktop': $h6-font-size,