diff options
Diffstat (limited to 'web/sass-files/sass/components/_popover.scss')
-rw-r--r-- | web/sass-files/sass/components/_popover.scss | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/web/sass-files/sass/components/_popover.scss b/web/sass-files/sass/components/_popover.scss new file mode 100644 index 000000000..588a71946 --- /dev/null +++ b/web/sass-files/sass/components/_popover.scss @@ -0,0 +1,184 @@ +@charset 'UTF-8'; + +.popover { + @include border-radius($border-rad); + color: #333; + + &.bottom, + &.right, + &.top, + &.left { + > .arrow:after { + border-color: transparent; + } + } + + .popover-title { + background: rgba(black, .05); + padding: 8px 10px; + } + + .popover-content { + p:last-child { + margin-bottom: 5px; + } + } +} + +.channel-header__info .popover-content { + max-height: 250px; + overflow: auto; +} + +.user-popover { + cursor: pointer; + display: inline-block; +} + +.code-popover .popover-content { + padding: 5px; +} + +.user-popover__image { + margin: 0 0 10px; + @include border-radius(128px); +} + +.user-popover__email { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +.search-help-popover { + visibility: hidden; + max-width: none; + width: 100%; + top: 36px; + @include single-transition(opacity, .3s, ease-in); + font-size: em(13px); + + &.autocomplete { + display: block; + .popover-content { + padding: 10px; + position: relative; + } + } + + .search-autocomplete__divider { + margin: 10px 0 5px; + line-height: 21px; + position: relative; + &:first-child { + margin-top: 5px; + } + span { + display: inline-block; + padding-right: 10px; + background: #fff; + z-index: 5; + position: relative; + } + &:before { + content: ''; + position: absolute; + width: 100%; + height: 1px; + background: #ddd; + top: 10px; + left: 0; + @include opacity(.2); + } + } + + .search-autocomplete__item { + cursor: pointer; + padding: 6px 8px; + margin: 3px 0 0 5px; + @include border-radius(2px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background: rgba(black, .1); + } + + &.selected { + background: rgba(black, .2); + } + + .fa { + margin-right: 5px; + @include opacity(.5); + } + + .profile-img { + margin-top: -1px; + height: 16px; + margin-right: 6px; + width: 16px; + } + } + + &.bottom > .arrow { + top: -18px; + border-width: 9px; + left: 30px; + } + + .popover-content { + max-height: 500px; + overflow: auto; + padding: 3px 13px; + } + + h4 { + font-size: 1em; + } + + ul { + padding-left: 17px; + span { + @include opacity(.8); + } + strong, + b { + @include opacity(1); + } + } + + .tooltip-inner { + max-width: 100%; + } + + &.visible { + visibility: visible; + @include opacity(1); + } +} + +#member-list-popover { + max-width: initial; + .popover-content { + position: relative; + padding: 0; + width: 260px; + max-height: 350px; + .text-nowrap { + padding: 6px 10px; + width: 100%; + overflow: hidden; + line-height: 26px; + font-size: 13px; + } + .more__name { + margin-left: 6px; + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; + } + } +} |