1 files changed, 21 insertions, 21 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 6bb40bae9ed..1c3d312f7ac 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -58,7 +58,7 @@
 .boards-app {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     transition: width $sidebar-transition-duration;
     width: 100%;
 
@@ -81,11 +81,11 @@
   white-space: nowrap;
   min-height: 200px;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @include media-breakpoint-only(sm) {
     height: calc(100vh - #{$issue-board-list-difference-sm});
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     height: calc(100vh - #{$issue-board-list-difference-md});
   }
 
@@ -94,13 +94,13 @@
       100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
     );
 
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include media-breakpoint-only(sm) {
       height: calc(
         100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
       );
     }
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       height: calc(
         100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
       );
@@ -117,7 +117,7 @@
   white-space: normal;
   vertical-align: top;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 400px;
   }
 
@@ -274,7 +274,7 @@
   font-size: (26px / $issue-boards-font-size) * 1em;
 }
 
-.card {
+.board-card {
   position: relative;
   padding: 11px 10px 11px $gl-padding;
   background: $white-light;
@@ -290,7 +290,7 @@
   }
 
   &.is-active,
-  &.is-active .card-assignee:hover a {
+  &.is-active .board-card-assignee:hover a {
     background-color: $row-hover;
 
     &:first-child:not(:only-child) {
@@ -298,7 +298,7 @@
     }
   }
 
-  .label {
+  .badge {
     border: 0;
     outline: 0;
   }
@@ -310,7 +310,7 @@
   }
 }
 
-.card-title {
+.board-card-title {
   @include overflow-break-word();
   margin: 0 30px 0 0;
   font-size: 1em;
@@ -322,11 +322,11 @@
   }
 }
 
-.card-header {
+.board-card-header {
   display: flex;
   min-height: 20px;
 
-  .card-assignee {
+  .board-card-assignee {
     display: flex;
     justify-content: flex-end;
     position: absolute;
@@ -397,16 +397,16 @@
   }
 }
 
-.card-footer {
+.board-card-footer {
   margin: 0 0 5px;
 
-  .label {
+  .badge {
     margin-top: 5px;
     margin-right: 6px;
   }
 }
 
-.card-number {
+.board-card-number {
   font-size: 12px;
   color: $gl-text-color-secondary;
 }
@@ -564,11 +564,11 @@
 .add-issues-list-column {
   width: 100%;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     width: 50%;
   }
 
-  @media (min-width: $screen-md-min) {
+  @include media-breakpoint-up(md) {
     width: (100% / 3);
   }
 }
@@ -583,11 +583,11 @@
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
 
-  .card-parent {
+  .board-card-parent {
     padding: 0 5px 5px;
   }
 
-  .card {
+  .board-card {
     border: 1px solid $border-gray-dark;
     box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
     cursor: pointer;
@@ -637,7 +637,7 @@
     display: none;
     margin-right: 10px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: block;
     }
   }
@@ -645,7 +645,7 @@
   .dropdown-menu-toggle {
     width: 100px;
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(md) {
       width: 140px;
     }
   }