Merge branch 'use-px-not-rems' into 'master'

Use px instead of rems to prep for csslab

Closes #55314

See merge request gitlab-org/gitlab-ce!23804

app/assets/stylesheets/framework/modal.scss

@@ -25,8 +25,8 @@
     &.w-100 {
       // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here
       // https://github.com/twbs/bootstrap/pull/26976
-      margin-right: -2rem;
-      padding-right: 2rem;
+      margin-right: -28px;
+      padding-right: 28px;
     }
   }

app/assets/stylesheets/framework/variables.scss

@@ -198,6 +198,7 @@ $well-light-text-color: #5b6169;
 $gl-font-size: 14px;
 $gl-font-size-xs: 11px;
 $gl-font-size-small: 12px;
+$gl-font-size-medium: 20px;
 $gl-font-size-large: 16px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;

app/assets/stylesheets/framework/variables_overrides.scss

@@ -28,3 +28,9 @@ $popover-border-width: 1px;
 $popover-border-color: $border-color;
 $popover-box-shadow: 0 $border-radius-small $border-radius-default 0 $shadow-color;
 $popover-arrow-outer-color: $shadow-color;
+$h1-font-size: 14px * 2.5;
+$h2-font-size: 14px * 2;
+$h3-font-size: 14px * 1.75;
+$h4-font-size: 14px * 1.5;
+$h5-font-size: 14px * 1.25;
+$h6-font-size: 14px;