Merge branch 'master' into bootstrap4

1 files changed, 35 insertions, 18 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 868282bc5cb..c48f2d7f63c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -206,7 +206,6 @@
 .project-repo-buttons,
 .group-buttons {
   .btn {
-    @include btn-gray;
     padding: 3px 10px;
 
     &:last-child {
@@ -295,7 +294,7 @@
     }
 
     .count {
-      @include btn-gray;
+      @include btn-white;
       display: inline-block;
       background: $white-light;
       border-radius: 2px;
@@ -355,30 +354,48 @@
   min-width: 200px;
 }
 
-.deploy-key-content {
-  @include media-breakpoint-up(sm) {
-    float: left;
+.deploy-keys {
+  .scrolling-tabs-container {
+    position: relative;
+  }
+}
 
-    &:last-child {
-      float: right;
+.deploy-key {
+  // Ensure that the fingerprint does not overflow on small screens
+  .fingerprint {
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  .deploy-project-label,
+  .key-created-at {
+    svg {
+      vertical-align: text-top;
     }
   }
-}
 
-.deploy-key-projects {
-  @include media-breakpoint-up(sm) {
-    line-height: 42px;
+  .btn svg {
+    vertical-align: top;
+  }
+
+  .key-created-at {
+    line-height: unset;
   }
 }
 
-a.deploy-project-label {
-  padding: 5px;
-  margin-right: 5px;
-  color: $gl-text-color;
-  background-color: $row-hover;
+.deploy-project-list {
+  margin-bottom: -$gl-padding-4;
 
-  &:hover {
-    color: $gl-link-color;
+  a.deploy-project-label {
+    margin-right: $gl-padding-4;
+    margin-bottom: $gl-padding-4;
+    color: $gl-text-color-secondary;
+    background-color: $theme-gray-100;
+    line-height: $gl-btn-line-height;
+
+    &:hover {
+      color: $gl-link-color;
+    }
   }
 }