Updated styles for new channel header

laCour · Mar 9, 2016 · 3c2114d · 3c2114d
1 parent 15da7cd
commit 3c2114d
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 77 deletions.
diff --git a/scss/modules/header/_base.scss b/scss/modules/header/_base.scss
@@ -1,15 +1,117 @@
-#header {
-  background: $color-base;
+#client_header .channel_header {
+  .flex_header {
+    background: $color-base;
+  }
 
-  .client_header_button {
-    background: $color-shade-mid;
-    border: 1px solid $color-shade-dark;
+  .channel_name_container {
+    color: $base-font-color;
+
+    .channel_name {
+      color: $base-font-color;
+
+      &.muted {
+        color: $color-highlight;
+      }
+
+      #im_title.away {
+        color: $color-highlight;
+      }
+
+      ul li.mpdm_member.away {
+        color: $color-highlight;
+      }
+    }
+
+    .mute_container .muted_icon {
+      color: $color-highlight;
+
+      &:hover {
+        color: $color-red;
+      }
+    }
+  }
+
+  #channel_header_info {
+    background: $color-base;
+    color: $base-font-color;
+
+    .topic_divider {
+      color: $color-shade-dark;
+    }
+  }
+
+  .channel_title_info {
+    background: $color-base;
+    color: $color-highlight;
+
+    .divider_bar {
+      background: $color-shade-dark;
+    }
 
-    &:hover {
-      background: $color-shade-light;
-      border: 1px solid $color-shade-mid;
+    .channel_details_toggle {
+      color: $color-highlight;
+    }
+
+    .channel_actions_toggle {
+      color: $color-highlight;
     }
   }
+
+  .channel_header_icon {
+    color: $base-font-color;
+
+    &.channel_calls_button {
+      color: $color-highlight;
+    }
+
+    &#channel_actions_toggle {
+      &.active {
+        color: $base-font-color;
+      }
+    }
+
+    &#recent_mentions_toggle {
+      &:hover {
+        color: $color-red;
+      }
+    }
+
+    &#flex_menu_toggle {
+      &.active {
+        color: $base-font-color;
+      }
+
+      .flex_menu_download_circle {
+        background: $color-base;
+
+        canvas {
+          background: $color-base;
+        }
+      }
+    }
+
+    &#details_toggle,
+    &#recent_mentions_toggle,
+    &#stars_toggle {
+      &.active {
+        background: $color-shade-dark;
+
+        &:hover {
+          background: $color-shade-light;
+          color: $base-font-color;
+        }
+      }
+    }
+  }
+
+  .blue_hover:hover {
+    color: $base-font-color;
+  }
+}
+
+.channel_header_refresh #client_body:not(.onboarding)::before {
+  background: $color-base;
+  border-bottom: 1px solid $color-base;
 }
 
 #help_icon {
@@ -112,58 +214,6 @@
   color: $color-highlight;
 }
 
-#channel_header .star {
-  color: $color-highlight;
-}
-
-.channel_header_button {
-  border: 1px solid rgba($color-shade-lightest, 0.61);
-  color: $color-highlight;
-
-  &#details_toggle.active,
-  &#flex_menu_toggle.active,
-  &#recent_mentions_toggle.active,
-  &#stars_toggle.active {
-    background-color: $color-shade-lightest;
-    border-color: $color-shade-dark;
-    color: $base-font-color;
-
-    &:hover {
-      background-color: $color-shade-lightest;
-      border-color: rgba($color-shade-dark, 0.61);
-      color: $base-font-color;
-    }
-  }
-
-  &#details_toggle:hover {
-    color: $base-font-color;
-  }
-
-  &#recent_mentions_toggle {
-    &:hover {
-      color: $color-red;
-    }
-
-    &.jquery_hover:hover {
-      color: $base-font-color;
-    }
-  }
-
-  &#stars_toggle {
-    &.jquery_hover:hover {
-      color: $base-font-color;
-    }
-  }
-
-  &#flex_menu_toggle {
-    &.active:hover,
-    &.menu_open,
-    &:hover {
-      color: $base-link-color-active;
-    }
-  }
-}
-
 #rxn_toast_div {
   background: $color-shade-lightest;
   border: 1px solid $color-shadow-light;

diff --git a/scss/modules/header/_search.scss b/scss/modules/header/_search.scss
@@ -1,30 +1,48 @@
-.search_form {
-  .icon_search {
-    color: $color-highlight;
-  }
+#client_header {
+  .search_form {
+    .icon_search {
+      color: $color-highlight;
+    }
 
-  .icon_close {
-    color: $base-link-color;
+    .icon_close {
+      color: $base-link-color;
+    }
+
+    .search_input {
+      background: $color-shade-light;
+      border: 1px solid rgba($color-shade-lightest, 0.61);
+
+      &:hover {
+        border: 1px solid $color-shade-lightest;
+      }
+
+      &:focus {
+        border-color: rgba($color-shade-lightest, 0.61);
+      }
+    }
   }
 
-  .search_input {
-    background: $color-shade-light;
-    border: 1px solid rgba($color-shade-lightest, 0.61);
+  .channel_header {
+    #header_search_form {
+      &:hover .search_input {
+        border: 1px solid rgba($color-shade-light, 0.61);
+      }
 
-    &:hover {
-      border: 1px solid $color-shade-lightest;
+      #search_spinner {
+        color: $base-font-color;
+      }
+
+      &.search_form .icon_search {
+        color: $color-highlight;
+      }
     }
 
-    &:focus {
-      border-color: rgba($color-shade-lightest, 0.61);
+    #search_container .search_form .search_clear_icon .ts_icon_times_circle {
+      color: $color-highlight;
     }
   }
 }
 
-#header_search_form.search_form .icon_search {
-  color: $color-highlight;
-}
-
 #team_filter {
   .icon_search {
     color: $color-highlight;