fix: changed css units to rem, where necessary (#30)

src/components/BCGovLogo/styles.css

@@ -1,3 +1,3 @@
 .logo {
-  margin-top: 40px;
+  margin-top: 2.5rem;
 }

src/components/BCHeader/styles.scss

@@ -6,7 +6,7 @@
 }
 
 .header-link {
-  margin-left: 15px;
+  margin-left: 0.9375rem;
   color: colors.$white;
 }
 

src/components/Card/styles.scss

@@ -3,24 +3,24 @@
 
 .card-header {
   display: inline-flex;
-  width: 200px;
-  max-height: 32px;
+  width: 12.5rem;
+  max-height: 2rem;
   justify-content: space-between;
 }
 
 .card-icon {
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0px !important;
-  margin: 0px !important;
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  padding: 0 !important;
+  margin: 0 !important;
   color: colors.$blue-60;
 }
 
 .card-overflow {
-  padding: 0px !important;
-  margin: 0px !important;
-  width: 32px;
-  height: 32px;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 2rem;
+  height: 2rem;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
@@ -32,10 +32,10 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 20px 16px;
-  margin: 8px;
-  width: 234px;
-  height: 158px;
+  padding: 1.25rem 1rem;
+  margin: 0.5rem;
+  width: 14.625rem;
+  height: 9.875rem;
   background: colors.$white;
   border: 1px solid colors.$gray-20;
   border-radius: 4px;
@@ -58,27 +58,27 @@ h5 {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1rem;
+  line-height: 1.5rem;
   color: colors.$gray-100;
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 200px;
+  max-width: 12.5rem;
 }
 
 .card-content > p {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-  letter-spacing: 0.16px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  letter-spacing: 0.01rem;
   margin-bottom: auto;
   color: colors.$gray-70;
   display: -webkit-box;
-  max-width: 200px;
+  max-width: 12.5rem;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -119,9 +119,9 @@ h5 {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 16px;
-    width: 288px;
-    height: 64px;
+    padding: 1rem;
+    width: 18rem;
+    height: 4rem;
     background: colors.$white;
     border: 1px solid colors.$gray-20;
     border-radius: 4px;

src/components/EmptySection/styles.scss

@@ -3,7 +3,7 @@
 .empty-section-icon {
   width: 3rem !important;
   height: 3rem !important;
-  padding: 0px !important;
+  padding: 0 !important;
   color: colors.$gray-70;
   margin-bottom: 1rem;
 }

src/components/PanelSectionName/styles.scss

@@ -1,21 +1,21 @@
 @use '../../theme/variables.scss' as vars;
 
 .panel-section {
-  height: 48px;
+  height: 3rem;
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 15px 16px;
+  padding: 0.9375rem 1rem;
   background: var(--#{vars.$bcgov-prefix}-background);
 }
 
 .panel-section > span {
   font-family: 'BC Sans', 'IBM Plex Sans', sans-serif;
   font-style: normal;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.32px;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
   color: var(--#{vars.$bcgov-prefix}-text-secondary);
   user-select: none;
 }

src/theme/components-overrides.scss

@@ -41,15 +41,15 @@
 
 .#{variables.$bcgov-prefix}--time-picker__input > .#{variables.$bcgov-prefix}--text-input {
   border-top-left-radius: 4px;
-  border-top-right-radius: 0px;
+  border-top-right-radius: 0;
 }
 
 .#{variables.$bcgov-prefix}--time-picker__select > .#{variables.$bcgov-prefix}--select-input {
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .#{variables.$bcgov-prefix}--time-picker :last-child > .#{variables.$bcgov-prefix}--select-input {
-  border-top-left-radius: 0px;
+  border-top-left-radius: 0;
   border-top-right-radius: 4px;
 }
 
@@ -58,23 +58,23 @@
 }
 
 .#{variables.$bcgov-prefix}--modal-close {
-  margin-right: 16px;
-  margin-top: 16px;
+  margin-right: 1rem;
+  margin-top: 1rem;
   border-radius: 4px;
 }
 .#{variables.$bcgov-prefix}--modal-footer {
   height: auto;
-  margin: 0 16px 16px;
+  margin: 0 1rem 1rem;
 }
 
 .#{variables.$bcgov-prefix}--modal-footer .#{variables.$bcgov-prefix}--btn {
   max-width: none;
