Merge branch 'MDL-63674-master' of git://github.com/rezaies/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / message.less
index 9bfff5b..5cff514 100644 (file)
     }
 }
 
-.messaging-area-container {
-    margin-bottom: 30px;
-
-    .status {
-        .online-text {
-            display: none;
-            color: #7d7;
-        }
-
-        .offline-text {
-            color: #ff6961;
-        }
-
-        &.online {
-            .online-text {
-                display: inherit;
-            }
-            .offline-text {
-                display: none;
-            }
-        }
-    }
-
-    a,
-    .btn.btn-link {
-        color: #4f94cd;
-    }
-
-    .messaging-area {
-        border: 1px solid #e3e3e3;
-        clear: both;
-        border-radius: 4px;
-
-        img {
-            max-width: 100%;
-        }
-
-        .contacts-area {
-            border-right: 1px solid #e3e3e3;
-            height: 600px;
-            @media (max-height: 670px) {
-                height: 500px;
-            }
-            width: 280px;
-            display: inline-block;
-            box-sizing: border-box;
-
-            &.searchfilter {
-
-                .searchtextarea {
-                    height: 80px;
-                }
-
-                .searcharea {
-                    height: 470px;
-                }
-            }
-
-            .searchtextarea {
-                padding: 5px;
-                text-align: center;
-                height: 50px;
-                box-sizing: border-box;
-                line-height: 50px;
-                background-color: #fff;
-                transition: background-color linear 0.2s;
-
-                input {
-                    background-color: #f5f5f5;
-                    border: 0;
-                    width: 90%;
-                    box-shadow: none;
-                    transition: background-color linear 0.2s;
-
-                    &:focus {
-                        box-shadow: none;
-                    }
-                }
-
-                &.searching {
-                    background-color: #f5f5f5;
-                    transition: background-color linear 0.2s;
-
-                    input {
-                        background-color: #fff;
-                        transition: background-color linear 0.2s;
-                    }
-                }
-
-                .searchfilterarea {
-                    line-height: 20px;
-                    cursor: pointer;
-
-                    .searchfilter {
-                        float: left;
-                    }
-
-                    .searchfilterdelete {
-                        float: left;
-                        margin-left: 5px;
-                    }
-                }
-            }
-
-            .searcharea {
-
-                .heading {
-                    text-align: center;
-                    border-top: 1px solid black;
-                    border-bottom: 1px solid black;
-                    font-size: 14px;
-                    font-weight: bold;
-                }
-
-                .course {
-                    text-align: center;
-
-                    &:hover {
-                        background-color: #4f94cd;
-                        color: #fff;
-                        border: none;
-                        cursor: pointer;
-                    }
-                }
-
-                .noresults {
-                    padding-top: 20px;
-                    text-align: center;
-                }
-            }
-
-            .contacts {
-                height: 500px;
-                @media (max-height: 670px) {
-                    height: 400px;
-                }
-                overflow-y: auto;
-                -webkit-overflow-scrolling: touch;
-
-                .nocontacts {
-                    padding-top: 20px;
-                    text-align: center;
-                }
-
-                .contact {
-                    height: 66px;
-                    cursor: pointer;
-                    border-bottom: 1px solid #e3e3e3;
-                    box-sizing: border-box;
-
-                    &.unread {
-                        background-color: #f1f1f1;
-
-                        .picture {
-                            border-color: #f1f1f1;
-                        }
-
-                        .information {
-                            width: 60%;
-                        }
-
-                        .unread-count-container {
-                            display: inline-block;
-                            width: 15%;
-                            float: left;
-                        }
-                    }
-
-                    &:hover {
-                        .setSelectedContact();
-                        background-color: #79b5e6;
-                    }
-
-                    &.selected {
-                        .setSelectedContact();
-                    }
-
-                    .picture {
-                        line-height: 66px;
-                        text-align: center;
-                        height: 66px;
-                        border-bottom: 1px solid #fff;
-                        width: 25%;
-                        float: left;
-                        display: inline-block;
-                        box-sizing: border-box;
-
-                        img {
-                            border-radius: 50%;
-                            height: 54px;
-                        }
-                    }
-
-                    .information {
-                        padding: 6px 0;
-                        height: 66px;
-                        width: 75%;
-                        float: left;
-                        display: inline-block;
-                        box-sizing: border-box;
-
-                        .name {
-                            font-weight: bold;
-
-                            img {
-                                vertical-align: baseline;
-                            }
-                        }
-
-                        .lastmessage {
-                            word-wrap: break-word;
-                            margin: 0;
-                            height: 40px;
-                            line-height: 17px;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            color: #a1a1a1;
-                            padding-right: 10px;
-                        }
-                    }
-
-                    .unread-count-container {
-                        display: none;
-                        line-height: 66px;
-                        text-align: center;
-                        box-sizing: border-box;
-                    }
-                }
-            }
-
-            .setSelectedTab() {
-                color: #4f94cd;
-            }
-
-            .tabs {
-                border-top: 1px solid #e3e3e3;
-                height: 50px;
-                box-sizing: border-box;
-
-                .tab {
-                    cursor: pointer;
-                    height: 100%;
-                    background-color: #f5f5f5;
-                    margin: 0;
-                    width: 50%;
-                    text-align: center;
-                    float: left;
-
-                    &:hover {
-                        .setSelectedTab();
-                    }
-
-                    .tabimage {
-                        height: 30px;
-                        line-height: 30px;
-
-                        img {
-                            height: 20px;
-                        }
-                    }
-                }
-
-                .tab.selected {
-                    .setSelectedTab();
-                }
-            }
-        }
-
-        .messages-area {
-            width: ~"calc(100% - 280px)";
-            height: 600px;
-            @media (max-height: 670px) {
-                height: 500px;
-            }
-            box-sizing: border-box;
-            margin: 0;
-            position: relative;
-            float: right;
-
-            .btn-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                padding-left: 15px;
-                font-weight: normal;
-
-                &.view-toggle {
-                    display: none;
-                }
-
-                &.delete-all {
-                    display: none;
-                }
-            }
-
-            .profile-header {
-                height: 50px;
-                line-height: 50px;
-                display: none;
-
-                .btn-container {
-                    display: block;
-
-                    .btn-link {
-                        padding: 0;
-                        line-height: inherit;
-                    }
-                }
-            }
-
-            .profile {
-                padding: 30px;
-                font-size: 16px;
-                height: 600px;
-                @media (max-height: 670px) {
-                    height: 500px;
-                }
-                box-sizing: border-box;
-                overflow-y: auto;
-                -webkit-overflow-scrolling: touch;
-
-                .user-container {
-                    height: 100px;
-
-                    .profile-picture {
-                        border-radius: 50%;
-                        max-height: 100px;
-                        display: inline-block;
-                    }
-
-                    .name-container {
-                        display: inline-block;
-                        vertical-align: top;
-                        margin-top: 20px;
-                        margin-left: 10px;
-
-                        .name {
-                            font-weight: bold;
-                            display: block;
-                        }
-
-                        .status {
-                            display: block;
-                            font-size: 14px;
-                        }
-                    }
-                }
-
-                .information {
-                    margin: 0;
-                    display: inline-block;
-                    float: right;
-                    margin-top: 20px;
-                    font-size: 14px;
-                    list-style: none;
-
-                    .name {
-                        display: inline-block;
-                        font-weight: bold;
-                        text-align: right;
-                        margin-right: 10px;
-                    }
-
-                    .value {
-                        display: inline-block;
-                    }
-                }
-
-                .actions {
-                    padding-top: 80px;
-
-                    .separator {
-                        border-bottom: 1px solid #e3e3e3;
-                        margin-bottom: 20px;
-                        padding-bottom: 5px;
-
-                        a {
-                            &.danger {
-                                color: #ff6961;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .messages-header {
-                height: 50px;
-                font-weight: bold;
-                line-height: 50px;
-                box-sizing: border-box;
-                border-bottom: 1px solid #e3e3e3;
-                text-align: center;
-                position: relative;
-
-                .btn-link {
-                    padding: 0;
-                    line-height: inherit;
-                }
-
-                .delete-instructions {
-                    display: none;
-                }
-
-                .name-container {
-                    padding-top: 9px;
-                    display: inline-block;
-
-                    .name {
-                        line-height: 20px;
-                    }
-
-                    .status {
-                        line-height: 12px;
-                        font-size: 12px;
-                        font-weight: normal;
-                    }
-                }
-
-                .actions {
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    padding-right: 15px;
-                    font-weight: normal;
-
-                    .cancel-messages-delete {
-                        display: none;
-                    }
-                }
-            }
-
-            .messages {
-                height: 500px;
-                @media (max-height: 670px) {
-                    height: 400px;
-                }
-                overflow-y: auto;
-                overflow-x: hidden;
-                -webkit-overflow-scrolling: touch;
-                box-sizing: border-box;
-                padding: 20px;
-
-                .blocktime {
-                    clear: both;
-                    text-align: center;
-                    color: #a1a1a1;
-                    font-size: 12px;
-                    margin: 5px 0;
-                }
-
-                .message {
-
-                    .deletemessagecheckbox {
-                        display: none;
-                        text-align: center;
-                        padding-top: 5px;
-                    }
-
-                    .content {
-                        border: 1px solid #e3e3e3;
-                        padding: 10px;
-                        margin-bottom: 5px;
-                        font-size: 12px;
-                        word-wrap: break-word;
-                        max-width: 55%;
-                        border-radius: 4px;
-                        position: relative;
-
-                        .text {
-                            display: block;
-
-                            p {
-                                margin: 0;
-                            }
-                        }
-
-                        .timesent {
-                            font-size: 10px;
-                            color: #a1a1a1;
-                            float: right;
-                        }
-                    }
-
-                    .content.left {
-                        float: left;
-                    }
-
-                    .content.right {
-                        float: right;
-                    }
-                }
-            }
-
-            .response {
-                display: table;
-                border-bottom-right-radius: 4px;
-                padding: 10px 10px 9px;
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                line-height: 28px;
-                text-align: center;
-                border-top: 1px solid #e3e3e3;
-                box-sizing: border-box;
-                background-color: #fff;
-                transition: background-color linear 0.2s;
-
-                .delete-confirmation {
-                    display: none;
-
-                    .btn.btn-link.confirm {
-                        border: 1px solid #4f94cd;
-                        border-radius: 4px;
-
-                        &:hover {
-                            background-color: #4f94cd;
-                            color: #fff;
-                            text-shadow: none;
-                        }
-                    }
-                }
-
-                .message-box {
-                    display: table-row;
-
-                    .message-text-container {
-                        display: table-cell;
-
-                        textarea {
-                            width: 100%;
-                            margin: 0;
-                            resize: none;
-                            border: none;
-                            box-shadow: none;
-                            box-sizing: border-box;
-                            background-color: #f5f5f5;
-                            transition: background-color linear 0.2s;
-
-                            &:focus {
-                                box-shadow: none;
-                            }
-                        }
-                    }
-
-                    .send-button-container {
-                        display: table-cell;
-                        width: 1px;
-                    }
-                }
-
-                &.messaging {
-                    background-color: #f5f5f5;
-                    transition: background-color linear 0.2s;
-
-                    .message-box {
-                        .message-text-container {
-                            textarea {
-                                background-color: #fff;
-                                transition: background-color linear 0.2s;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.editing {
-                .messages-header {
-                    .btn-container {
-                        &.view-all {
-                            display: none;
-                        }
-
-                        &.delete-all {
-                            display: block;
-                        }
-                    }
-
-                    .delete-instructions {
-                        display: block;
-                    }
-
-                    .name-container {
-                        display: none;
-                    }
-
-                    .actions {
-                        .messages-delete {
-                            display: none;
-                        }
-
-                        .cancel-messages-delete {
-                            display: block;
-                        }
-                    }
-                }
-
-                .messages {
-                    .message {
-                        cursor: pointer;
-
-                        &[aria-checked="true"] {
-                            .content {
-                                background-color: #4f94cd;
-                                border-color: #4f94cd;
-                                color: #fff;
-
-                                .timesent {
-                                    color: #fff;
-                                }
-                            }
-                        }
-
-                        &[aria-checked="false"] {
-                            .content {
-                                &:hover {
-                                    background-color: #79b5e6;
-                                    color: #fff;
-
-                                    .timesent {
-                                        color: #fff;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .response {
-                    .delete-confirmation {
-                        display: block;
-                    }
-
-                    .message-box {
-                        display: none;
-                    }
-                }
-            }
-        }
-    }
-}
-
 .preferences-container {
     .container-fluid {
         padding: 0;
 }
 
 @media (max-width: 979px) {
-    .messaging-area-container {
-        .messaging-area {
-            position: relative;
-            overflow: hidden;
-            height: 600px;
-            @media (max-height: 670px) {
-                height: 500px;
-            }
-
-            .messages-area {
-                .messages-header {
-                    .btn-container {
-                        &.view-toggle {
-                            display: block;
-                        }
-
-                        &.delete-all {
-                            display: none;
-                        }
-                    }
-                }
-
-                .profile-header {
-                    display: block;
-                }
-
-                .profile {
-                    height: 550px;
-                }
-
-                &.editing {
-                    .messages-header {
-                        .btn-container {
-                            &.view-toggle {
-                                display: none;
-                            }
-
-                            &.delete-all {
-                                display: block;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .contacts-area {
-                width: 100%;
-                border-right: none;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: auto;
-                bottom: auto;
-            }
-
-            .messages-area {
-                width: 100%;
-                position: absolute;
-                top: 0;
-                left: auto;
-                right: 0;
-                bottom: auto;
-            }
-
-            &.show-messages {
-                .contacts-area {
-                    left: -100%;
-                    opacity: 0;
-                    visibility: hidden;
-                    transition: left 0.25s, opacity 0.25s, visibility 0.25s;
-                }
-
-                .messages-area {
-                    right: 0;
-                    opacity: 1;
-                    visibility: visible;
-                    transition: right 0.25s, opacity 0.25s, visibility 0.25s;
-                }
-            }
-
-            &.hide-messages {
-                .contacts-area {
-                    left: 0;
-                    opacity: 1;
-                    visibility: visible;
-                    transition: left 0.25s, opacity 0.25s, visibility 0.25s;
-
-                    .contact {
-                        &.selected {
-                            background-color: inherit;
-                            color: inherit;
-                            border-bottom: 1px solid #e3e3e3;
-
-                            &:hover {
-                                .setSelectedContact();
-                                background-color: #79b5e6;
-                            }
-
-                            .picture {
-                                border-bottom: 1px solid #fff;
-                            }
-
-                            .information {
-                                .lastmessage {
-                                    color: #a1a1a1;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .messages-area {
-                    right: -100%;
-                    opacity: 0;
-                    visibility: hidden;
-                    transition: right 0.25s, opacity 0.25s, visibility 0.25s;
-                }
-            }
-        }
-    }
-
     .notification-area {
         position: relative;
         overflow: hidden;
 
 @message-drawer-width: 320px;
 
-.message-drawer {
-    position: fixed;
-    top: 0;
-    height: 100%;
-    right: 0;
-    width: @message-drawer-width;
-    z-index: 999;
+.message-app {
+
     background-color: @white;
-    box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
     display: flex;
     flex-direction: column;
 
+    &.drawer {
+        position: fixed;
+        right: 0;
+        width: @message-drawer-width;
+        z-index: 999;
+        box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
+    }
+
+    &.main {
+        height: 768px;
+    }
+
     @media (min-width: 980px) {
         .drawer-top {
             display: none;