fix: replace breakpoints with css variables

nelc · Nov 21, 2024 · 89b77a7 · 89b77a7
1 parent bbed3b6
commit 89b77a7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -1,5 +1,5 @@
 .discussions-sidebar-frame {
-    @media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
+    @media (--pgn-size-breakpoint-max-width-xl) {
         max-height: calc(100vh - 65px);
     }
 }
diff --git a/src/index.scss b/src/index.scss
@@ -328,9 +328,9 @@
   max-width: 640px;
   margin: 0 auto;
 
-  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+  @media (--pgn-size-breakpoint-max-width-xs) {
     flex-direction: column;
-    gap: $spacer;
+    gap: var(--pgn-spacing-spacer-base);
   }
 
   .previous-button,
@@ -345,15 +345,15 @@
   .next-button {
     flex-basis: 75%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
 
   .previous-button {
     flex-basis: 25%;
 
-     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+     @media (--pgn-size-breakpoint-max-width-xs) {
        flex-basis: 100%;
      }
   }
@@ -365,7 +365,7 @@
 
   .next-button,
   .previous-button {
-    @media (min-width: map-get($grid-breakpoints, "md")) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       flex-basis: auto;
       min-width: 8rem;
     }
@@ -429,7 +429,6 @@
 
 // Import component-specific sass files
 @import "courseware/course/celebration/CelebrationModal.scss";
-@import "courseware/course/sidebar/sidebars/discussions/Discussions.scss";
 @import "courseware/course/sidebar/sidebars/notifications/NotificationIcon.scss";
 @import "courseware/course/sequence/lock-paywall/LockPaywall.scss";
 @import "shared/streak-celebration/StreakCelebrationModal.scss";
@@ -447,4 +446,4 @@
 @import "course-home/courseware-search/courseware-search.scss";
 @import "course-tabs/course-tabs-navigation.scss";
 @import "courseware/course/sidebar/common/SidebarBase.scss";
-@import "courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss";
+@import "courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss";