IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 10:50:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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')) {
contents.push(h('span.ring'));
if (!attrs.active && attrs.ringBackdrop) {
contents.push(h('span.ring-backdrop-spotlight'));
contents.push(h('span.ring-backdrop',
{},
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;}
}
.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 {
position: absolute;
width: 80px;
height: 80px;
top: -18px !important;
right: -18px !important;
box-shadow: 0 0 0 2000px rgba($primary, 0.85);
border-radius: 100%;
box-shadow: 0 0 0 9999px rgba($primary, 0.85);
z-index: 1040;
}
@ -180,9 +190,9 @@ body {
position: absolute;
color: $secondary;
text-align: left;
right: 60px;
right: 70px;
top: 60px;
width: 250px;
width: 230px;
line-height: 30px;
}

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

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