Adds a vendor prefix for position sticky

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

core/css/apps.scss

@@ -639,7 +639,7 @@ kbd {
 	min-width: $sidebar-min-width;
 	max-width: $sidebar-max-width;
 	display: block;
-	position: sticky;
+	@include position('sticky');
 	top: $header-height;
 	right:0;
 	overflow-y: auto;
@@ -1046,7 +1046,7 @@ $popovericon-size: 16px;
 /* CONTENT LIST ------------------------------------------------------------ */
 .app-content-list {
 	width: 300px;
-	position: sticky;
+	@include position('sticky');
 	top: $header-height;
 	border-right: 1px solid var(--color-border);
 	display: flex;

core/css/functions.scss

@@ -59,4 +59,13 @@
 	.icon-#{$icon}.icon-white {
 		@include icon-color($icon, $dir, $color-white, $version, $core);
 	}
-}
+}
+
+@mixin position($value) {
+	@if $value == 'sticky' {
+		position: -webkit-sticky; // Safari support
+		position: sticky;
+	} @else {
+		position: $value;
+	}
+}

core/css/styles.scss

@@ -163,8 +163,7 @@ body {
 
 #controls {
 	box-sizing: border-box;
-	position: -webkit-sticky;
-	position: sticky;
+	@include position('sticky');
 	height: 44px;
 	padding: 0;
 	margin: 0;

settings/css/settings.scss

@@ -632,7 +632,7 @@ span.usersLastLoginTooltip {
 	thead tr {
 		z-index: 100;
 		background-color: var(--color-main-background);
-		position: sticky;
+		@include position('sticky');
 		// positional attribute is required for position to take affect.
 		top: 0;
 	}
@@ -1439,7 +1439,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			/* various */
 			&#grid-header,
 			&#new-user {
-				position: sticky;
+				@include position('sticky');
 				align-self: normal;
 				background-color: var(--color-main-background);
 				z-index: 55; /* above multiselect */