diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-12 20:02:17 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-06-12 20:02:17 +0200 |
| commit | 37dbfa4cd7f97cfbab68d1bfd774aabf5ca2e0af (patch) | |
| tree | c6fd956f6d3a7115c51587a4684abfcb861332a8 /app/javascript/styles | |
| parent | 0d23c81662cfa798da910a8abe00ef391b1e2aef (diff) | |
Unread indicator was invisible behind column header, adjusted (#3720)
* Unread indicator was invisible behind column header, adjusted * Unread indicator now a CSS pseudo-element * Adjust flex
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/components.scss | 45 |
1 files changed, 26 insertions, 19 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 1156a17f9..65971a018 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -60,7 +60,6 @@ .column-collapsable { position: relative; - flex: 0 0 auto; .column-collapsable__content { overflow: auto; @@ -2008,6 +2007,28 @@ button.icon-button.active i.fa-retweet { } } +.column-header__wrapper { + position: relative; + flex: 0 0 auto; + + &.active { + &::before { + display: block; + content: ""; + position: absolute; + top: 35px; + left: 0; + right: 0; + margin: 0 auto; + width: 60%; + pointer-events: none; + height: 28px; + z-index: 1; + background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); + } + } +} + .column-header { padding: 15px; font-size: 16px; @@ -2020,11 +2041,11 @@ button.icon-button.active i.fa-retweet { &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - } - &.active .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + .column-header__icon { + color: $ui-highlight-color; + text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + } } &.hidden-on-mobile { @@ -2372,20 +2393,6 @@ button.icon-button.active i.fa-retweet { } } -.status-list__unread-indicator, -.notifications__unread-indicator { - position: absolute; - top: 35px; - left: 0; - right: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); -} - @keyframes pulse { 0% { opacity: 1; |