Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Workaround `box-shadow` and `box-radius` bug on safari.

This commit is contained in:
Guo Xiang Tan 2016-11-16 18:20:51 +08:00
parent 27b276df5c
commit a6b86036ca
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/widgets/header.js.es6
View File

@ -45,6 +45,7 @@ createWidget('header-notifications', {
if (!currentUser.get('read_first_notification')) { if (!currentUser.get('read_first_notification')) {
contents.push(h('span.ring')); contents.push(h('span.ring'));
if (!attrs.active && attrs.ringBackdrop) { if (!attrs.active && attrs.ringBackdrop) {
contents.push(h('span.ring-backdrop-spotlight'));
contents.push(h('span.ring-backdrop', contents.push(h('span.ring-backdrop',
{}, {},
h('h1.ring-first-notification', {} ,I18n.t('user.first_notification')) h('h1.ring-first-notification', {} ,I18n.t('user.first_notification'))

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

@ -166,13 +166,23 @@ body {
&.badge-notification[href] {color: $secondary;} &.badge-notification[href] {color: $secondary;}
} }
.ring-backdrop-spotlight {
position: absolute;
width: 80px;
height: 80px;
top: -18px;
right: -18px;
background-image: radial-gradient(40px at 50% 50% , transparent 95%, $primary 100%);
opacity: 0.85;
}
.ring-backdrop { .ring-backdrop {
position: absolute;
width: 80px; width: 80px;
height: 80px; height: 80px;
top: -18px !important; top: -18px !important;
right: -18px !important; right: -18px !important;
box-shadow: 0 0 0 2000px rgba($primary, 0.85); box-shadow: 0 0 0 9999px rgba($primary, 0.85);
border-radius: 100%;
z-index: 1040; z-index: 1040;
} }
@ -180,9 +190,9 @@ body {
position: absolute; position: absolute;
color: $secondary; color: $secondary;
text-align: left; text-align: left;
right: 60px; right: 70px;
top: 60px; top: 60px;
width: 250px; width: 230px;
line-height: 30px; line-height: 30px;
} }

4
app/assets/stylesheets/common/base/header.scss
View File

@ -123,7 +123,7 @@
.notifications { .notifications {
position: relative; position: relative;
} }
.badge-notification, .ring, .ring-backdrop { .badge-notification, .ring {
position: absolute; position: absolute;
top: -9px; top: -9px;
z-index: 1; z-index: 1;
@ -133,7 +133,7 @@
right: 0; right: 0;
background-color: scale-color($tertiary, $lightness: 50%); background-color: scale-color($tertiary, $lightness: 50%);
} }
.unread-private-messages, .ring, .ring-backdrop { .unread-private-messages, .ring {
right: 25px; right: 25px;
} }
.flagged-posts { .flagged-posts {