diff options
Diffstat (limited to 'client/components/main/header.styl')
-rw-r--r-- | client/components/main/header.styl | 266 |
1 files changed, 266 insertions, 0 deletions
diff --git a/client/components/main/header.styl b/client/components/main/header.styl new file mode 100644 index 00000000..1177d930 --- /dev/null +++ b/client/components/main/header.styl @@ -0,0 +1,266 @@ +@import 'nib' + +global-reset() + +#header + color: white + transition: background-color 0.4s + background: #27AE60 + + #header-quick-access + background-color: rgba(0, 0, 0, 0.2) + padding: 4px 10px + height: 16px + font-size: 12px + display: flex + + ul li, #header-user-bar + color: darken(white, 17%) + + a + color: inherit + text-decoration: none + + &:hover + color: white + + ul + flex: 1 + transition: opacity 0.2s + margin-left: 5px + + li + display: block + float: left + width: auto + color: darken(white, 15%) + padding: 0 4px 1px 4px + + &.separator + padding: 0 2px 1px 2px + + &.current + font-style: italic + + &:first-child .fa-home + margin-right: 5px + + #header-main-bar + height: 30px + padding: 8px + + h1 + font-size: 19px + line-height: 1.7em + margin: 0 20px 0 10px + float: left + + &.header-board-menu + cursor: pointer + + .fa-angle-down + font-size: 0.8em + // line-height: 1.1em + margin-left: 5px + + .board-header-starred .fa + color: yellow + + .board-header-members + float: right + + .member + display: block + width: 32px + height: @width + + .add-board-member + color: white + display: flex + align-items: center + justify-content: center + border: 1px solid white + height: 32px - 2px + width: @height + + i.fa-plus + margin-top: 2px + + .header-btn:last-child + margin-right: 0 + + + +// #header { +// background: #138871; +// height: 30px; +// overflow: hidden; +// padding: 5px; +// position: relative; +// z-index: 10; +// } + +// .header-logo { +// bottom: 0; +// display: block; +// height: 25px; +// left: 50%; +// position: absolute; +// top: 8px; +// width: 80px; +// margin-left: - @width/2; +// text-align: center; +// z-index: 2; +// opacity: .5; +// transition: opacity ease-in 85ms; +// color: white; +// font-size: 22px; +// text-decoration: none; +// background-image: url('/logos/white_logo.png'); + +// &:hover { +// opacity: .8; +// color: white; +// } +// } + +// .header-btn.header-btn-feedback { +// background: rgba(255, 255, 255, .1); +// background: linear-gradient(to bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%); +// padding-left: 22px; +// margin-right: 16px; + +// .header-btn-icon { +// top: 1px; +// } +// } + +.header-btn { + border-radius: 3px; + user-select: none; + background: rgba(255, 255, 255, .3); + background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .2) 100%); + color: #f3f3f3; + display: block; + float: left; + font-weight: 700; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: relative; + margin-right: 8px; + min-width: 30px; + text-decoration: none; + cursor: pointer; + + .header-btn-icon { + font-size: 16px; + line-height: 28px; + position: absolute; + top: 0; + left: 0; + } + + &.new-notifications { + background: #ba1212; + + &:hover { + background: #d11515; + } + } + + &.header-member .member { + margin: 0; + border-top-left-radius: 3px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 3px; + + &:hover .member-avatar { + opacity: 1; + } + } + + &:hover { + background: rgba(255, 255, 255, .4); + background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); + color: #fff; + + .header-btn-count { + background: #d11515; + } + } + + &:active { + background: rgba(255, 255, 255, .4); + background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%); + } + + &.upgrade { + margin-right: 16px; + + .icon-sm { + padding: 6px 2px 6px 4px; + } + } + + &.upgrade, + &.header-boards { + padding-left: 4px; + } + + &.header-boards { + padding-right: 4px; + } + + &.header-login, + &.header-signup { + padding: 0 12px; + } + + &.header-signup { + background: #48b512; + background: linear-gradient(to bottom, #48b512 0, #3d990f 100%); + + &:hover { + background: #3d990f; + background: linear-gradient(to bottom, #3d990f 0, #327d0c 100%); + } + + &:active { + background: #327d0c; + } + } + + &.header-go-to-boards { + padding: 0 8px 0 38px; + } + + &.header-go-to-boards .member { + border-top-left-radius: 3px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 3px; + position: absolute; + left: 0; + } +} + +// .header-btn-text { +// padding: 0 8px; +// } + +// .header-notification-list ul { +// margin-top: 8px; +// } + +// .header-notification-list .action-comment { +// max-height: 250px; +// overflow-y: auto; +// } + +// .header-user { +// position: absolute; +// top: 5px; +// right: 0; +// } |