feat: Responsive control bar buttons

openactive · Aug 7, 2024 · e7c8cd7 · e7c8cd7
1 parent bb03bef
commit e7c8cd7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/client/scss/base/_variables.scss b/src/client/scss/base/_variables.scss
@@ -79,8 +79,6 @@ $link-color: #4eaff6;
 // Buttons
 $button-padding-x: rem(30px);
 $button-padding-y: rem(10px);
-$button-md-padding-y: rem(15px);
-$button-md-padding-x: rem(25px);
 $button-margin: 1rem 0 0 0;
 $button-line-height: 1;
 $button-border-width: 1px;
@@ -114,9 +112,7 @@ $control-bar-height: $button-line-height * rem($button-font-size)
   + rem($button-border-width) * 2
   + $control-bar-border-width;
 
-$control-bar-md-height: $control-bar-height
-  - $button-padding-y * 2
-  + $button-md-padding-y * 2;
+$control-bar-md-height: $control-bar-height;
 
 $footer-height: rem(50px);
 $footer-background: $gray-100;

diff --git a/src/client/scss/components/_buttons.scss b/src/client/scss/components/_buttons.scss
@@ -60,8 +60,26 @@ button.btn-primary--ghost {
     cursor: default;
   }
 
-  @media only screen and (max-width: map-get($grid-breakpoints, "md")) {
-    padding: $button-md-padding-y $button-md-padding-x;
+  @media only screen and (max-width: (map-get($grid-breakpoints, "xl") + 40)) {
+    padding: $button-padding-y ($button-padding-x * 0.7);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "lg") + 100)) {
+    padding: $button-padding-y ($button-padding-x * 0.5)
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "lg"))) {
+    padding: $button-padding-y rem(3px);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "md") + 40)) {
+    padding: ($button-padding-y * 1.2) rem(2px);
+    font-size: ($base-font-size - 6);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "sm") + 100)) {
+    padding: ($button-padding-y * 1.4) rem(0px);
+    font-size: ($base-font-size - 8);
+  }
+  @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+    padding: ($button-padding-y * 1.4) rem(0px);
+    font-size: ($base-font-size - 10);
   }
 }
 

diff --git a/src/client/scss/pages/_home.scss b/src/client/scss/pages/_home.scss
@@ -11,6 +11,16 @@
     button {
       margin: 0;
     }
+
+    @media only screen and (max-width: (map-get($grid-breakpoints, "sm"))) {
+      padding-left: 15px;
+      padding-right: 15px;
+
+      .col-3, .col-6 {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+    }
   }
 
   .top-level-row {