paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-09 08:26:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Use mixins in zulip.scss.

Browse Source 
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.
This commit is contained in:
Priyank Patel
2018-05-07 22:57:06 +00:00
committed by Tim Abbott
parent d4d268529e
commit c9de28b185
2 changed files with 28 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/styles/reuseable_components.scss Normal file
View File

@@ -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;
}

62
static/styles/zulip.scss
View File

@@ -1,3 +1,5 @@
@import './reuseable_components.scss';
body, body,
html { html {
width: 100%; width: 100%;
@@ -20,11 +22,7 @@ body {
body, body,
#tab_bar_underpadding { #tab_bar_underpadding {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
-webkit-transition: background-color 200ms linear; @include prefixed-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;
} }
input, input,
@@ -44,27 +42,15 @@ a {
} }
.no-select { .no-select {
-webkit-touch-callout: none; @include prefixed-user-select(none);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.auto-select { .auto-select {
-webkit-touch-callout: auto; @include prefixed-user-select(auto);
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
} }
.text-select { .text-select {
-webkit-touch-callout: text; @include prefixed-user-select(text);
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
} }
p.n-margin { p.n-margin {
@@ -598,10 +584,7 @@ td.pointer {
.new_messages, .new_messages,
.new_messages_fadeout { .new_messages_fadeout {
-webkit-transition: all 3s ease-in-out; @include prefixed-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-sender .message_edit_notice { .include-sender .message_edit_notice {
@@ -627,11 +610,7 @@ td.pointer {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 16px; top: 16px;
-webkit-touch-callout: none; @include prefixed-user-select(none);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
.include-sender .message_edit_notice:before { .include-sender .message_edit_notice:before {
@@ -657,10 +636,7 @@ td.pointer {
right: -105px; right: -105px;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
-webkit-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);
-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;
} }
/* The way this overrides the menus with a background-color and a high /* The way this overrides the menus with a background-color and a high
@@ -1081,10 +1057,7 @@ td.pointer {
opacity: 0; opacity: 0;
z-index: 1; z-index: 1;
height: 100%; height: 100%;
-webkit-transition: all 0.3s ease-out; @include prefixed-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;
} }
.unread-marker-fill { .unread-marker-fill {
@@ -1099,25 +1072,16 @@ td.pointer {
} }
.unread .unread_marker { .unread .unread_marker {
-webkit-transition: all 0.3s ease-out; @include prefixed-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;
opacity: 1; opacity: 1;
} }
.unread_marker.slow_fade { .unread_marker.slow_fade {
-webkit-transition: all 2s ease-out; @include prefixed-transition(all, 2s, ease-out);
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
} }
.unread_marker.fast_fade { .unread_marker.fast_fade {
-webkit-transition: all 0.3s ease-out; @include prefixed-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;
} }
.selected_message .messagebox { .selected_message .messagebox {