From c9de28b1858a27bad34fa010d3a2683c75f3f050 Mon Sep 17 00:00:00 2001
From: Priyank Patel <priyankp390@gmail.com>
Date: Mon, 7 May 2018 22:57:06 +0000
Subject: [PATCH] css: Use mixins in zulip.scss.

This uses scss mixins, this are functions you can pass parameter in it and
return css/scss. It made repeating vendored transistion, and user-select property
more easier to use with less repetation. This also includes a scss file called reuseable_components.scss
which can be used anywhere else.
---
 static/styles/reuseable_components.scss | 15 ++++++
 static/styles/zulip.scss                | 62 ++++++-------------------
 2 files changed, 28 insertions(+), 49 deletions(-)
 create mode 100644 static/styles/reuseable_components.scss

diff --git a/static/styles/reuseable_components.scss b/static/styles/reuseable_components.scss
new file mode 100644
index 0000000000..64be3faddc
--- /dev/null
+++ b/static/styles/reuseable_components.scss
@@ -0,0 +1,15 @@
+@mixin prefixed-transition($property, $timing, $timing-functions...) {
+    -webkit-transition: $property $timing $timing-functions;
+    -moz-transition: $property $timing $timing-functions;
+    -o-transition: $property $timing $timing-functions;
+    -ms-transition: $property $timing $timing-functions;
+    transition: $property $timing $timing-functions;
+}
+
+@mixin prefixed-user-select($value) {
+    -webkit-touch-callout: $value;
+    -webkit-user-select: $value;
+    -moz-user-select: $value;
+    -ms-user-select: $value;
+    user-select: $value;
+}
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index 743287ed65..8199d496f6 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -1,3 +1,5 @@
+@import './reuseable_components.scss';
+
 body,
 html {
     width: 100%;
@@ -20,11 +22,7 @@ body {
 body,
 #tab_bar_underpadding {
     background-color: hsl(0, 0%, 100%);
-    -webkit-transition: background-color 200ms linear;
-    -moz-transition: background-color 200ms linear;
-    -o-transition: background-color 200ms linear;
-    -ms-transition: background-color 200ms linear;
-    transition: background-color 200ms linear;
+    @include prefixed-transition(background-color, 200ms, linear);
 }
 
 input,
@@ -44,27 +42,15 @@ a {
 }
 
 .no-select {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    @include prefixed-user-select(none);
 }
 
 .auto-select {
-    -webkit-touch-callout: auto;
-    -webkit-user-select: auto;
-    -moz-user-select: auto;
-    -ms-user-select: auto;
-    user-select: auto;
+    @include prefixed-user-select(auto);
 }
 
 .text-select {
-    -webkit-touch-callout: text;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
+    @include prefixed-user-select(text);
 }
 
 p.n-margin {
@@ -598,10 +584,7 @@ td.pointer {
 
 .new_messages,
 .new_messages_fadeout {
-    -webkit-transition: all 3s ease-in-out;
-    -moz-transition: all 3s ease-in-out;
-    -o-transition: all 3s ease-in-out;
-    transition: all 3s ease-in-out;
+    @include prefixed-transition(all, 3s, ease-in-out);
 }
 
 .include-sender .message_edit_notice {
@@ -627,11 +610,7 @@ td.pointer {
     position: absolute;
     left: 0px;
     top: 16px;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    @include prefixed-user-select(none);
 }
 
 .include-sender .message_edit_notice:before {
@@ -657,10 +636,7 @@ td.pointer {
     right: -105px;
     line-height: 20px;
     text-align: right;
-    -webkit-transition: background-color 1.5s ease-in, color 1.5s ease-in;
-    -moz-transition: background-color 1.5s ease-in, color 1.5s ease-in;
-    -o-transition: background-color 1.5s ease-in, color 1.5s ease-in;
-    transition: background-color 1.5s ease-in, color 1.5s ease-in;
+    @include prefixed-transition(background-color, 1.5s, ease-in, color 1.5s ease-in);
 }
 
 /* The way this overrides the menus with a background-color and a high
@@ -1081,10 +1057,7 @@ td.pointer {
     opacity: 0;
     z-index: 1;
     height: 100%;
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+    @include prefixed-transition(all, 0.3s, ease-out);
 }
 
 .unread-marker-fill {
@@ -1099,25 +1072,16 @@ td.pointer {
 }
 
 .unread .unread_marker {
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+    @include prefixed-transition(all, 0.3s, ease-out);
     opacity: 1;
 }
 
 .unread_marker.slow_fade {
-    -webkit-transition: all 2s ease-out;
-    -moz-transition: all 2s ease-out;
-    -o-transition: all 2s ease-out;
-    transition: all 2s ease-out;
+    @include prefixed-transition(all, 2s, ease-out);
 }
 
 .unread_marker.fast_fade {
-    -webkit-transition: all 0.3s ease-out;
-    -moz-transition: all 0.3s ease-out;
-    -o-transition: all 0.3s ease-out;
-    transition: all 0.3s ease-out;
+    @include prefixed-transition(all, 0.3s, ease-out);
 }
 
 .selected_message .messagebox {