fix breakpoint mixin

sass · Feb 21, 2023 · ee6a034 · ee6a034
1 parent 5f48137
commit ee6a034
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/source/assets/sass/_breakpoints.scss b/source/assets/sass/_breakpoints.scss
@@ -1,16 +1,12 @@
-@use 'functions';
+@use 'config';
 
-$sl-breakpoint--small: 480px !default;
-$sl-breakpoint--medium: 640px !default;
-$sl-breakpoint--large: 960px !default;
-$sl-breakpoint--x-large: 1280px !default;
 $sl-breakpoints: (
   // for mixins to span across breakpoints and without one
   none: 0,
-  small: $sl-breakpoint--small,
-  medium: $sl-breakpoint--medium,
-  large: $sl-breakpoint--large,
-  x-large: $sl-breakpoint--x-large
+  small: config.$breakpoint--small,
+  medium: config.$breakpoint--medium,
+  large: config.$breakpoint--large,
+  x-large: config.$breakpoint--x-large
 );
 
 @mixin sl-breakpoint($breakpoint) {
@@ -26,49 +22,49 @@ $sl-breakpoints: (
 }
 
 @mixin sl-breakpoint--small {
-  @include sl-breakpoint($sl-breakpoint--small) {
+  @include sl-breakpoint(config.$breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--small-max {
-  @include sl-breakpoint-max($sl-breakpoint--small) {
+  @include sl-breakpoint-max(config.$breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium {
-  @include sl-breakpoint($sl-breakpoint--medium) {
+  @include sl-breakpoint(config.$breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium-max {
-  @include sl-breakpoint-max($sl-breakpoint--medium) {
+  @include sl-breakpoint-max(config.$breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large {
-  @include sl-breakpoint($sl-breakpoint--large) {
+  @include sl-breakpoint(config.$breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large-max {
-  @include sl-breakpoint-max($sl-breakpoint--large) {
+  @include sl-breakpoint-max(config.$breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large {
-  @include sl-breakpoint($sl-breakpoint--x-large) {
+  @include sl-breakpoint(config.$breakpoint--x-large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large-max {
-  @include sl-breakpoint-max($sl-breakpoint--x-large) {
+  @include sl-breakpoint-max(config.$breakpoint--x-large) {
     @content;
   }
 }

diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss
@@ -1,7 +1,7 @@
+@use '../config';
 @use 'sass:math';
 
 @use '../breakpoints';
-@use '../functions';
 
 $sl-font-weight--light: 300 !default;
 $sl-font-weight--regular: 400 !default;