From 12896bd23eeba79884245c1c29fdc568cf21a7fa Mon Sep 17 00:00:00 2001
From: Christopher Speller <crspeller@gmail.com>
Date: Mon, 14 Mar 2016 08:50:46 -0400
Subject: Converting to Webpack. Stage 1.

---
 webapp/sass/layout/_post.scss | 997 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 997 insertions(+)
 create mode 100644 webapp/sass/layout/_post.scss

(limited to 'webapp/sass/layout/_post.scss')

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
new file mode 100644
index 000000000..ce055035d
--- /dev/null
+++ b/webapp/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: transparent;
+    border: 1px solid #ccc;
+    position: absolute;
+    top: 0px;
+    height: auto;
+    resize: none;
+    line-height: 20px;
+    min-height: 36px;
+    overflow-x: hidden;
+    &:focus {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.bad-connection {
+    background: #ffffac !important;
+    color: #d04444 !important;
+}
+
+.textarea-div {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    color: rgba(0,0,0,0);
+    position: absolute;
+    top: 0px;
+    word-break: break-word;
+    left: 1px;
+    line-height: 20px;
+    min-height: 36px;
+    height: auto;
+    border: 0;
+}
+
+body.ios {
+    .textarea-div {
+        padding: 7px 17px 7px 15px;
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+.textarea-div::-webkit-scrollbar {
+    display: none;
+}
+
+.textarea-wrapper {
+    position: relative;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+        white-space: normal;
+    }
+    .help__text {
+        right: 0;
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
+        font-size: 13px;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        margin-right: 8px;
+    }
+    min-height: 36px;
+}
+
+.help_format_text {
+    display: none !important;
+    position: absolute;
+    bottom: -23px;
+    left: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .85em;
+    @include opacity(0);
+    @include single-transition(all .2s ease);
+
+    b,
+    i,
+    code {
+        margin-right: 3px;
+    }
+    .textbox-preview-link {
+        font-size: 13px;
+        cursor: pointer;
+        margin-left: 15px;
+    }
+}
+
+.date-separator,
+.new-separator {
+    text-align: center;
+    height: 2em;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    &:before,
+    &:after {
+        content: '';
+        height: 1em;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        display: none;
+    }
+    &:before {
+        bottom: 0;
+    }
+    &:after {
+        top: 0;
+    }
+    &.hovered--after {
+        &:before {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    &.hovered--before {
+        &:after {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    .separator__hr {
+        border-color: #ccc;
+        margin: 0;
+        position: relative;
+        z-index: 5;
+        top: 1em;
+    }
+    .separator__text {
+        line-height: 2em;
+        color: #555;
+        background: #fff;
+        display: inline-block;
+        padding: 0 1em;
+        font-weight: 700;
+        @include border-radius(50px);
+        position: relative;
+        z-index: 5;
+        font-size: 13px;
+    }
+}
+.new-separator {
+    .separator__hr {
+        border-color: #ffaf53;
+    }
+    .separator__text {
+        color: #f80;
+        font-weight: normal;
+    }
+}
+
+.file-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: em(20px);
+    font-weight: 600;
+    z-index: 6;
+
+    .overlay__indent {
+        background-color: rgba(0, 0, 0, .6);
+        position: relative;
+        height: 100%;
+        @include clearfix;
+    }
+
+    &.center-file-overlay {
+        .overlay__indent {
+            margin-left: 220px;
+        }
+    }
+
+    &.right-file-overlay {
+        font-size: em(18px);
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .overlay__circle {
+        background: #111;
+        background: rgba(black, .7);
+        width: 370px;
+        height: 370px;
+        margin: -185px 0 0 -185px;
+        @include border-radius(500px);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+    }
+
+    .overlay__files {
+        display: block;
+        margin: 75px auto 20px;
+    }
+
+    .overlay__logo {
+        position: absolute;
+        left: 50%;
+        bottom: 30px;
+        margin-left: -50px;
+        @include opacity(.3);
+    }
+
+    .fa {
+        display: inline-block;
+        font-size: 1.1em;
+        margin-right: 8px;
+    }
+}
+
+#post-list {
+    @include flex(1 1 auto);
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+
+    .inactive {
+        display: none;
+    }
+
+    .post-list-holder-by-time {
+        background: #fff;
+        overflow-y: scroll;
+        width: 100%;
+        padding: 1em 0 0;
+        position: absolute;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        &.active {
+            display: inline;
+        }
+    }
+
+    .more-messages-text {
+        margin: 5px 0 10px;
+        display: block;
+        text-align: center;
+        outline: none;
+        border: none;
+        font-size: 13px;
+    }
+    .beginning-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        display: block;
+        text-align: center;
+        color: grey;
+    }
+}
+
+.post-list__timestamp {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    z-index: 50;
+    width: 120px;
+    text-align: center;
+    background: $color--primary;
+    color: #fff;
+    @include border-radius(3px);
+    font-size: 12px;
+    line-height: 25px;
+    margin-left: -60px;
+    -webkit-font-smoothing: initial;
+    @include single-transition(all, .6s, ease);
+    @include translateY(-45px);
+    @include opacity(0);
+    display: none;
+
+    &.scrolling {
+        @include translateY(0);
+        @include opacity(.8);
+    }
+}
+
+.post-list__arrows {
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    fill: #444;
+    position: absolute;
+    bottom: 0;
+    left: 9px;
+    z-index: 50;
+    @include opacity(0);
+    @include single-transition(all, .6s);
+    display: none;
+
+    svg {
+        color: inherit;
+        width: 28px;
+        height: 28px;
+    }
+
+    &.scrolling {
+        display: block;
+        @include opacity(1);
+    }
+}
+
+.post-create__container {
+    form {
+        width: 100%;
+        padding: .5em 14px 0;
+        margin: 0 auto;
+        max-width: 1028px;
+    }
+    .post-create-body {
+        position: relative;
+        padding: 0 0 2px;
+        .post-body__cell {
+            vertical-align: top;
+            position: relative;
+            &.scroll {
+                .btn-file {
+                    right: 15px;
+                }
+                .custom-textarea {
+                    padding-right: 43px;
+                }
+            }
+        }
+        .send-button {
+            display: none;
+            cursor: pointer;
+            padding-right: 4px;
+            width: 45px;
+            height: 37px;
+            font-size: 18px;
+            line-height: 37px;
+            vertical-align: bottom;
+            text-align: center;
+            @include single-transition(all, .15s);
+            &:active {
+                @include opacity(.75);
+            }
+        }
+        .custom-textarea {
+            padding-top: 8px;
+            padding-right: 28px;
+            max-height: 162px !important;
+            line-height: 1.5;
+        }
+        .textarea-div {
+            padding-top: 8px;
+            padding-right: 30px;
+            max-height: 163px !important;
+            overflow: auto;
+            line-height: 1.5;
+        }
+        .btn-file {
+            right: 0;
+            position: absolute;
+            top: 1px;
+            color: #444;
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            font-size: 16px;
+            padding: 7px 9px 6px;
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
+        }
+        textarea {
+            box-shadow: none;
+        }
+    }
+    .post-create-footer {
+        @include clearfix;
+        padding: 3px 0 0 0;
+        font-size: 13px;
+        .control-label {
+            font-weight: normal;
+            margin-bottom: 0;
+            top: -5px;
+            position: relative;
+        }
+    }
+    .msg-typing {
+        display: block;
+        @include opacity(.7);
+        white-space: nowrap;
+        margin-bottom: 5px;
+        overflow: hidden;
+        font-size: .95em;
+        text-overflow: ellipsis;
+        height: 20px;
+    }
+}
+
+.post-list__table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    .post-list__content {
+        display: table-cell;
+        vertical-align: bottom;
+        .dropdown-menu {
+            &.bottom {
+                top: auto;
+                bottom: 25px;
+            }
+        }
+    }
+}
+
+.post {
+    word-wrap: break-word;
+    padding: 8px .5em 0 1em;
+    position: relative;
+    max-width: 100%;
+    @include legacy-pie-clearfix;
+
+    &:hover {
+        .dropdown,
+        .comment-icon__container,
+        .post__reply,
+        .post__remove {
+            visibility: visible;
+        }
+        .permalink-icon {
+            visibility: visible;
+        }
+    }
+
+    &.post--highlight {
+        background-color: beige;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.6em;
+        font-size: .97em;
+        white-space: pre-wrap;
+
+        &:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    span {
+        p:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    &.post--root {
+        .comment-icon__container {
+            visibility: visible;
+        }
+    }
+
+    &.same--root {
+        &.same--user {
+            padding: 0 .5em 0 1em;
+
+            &:hover {
+                .post__time {
+                    @include opacity(.5);
+                }
+            }
+
+            .post__header {
+                margin: 0;
+                height: 0;
+
+                .col__name {
+                    display: none;
+                }
+
+                .col__reply {
+                    top: 6px;
+                }
+            }
+
+            .post__time {
+                top: 24px;
+            }
+
+            .post__time {
+                font: normal normal normal FontAwesome;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                position: absolute;
+                top: -2px;
+                left: -7px;
+                font-size: 11px;
+                line-height: 37px;
+                @include opacity(0);
+            }
+        }
+
+        &.post--comment {
+            .post__link {
+                display: none;
+            }
+
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: 4px solid #ddd;
+            }
+        }
+    }
+
+    &.other--root {
+        .comment-icon__container {
+            &.icon--show {
+                visibility: visible;
+            }
+        }
+
+        &.post--comment {
+            .popover {
+                margin-top: 84px;
+
+                > .arrow {
+                    top: 21px !important;
+                }
+            }
+
+            .post__header {
+                .col__reply {
+                    top: 53px;
+                }
+            }
+        }
+    }
+
+    .post__content {
+        margin: 0 auto;
+        position: relative;
+        max-width: 1000px;
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+    }
+
+    .post__header {
+        padding: 0;
+        list-style: none;
+        margin-bottom: 2px;
+
+        li {
+            display: inline-block;
+            vertical-align: top;
+        }
+
+        .col__name {
+            margin-right: 7px;
+            font-weight: 600;
+
+            .user-popover {
+                max-width: 200px;
+                @include clearfix;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .col__reply {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            width: 65px;
+            white-space: nowrap;
+        }
+
+        .permalink-popover {
+            min-width: 0;
+
+            .popover-content {
+                padding: 5px;
+            }
+
+            .form-control,
+            .btn {
+                font-size: 13px;
+                height: 30px;
+                padding: 0 8px;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .post__img {
+        width: 46px;
+        img {
+            width: 36px;
+            height: 36px;
+            vertical-align: inherit;
+            @include border-radius(50px);
+        }
+    }
+
+    .post__embed-container {
+        display: block;
+        max-height: 1000px;
+        transition: max-height .5s ease;
+        overflow: hidden;
+        &[hidden] {
+            max-height: 0;
+        }
+    }
+
+    .dropdown {
+        display: inline-block;
+        visibility: hidden;
+        margin-right: 5px;
+        top: -1px;
+
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 130px;
+            padding: 2px 0;
+
+            li {
+                display: block;
+            }
+
+            a {
+                padding: 5px 15px;
+            }
+        }
+    }
+
+    .post__dropdown {
+        &:after {
+            content: '[...]';
+            top: -1px;
+            position: relative;
+        }
+    }
+
+    .post__remove {
+        font-family: 'Open Sans', sans-serif;
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        right: 15px;
+        top: -5px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600;
+        visibility: hidden;
+        color: inherit;
+        @include opacity(.5);
+        text-decoration: none;
+
+        &:hover {
+            @include opacity(.8);
+        }
+    }
+
+    .post__body {
+        word-wrap: break-word;
+        padding: .2em .5em;
+        @include legacy-pie-clearfix;
+        width: calc(100% - 75px);
+
+        p {
+            margin: 0 0 .4em;
+        }
+
+        p + p {
+            margin-top: 1.4em;
+        }
+
+        li {
+            > p {
+                margin-top: 10px;
+            }
+        }
+
+        img {
+            max-height: 400px;
+        }
+
+        ul,
+        ol {
+            margin-bottom: .4em;
+
+            p {
+                margin-bottom: 0;
+            }
+            li ul,
+            li ol {
+                padding: 0 0 0 20px;
+            }
+
+            li.list-item--task-list ul,
+            li.list-item--task-list ol {
+                margin-left: 20px;
+            }
+
+            li.list-item--task-list ul {
+                padding-left: 0;
+            }
+
+            li:not(.list-item--task-list) li.list-item--task-list,
+            li:not(.list-item--task-list) li.list-item--task-list ~ li {
+                margin-left: -20px;
+            }
+
+            li input[type='checkbox']:disabled {
+                vertical-align: top;
+                cursor: default;
+            }
+        }
+
+        ul li.list-item--task-list,
+        ul li.list-item--task-list ~ li {
+            list-style-type: none;
+        }
+
+        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+            text-indent: 3px;
+
+            &:before {
+                content: '&#10625;';
+                margin-right: 8px;
+            }
+        }
+    }
+
+    .post__link {
+        margin: 2px 0 5px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .post__embed-visibility {
+        cursor: pointer;
+        font: normal normal normal 14px/1 FontAwesome;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin: 5px 0 10px;
+        display: inline-block;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+        &:before {
+            content: '\f065';
+            font-size: 14px;
+        }
+
+        &[data-expanded='true']:before {
+            content: '\f066';
+        }
+    }
+
+    .post__time {
+        font-size: .9em;
+    }
+
+    .post__time,
+    &.post--system .post__body {
+        @include opacity(.6);
+    }
+
+    .post-loading-gif {
+        height: 10px;
+        width: 10px;
+        margin-top: 6px;
+    }
+
+    .post-fail {
+        color: #d58a8a;
+    }
+
+    .post-waiting {
+        color: #999;
+    }
+
+    .permalink-icon {
+        display: inline-block;
+        color: $color--primary;
+        visibility: hidden;
+    }
+
+    .post__reply {
+        display: inline-block;
+        margin-right: 6px;
+        visibility: hidden;
+        svg {
+            width: 18px;
+            top: 3px;
+            fill: inherit;
+            position: relative;
+        }
+    }
+
+    .comment-icon__container {
+        fill: $color--primary;
+        display: inline-block;
+        visibility: hidden;
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+        svg {
+            height: 17px;
+            width: 17px;
+        }
+
+        .comment-icon {
+            display: inline-block;
+            top: 2px;
+            position: relative;
+            margin-right: 3px;
+            fill: inherit;
+        }
+
+        path {
+            fill: inherit;
+        }
+    }
+
+    .web-embed-data {
+        padding: 2px 0 0 10px;
+        background: #f9f9f9;
+        background: rgba(0, 0, 0, .05);
+        @include border-radius(2px);
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .embed-title {
+            margin: 3px 0 1px;
+            color: #555;
+            font-weight: 600;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .embed-description {
+            margin: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            color: #888;
+        }
+        .embed-link {
+            display: none;
+        }
+    }
+}
+
+.bot-indicator {
+    font-family: inherit;
+    font-size: 11px;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-weight: 600;
+    margin: 0 0 0 -4px;
+}
+
+.attachment {
+    .attachment__content {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        padding: 2px 5px;
+        margin: 0 0 5px 0;
+    }
+    .attachment__thumb-pretext {
+        border: 0 none;
+        background: transparent;
+    }
+    .attachment__container {
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding: 2px 0 2px 10px;
+        &.attachment__container--good {
+            border-left-color: #00c100;
+        }
+        &.attachment__container--warning {
+            border-left-color: #dede01;
+        }
+        &.attachment__container--danger {
+            border-left-color: #e40303;
+        }
+    }
+    .attachment__body {
+        float: left;
+        width: 80%;
+        padding-right: 5px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+    .attachment__thumb-pretext {
+        margin-left: 5px;
+    }
+    .attachment__title {
+        margin: 5px 0;
+        padding: 0;
+        line-height: 16px;
+        height: 22px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+        }
+    }
+    .attachment__author-icon {
+        @include border-radius(50px);
+        margin-right: 5px;
+        width: 14px;
+        height: 14px;
+    }
+    .attachment__image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    .attachment__thumb-container {
+        width: 20%;
+        float: right;
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+    .attachment___fields {
+        width: 100%;
+        .attachment___field-caption {
+            font-weight: 700;
+        }
+        .attachment___field p {
+            margin: 0;
+        }
+    }
+}
+
+.permalink-text {
+    overflow: hidden;
+}
+
+.permalink-popover {
+    min-width: 320px;
+    margin-left: 50px !important;
+}
-- 
cgit v1.2.3-1-g7c22