Ran migration script

app/assets/stylesheets/framework/badges.scss

-.badge {
+.badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
   color: $badge-color;

app/assets/stylesheets/framework/blank.scss

@@ -37,7 +37,7 @@
   flex: 0 0 100%;
   margin-bottom: 15px;
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     flex: 0 0 49%;
     &:nth-child(odd) {
@@ -67,7 +67,7 @@
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     display: flex;
     align-items: center;
     padding: 50px 30px;
@@ -89,12 +89,12 @@
   }
   .blank-state-body {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
       margin-top: 20px;
     }
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-left: 20px;
     }
   }

app/assets/stylesheets/framework/blocks.scss

@@ -195,7 +195,7 @@
       }
     }
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: center;
       .avatar {
@@ -315,7 +315,7 @@
     }
   }
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column;
     .inner-content {
@@ -342,7 +342,7 @@
   .btn {
     margin: $btn-side-margin 5px;
-    @media(max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }

app/assets/stylesheets/framework/buttons.scss

@@ -401,7 +401,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .btn-wide-on-xs {
     width: 100%;
   }

app/assets/stylesheets/framework/calendar.scss

@@ -4,7 +4,7 @@
   border-top: 0;
   direction: rtl;
-  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
     overflow-x: auto;
   }
 }

app/assets/stylesheets/framework/ci_variable_list.scss

@@ -10,14 +10,14 @@
   display: flex;
   align-items: flex-start;
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     align-items: flex-end;
   }
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-bottom: 3 * $gl-btn-padding;
     }
   }
@@ -26,7 +26,7 @@
     .ci-variable-body-item:last-child {
       margin-right: $ci-variable-remove-button-width;
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         margin-right: 0;
       }
     }
@@ -35,7 +35,7 @@
       display: none;
     }
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       .ci-variable-row-body {
         margin-right: $ci-variable-remove-button-width;
       }
@@ -48,7 +48,7 @@
   align-items: flex-start;
   width: 100%;
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
   }
 }
@@ -59,7 +59,7 @@
   &:not(:last-child) {
     margin-right: $gl-btn-padding;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       margin-right: 0;
       margin-bottom: $gl-btn-padding;
     }

app/assets/stylesheets/framework/common.scss

@@ -70,7 +70,7 @@ pre {
     padding: 0;
   }
-  &.well-pre {
+  &.card.card-body-pre {
     border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
@@ -218,7 +218,7 @@ li.note {
 }
 .git_error_tips {
-  @extend .col-md-6;
+  @extend .col-lg-6;
   text-align: left;
   margin-top: 40px;
@@ -308,7 +308,7 @@ img.emoji {
 .btn-sign-in {
   text-shadow: none;
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     margin-top: 8px;
   }
 }
@@ -327,7 +327,7 @@ img.emoji {
   }
 }
-.well {
+.card.card-body {
   margin-bottom: $gl-padding;
   hr {
@@ -336,7 +336,7 @@ img.emoji {
 }
 .search_box {
-  @extend .well;
+  @extend .card.card-body;
   text-align: center;
 }

app/assets/stylesheets/framework/contextual_sidebar.scss

 .page-with-contextual-sidebar {
   transition: padding-left $sidebar-transition-duration;
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
-  @media (min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     padding-left: $contextual-sidebar-width;
   }
@@ -16,7 +16,7 @@
 }
 .page-with-icon-sidebar {
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 }
@@ -75,7 +75,7 @@
   transform: translate3d(0, 0, 0);
   &:not(.sidebar-collapsed-desktop) {
-    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
       box-shadow: inset -2px 0 0 $border-color,
         2px 1px 3px $dropdown-shadow-color;
     }
@@ -88,7 +88,7 @@
       overflow-x: hidden;
     }
-    .badge:not(.fly-out-badge),
+    .badge.badge-pill:not(.fly-out-badge),
     .sidebar-context-title,
     .nav-item-name {
       display: none;
@@ -142,7 +142,7 @@
     }
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     left: (-$contextual-sidebar-width);
   }
@@ -166,7 +166,7 @@
   width: 100%;
   overflow: auto;
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     overflow: hidden;
   }
 }
@@ -207,7 +207,7 @@
   > li {
     > a {
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         margin-right: 2px;
       }
@@ -222,7 +222,7 @@
       }
       .sidebar-sub-level-items {
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(sm) {
           position: fixed;
           top: 0;
           left: 0;
@@ -277,7 +277,7 @@
       }
     }
-    .badge {
+    .badge.badge-pill {
       background-color: $inactive-badge-background;
       color: $gl-text-color-secondary;
     }
@@ -291,7 +291,7 @@
         padding-left: 11px;
       }
-      .badge {
+      .badge.badge-pill {
         font-weight: $gl-font-weight-bold;
       }
@@ -339,7 +339,7 @@
 }
 .toggle-sidebar-button {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: none;
   }
 }
