Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

12 files changed, 391 insertions, 83 deletions

diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 499394ad960..cc876c9a635 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -4,7 +4,7 @@
     position: absolute;
     top: 48%;
     left: -$length;
-    border-top: 2px solid $border-color;
+    border-top: 2px solid var(--border-color, $border-color);
     width: $length;
     height: 1px;
   }
@@ -14,14 +14,14 @@
   display: inline-block;
   padding: 8px 10px 9px;
   width: 100%;
-  border: 1px solid $border-color;
+  border: 1px solid var(--border-color, $border-color);
   border-radius: $border-radius;
-  background-color: $white;
+  background-color: var(--white, $white);
 
   &:hover {
-    background-color: $gray-darker;
+    background-color: var(--gray-50, $gray-50);
     border: 1px solid $dropdown-toggle-active-border-color;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 }
 
@@ -66,7 +66,7 @@
 
 @mixin mini-pipeline-item() {
   border-radius: 100px;
-  background-color: $white;
+  background-color: var(--white, $white);
   border-width: 1px;
   border-style: solid;
   width: $ci-action-icon-size;
@@ -85,22 +85,22 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-preparing,
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
 
   &.ci-status-icon-canceled,
@@ -108,12 +108,12 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
   }
 }
 
@@ -226,7 +226,7 @@
       &:focus {
         outline: none;
         text-decoration: none;
-        background-color: $gray-darker;
+        background-color: var(--gray-100, $gray-50);
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index beb80a14c5a..2eaf4517710 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -17,22 +17,19 @@
     }
   }
 
-  .assignee-dropdown-item {
-    .dropdown-item {
-      @include gl-display-flex;
-      @include gl-align-items-center;
-
+  .dropdown-item {
+    &:first-child {
       &::before {
-        top: 50% !important;
+        @include gl-pt-0;
       }
+    }
 
-      &.is-active {
-        &:last-child {
-          @include gl-border-b-gray-100;
-          @include gl-border-b-1;
-          @include gl-border-b-solid;
-        }
-      }
+    &::before {
+      @include gl-pt-8;
+    }
+
+    .gl-new-dropdown-item-text-wrapper {
+      @include gl-py-0;
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index ffc15af6329..3d1ae3519a9 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -92,7 +92,6 @@
   .board-title-caret {
     border-radius: $border-radius-default;
     line-height: $gl-spacing-scale-5;
-    height: $gl-spacing-scale-5;
 
     &.btn svg {
       top: 0;
@@ -173,13 +172,6 @@
   }
 }
 
-.board-promotion-state {
-  background-color: var(--white, $white);
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 .board-list-component {
   min-height: 0; // firefox fix
 }
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 2f0f4a46658..3962c546b51 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -61,7 +61,7 @@
   }
 
   .environment-information {
-    border: 1px solid $border-color;
+    border: 1px solid var(--border-color, $border-color);
     padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
 
@@ -219,9 +219,9 @@
   }
 
   .builds-container {
-    background-color: $white;
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+    background-color: var(--white, $white);
+    border-top: 1px solid var(--border-color, $border-color);
+    border-bottom: 1px solid var(--border-color, $border-color);
     max-height: 300px;
     width: 289px;
     overflow: auto;
@@ -237,7 +237,7 @@
       width: 270px;
 
       &:hover {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
       }
     }
 
@@ -256,13 +256,13 @@
       }
 
       &:hover {
-        background-color: $gray-darker;
+        background-color: var(--gray-50, $gray-50);
       }
     }
   }
 
   .link-commit {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 8522a0a8fe4..232d363b7f1 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -2,7 +2,7 @@
 
 .ci-status {
   padding: 2px 7px 4px;
-  border: 1px solid $gray-darker;
+  border: 1px solid var(--border-color, $border-color);
   white-space: nowrap;
   border-radius: 4px;
 
@@ -18,7 +18,11 @@
   }
 
   &.ci-failed {
-    @include status-color($red-100, $red-500, $red-600);
+    @include status-color(
+      var(--red-100, $red-100),
+      var(--red-500, $red-500),
+      var(--red-600, $red-600)
+    );
   }
 
   &.ci-success {
@@ -26,11 +30,12 @@
   }
 
   &.ci-canceled,
+  &.ci-skipped,
   &.ci-disabled,
   &.ci-scheduled,
   &.ci-manual {
-    color: $gl-text-color;
-    border-color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color, 0.07);
@@ -38,25 +43,37 @@
   }
 
   &.ci-preparing {
-    @include status-color($gray-100, $gray-300, $gray-400);
+    @include status-color(
+      var(--gray-100, $gray-100),
+      var(--gray-300, $gray-300),
+      var(--gray-400, $gray-400)
+    );
   }
 
   &.ci-pending,
   &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
-    @include status-color($orange-50, $orange-500, $orange-700);
+    @include status-color(
+      var(--orange-50, $orange-50),
+      var(--orange-500, $orange-500),
+      var(--orange-700, $orange-700)
+    );
   }
 
   &.ci-info,
   &.ci-running {
-    @include status-color($blue-100, $blue-500, $blue-600);
+    @include status-color(
+      var(--blue-100, $blue-100),
+      var(--blue-500, $blue-500),
+      var(--blue-600, $blue-600)
+    );
   }
 
   &.ci-created,
   &.ci-skipped {
-    color: $gl-text-color-secondary;
-    border-color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color-secondary, 0.07);
diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
index 3a5e2e4159d..4a48333cd27 100644
--- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -314,11 +314,6 @@
         vertical-align: top;
         font-weight: $gl-font-weight-normal;
       }
