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;
+        }
+    }
+}