about summary refs log tree commit diff
path: root/app/javascript/styles/components.scss
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-06-12 20:02:17 +0200
committerGitHub <noreply@github.com>2017-06-12 20:02:17 +0200
commit37dbfa4cd7f97cfbab68d1bfd774aabf5ca2e0af (patch)
treec6fd956f6d3a7115c51587a4684abfcb861332a8 /app/javascript/styles/components.scss
parent0d23c81662cfa798da910a8abe00ef391b1e2aef (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/components.scss')
-rw-r--r--app/javascript/styles/components.scss45
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;