-
-      .fa {
-        color: var(--gray-500, $gray-500);
-        font-size: $code-font-size;
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
new file mode 100644
index 00000000000..5f43d5df7e3
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -0,0 +1,81 @@
+@import 'mixins_and_variables_and_functions';
+
+.import-jobs-to-col {
+  width: 39%;
+}
+
+.import-jobs-status-col {
+  width: 15%;
+}
+
+.import-jobs-cta-col {
+  width: 1%;
+}
+
+.import-project-name-input {
+  border-radius: 0 $border-radius-default $border-radius-default 0;
+  position: relative;
+  left: -1px;
+  max-width: 300px;
+}
+
+.import-slash-divider {
+  background-color: $gray-lightest;
+  border: 1px solid $border-color;
+}
+
+.import-row {
+  height: 55px;
+}
+
+.import-table {
+  .import-jobs-from-col,
+  .import-jobs-to-col,
+  .import-jobs-status-col,
+  .import-jobs-cta-col {
+    border-bottom-width: 1px;
+    padding-left: $gl-padding;
+  }
+}
+
+.import-projects-loading-icon {
+  margin-top: $gl-padding-32;
+}
+
+.import-entities-target-select {
+  &.disabled {
+    .import-entities-target-select-separator,
+    .select2-container.select2-container-disabled .select2-choice {
+      color: var(--gray-400, $gray-400);
+      border-color: var(--gray-100, $gray-100);
+      background-color: var(--gray-10, $gray-10);
+    }
+
+    .select2-container.select2-container-disabled .select2-choice .select2-arrow {
+      background-color: var(--gray-10, $gray-10);
+    }
+  }
+
+  .import-entities-target-select-separator {
+    border-color: var(--gray-200, $gray-200);
+    background-color: var(--gray-10, $gray-10);
+  }
+
+  .select2-container {
+    > .select2-choice {
+      .select2-arrow {
+        background-color: var(--white, $white);
+      }
+
+      border-color: var(--gray-200, $gray-200);
+      color: var(--gray-900, $gray-900) !important;
+      background-color: var(--white, $white) !important;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .gl-form-input {
+    box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index b0655408edf..a26affb10a9 100644
--- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -255,10 +255,6 @@ $colors: (
     }
   }
 
-  .btn-success .fa-spinner {
-    color: var(--white, $white);
-  }
-
   .editor-wrap {
     &.is-loading {
       .editor {
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
new file mode 100644
index 00000000000..3c95ecc9bf0
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -0,0 +1,189 @@
+@import 'mixins_and_variables_and_functions';
+
+@mixin inset-border-1-red-500($important: false) {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
+}
+
+.timezone-dropdown {
+  .dropdown-menu {
+    @include gl-w-full;
+  }
+
+  .gl-new-dropdown-item-text-primary {
+    @include gl-overflow-hidden;
+    @include gl-text-overflow-ellipsis;
+  }
+}
+
+.modal-footer {
+  @include gl-bg-gray-10;
+}
+
+.invalid-dropdown {
+  .gl-dropdown-toggle {
+    @include inset-border-1-red-500;
+
+    &:hover {
+      @include inset-border-1-red-500(true);
+    }
+  }
+}
+
+//// Copied from roadmaps.scss - adapted for on-call schedules
+$header-item-height: 72px;
+$item-height: 40px;
+$details-cell-width: 180px;
+$timeline-cell-height: 32px;
+$timeline-cell-width: 180px;
+$border-style: 1px solid var(--gray-100, $gray-100);
+$gradient-dark-gray: rgba(0, 0, 0, 0.15);
+$gradient-gray: rgba(255, 255, 255, 0.001);
+$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%);
+$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%);
+$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%);
+
+.schedule-shell {
+  @include gl-relative;
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-x-auto;
+  @include gl-border-gray-100;
+  @include gl-border-1;
+  @include gl-border-solid;
+  @include gl-rounded-base;
+}
+
+.timeline-section {
+  @include gl-sticky;
+  @include gl-top-0;
+  z-index: 20;
+
+  .timeline-header-blank,
+  .timeline-header-item {
+    @include float-left;
+    height: $header-item-height;
+    border-bottom: $border-style;
+    background-color: var(--white, $white);
+  }
+
+  .timeline-header-blank {
+    @include gl-sticky;
+    @include gl-top-0;
+    @include gl-left-0;
+    width: $details-cell-width;
+    z-index: 2;
+  }
+
+  .timeline-header-item {
+    // container size minus left panel width divided by 2 week timeframes
+    width: calc((100% - #{$details-cell-width}) / 2);
+
+    &:last-of-type .item-label {
+      @include gl-border-r-0;
+    }
+
+    .item-label,
+    .item-sublabel .sublabel-value {
+      color: var(--gray-400, $gray-400);
+      @include gl-font-weight-normal;
+
+      &.label-dark {
+        @include gl-text-gray-900;
+      }
+
+      &.label-bold {
+        @include gl-font-weight-bold;
+      }
+    }
+
+    .item-label {
+      @include gl-py-4;
+      @include gl-pl-4;
+      border-right: $border-style;
+      border-bottom: $border-style;
+    }
+
+    .item-sublabel {
+      @include gl-relative;
+      @include gl-display-flex;
+
+      .sublabel-value {
+        @include gl-flex-grow-1;
+        @include gl-flex-basis-0;
+
+        text-align: center;
+        @include gl-font-base;
+        padding: 2px 0;
+      }
+    }
+
+    .current-day-indicator-header {
+      @include gl-absolute;
+      @include gl-bottom-0;
+      height: $grid-size;
+      width: $grid-size;
+      background-color: var(--red-500, $red-500);
+      @include gl-rounded-full;
+      transform: translate(-50%, 50%);
+    }
+  }
+}
+
+.timeline-section .timeline-header-blank,
+.list-section .details-cell {
+  &::after {
+    @include gl-h-full;
+    @include gl-content-empty;
+    @include gl-absolute;
+    @include gl-top-0;
+    right: -$grid-size;
+    width: $grid-size;
+    @include gl-pointer-events-none;
+    background: $column-right-gradient;
+  }
+}
+
+.details-cell,
+.timeline-cell {
+  @include float-left;
+  height: $item-height;
+}
+
+.details-cell {
+  @include gl-sticky;
+  @include gl-left-0;
+  width: $details-cell-width;
+  @include gl-font-base;
+  background-color: var(--white, $white);
+  z-index: 10;
+}
+
+.timeline-cell {
+  @include gl-relative;
+  // width: $timeline-cell-width;
+  // container size minus left panel width divided by 2 week timeframes
+  width: calc((100% - #{$details-cell-width}) / 2);
+  @include gl-bg-transparent;
+  border-right: $border-style;
+
+  &:last-child {
+    @include gl-border-r-0;
+  }
+
+  .current-day-indicator {
+    @include gl-absolute;
+    top: -1px;
+    width: $gl-spacing-scale-1;
+    height: calc(100% + 1px);
+    background-color: var(--red-500, $red-500);
+    @include gl-pointer-events-none;
+    transform: translateX(-50%);
+  }
+}
+
+.gl-token {
+  .gl-avatar-labeled-label {
+    @include gl-text-white;
+    @include gl-font-weight-normal;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 1de66aa73da..d9ab52774bd 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -33,7 +33,7 @@
     }
 
     .stage {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       font-weight: $gl-font-weight-normal;
       vertical-align: middle;
     }
@@ -62,7 +62,7 @@
 
     a {
       font-weight: $gl-font-weight-bold;
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
       text-decoration: none;
 
       &:focus,
@@ -124,11 +124,46 @@
   display: flex;
   width: 100%;
   min-height: $dropdown-max-height-lg;
-  background-color: $gray-light;
+  background-color: var(--gray-50, $gray-50);
   padding: $gl-padding 0;
   overflow: auto;
 }
 
+// These are single-value classes to use with utility-class style CSS
+// but to still access this variable. Do not add other styles.
+.gl-pipeline-min-h {
+  min-height: $dropdown-max-height-lg;
+}
+
+.gl-pipeline-job-width {
+  width: 186px;
+}
+
+.gl-linked-pipeline-padding {
+  padding-right: 120px;
+}
+
+.gl-build-content {
+  @include build-content();
+}
+
+.gl-ci-action-icon-container {
+  position: absolute;
+  right: 5px;
+  top: 50% !important;
+  transform: translateY(-50%);
+
+  // Action Icons in big pipeline-graph nodes
+  &.ci-action-icon-wrapper {
+    height: 30px;
+    width: 30px;
+    border-radius: 100%;
+    display: block;
+    padding: 0;
+    line-height: 0;
+  }
+}
+
 // Pipeline graph, used at
 // app/assets/javascripts/pipelines/components/graph/graph_component.vue
 .pipeline-graph {
@@ -142,7 +177,7 @@
 
   a {
     text-decoration: none;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 
   svg {
@@ -214,18 +249,18 @@
         height: 25px;
         position: absolute;
         top: -31px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
       }
 
       &::after {
         left: -44px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 20px;
       }
 
       &::before {
         right: -44px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 20px 0 0;
       }
     }
@@ -281,7 +316,7 @@
 
     a.build-content:hover,
     button.build-content:hover {
-      background-color: $gray-darker;
+      background-color: var(--gray-100, $gray-100);
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
@@ -292,7 +327,7 @@
         position: absolute;
         top: 48%;
         right: -48px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
         width: 48px;
         height: 1px;
       }
@@ -305,7 +340,7 @@
         content: '';
         top: -49px;
         position: absolute;
-        border-bottom: 2px solid $border-color;
+        border-bottom: 2px solid var(--border-color, $border-color);
         width: 25px;
         height: 69px;
       }
@@ -313,14 +348,14 @@
       // Right connecting curves
       &::after {
         right: -25px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
         left: -25px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 0 20px;
       }
     }
@@ -355,7 +390,7 @@
       line-height: 0;
 
       svg {
-        fill: $gl-text-color-secondary;
+        fill: var(--gray-500, $gray-500);
       }
 
       .spinner {
@@ -453,13 +488,13 @@
     left: -6px;
     margin-top: 3px;
     border-width: 7px 5px 7px 0;
-    border-right-color: $border-color;
+    border-right-color: var(--border-color, $border-color);
   }
 
   &::after {
     left: -5px;
     border-width: 10px 7px 10px 0;
-    border-right-color: $white;
+    border-right-color: var(--white, $white);
   }
 }
 
@@ -484,5 +519,5 @@
 }
 
 .progress-bar.bg-primary {
-  background-color: $blue-500 !important;
+  background-color: var(--blue-500, $blue-500) !important;
 }
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index e0e56893afc..dbde7933a8b 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -22,7 +22,7 @@
     min-width: 170px; //Guarantees buttons don't break in several lines.
 
     .btn-default {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .btn.btn-retry:hover,
@@ -32,7 +32,7 @@
     }
 
     svg path {
-      fill: $gl-text-color-secondary;
+      fill: var(--gray-500, $gray-500);
     }
 
     .dropdown-menu {
@@ -42,12 +42,7 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $gl-text-color-secondary;
-
-      .fa {
-        color: $gl-text-color-secondary;
-        font-size: 14px;
-      }
+      color: var(--gray-500, $gray-500);
     }
 
     .btn-group.open .btn-default {
diff --git a/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
new file mode 100644
index 00000000000..3b4b1fdcded
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
@@ -0,0 +1,11 @@
+@media print {
+  .codes-to-print {
+    background-color: var(--white);
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+  }
+}