Create position-sticky scss mixin58924-mixin-for-position-sticky

**Why?**
We need to use the this property value needs the `-webkit` prefix for
Safari.

**References:**
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/25913

3 files changed, 12 insertions, 13 deletions

diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 18671f7c4d8..7c5b2258d07 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -1,8 +1,12 @@
+@mixin position-sticky() {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
 /**
  * Prefilled mixins
  * Mixins with fixed values
  */
-
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
@@ -219,13 +223,13 @@
 }
 
 @mixin build-trace-top-bar($height) {
+  @include position-sticky;
+
   height: $height;
   min-height: $height;
   background: $gray-light;
   border: 1px solid $border-color;
   color: $gl-text-color;
-  position: -webkit-sticky;
-  position: sticky;
   top: $header-height;
   padding: $grid-size;
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index b3a634e23a3..3f089c4b6c0 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -11,8 +11,7 @@
       // the bottom of the compare-versions header and the top of the file header
       $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height - 1;
 
-      position: -webkit-sticky;
-      position: sticky;
+      @include position-sticky;
       top: $mr-file-header-top;
       z-index: 102;
       height: $mr-version-controls-height;
@@ -721,8 +720,7 @@ table.code {
   }
 
   @include media-breakpoint-up(sm) {
-    position: -webkit-sticky;
-    position: sticky;
+    @include position-sticky;
     top: $header-height;
     background-color: $white-light;
     z-index: 200;
@@ -1012,8 +1010,7 @@ table.code {
 }
 
 .diff-tree-list {
-  position: -webkit-sticky;
-  position: sticky;
+  @include position-sticky;
   $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
   top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
   max-height: calc(100vh - #{$top-pos});
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index ab5a9e170f0..5eab25b00c9 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -809,8 +809,7 @@
   }
 
   @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
+    @include position-sticky;
     top: $header-height + $mr-tabs-height;
     margin-left: -16px;
     width: calc(100% + 32px);
@@ -833,8 +832,7 @@
   border-bottom: 1px solid $border-color;
 
   @include media-breakpoint-up(sm) {
-    position: -webkit-sticky;
-    position: sticky;
+    @include position-sticky;
   }
 
   &.affix {