Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 19 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 0e4080ce201..f922d8bcaab 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -161,13 +161,17 @@
   }
 
   .cover-controls {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    @include media-breakpoint-up(sm) {
+      position: absolute;
+      top: 1rem;
+      right: 1.25rem;
+    }
 
     &.left {
-      left: 10px;
-      right: auto;
+      @include media-breakpoint-up(sm) {
+        left: 1.25rem;
+        right: auto;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index fd448ee24ed..621a4eddc34 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -401,3 +401,21 @@
   line-height: 16px;
   text-align: center;
 }
+
+@mixin middle-dot-divider {
+  &::after {
+    // Duplicate `content` property used as a fallback
+    // scss-lint:disable DuplicateProperty
+    content: '\00B7'; // middle dot fallback if browser does not support alternative content
+    content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
+    padding: 0 0.375rem;
+    font-weight: $gl-font-weight-bold;
+  }
+
+  &:last-child {
+    &::after {
+      content: '';
+      padding: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 43cf0d4bd70..82b3698287c 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -74,17 +74,12 @@
 
 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
-  &::after {
-    content: '\00B7'; // Middle Dot
-    padding: 0 6px;
-    font-weight: $gl-font-weight-bold;
-  }
+  @include middle-dot-divider;
+}
 
-  &:last-child {
-    &::after {
-      content: '';
-      padding: 0;
-    }
+.middle-dot-divider-sm {
+  @include media-breakpoint-up(sm) {
+    @include middle-dot-divider;
   }
 }
 
@@ -202,10 +197,6 @@
 }
 
 .user-profile {
-  .cover-controls a {
-    margin-left: 5px;
-  }
-
   .profile-header {
     margin: 0 $gl-padding;