From 2dbea30842ec63a68055245fe26633bb7913daf3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Tue, 12 May 2015 19:20:58 +0200 Subject: 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 --- client/components/main/popup.styl | 585 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 585 insertions(+) create mode 100644 client/components/main/popup.styl (limited to 'client/components/main/popup.styl') diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl new file mode 100644 index 00000000..8c9993af --- /dev/null +++ b/client/components/main/popup.styl @@ -0,0 +1,585 @@ +@import 'nib' + +.pop-over + background: #fff + border-radius: 3px + border: 1px solid #dbdbdb + border-bottom-color: #c2c2c2 + box-shadow: 0 1px 6px rgba(0, 0, 0, .3) + display: none + overflow: hidden + position: absolute + width: 300px + z-index: 99999 + margin-top: 5px + + hr + margin: 4px -10px + width: 275px + 2*10px + + input[type="text"], + input[type="email"], + input[type="password"] + margin: 4px 0 12px + width: 100% + + input[type="file"] + width: 240px + + select + width: 100% + margin-bottom: 14px + + textarea + height: 72px + margin: 4px 0 12px + width: 100% + + .empty + margin: 0 + + img + max-width: 270px + + .custom-image img + height: 18px + left: 9px + top: 9px + width: 18px + + .title + line-height: 32px + + .header + height: 36px + position: relative + margin-bottom: 8px + background: #F7F7F7 + border-bottom: 1px solid #dcdcdc + color: darken(white, 60%) + + .header-title + display: block + line-height: 32px + padding-top: 4px + margin: 0 10px + font-weight: bold + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .back-btn, .close-btn + &:hover .icon-sm + color: darken(white, 80%) + + .back-btn + padding: 10px + float: left + + .close-btn + padding: 10px 10px 10px 4px + position: absolute + top: 0 + right: 0 + + .content + overflow-x: hidden + overflow-y: auto + padding: 0 10px 10px + max-height: 550px + + .quiet + padding: 6px 6px 4px + + &.search-over + background: #f0f0f0 + min-height: 114px + + .header + display: none + + .content + padding: 8px 4px 8px 10px + margin-right: 8px + + &::-webkit-scrollbar-button + display: block + height: 4px + width: 4px + +.select-members-list + margin-bottom: 8px + +.pop-over-list + + &.navigable li.not-selectable>a:hover, + li.not-selectable>a:hover + color: #8c8c8c + cursor: default + + .icon-sm + color: #a6a6a6 + + li > a + cursor: pointer + display: block + font-weight: 700 + padding: 6px 10px + position: relative + margin: 0 -10px + text-decoration: none + + .item-name + display: block + width: auto + padding-right: 22px + + &:hover + background-color: #005377 + color: #fff + + .sub-name, + .quiet + color: #eee + + .unread-indicator + background: #fff + + .icon-sm + color: #fff + + .sub-name + clear: both + color: #8c8c8c + display: block + font-size: 12px + font-weight: 400 + line-height: 15px + margin-top: 4px + + &.current + background-color: #e2e6e9 + + .unread-indicator + background: #2e85b8 + background: linear-gradient(to bottom, #2e85b8 0, #2b7cab 100%) + border-radius: 7px + display: block + height: 14px + opacity: 0 + position: absolute + right: 16px + top: 8px + width: 14px + + &.any + opacity: 1 + + &:active + background-color: #2e85b8 + + &.disabled + color: #8c8c8c + cursor: default + + .vis-icon + opacity: .35 + + .icon-sm + color: #a6a6a6 + + &:hover + background: none + + .sub-name, + .quiet + color: #8c8c8c + + .icon-sm + color: #a6a6a6 + + &:active + background: none + + &.inset li > a + border-radius: 3px + margin: 0 + + .pop-over-list.checkable + + .icon-check + display: none + position: absolute + top: 6px + right: 12px + + li.active a + padding-right: 28px + + .icon-check + display: block + + &.left-check + + .icon-check + right: auto + left: 10px + + li a + padding-right: 10px + padding-left: 30px + + li.active a + padding-right: 10px + + &.normal-weight li>a + font-weight: 400 + + &.navigable + + li > a:hover + background-color: transparent + color: #4d4d4d + + .sub-name, + .quiet + color: #8c8c8c + + .icon-sm + color: #a6a6a6 + + li.selected > a + background-color: #005377 + color: #fff + + .sub-name, + .quiet + color: #eee + + li.selected > a + + &.current + background-color: #005377 + + .unread-indicator + background: #fff + + .icon-sm + color: #fff + + &:active + background-color: #005377 + +.pop-over.miniprofile + + .header + border-bottom-color: transparent + height: 30px + position: absolute + right: 0 + top: 0 + width: 60px + z-index: 1 + + .header-title + display: none + + .pop-over-list + padding-top: 8px + +.mini-profile-info + margin-top: 8px + min-height: 56px + position: relative + + .member-large + position: absolute + top: 2px + left: 2px + + .info + margin: 0 0 0 64px + word-wrap: break-word + + h3 a + text-decoration: none + + &:hover + text-decoration: underline + +.pop-over.avdetail .header + border-bottom-color: transparent + height: 20px + position: absolute + top: 8px + left: 8px + right: 8px + z-index: 0 + +.pop-over.avdetail .header-title + display: none + +.pop-over.avdetail .content + text-align: center + +.pop-over.avdetail .mem-info + margin: 2px 24px 8px + position: relative + z-index: 1 + width: 222px + +.pop-over.avdetail .mem-info h3 a + text-decoration: none + +.pop-over.avdetail .mem-info h3 a:hover + text-decoration: underline + +.pop-over-label-list li, +.pop-over-member-list li + + &.disabled a + cursor:default + + &:not(.disabled):hover a + background-color: #005377 + color: #fff + + +.pop-over-label-list, +.pop-over-member-list, +.pop-over-emoji-list, +.pop-over-card-list + li + a + border-radius: 3px + display: block + height: 30px + line-height: 30px + overflow: hidden + position: relative + text-overflow: ellipsis + text-decoration: none + white-space: nowrap + padding: 4px + margin-bottom: 2px + + &.multi-line + line-height: 16px + + .member + margin-right: 8px + + .card-label + float: left + height: 30px + margin: 0 8px 0 0 + padding: 0 + width: 30px + + .option, + .icon-check + background-clip: content-box + background-origin: content-box + padding: 11px + position: absolute + top: 0 + right: 0 + + .sub-name + font-size: 12px + + + &:last-child a + margin-bottom: 0 + + &.disabled + opacity: .5 + + &.active a, + &.selected a + background: none + color: #4d4d4d + cursor: default + + .quiet + color: #8c8c8c + + &.email-invite + + .member + display: none + + a + padding: 0 10px + + &.selected a + background-color: #005377 + color: #fff + + .quiet + color: #eee + + .card-label + border-radius: 3px + + .icon-check + color: #fff + + &.active a .icon-check + display: block + + &.unconfirmed a.name + line-height: 16px + + &.options li + + &.selected a + padding-right: 28px + + .option + display: block + opacity: .5 + + &:hover + opacity: 1 + + &.disabled.selected a + padding-right: 0 + + .option + display: none + + + &.no-option.selected a + padding-right: 6px + + .option + display: none + + &.collapsed + + &.checkable li.active a + padding-right: 0 + + li + float: left + margin: 0 3px 3px 0 + + a + padding: 0 + margin: 0 + width: 30px + + .member + opacity: .8 + + .full-name + display: none + + &.selected a .member, + &.active.selected a .member + border-color: #005377 + opacity: .9 + + &.active a + + .member + border-color: #2e85b8 + opacity: 1 + + .icon-check + border-radius: 3px + background-color: #2e85b8 + bottom: 0 + color: #fff + display: block + padding: 0 + right: 0 + top: auto + + &.checkable li.active a + padding-right: 28px + + &.filtered li + display: none + + &.matches-filter + display: block + + &.limited li.exceeds-limit + display: none + +.pop-over-emoji-list li > a + padding: 2px 4px + + .emoji + margin: 0 6px + +.pop-over-card-list li > a + padding: 2px 4px + +.login-signup-popover + padding: 15px + + .form-tabs + display: none + + h1 + margin-bottom: 15px + + p + margin: 8px 0 + + .form-parts-container + position: relative + + .active-box + position: absolute + top: 0 + background: #e2e2e2 + border: 1px solid #c9c9c9 + border-radius: 3px + z-index: 1 + height: 100% + width: 49% + transition-property: all + transition-duration: .4s + opacity: 1 + + &.start + opacity: 0 + left: 25% + + .signup-form, + .login-form + position: relative + box-sizing: border-box + padding: 20px + width: 50% + z-index: 2 + opacity: .3 + transition-property: opacity + transition-duration: .2s + + .active + opacity: 1 + + + .js-signup-form-pos + left: 0 + + .login-form + position: absolute + top: 0 + + .login-form .icon-google + position: absolute + left: 5px + top: 3px + + .login-form .button.google + padding-left: 40px + margin: 0 0 15px 0 + + .js-login-form-pos + left: 50% -- cgit v1.2.3-1-g7c22