swap rem values for px values (#1104)

scss/avatars.scss

@@ -1,5 +1,5 @@
-$avatar-small-height: 2.75rem;
-$avatar-small-width: 2.75rem;
+$avatar-small-height: 44px;
+$avatar-small-width: 44px;
 
-$avatar-large-height: 5rem;
-$avatar-large-width: 5rem;
+$avatar-large-height: 80px;
+$avatar-large-width: 80px;

scss/borders.scss

@@ -1 +1 @@
-$ux-border-radius: 0.25rem;
+$ux-border-radius: 4px;

scss/buttons.scss

@@ -26,14 +26,14 @@ $warning: $ux-yellow-400;
 
 @mixin btn-focus-outline {
   box-shadow: none !important;
-  outline: 0.125rem solid $ux-blue-500;
-  outline-offset: 0.125rem;
+  outline: 2px solid $ux-blue-500;
+  outline-offset: 2px;
 }
 
 @mixin btn-focus-outline--dark-bg {
   box-shadow: none !important;
-  outline: 0.125rem solid $ux-white;
-  outline-offset: 0.125rem;
+  outline: 2px solid $ux-white;
+  outline-offset: 2px;
 }
 
 @mixin btn-remove-bootstrap-focus-outline {

scss/cards.scss

@@ -1,7 +1,7 @@
-$card-xs-spacing: 1rem;
-$card-sm-spacing: 1.25rem;
-$card-spacing: 1.5rem;
-$card-width: 56rem;
-$card-width-md: 40rem;
-$card-width-sm: 32rem;
-$card-width-xs: 15rem;
+$card-xs-spacing: 16px;
+$card-sm-spacing: 20px;
+$card-spacing: 24px;
+$card-width: 896px;
+$card-width-md: 640px;
+$card-width-sm: 512px;
+$card-width-xs: 240px;

scss/drawer.scss

@@ -1,3 +1,3 @@
-$drawer-width-small: 32rem;
-$drawer-width-medium: 40rem;
-$drawer-width-large: 55.625rem;
+$drawer-width-small: 512px;
+$drawer-width-medium: 640px;
+$drawer-width-large: 890px;

scss/forms/control_button_group.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: -0.5rem;
+  margin-right: -8px;
 
   &--full-width {
     // This is a min-width because we are using a negative margin-right on the container
@@ -15,7 +15,7 @@
 
     .FormControlLabel {
       flex: 1 1 0;
-      min-width: 16rem;
+      min-width: 256px;
     }
   }
 
@@ -25,8 +25,8 @@
     flex-wrap: wrap;
 
     .FormControlLabel--bordered {
-      padding: 0.3125rem 0.625rem;
-      margin-right: 0.5rem;
+      padding: 5px 10px;
+      margin-right: 8px;
 
       input[type='radio'] {
         display: none;
@@ -36,7 +36,7 @@
 
   .FormControlLabel {
     flex-wrap: wrap;
-    margin: 0 0.5rem 0.5rem 0;
+    margin: 0 8px 8px 0;
     display: block;
   }
 }

scss/forms/form_control_label.scss

@@ -7,7 +7,7 @@
   align-items: center;
   color: $ux-gray-900;
   display: flex;
-  margin-bottom: 0.5rem;
+  margin-bottom: 8px;
 
   &--with-children {
     @include synth-font-type-30--medium;
@@ -29,20 +29,20 @@
 
   &__control {
     display: flex;
-    margin-right: .5rem;
+    margin-right: 8px;
   }
 
   &__children {
     @include synth-font-type-30;
 
-    margin-top: 0.5rem;
+    margin-top: 8px;
     width: 100%;
   }
 
   &--bordered {
     border: 1px solid $ux-gray-400;
     border-radius: $ux-border-radius;
-    padding: 1rem;
+    padding: 16px;
     cursor: pointer;
 
     &:hover {
@@ -67,8 +67,8 @@
   }
 
   input[type='checkbox'], input[type='radio'] {
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-top: 0.125rem;
+    min-height: 16px;
+    min-width: 16px;
+    margin-top: 2px;
   }
 }

scss/forms/form_group.scss

@@ -7,16 +7,16 @@
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  margin: 0.5rem 0;
+  margin: 8px 0;
 
   &--bordered {
     border: 1px solid $ux-gray-400;
     border-radius: $ux-border-radius;
-    padding: 1rem;
+    padding: 16px;
 
     .InputLabel {
       @include synth-font-type-30--bold;
-      margin-bottom: 0.5rem;
+      margin-bottom: 8px;
 
       &__helper-text {
         @include synth-font-type-30;
@@ -41,13 +41,13 @@
     flex-direction: row;
 
     .InputLabel {
-      margin-right: 1rem;
-      margin-bottom: 0.5rem;
+      margin-right: 16px;
+      margin-bottom: 8px;
     }
 
     .FormControlLabel {
       white-space: nowrap;
-      margin-right: 1rem;
+      margin-right: 16px;
     }
 
     .FormControlLabel--active {
@@ -58,7 +58,7 @@
   &__helper-text {
     @include synth-font-type-20;
     color: $ux-gray-900;
-    margin: 0 0 0.75rem;
+    margin: 0 0 12px;
 
     &--pre {
       white-space: pre-wrap;
@@ -68,7 +68,7 @@
   &__invalid-feedback {
     @include synth-font-type-20--medium;
     color: $ux-red;
-    padding: .375rem 0;
+    padding: 6px 0;
     margin: 0;
 
     &__list {
@@ -78,7 +78,7 @@
 
   .form-control {
     @include synth-font-type-30;
-    height: 2.25rem;
+    height: 36px;
   }
 
   textarea.form-control {

scss/forms/input_label.scss

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 0.375rem;
+  margin-bottom: 6px;
 
   &__helper-text {
     @include synth-font-type-10--uppercase;

scss/modals.scss

@@ -1,3 +1,3 @@
-$modal-width-small: 32rem;
-$modal-width-medium: 40rem;
-$modal-width-large: 55.625rem;
+$modal-width-small: 512px;
+$modal-width-medium: 640px;
+$modal-width-large: 890px;

scss/navbar.scss

@@ -1,3 +1,3 @@
-$ui-header-height: 4.5rem;
-$ui-navbar-height: 3rem;
+$ui-header-height: 72px;
+$ui-navbar-height: 48px;
 $ui-navbar-height-mobile: $ui-navbar-height;

scss/spacing.scss

@@ -1,7 +1,7 @@
-$ux-spacing-10: 0.25rem;
-$ux-spacing-20: 0.5rem;
-$ux-spacing-30: 0.75rem;
-$ux-spacing-40: 1rem;
-$ux-spacing-50: 1.5rem;
-$ux-spacing-60: 2rem;
-$ux-spacing-70: 3rem;
+$ux-spacing-10: 4px;
+$ux-spacing-20: 8px;
+$ux-spacing-30: 12px;
+$ux-spacing-40: 16px;
+$ux-spacing-50: 24px;
+$ux-spacing-60: 32px;
+$ux-spacing-70: 48px;