-  height: 48px;
-  padding-bottom: 16px;
+  height: 3rem;
+  padding-bottom: 1rem;
 }
 
 .#{variables.$bcgov-prefix}--modal-footer .#{variables.$bcgov-prefix}--btn:not(.#{variables.$bcgov-prefix}--btn--primary) {
-  margin-right: 4px;
+  margin-right: 0.25rem;
 }
 
 .#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input__wrapper select.#{variables.$bcgov-prefix}--select-input,
@@ -85,7 +85,7 @@
 
 .#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input__wrapper,
 .#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__page-number .#{variables.$bcgov-prefix}--select-input__wrapper {
-  margin: 4px;
+  margin: 0.25rem;
 }
 
 .#{variables.$bcgov-prefix}--pagination .#{variables.$bcgov-prefix}--select__item-count .#{variables.$bcgov-prefix}--select-input--inline__wrapper {
@@ -98,91 +98,90 @@
 
 .#{variables.$bcgov-prefix}--pagination--sm,
 .#{variables.$bcgov-prefix}--pagination--sm .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
-  height: 40px;
+  height: 2.5rem;
 }
 
 .#{variables.$bcgov-prefix}--pagination--md,
 .#{variables.$bcgov-prefix}--pagination--md .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
-  height: 48px;
+  height: 3rem;
 }
 
 .#{variables.$bcgov-prefix}--pagination--lg,
 .#{variables.$bcgov-prefix}--pagination--lg .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
-  height: 56px;
+  height: 3.5rem;
 }
 
 .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--popover-container {
   border-left: 1px solid var(--#{variables.$bcgov-prefix}-border-subtle);
 }
 
 .#{variables.$bcgov-prefix}--pagination__control-buttons .#{variables.$bcgov-prefix}--pagination__button {
-  margin: 4px;
+  margin: 0.25rem;
   border: 0;
 }
 
 .#{variables.$bcgov-prefix}--side-nav {
-  box-shadow: inset -1px 0px 0px colors.$gray-20;
+  box-shadow: inset -1px 0 0 colors.$gray-20;
 }
 
 .#{variables.$bcgov-prefix}--side-nav__items {
-  padding: 16px;
+  padding: 1rem;
 }
 
 .#{variables.$bcgov-prefix}--side-nav__link {
-  padding: 16px !important;
-  margin: 0px;
-  width: 256px;
+  padding: 1rem !important;
+  margin: 0;
+  width: 16rem;
 }
 
 .#{variables.$bcgov-prefix}--grid {
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
 .#{variables.$bcgov-prefix}--tab-content {
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
 .#{variables.$bcgov-prefix}--tabs button.#{variables.$bcgov-prefix}--tabs__nav-item--selected {
   font-weight: bold;
 }
 
 .#{variables.$bcgov-prefix}--data-table {
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
 .#{variables.$bcgov-prefix}--table-header-label {
   font-weight: bold;
 }
 
 .#{variables.$bcgov-prefix}--content {
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
 .#{variables.$bcgov-prefix}--header {
   background-color: colors.$blue-60 !important;
 }
 
 .#{variables.$bcgov-prefix}--row h1 {
-  font-size: 32px;
-  line-height: 40px;
+  font-size: 2rem;
+  line-height: 2.5rem;
   color: colors.$gray-100;
 }
 
 .#{variables.$bcgov-prefix}--row h4 {
-  font-size: 14px;
-  line-height: 18px;
-  letter-spacing: 0.16px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  letter-spacing: 0.01rem;
   color: colors.$gray-70;
 }
 
 .#{variables.$bcgov-prefix}--side-nav__menu .#{variables.$bcgov-prefix}--side-nav__menu-item a.#{variables.$bcgov-prefix}--side-nav__link,
 button.#{variables.$bcgov-prefix}--side-nav__submenu,
-.#{variables.$bcgov-prefix}--side-nav__link
-{
-  height: 48px;
+.#{variables.$bcgov-prefix}--side-nav__link {
+  height: 3rem;
 }
 
-div.#{variables.$bcgov-prefix}--side-nav__icon > svg{
+div.#{variables.$bcgov-prefix}--side-nav__icon > svg {
   fill: var(--#{variables.$bcgov-prefix}-link-secondary)
 }
 
@@ -192,7 +191,7 @@ div.#{variables.$bcgov-prefix}--side-nav__icon > svg{
 }
 
 div.#{variables.$bcgov-prefix}--inline-notification--low-contrast::before{
-  border-radius: 0px 4px 4px 0px;
+  border-radius: 0 4px 4px 0;
   filter: none;
 }