.ucap-message-write { width: 100%; height: 100%; .message-receiver-list { width: 100%; height: 100px; } .message-write-body { [contenteditable] { } [contenteditable]:hover, [contenteditable]:focus { } [contenteditable]:hover { background: #fafafa; } [contenteditable]:focus { background: #efefef; } } .editor-length-invalid { color: crimson; } mat-card-actions { display: flex; width: 100%; .editor-actions-spacer { flex: 1 1 auto; } } } .message-content { display: flex; flex-flow: row; position: relative; width: 100%; .message-receiver-list { position: relative; width: 30%; height: 100%; margin-right: 10px; } .message-write-body { display: flex; flex: 1 1 auto; flex-flow: column; margin: 0; .ucap-message-write-editor { display: inline-block; width: 100%; height: 100%; padding: 10px; height: 280px; overflow: auto; } .message-option { display: flex; flex-flow: row; flex: 1 1 auto; height: 40px; .editor-tools { } .length { margin-left: auto; align-self: center; } } } } .mat-card-actions { margin: 0 0 20px; border-top: 1px solid #dddddd; .editor-actions { display: flex; flex-flow: row; justify-content: space-between; margin-left: auto; button { margin-left: 4px; } } } ::ng-deep .ucap-message-write { padding: 0; .add-row { display: flex; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dddddd; .mat-mini-fab { .mat-button-wrapper { padding: 0; .mat-icon { width: 40px; height: 40px; line-height: 40px; } .mat-fab__label { color: #212121; margin-left: 10px; } } } .receiver-sum { margin-left: auto; } } .mat-chip-list { .mat-chip-list-wrapper { max-height: 100px; overflow: auto; } } .message-title { width: 100%; margin-top: 10px; } }