Renaissance

                     _,,ad8888888888bba,_
                  ,ad88888I888888888888888ba,
                ,88888888I88888888888888888888a,
              ,d888888888I8888888888888888888888b,
             d88888PP"""" ""YY88888888888888888888b,
           ,d88"'__,,--------,,,,.;ZZZY8888888888888,
          ,8IIl'"                ;;l"ZZZIII8888888888,
         ,I88l;'                  ;lZZZZZ888III8888888,
       ,II88Zl;.                  ;llZZZZZ888888I888888,
      ,II888Zl;.                .;;;;;lllZZZ888888I8888b
     ,II8888Z;;                 `;;;;;''llZZ8888888I8888,
     II88888Z;'                        .;lZZZ8888888I888b
     II88888Z; _,aaa,      .,aaaaa,__.l;llZZZ88888888I888
     II88888IZZZZZZZZZ,  .ZZZZZZZZZZZZZZ;llZZ88888888I888,
     II88888IZZ<'(@@>Z|  |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I
    ,II88888;   `""" ;|  |ZZ; `"""     ;;llZ8888888888I888
    II888888l            `;;          .;llZZ8888888888I888,
   ,II888888Z;           ;;;        .;;llZZZ8888888888I888I
   III888888Zl;    ..,   `;;       ,;;lllZZZ88888888888I888
   II88888888Z;;...;(_    _)      ,;;;llZZZZ88888888888I888,
   II88888888Zl;;;;;' `--'Z;.   .,;;;;llZZZZ88888888888I888b
   ]I888888888Z;;;;'   ";llllll;..;;;lllZZZZ88888888888I8888,
   II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I
   II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888
   II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888
   `II8888888888888Zl;.    ,;;lllZZZZZZZZWMZ88888888888I88888
    II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888,
    `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b
     `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888
      `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888,
       II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b,
      ,II8888888888888888b   .;;lllllll;;;.;..88888888I88888888b,
      II888888888888888PZI;.  .`;;;.;;;..; ...88888888I8888888888,
      II888888888888PZ;;';;.   ;. .;.  .;. .. Y8888888I88888888888b,
     ,II888888888PZ;;'                        `8888888I8888888888888b,
     II888888888'                              888888I8888888888888888
    ,II888888888                              ,888888I8888888888888888
   ,d88888888888                              d888888I8888888888ZZZZZZ
,ad888888888888I                              8888888I8888ZZZZZZZZZZZZ
888888888888888'                              888888IZZZZZZZZZZZZZZZZZ
8888888888P'8P'                               Y888ZZZZZZZZZZZZZZZZZZZZ
888888888,  "                                 ,ZZZZZZZZZZZZZZZZZZZZZZZ
8888888888,                                ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ
888888888888a,      _                    ,ZZZZZZZZZZZZZZZZZZZZ88888888
888888888888888ba,_d'                  ,ZZZZZZZZZZZZZZZZZ8888888888888
8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888
88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888
8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888
888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888
8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888
88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888
8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand  8
88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8
8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888

1 files changed, 137 insertions, 0 deletions

diff --git a/client/components/boards/header.styl b/client/components/boards/header.styl
new file mode 100644
index 00000000..44c38a4b
--- /dev/null
+++ b/client/components/boards/header.styl
@@ -0,0 +1,137 @@
+@import 'nib'
+
+.board-header {
+    height: auto;
+    overflow: hidden;
+    padding: 10px 30px 10px 8px;
+    position: relative;
+    transition: padding .15s ease-in;
+}
+
+.board-header-btns {
+    position: relative;
+    display: block;
+}
+
+.board-header-btn {
+    border-radius: 3px;
+    color: #f6f6f6;
+    cursor: default;
+    float: left;
+    font-size: 12px;
+    height: 30px;
+    line-height: 32px;
+    margin: 2px 4px 0 0;
+    overflow: hidden;
+    padding-left: 30px;
+    position: relative;
+    text-decoration: none;
+}
+
+.board-header-btn:empty {
+    display: none;
+}
+
+.board-header-btn-without-icon {
+    padding-left: 8px;
+}
+
+.board-header-btn-icon {
+    background-clip: content-box;
+    background-origin: content-box;
+    color: #f6f6f6 !important;
+    padding: 6px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.board-header-btn-text {
+    padding-right: 8px;
+}
+
+.board-header-btn:not(.no-edit) .text {
+    text-decoration: underline;
+}
+
+.board-header-btn:not(.no-edit):hover {
+    background: rgba(0, 0, 0, .12);
+    cursor: pointer;
+}
+
+.board-header-btn:hover {
+    color: #f6f6f6;
+}
+
+.board-header-btn.board-header-btn-enabled {
+    background-color: rgba(0, 0, 0, .1);
+
+    &:hover {
+        background-color: rgba(0, 0, 0, .3);
+    }
+
+    .board-header-btn-icon.icon-star {
+        color: #e6bf00 !important;
+    }
+}
+
+.board-header-btn-name {
+    cursor: default;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 30px;
+    padding-left: 4px;
+    text-decoration: none;
+
+    .board-header-btn-text {
+        padding-left: 6px;
+    }
+}
+
+.board-header-btn-name-org-logo {
+    border-radius: 3px;
+    height: 30px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 30px;
+
+    .board-header-btn-text {
+        padding-left: 32px;
+    }
+}
+
+.board-header-btn-org-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 400px;
+}
+
+.board-header-btn-filter-indicator {
+    background: #3d990f;
+    padding-right: 30px;
+    color: #fff;
+    text-shadow: 0;
+
+    &:hover {
+        background: #43a711 !important;
+    }
+
+    .board-header-btn-icon-close {
+        background: #43a711;
+        border-top-left-radius: 0;
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+        border-bottom-left-radius: 0;
+        color: #fff;
+        padding: 6px;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        &:hover {
+            background: #48b512;
+        }
+    }
+}