paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-31 12:03:46 +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,
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 {