From cf05e49f19a782f3384aba32718d3333e57ad03c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 8 Mar 2019 10:30:42 +0000
Subject: [PATCH] Fixed sticky bar styling in Safari
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/58625
---
.stylelintrc | 2 +-
app/assets/stylesheets/framework/mixins.scss | 1 +
app/assets/stylesheets/pages/diff.scss | 3 +++
app/assets/stylesheets/pages/merge_requests.scss | 2 ++
4 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/.stylelintrc b/.stylelintrc
index 04784a0a11a77..c0f21aed2926e 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -102,6 +102,6 @@
"selector-pseudo-element-no-unknown":true,
"shorthand-property-no-redundant-values":true,
"string-quotes":"single",
- "value-no-vendor-prefix":true
+ "value-no-vendor-prefix":[true, { ignoreValues: ["sticky"] }]
}
}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index ba3b0906e2815..955ae80cd5833 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -259,6 +259,7 @@
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 0dbbe9e4c25f3..84be53787b58d 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -9,6 +9,7 @@
@media (min-width: map-get($grid-breakpoints, md)) {
$mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height;
+ position: -webkit-sticky;
position: sticky;
top: $mr-file-header-top;
z-index: 102;
@@ -721,6 +722,7 @@
}
@include media-breakpoint-up(sm) {
+ position: -webkit-sticky;
position: sticky;
top: $header-height;
background-color: $white-light;
@@ -1011,6 +1013,7 @@
}
.diff-tree-list {
+ position: -webkit-sticky;
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;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index e73d1a1289df0..126b00af55289 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -784,6 +784,7 @@
}
@include media-breakpoint-up(md) {
+ position: -webkit-sticky;
position: sticky;
top: $header-height + $mr-tabs-height;
width: 100%;
@@ -810,6 +811,7 @@
border-bottom: 1px solid $border-color;
@include media-breakpoint-up(sm) {
+ position: -webkit-sticky;
position: sticky;
}
--
GitLab