github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 13:18:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Use a gradient instead of a border.

Browse Source
This commit is contained in:
Guo Xiang Tan 2016-11-09 09:56:36 +08:00
parent f10520a5f2
commit 263a43bcfd
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/stylesheets/common/base/discourse.scss
View File

@ -167,12 +167,17 @@ body {
} }
.ring { .ring {
top: -13px !important; $gradient-start: transparent;
right: 21px !important; $gradient-end: #090;
background: -webkit-radial-gradient($gradient-start, $gradient-end);
background: -o-radial-gradient($gradient-start, $gradient-end);
background: -moz-radial-gradient($gradient-start, $gradient-end);
background: radial-gradient($gradient-start, $gradient-end);
top: -11px !important;
right: 24px !important;
border-radius: 100%; border-radius: 100%;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: solid #090 3px;
-moz-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
-webkit-transform-origin: center; -webkit-transform-origin: center;

1
app/assets/stylesheets/mobile.scss
View File

@ -21,6 +21,7 @@
@import "mobile/menu-panel"; @import "mobile/menu-panel";
@import "mobile/search"; @import "mobile/search";
@import "mobile/emoji"; @import "mobile/emoji";
@import "mobile/ring";
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */ /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */

3
app/assets/stylesheets/mobile/ring.scss Normal file
View File

@ -0,0 +1,3 @@
.ring {
top: -7px !important;
}