From 263a43bcfdb998506751cf5ac1659653087f10c5 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Wed, 9 Nov 2016 09:56:36 +0800
Subject: [PATCH] UX: Use a gradient instead of a border.

---
 app/assets/stylesheets/common/base/discourse.scss | 11 ++++++++---
 app/assets/stylesheets/mobile.scss                |  1 +
 app/assets/stylesheets/mobile/ring.scss           |  3 +++
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/mobile/ring.scss

diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 987c3042066..4362f4779ed 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -167,12 +167,17 @@ body {
 }
 
 .ring {
-  top: -13px !important;
-  right: 21px !important;
+  $gradient-start: transparent;
+  $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%;
   width: 20px;
   height: 20px;
-  border: solid #090 3px;
   -moz-animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
   -webkit-transform-origin: center;
diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
index 47dbba7ef21..4152083286c 100644
--- a/app/assets/stylesheets/mobile.scss
+++ b/app/assets/stylesheets/mobile.scss
@@ -21,6 +21,7 @@
 @import "mobile/menu-panel";
 @import "mobile/search";
 @import "mobile/emoji";
+@import "mobile/ring";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 
diff --git a/app/assets/stylesheets/mobile/ring.scss b/app/assets/stylesheets/mobile/ring.scss
new file mode 100644
index 00000000000..2da82b54c9e
--- /dev/null
+++ b/app/assets/stylesheets/mobile/ring.scss
@@ -0,0 +1,3 @@
+.ring {
+  top: -7px !important;
+}