1 files changed, 24 insertions, 20 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index d5ae141dd7e..de2b5701e2d 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -9,9 +9,13 @@
   }
 }
 
+.member-sort-dropdown {
+  margin-left: $gl-padding-8;
+}
+
 .member {
   .list-item-name {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
       width: 50%;
     }
@@ -22,12 +26,12 @@
   }
 
   .controls {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: -webkit-flex;
       display: flex;
     }
 
-    .dropdown-menu.dropdown-menu-align-right {
+    .dropdown-menu.dropdown-menu-right {
       margin-top: -2px;
     }
   }
@@ -35,7 +39,7 @@
   .form-horizontal {
     margin-top: 20px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       display: -webkit-flex;
       display: flex;
       margin-top: 3px;
@@ -45,20 +49,20 @@
   .btn-remove {
     width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: auto;
     }
   }
 
   &.existing-title {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       float: left;
     }
   }
 }
 
 .member-form-control {
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     padding-bottom: 5px;
     margin-left: 0;
     margin-right: 0;
@@ -73,7 +77,7 @@
 .member-search-form {
   position: relative;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     float: right;
   }
 
@@ -86,7 +90,7 @@
       width: 100%;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       margin-top: 0;
       width: 155px;
     }
@@ -96,7 +100,7 @@
     width: 100%;
     padding-right: 35px;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       width: 250px;
     }
   }
@@ -114,7 +118,7 @@
   border: 0;
   outline: 0;
 
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     right: 160px;
   }
 }
@@ -125,7 +129,7 @@
   align-items: center;
   justify-content: center;
 
-  @media (max-width: $screen-sm-min) {
+  @include media-breakpoint-down(sm) {
     display: block;
 
     .flex-project-title {
@@ -141,7 +145,7 @@
     text-overflow: ellipsis;
   }
 
-  .badge {
+  .badge.badge-pill {
     height: 17px;
     line-height: 16px;
     margin-right: 5px;
@@ -156,14 +160,14 @@
   }
 }
 
-.panel {
-  .panel-heading {
-    .badge {
+.card {
+  .card-header {
+    .badge.badge-pill {
       margin-top: 0;
     }
 
-    @media (max-width: $screen-sm-min) {
-      .badge {
+    @include media-breakpoint-down(sm) {
+      .badge.badge-pill {
         margin-right: 0;
         margin-left: 0;
       }
@@ -207,7 +211,7 @@
     margin-right: 0;
   }
 
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-down(xs) {
     display: block;
 
     .controls > .btn {
@@ -235,7 +239,7 @@
   }
 }
 
-.panel-mobile {
+.card-mobile {
   .content-list.members-list li {
     display: block;