@@ -420,7 +420,7 @@
     color: $gl-text-color-secondary;
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: flex;
     align-items: center;
@@ -429,7 +429,7 @@
     }
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     + .breadcrumbs-links {
       padding-left: $gl-padding;
       border-left: 1px solid $gl-text-color-quaternary;
@@ -437,7 +437,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .close-nav-button {
     display: flex;
   }

app/assets/stylesheets/framework/dropdowns.scss

@@ -32,7 +32,7 @@
     max-height: $dropdown-max-height;
     overflow-y: auto;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       width: 100%;
     }
   }
@@ -180,7 +180,7 @@
     text-decoration: none;
-    .badge {
+    .badge.badge-pill {
       background-color: darken($dropdown-link-hover-bg, 5%);
     }
   }
@@ -324,7 +324,7 @@
     color: $gl-text-color-secondary;
   }
-  .badge + span:not(.badge) {
+  .badge.badge-pill + span:not(.badge.badge-pill) {
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
@@ -469,7 +469,7 @@
 .dropdown-select {
   width: $dropdown-width;
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     width: 100%;
   }
 }
@@ -780,7 +780,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab {
     li.header-projects,
     li.header-more,
@@ -835,7 +835,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     width: 70%;
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-direction: column;
     width: 100%;
     height: auto;
@@ -894,7 +894,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     height: 284px;
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .projects-list-frequent-container {
       width: auto;
       height: auto;
@@ -936,7 +936,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     color: $gl-text-color-secondary;
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     .project-item-metadata-container {
       float: none;
     }

app/assets/stylesheets/framework/files.scss

@@ -75,7 +75,7 @@
     padding: 8px $gl-padding;
     border-bottom: 1px solid $border-color;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       text-align: left;
     }
@@ -125,7 +125,7 @@
     &.wiki {
       padding: $gl-padding;
-      @media (min-width: $screen-md-min) {
+      @include media-breakpoint-up(md) {
         padding: $gl-padding * 2;
       }
     }
@@ -364,7 +364,7 @@ span.idiff {
     }
   }
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
     .file-actions {
@@ -396,7 +396,7 @@ span.idiff {
   margin-right: 1.5em;
 }
-.label-lfs {
+.badge.badge-pill-lfs {
   color: $common-gray-light;
   border: 1px solid $common-gray-light;
 }

app/assets/stylesheets/framework/filters.scss

@@ -9,19 +9,19 @@
     float: right;
     margin-right: 0;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       float: none;
     }
   }
 }
 .filters-section {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: inline-block;
   }
 }
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .filter-item:not(:last-child) {
     margin-right: 6px;
   }
