fix: Respect user agent font size set in browser (#2466)

Author: thecristen

assets/css/_autocomplete-theme.scss

@@ -5,7 +5,7 @@
 }
 
 // styles that will be used for every instance
-[phx-hook='AlgoliaAutocomplete'], .aa-Detached {
+[phx-hook="AlgoliaAutocomplete"], .aa-Detached {
   .text-danger & {
     --aa-accent-color: 179, 0, 15; // matches $error-text
   }
@@ -15,6 +15,13 @@
     --aa-primary-color-rgb: var(--aa-accent-color);
     --aa-input-border-color-rgb: var(--aa-accent-color);
     --aa-overlay-color-rgb: var(--aa-accent-color);
+    --aa-search-input-height: 2.75rem; // override the default 44px
+    --aa-font-size: 1rem;
+  }
+
+  .aa-Input {
+    font-size: 1rem !important; // override the default `font` declaration
+    height: 2.75rem; // override default height
   }
 
   .aa-Label {
@@ -88,6 +95,7 @@
   }
 
   .aa-Panel {
+    font-size: 1rem;
     margin-top: .25rem;
     z-index: var(--aa-base-z-index);
   }

assets/css/_bootstrap.scss

@@ -55,7 +55,7 @@
 
 // Overrides
 .c-select {
-  border: 2px solid $brand-primary;
+  border: .125rem solid $brand-primary;
   cursor: pointer;
   padding: $base-spacing-sm;
   text-align: left;

assets/css/_buttons.scss

@@ -11,6 +11,7 @@
   // Allows button to inherit size of surrounding/body text.
   font-size: inherit;
   font-weight: $font-weight-medium;
+  white-space: normal;
 
   &.btn-primary {
     @include hover {
@@ -149,11 +150,6 @@
 
   .btn {
     margin-bottom: 0;
-    white-space: normal;
-
-    @include media-breakpoint-down(sm) {
-      white-space: normal;
-    }
   }
 }
 

assets/css/_checkbox.scss

@@ -14,9 +14,9 @@
 
   &:focus {
     + .c-checkbox__label::before {
-      outline: 3px solid; // Focus for IE11, auto doesn't work the same
+      outline: .25rem solid; // Focus for IE11, auto doesn't work the same
       // Use webkit focus color so IE11 above works
-      outline: auto -webkit-focus-ring-color 5px;
+      outline: auto -webkit-focus-ring-color .25rem;
       outline-color: $brand-primary-light;
       -moz-outline-radius: $border-radius; // Less ugly focus style for FF
     }
@@ -42,7 +42,7 @@
 
   &::before {
     background: $input-bg;
-    border: 2px solid $brand-primary-dark;
+    border: .125rem solid $brand-primary-dark;
     border-radius: $border-radius;
     content: '';
     cursor: pointer;
@@ -56,7 +56,7 @@
 
   &::after {
     background: transparent;
-    border: 4px solid $white;
+    border: .25rem solid $white;
     border-right: 0;
     border-top: 0;
     content: none;

assets/css/_customer-support.scss

@@ -116,7 +116,7 @@
 }
 
 .upload-photo-link {
-  border: 2px solid $brand-primary;
+  border: .125rem solid $brand-primary;
   border-radius: calc(#{$base-spacing} / 4);
   cursor: pointer;
   display: inline-block;
@@ -165,7 +165,7 @@ body {
 
 // styles the input fields
 .support-form-input {
-  border: 2px solid $brand-primary;
+  border: .125rem solid $brand-primary;
   display: block;
   font-size: inherit; // Bootstrap override
   padding: calc(#{$base-spacing} / 2);

assets/css/_errors.scss

@@ -3,13 +3,13 @@
 // Used in the error layout page
 .error-page {
   @include media-breakpoint-between(md, xxl) {
-    margin-top: 40px;
+    margin-top: 2.5rem;
   }
   @include media-breakpoint-only(sm) {
-    margin: 24px 40px;
+    margin: 1.5rem 2.5rem;
   }
   @include media-breakpoint-only(xs) {
-    margin: 16px 24px;
+    margin: 1rem 1.5rem;
   }
 }
 
@@ -20,7 +20,7 @@
 }
 
 .error-details-container .error-title {
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
   @include media-breakpoint-between(xs, sm) {
     display: none;
   }
@@ -29,9 +29,9 @@
 .error-pre-title {
   color: $gray;
   line-height: 1.4;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
   @include media-breakpoint-only(sm) {
-    margin-bottom: 8px;
+    margin-bottom: .5rem;
   }
 }
 
@@ -47,7 +47,7 @@
   flex-direction: column;
   @include media-breakpoint-up(sm) {
     flex-direction: row-reverse;
-    margin-top: 24px;
+    margin-top: 1.5rem;
   }
   @include media-breakpoint-up(xxl) {
     margin-top: 0;
@@ -56,11 +56,11 @@
 
 .error-details-container {
   @include media-breakpoint-only(sm) {
-    margin-right: 24px;
-    margin-top: 16px;
+    margin-right: 1.5rem;
+    margin-top: 1rem;
   }
   @include media-breakpoint-between(md, lg) {
-    margin-right: 40px;
+    margin-right: 2.5rem;
   }
   @include media-breakpoint-only(xxl) {
     margin-right: 60px;
@@ -70,15 +70,15 @@
 .error-svg-container {
   flex: 0 0 auto;
   @include media-breakpoint-only(xxl) {
-    margin: 0 80px;
+    margin: 0 5rem;
     width: 380px;
   }
   @include media-breakpoint-between(md,lg) {
-    margin: 0 40px;
+    margin: 0 2.5rem;
     width: 280px;
   }
   @include media-breakpoint-down(sm) {
-    margin: 0 24px;
+    margin: 0 1.5rem;
     width: 220px;
   }
   @include media-breakpoint-only(xs) {

assets/css/_event-details.scss

@@ -11,7 +11,7 @@
   }
 
   .m-event__date-range {
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: bold;
   }
 
@@ -46,12 +46,12 @@
 
   .m-event__livestream {
     height: 56vw;
-    max-height: 560px;
+    max-height: 35rem;
     width: 100%;
   }
 }
 
-$bullet-size: math.div(32px, $font-size-base-xxl) * $base-spacing; // 32px on large viewport
+$bullet-size: 2rem;
 $separator-border: solid 1px $gray-lightest;
 $agenda-column-gap: $base-spacing * .75;
 

assets/css/_event-overlay.scss

@@ -34,11 +34,11 @@
     [data-a11y-dialog-hide] {
       background-color: transparent;
       border: 0;
-      font-size: 26px;
+      font-size: 1.5rem;
       font-weight: bold;
-      height: 18px;
-      line-height: 18px;
-      margin-left: 10px;
+      height: 1.125rem;
+      line-height: 1.125rem;
+      margin-left: .625rem;
       padding: 0;
     }