diff options
Diffstat (limited to 'client/components/boards/header.styl')
-rw-r--r-- | client/components/boards/header.styl | 137 |
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; + } + } +} |