PLT-5985 Cleaned up CSS for post textbox (#5974)

webapp/components/textbox.jsx

@@ -246,6 +246,14 @@ export default class Textbox extends React.Component {
             </div>
         );
 
+        let textboxClassName = 'form-control custom-textarea';
+        if (this.props.emojiEnabled) {
+            textboxClassName += ' custom-textarea--emoji-picker';
+        }
+        if (this.state.connection) {
+            textboxClassName += ' ' + this.state.connection;
+        }
+
         return (
             <div
                 ref='wrapper'
@@ -254,7 +262,7 @@ export default class Textbox extends React.Component {
                 <SuggestionBox
                     id={this.props.id}
                     ref='message'
-                    className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`}
+                    className={textboxClassName}
                     type='textarea'
                     spellCheck='true'
                     placeholder={this.props.createMessage}

webapp/sass/layout/_post-right.scss

@@ -71,8 +71,7 @@
             }
         }
 
-        .custom-textarea,
+        .custom-textarea {
-        .custom-textarea-emoji {
             min-height: 100px;
         }
 

webapp/sass/layout/_post.scss

@@ -15,11 +15,11 @@
         border-color: #cccccc;
         box-shadow: none;
     }
-}
 
-.bad-connection {
+    &.bad-connection {
-    background: #ffffac !important;
+        background: #ffffac !important;
-    color: #d04444 !important;
+        color: #d04444 !important;
+    }
 }
 
 .textarea-wrapper {
@@ -360,33 +360,36 @@
 
 .post-create__container {
     label {
-     font-weight: normal;
+        font-weight: normal;
- }
+    }
- .custom-textarea {
-    overflow: hidden;
-}
 
-form {
+    form {
-    margin: 0 auto;
+        margin: 0 auto;
-    padding: .5em 15px 0;
+        padding: .5em 15px 0;
-    width: 100%;
+        width: 100%;
-}
+    }
-#reply_textbox.custom-textarea-emoji{
-    bottom: 0;
-    max-height: 162px !important;
-    padding-right: 60px;
-    padding-top: 6px;
-    resize: none;
 
+    .center {
+        max-width: 1028px;
+    }
 
+    .custom-textarea {
+        bottom: 0;
+        max-height: 162px;
+        padding-top: 8px;
+        overflow: hidden;
+        resize: none;
 
-}
+        &:not(.custom-textarea--emoji-picker) {
-.center {
+            padding-right: 35px;
-    max-width: 1028px;
+        }
-}
 
-.post-create {
+        &.custom-textarea--emoji-picker {
-    &.scroll {
+            padding-right: 60px;
+        }
+    }
+
+    .post-create.scroll {
         .btn-file {
             right: 10px;
         }
@@ -394,237 +397,194 @@ form {
         .custom-textarea {
             -ms-overflow-style: auto;
             overflow: auto;
-            padding-right: 43px;
-            resize: none;
-        }
 
-        #post_textbox-reference.custom-textarea-emoji {
+            &:not(.custom-textarea--emoji-picker) {
-            padding-right: 43px;
+                padding-right: 43px;
-            resize: none;
+            }
-        }
-
-
-
-        #post_textbox.custom-textarea-emoji {
-            padding-right: 60px;
-            resize: none;
 
+            &.custom-textarea--emoji-picker {
+                padding-right: 60px;
+            }
         }
     }
-}
 
-.post-create-body {
+    .post-create-body {
-    padding: 0 0 2px;
+        padding: 0 0 2px;
-    position: relative;
-
-    .post-body__cell {
         position: relative;
-        vertical-align: top;
-    }
 
-    .send-button {
+        .post-body__cell {
-        @include single-transition(all, .15s);
+            position: relative;
-        cursor: pointer;
+            vertical-align: top;
-        display: none;
-        font-size: 18px;
-        height: 37px;
-        line-height: 37px;
-        padding-right: 4px;
-        text-align: center;
-        vertical-align: bottom;
-        width: 45px;
-
-        &:active {
-            @include opacity(.75);
         }
 
-        &.disabled {
+        .send-button {
-            color: grey;
+            @include single-transition(all, .15s);
-        }
+            cursor: pointer;
-    }
+            display: none;
+            font-size: 18px;
+            height: 37px;
+            line-height: 37px;
+            padding-right: 4px;
+            text-align: center;
+            vertical-align: bottom;
+            width: 45px;
 
-    .custom-textarea {
+            &:active {
-        bottom: 0;
+                @include opacity(.75);
-        max-height: 162px !important;
+            }
-        padding-right: 35px;
-        padding-top: 8px;
-        resize: none;
 
-    }
+            &.disabled {
-
+                color: grey;
-    #post_textbox-reference.custom-textarea-emoji {
+            }
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 35px;
-        padding-top: 8px;
-        resize: none;
-
-    }
-
-
-    #post_textbox.custom-textarea-emoji {
-        bottom: 0;
-        max-height: 162px !important;
-        padding-right: 60px;
-        padding-top: 8px;
-        resize: none;
-
-    }
-    .textarea-div {
-        line-height: 1.5;
-        max-height: 163px !important;
-        overflow: auto;
-        padding-right: 30px;
-        padding-top: 8px;
-    }
-
-    .btn-file {
-        @include single-transition(all, .15s);
-        font-size: 16px;
-        padding: 8px 9px 4px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 5;
-
-        svg {
-            height: 18px;
-            width: 18px;
         }
 
-        &:hover,
+        .btn-file {
-        &:active {
+            @include single-transition(all, .15s);
-            box-shadow: none;
+            font-size: 16px;
-        }
+            padding: 8px 9px 4px;
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 5;
 
-        &.btn-file__disabled {
+            svg {
-            @include opacity(.1);
+                height: 18px;
+                width: 18px;
+            }
 
             &:hover,
             &:active {
+                box-shadow: none;
+            }
+
+            &.btn-file__disabled {
                 @include opacity(.1);
+
+                &:hover,
+                &:active {
+                    @include opacity(.1);
+                }
+            }
+
+            .icon--attachment {
+                @include opacity(.5);
+                display: inline-block;
+                position: relative;
+                vertical-align: top;
+
+                input {
+                    cursor: pointer;
+                    direction: ltr;
+                    filter: alpha(opacity=0);
+                    font-size: 23px;
+                    height: 100%;
+                    margin: 0;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 100%;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
             }
         }
 
-        .icon--attachment {
+
+        .icon--emoji-picker {
             @include opacity(.5);
-            display: inline-block;
+            @include single-transition(all, .15s);
+            cursor: pointer;
+            font-size: 19px;
+            margin-left: 7px;
             position: relative;
             vertical-align: top;
 
-            input {
+            &:hover,
-                cursor: pointer;
+            &:active {
-                direction: ltr;
-                filter: alpha(opacity=0);
-                font-size: 23px;
-                height: 100%;
-                margin: 0;
-                opacity: 0;
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 100%;
-            }
-
-            &:hover {
                 @include opacity(.9);
+                box-shadow: none;
+            }
+
+            .icon--attachment {
+                @include opacity(.5);
+                display: inline-block;
+                position: relative;
+                vertical-align: top;
+
+                input {
+                    cursor: pointer;
+                    direction: ltr;
+                    filter: alpha(opacity=0);
+                    font-size: 23px;
+                    height: 100%;
+                    margin: 0;
+                    opacity: 0;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 100%;
+                }
+
+                &:hover {
+                    @include opacity(.9);
+                }
             }
         }
-    }
 
 
-    .icon--emoji-picker {
+        .icon--emoji-picker {
-        @include opacity(.5);
-        @include single-transition(all, .15s);
-        cursor: pointer;
-        font-size: 19px;
-        margin-left: 7px;
-        position: relative;
-        vertical-align: top;
-
-        &:hover,
-        &:active {
-            @include opacity(.9);
-            box-shadow: none;
-        }
-
-        .icon--attachment {
             @include opacity(.5);
-            display: inline-block;
+            @include single-transition(all, .15s);
+            cursor: pointer;
+            font-size: 19px;
+            margin-left: 7px;
             position: relative;
             vertical-align: top;
 
-            input {
+            &:hover,
-                cursor: pointer;
+            &:active {
-                direction: ltr;
-                filter: alpha(opacity=0);
-                font-size: 23px;
-                height: 100%;
-                margin: 0;
-                opacity: 0;
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 100%;
-            }
-
-            &:hover {
                 @include opacity(.9);
+                box-shadow: none;
             }
         }
-    }
 
-
+        textarea {
-    .icon--emoji-picker {
-        @include opacity(.5);
-        @include single-transition(all, .15s);
-        cursor: pointer;
-        font-size: 19px;
-        margin-left: 7px;
-        position: relative;
-        vertical-align: top;
-
-        &:hover,
-        &:active {
-            @include opacity(.9);
             box-shadow: none;
         }
     }
 
-    textarea {
+    .post-create-footer {
-        box-shadow: none;
+        @include clearfix;
+        font-size: 13px;
+        padding: 3px 0 0;
+        position: relative;
+
+        .post-error {
+            @include opacity(.55);
+            display: inline-block;
+            font-size: .85em;
+            font-weight: normal;
+            margin-bottom: 0;
+            position: absolute;
+            top: 4px;
+        }
     }
-}
 
-.post-create-footer {
+    .msg-typing {
-    @include clearfix;
+        @include opacity(.7);
-    font-size: 13px;
+        display: block;
-    padding: 3px 0 0;
+        font-size: .95em;
-    position: relative;
+        height: 20px;
-
+        margin-bottom: 5px;
-    .post-error {
+        overflow: hidden;
-        @include opacity(.55);
+        text-overflow: ellipsis;
-        display: inline-block;
+        white-space: nowrap;
-        font-size: .85em;
-        font-weight: normal;
-        margin-bottom: 0;
-        position: absolute;
-        top: 4px;
     }
 }
 
-.msg-typing {
-    @include opacity(.7);
-    display: block;
-    font-size: .95em;
-    height: 20px;
-    margin-bottom: 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-}
-
 .post-list__table {
     display: table;
     height: 100%;