1 files changed, 112 insertions, 125 deletions

diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 25f011a534b..785df23a355 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -57,69 +57,8 @@
   border-bottom-left-radius: $border-radius-base;
 }
 
-.label-row {
-  .label-name {
-    display: inline-block;
-    margin-bottom: 10px;
-
-    @include media-breakpoint-up(sm) {
-      width: 200px;
-      margin-left: $gl-padding * 2;
-      margin-bottom: 0;
-    }
-
-    .badge {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-  }
-
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-
-    @include media-breakpoint-up(sm) {
-      display: inline-block;
-      width: 100px;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .label-description {
-    display: block;
-    margin-bottom: 10px;
-
-    .description-text {
-      margin-bottom: $gl-padding;
-    }
-
-    a {
-      color: $blue-600;
-    }
-
-    @include media-breakpoint-up(sm) {
-      display: inline-block;
-      max-width: 50%;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .badge {
-    padding: 4px $grid-size;
-    font-size: $label-font-size;
-    position: relative;
-    top: ($grid-size / 2);
-  }
-}
-
 .color-label {
-  padding: 0 $grid-size;
+  padding: $gl-padding-4 $grid-size;
   line-height: 16px;
   border-radius: $label-border-radius;
   color: $white-light;
@@ -133,26 +72,29 @@
 }
 
 .manage-labels-list {
-  @media(min-width: map-get($grid-breakpoints, md)) {
-    &.content-list li {
-      padding: $gl-padding 0;
-    }
-  }
-
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
-    cursor: move;
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
-
-    &:active {
-      cursor: -webkit-grabbing;
-      cursor: -moz-grabbing;
-    }
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: $gl-padding;
+    border-radius: $border-radius-default;
 
     &.sortable-ghost {
       opacity: 0.3;
     }
+
+    .prioritized-labels & {
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+      cursor: move;
+      cursor: -webkit-grab;
+      cursor: -moz-grab;
+
+      &:active {
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+      }
+    }
   }
 
   .btn-action {
@@ -170,36 +112,11 @@
       }
     }
   }
-
-  .dropdown {
-    @include media-breakpoint-up(sm) {
-      float: right;
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .dropdown-menu {
-      min-width: 100%;
-    }
-  }
-}
-
-.draggable-handler {
-  display: inline-block;
-  vertical-align: top;
-  margin: 5px 0;
-  opacity: 0;
-  transition: opacity .3s;
-  color: $gray-darkest;
 }
 
 .prioritized-labels {
   margin-bottom: 30px;
 
-  h5 {
-    font-size: $gl-font-size;
-  }
-
   .add-priority {
     display: none;
     color: $gray-light;
@@ -214,31 +131,11 @@
 }
 
 .other-labels {
-  h5 {
-    font-size: $gl-font-size;
-  }
-
   .remove-priority {
     display: none;
   }
 }
 
-.toggle-priority {
-  display: inline-block;
-  vertical-align: top;
-
-  button {
-    border-color: transparent;
-    padding: 5px 8px;
-    vertical-align: top;
-    font-size: 14px;
-
-    &:hover {
-      border-color: transparent;
-    }
-  }
-}
-
 .filtered-labels {
   font-size: 0;
   padding: 12px 16px;
@@ -292,10 +189,8 @@
 }
 
 .label-subscribe-button {
-  @media(min-width: map-get($grid-breakpoints, md)) {
-    min-width: 105px;
-    margin-left: $gl-padding;
-  }
+  width: 105px;
+  font-weight: 200;
 
   .label-subscribe-button-icon {
     &[disabled] {
@@ -332,3 +227,95 @@
     font-size: $label-font-size;
   }
 }
+
+.labels-container {
+  background-color: $gray-light;
+  border-radius: $border-radius-default;
+  padding: $gl-padding $gl-padding-8;
+}
+
+.label-actions-list {
+  list-style: none;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.label-badge {
+  color: $theme-gray-900;
+  font-weight: $gl-font-weight-normal;
+  padding: $gl-padding-4 $gl-padding-8;
+  border-radius: $border-radius-default;
+  font-size: $label-font-size;
+}
+
+.label-badge-blue {
+  background-color: $theme-blue-100;
+}
+
+.label-badge-gray {
+  background-color: $theme-gray-100;
+}
+
+.label-links {
+  list-style: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.label-link-item {
+  padding: 0;
+}
+
+.label-list-item {
+  .content-list &::before,
+  .content-list &::after {
+    content: none;
+  }
+
+  .label-name {
+    width: 150px;
+    flex-shrink: 0;
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+
+  .label-description {
+    flex-grow: 1;
+
+    a {
+      color: $blue-600;
+    }
+  }
+
+  .label {
+    padding: 4px $grid-size;
+    font-size: $label-font-size;
+    position: relative;
+    top: $gl-padding-4;
+  }
+
+  .label-action {
+    color: $theme-gray-800;
+    cursor: pointer;
+
+    svg {
+      fill: $theme-gray-800;
+    }
+
+    &:hover {
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
+    }
+  }
+}
+
+.priority-labels-empty-state .svg-content img {
+  max-width: $priority-label-empty-state-width;
+}