@@ -37,7 +37,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .filter-item {
     display: block;
     margin: 0 0 10px;
@@ -53,7 +53,7 @@
   display: -webkit-flex;
   display: flex;
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
@@ -193,7 +193,7 @@
   border: 1px solid $border-color;
   background-color: $white-light;
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
     margin-bottom: 10px;
@@ -264,7 +264,7 @@
   max-width: 280px;
   overflow: auto;
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     width: auto;
     left: 0;
     right: 0;
@@ -315,7 +315,7 @@
 .filtered-search-history-dropdown {
   width: 40%;
-  @media (max-width: $screen-xs-min) {
+  @include media-breakpoint-down(xs) {
     left: 0;
     right: 0;
     max-width: none;
@@ -353,7 +353,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .issues-details-filters {
     padding: 0 0 10px;
     background-color: $white-light;
@@ -361,7 +361,7 @@
   }
 }
-@media (max-width: $screen-xs) {
+@include media-breakpoint-down(sm) {
   .filter-dropdown-container {
     .dropdown-toggle,
     .dropdown,

app/assets/stylesheets/framework/flash.scss

@@ -72,7 +72,7 @@
   }
 }
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;

app/assets/stylesheets/framework/forms.scss

@@ -31,13 +31,13 @@ label {
     margin: 0;
   }
-  &.label-light {
+  &.badge.badge-pill-light {
     font-weight: $gl-font-weight-bold;
   }
 }
-.control-label {
-  @extend .col-sm-2;
+.form-control-label {
+  @extend .col-md-2;
 }
 .inline-input-group {
@@ -48,21 +48,21 @@ label {
   width: 150px;
 }
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .custom-form-control {
     width: 150px;
   }
 }
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
+@include media-breakpoint-up(md) {
   .custom-form-control {
     width: 170px;
   }
 }
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: $screen-lg-min) {
+@include media-breakpoint-up(lg) {
   .custom-form-control {
     width: 200px;
   }
@@ -72,7 +72,7 @@ label {
   margin-left: 0;
   margin-right: 0;
-  .control-label {
+  .form-control-label {
     font-weight: $gl-font-weight-bold;
     padding-top: 4px;
   }
@@ -102,10 +102,10 @@ label {
     }
   }
-  @media(max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     padding: 0 $gl-padding;
-    .control-label,
+    .form-control-label,
     .text-block {
       padding-left: 0;
     }
@@ -155,8 +155,8 @@ label {
   margin-top: 35px;
 }
-.form-group .control-label,
-.form-group .control-label-full-width {
+.form-group .form-control-label,
+.form-group .form-control-label-full-width {
   font-weight: $gl-font-weight-normal;
 }
@@ -221,7 +221,7 @@ label {
   }
 }
-@media(max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .remember-me {
     .remember-me-checkbox {
       margin-top: 0;

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -63,7 +63,7 @@
           &:hover,
           &:focus {
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(sm) {
               background-color: rgba($color-200, 0.2);
             }
@@ -165,14 +165,14 @@
     }
   }
-  .sidebar-top-level-items > li.active .badge {
+  .sidebar-top-level-items > li.active .badge.badge-pill {
     color: $color-800;
   }
   .nav-links li.active a {
     border-bottom-color: $color-500;
-    .badge {
+    .badge.badge-pill {
       font-weight: $gl-font-weight-bold;
     }
   }
@@ -340,7 +340,7 @@ body {
       }
     }
-    .sidebar-top-level-items > li.active .badge {
+    .sidebar-top-level-items > li.active .badge.badge-pill {
       color: $theme-gray-900;
     }

app/assets/stylesheets/framework/header.scss

@@ -91,7 +91,7 @@
         border-radius: $border-radius-default;
         .tanuki-logo {
-          @media (min-width: $screen-sm-min) {
+          @include media-breakpoint-up(sm) {
             margin-right: 8px;
           }
         }
@@ -110,7 +110,7 @@
     }
     &.menu-expanded {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         .title-container {
           display: none;
         }
@@ -133,13 +133,13 @@
     border-top: 0;
     padding: 0;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(xs) {
       flex: 1 1 auto;
     }
     .nav {
-      > li:not(.hidden-xs) a {
-        @media (max-width: $screen-xs-max) {
+      > li:not(.d-none) a {
+        @include media-breakpoint-down(xs) {
           margin-left: 0;
           min-width: 100%;
         }
@@ -181,14 +181,14 @@
     }
     .navbar-nav {
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
       }
       li {
-        .badge {
+        .badge.badge-pill {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -197,7 +197,7 @@
     .nav > li {
       &.header-user {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding-left: 10px;
         }
       }
@@ -208,7 +208,7 @@
         padding: 6px 8px;
         height: 32px;
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           padding: 0;
         }
@@ -378,7 +378,7 @@
   margin-bottom: 0;
   line-height: 16px;
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex-wrap: wrap;
   }
@@ -410,7 +410,7 @@
 .breadcrumb-item-text {
   text-decoration: inherit;
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     @include str-truncated(128px);
   }
 }
@@ -452,7 +452,7 @@
 .navbar-nav {
   li {
-    .badge {
+    .badge.badge-pill {
       position: inherit;
       font-weight: $gl-font-weight-normal;
       margin-left: -6px;
@@ -478,7 +478,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -493,7 +493,7 @@
       margin-left: -8px;
       margin-right: -10px;
-      .nav > li:not(.hidden-xs) {
+      .nav > li:not(.d-none) {
         display: table-cell !important;
         width: 25%;

app/assets/stylesheets/framework/issue_box.scss

@@ -11,7 +11,7 @@
   padding: 5px 11px;
   margin-top: 4px;
   /* Small devices (tablets, 768px and up) */
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     padding: 0 $gl-btn-padding;
     margin-top: 5px;
   }

app/assets/stylesheets/framework/layout.scss

@@ -74,7 +74,7 @@ body {
   }
   /* Center alert text and alert action links on smaller screens */
-  @media (max-width: $screen-sm-max) {
+  @include media-breakpoint-down(sm) {
     .alert {
       text-align: center;
     }

app/assets/stylesheets/framework/lists.scss

@@ -2,7 +2,7 @@
  * Well styled list
  *
  */
-.well-list {
+.card.card-body-list {
   position: relative;
   margin: 0;
   padding: 0;
@@ -67,7 +67,7 @@
       }
     }
-    .well-title {
+    .card.card-body-title {
       font-size: $list-font-size;
       line-height: 18px;
     }
@@ -154,7 +154,7 @@ ul.content-list {
         &:last-child {
           margin-right: 0;
-          @media(max-width: $screen-xs-max) {
+          @include media-breakpoint-down(xs) {
             margin: 0 auto;
           }
         }
@@ -168,7 +168,7 @@ ul.content-list {
     .member-controls {
       float: none;
-      @media (min-width: $screen-sm-min) {
+      @include media-breakpoint-up(sm) {
         float: right;
       }
     }
@@ -223,7 +223,7 @@ ul.content-list {
     }
   }
-  .label-default {
+  .badge.badge-pill-default {
     color: $gl-text-color-secondary;
   }
@@ -232,7 +232,7 @@ ul.content-list {
   }
 }
-.panel > .content-list > li {
+.card > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }

app/assets/stylesheets/framework/markdown_area.scss

@@ -74,7 +74,7 @@
 }
 .md-header-tab {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     flex: 1;
     width: 100%;
     border-bottom: 1px solid $border-color;
@@ -90,7 +90,7 @@
     &.active {
       display: block;
-      @media (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(xs) {
         flex: none;
         display: flex;
         justify-content: center;
@@ -182,7 +182,7 @@
   margin-left: $gl-padding;
   margin-right: -5px;
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     margin-left: 0;
     margin-right: 0;
   }
@@ -258,7 +258,7 @@
   }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .atwho-view-ul {
     width: 350px;
   }

app/assets/stylesheets/framework/mobile.scss

 /** Common mobile (screen XS, SM) styles **/
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(xs) {
   .container .content {
     margin-top: 20px;
   }
@@ -14,7 +14,7 @@
     font-size: 12px;
     margin-right: 3px;
-    .badge {
+    .badge.badge-pill {
       display: none;
     }
   }
@@ -90,7 +90,7 @@
   }
 }
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .issues-filters {
     .milestone-filter {
       display: none;