[moodle.git] / theme / boost / scss / moodle / message.scss

/** The message area **/
@mixin setSelectedContact() {
    background-color: #4f94cd;
    color: #fff;
    border: none;

    .information {
        .lastmessage {
            color: #fff;
        }
    }
    .picture {
        border: none;
    }
}

.hidden {
    display: none;
}

.preferences-container {
    .container-fluid {
        padding: 0;

        .col-md-6 {
            min-height: 20px;
        }
    }
    .align-bottom {
        vertical-align: bottom;
    }
    .preference-table {
        border: 1px solid #ddd;

        thead {
            th {
                text-align: center;

                .config-warning {
                    display: none;
                }

                &.unconfigured {
                    .config-warning {
                        display: inline-block;
                    }
                }
            }
        }
        tr {
            td {
                &:not(:first-child) {
                    width: 150px;
                    text-align: center;
                }
                &:nth-child(even) {
                    background-color: #f7f7f7;
                }
            }
            th:nth-child(even) {
                background-color: #f7f7f7;
            }
        }
        .preference-row {
            .hover-tooltip-container {
                display: inline-block;
            }

            .preference-name {
                vertical-align: middle;
            }
            .disabled-message {
                text-align: center;
                height: 30px;
                line-height: 30px;
            }
            .preference-state {
                margin: 0;
                padding: 0;
                display: inline-block;
                vertical-align: middle;

                input[type="checkbox"]:checked + .preference-state-status-container {
                    background-color: #5cb85c;

                    .on-text {
                        display: inline-block;
                    }
                    .off-text {
                        display: none;
                    }
                }
                .preference-state-status-container {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 4px;
                    background-color: #d9534f;
                    color: #fff;
                    cursor: pointer;

                    .loading-icon {
                        display: none;
                    }
                    .on-text {
                        display: none;
                    }
                    .off-text {
                        display: inline-block;
                    }
                }
                &.loading {
                    input[type="checkbox"]:checked + .preference-state-status-container {
                        .on-text,
                        .off-text {
                            display: none;
                        }
                    }

                    .preference-state-status-container {
                        .on-text,
                        .off-text {
                            display: none;
                        }
                        .loading-icon {
                            display: block;
                        }
                    }
                }
            }
            &.loading {
                .preference-name {
                    .loading-icon {
                        display: block;
                    }
                }
            }
        }
    }
}

.disabled-message {
    display: none;
}

.disabled {
    .disabled-message {
        display: block;

        + form {
            display: none;
        }
    }
}

.general-settings-container {
    .loading-icon {
        display: none;
    }
    .loading {
        .loading-icon {
            display: inline-block;
        }
    }
    label {
        display: inline-block;
    }
}
.processor-container {
    position: relative;

    .loading-container {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);

        .vertical-align {
            height: 100%;
            width: 0%;
            display: inline-block;
            vertical-align: middle;
        }
    }

    &.loading {
        .loading-container {
            display: block;
        }
    }
}

.preferences-page-container {
    .checkbox-container {
        margin: 30px 5px;
        line-height: 20px;

        input {
            line-height: 20px;
            margin: 0;
        }

        .loading-icon {
            display: none;
        }

        &.loading {
            .loading-icon {
                display: inline-block;
            }
        }
    }
}

.notification-area {
    height: 600px;
    @media (max-height: 670px) {
        height: 500px;
    }
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 30px;
    border: 1px solid #e3e3e3;

    .control-area {
        box-sizing: border-box;
        display: inline-block;
        width: 300px;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid #e3e3e3;

        .content {
            position: relative;

            .content-item-container {
                cursor: pointer;
            }

            &:empty + .empty-text {
                display: block;
            }
        }

        .loading-icon {
            display: none;
        }

        .empty-text {
            display: none;
            text-align: center;
            padding-top: 20px;
        }

        &.loading {
            .loading-icon {
                display: block;
                text-align: center;
                box-sizing: border-box;
                padding: 5px;
            }

            .content:empty + .empty-text {
                display: none;
            }
        }
    }

    .content-area {
        box-sizing: border-box;
        display: inline-block;
        width: calc(100% - 300px);
        float: right;

        .toggle-mode {
            display: none;
        }

        .header {
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1px solid #e3e3e3;
            padding: 5px;

            .image-container {
                display: inline-block;
                height: 25px;
                width: 24px;
                float: left;
            }

            .subject-container {
                display: inline-block;
                max-width: calc(100% - 24px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 25px;
                padding-left: 5px;
                box-sizing: border-box;
            }

            .timestamp {
                font-size: 10px;
                line-height: 10px;
                margin: 0;
                color: #666;
                margin-left: 30px;
            }

            &:empty {
                display: none;
            }
        }

        > .content {
            height: 500px;
            @media (max-height: 670px) {
                height: 400px;
            }
            box-sizing: border-box;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: 15px;

            &:empty {
                display: none;

                & + .empty-text {
                    display: block;
                    text-align: center;
                    padding-top: 100px;
                }
            }
        }

        .empty-text {
            display: none;
        }

        .footer {
            height: 50px;
            box-sizing: border-box;
            text-align: center;

            a {
                line-height: 50px;
            }

            &:empty {
                display: none;
            }
        }
    }
}

@media (max-width: 979px) {
    .notification-area {
        position: relative;
        overflow: hidden;

        .control-area {
            border-right: none;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            visibility: visible;
            transition: left 0.25s;
        }

        .content-area {
            width: 100%;
            position: absolute;
            top: 0;
            right: -100%;
            opacity: 0;
            visibility: hidden;
            transition: right 0.25s, opacity 0.25s, visibility 0.25s;

            .toggle-mode {
                display: inline-block;
                float: left;
                width: 70px;
                height: 50px;
                line-height: 50px;
                box-sizing: border-box;
                border-right: 1px solid #e3e3e3;
                border-bottom: 1px solid #e3e3e3;
            }

            .header {
                display: inline-block;
                width: calc(100% - 70px);
            }
        }

        &.show-content-area {
            .control-area {
                left: -100%;
                opacity: 0;
                visibility: hidden;
                transition: left 0.25s, opacity 0.25s, visibility 0.25s;
            }

            .content-area {
                right: 0;
                opacity: 1;
                visibility: visible;
                transition: right 0.25s;
            }
        }
    }
}

$message-drawer-width: 320px;

.message-app {
    display: flex;
    flex-direction: column;
    @include transition();

    &.drawer {
        z-index: $zindex-sticky;
        position: fixed;
        top: $navbar-height;
        right: 0;
        height: calc(100% - #{$navbar-height});
        width: $message-drawer-width;
        box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);

        .body-container {
            & > * {
                position: absolute;
            }
        }
    }

    &.main {
        height: 768px;
    }

    &.hidden {
        display: block;
        right: $message-drawer-width * -1;
    }

    .header-container {
        flex-shrink: 0;
    }

    .body-container {
        flex: 1;
        overflow: hidden;

        & > * {
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }
    }

    .footer-container {
        flex-shrink: 0;
        overflow-x: hidden;

        textarea {
            direction: ltr;
        }
    }

    .matchtext {
        background-color: lighten($primary, 40%);
        color: $body-color;
        height: 1.5rem;
    }
    .contact-status {
        position: absolute;
        left: 39px;
        top: 39px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        &.online {
            border: 1px solid $body-bg;
            background-color: $green;
        }
    }

    .message {
        p {
            margin: 0;
        }
    }

    .clickable {
        cursor: pointer;

        &:hover {
            box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, .1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
        }
    }

    a,
    .btn-link {
        color: inherit;
    }
    .btn-link {
        &:hover,
        &:focus {
            background-color: rgba($black, .035);
            text-decoration: none;
        }
    }

    .icon {
        margin-right: 0;
    }

    .overview-section-toggle {
        .collapsed-icon-container {
            display: none;
        }
        .expanded-icon-container {
            display: inline-block;
        }

        &.collapsed {
            .collapsed-icon-container {
                display: inline-block;
            }
            .expanded-icon-container {
                display: none;
            }
        }
    }

    .btn.btn-link.btn-icon {
        height: $icon-width;
        width: $icon-width;
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;

        @include hover-focus {
            background-color: $gray-200;
        }

        @each $size, $length in $iconsizes {
            &.icon-size-#{$size} {
                height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
                width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
            }
        }
    }

    .view-overview-body {
        .section {
            display: block;

            &.expanded {
                display: flex;
            }
        }
    }

    .view-conversation {
        .content-message-container {
            img {
                max-width: 100%;
            }
        }
    }
    .list-group .list-group-item {
        border-left: 0;
        border-right: 0;
        &:first-child {
            border-top: 0;
        }
        &:last-child {
            border-bottom: 0;
        }
    }
    .last-message {
        min-height: 1.5rem;
    }
    .section {
        .collapsing {
            overflow: hidden;
        }
    }

    .lazy-load-list {
        overflow-y: auto;
    }
}

.dir-rtl {
    .message-drawer {
        box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
    }
}
Commit	Line	Data
963ba889 RW	1	/ The message area /
	2	@mixin setSelectedContact() {
	3	background-color: #4f94cd;
	4	color: #fff;
	5	border: none;
	6
	7	.information {
	8	.lastmessage {
	9	color: #fff;
	10	}
	11	}
	12	.picture {
	13	border: none;
	14	}
536f0460	15	}
f4143537	16
963ba889 RW	17	.hidden {
963ba889 RW	18	display: none;
536f0460	19	}
f4143537	20
963ba889 RW	21	.preferences-container {
	22	.container-fluid {
	23	padding: 0;
	24
5edb0fbc	25	.col-md-6 {
963ba889 RW	26	min-height: 20px;
	27	}
	28	}
	29	.align-bottom {
	30	vertical-align: bottom;
	31	}
	32	.preference-table {
	33	border: 1px solid #ddd;
	34
	35	thead {
	36	th {
	37	text-align: center;
	38
	39	.config-warning {
	40	display: none;
	41	}
	42
	43	&.unconfigured {
	44	.config-warning {
	45	display: inline-block;
	46	}
	47	}
	48	}
	49	}
	50	tr {
	51	td {
	52	&:not(:first-child) {
	53	width: 150px;
	54	text-align: center;
	55	}
	56	&:nth-child(even) {
	57	background-color: #f7f7f7;
	58	}
	59	}
	60	th:nth-child(even) {
	61	background-color: #f7f7f7;
	62	}
	63	}
	64	.preference-row {
	65	.hover-tooltip-container {
	66	display: inline-block;
	67	}
	68
	69	.preference-name {
	70	vertical-align: middle;
	71	}
	72	.disabled-message {
	73	text-align: center;
	74	height: 30px;
	75	line-height: 30px;
	76	}
	77	.preference-state {
	78	margin: 0;
	79	padding: 0;
	80	display: inline-block;
	81	vertical-align: middle;
	82
	83	input[type="checkbox"]:checked + .preference-state-status-container {
	84	background-color: #5cb85c;
	85
	86	.on-text {
	87	display: inline-block;
	88	}
	89	.off-text {
90	display: none;
91	}
92	}
93	.preference-state-status-container {
94	width: 30px;
95	height: 30px;
96	line-height: 30px;
97	text-align: center;
98	border-radius: 4px;
99	background-color: #d9534f;
100	color: #fff;
101	cursor: pointer;
102
103	.loading-icon {
104	display: none;
105	}
106	.on-text {
107	display: none;
108	}
109	.off-text {
110	display: inline-block;
111	}
112	}
113	&.loading {
114	input[type="checkbox"]:checked + .preference-state-status-container {
115	.on-text,
116	.off-text {
117	display: none;
118	}
119	}
120
121	.preference-state-status-container {
122	.on-text,
123	.off-text {
124	display: none;
125	}
126	.loading-icon {
127	display: block;
128	}
129	}
130	}
131	}
132	&.loading {
133	.preference-name {
134	.loading-icon {
135	display: block;
136	}
137	}
138	}
139	}
140	}
141	}
142
143	.disabled-message {
f4143537	144	display: none;
536f0460	145	}
f4143537	146
963ba889 RW	147	.disabled {
	148	.disabled-message {
	149	display: block;
	150
	151	+ form {
	152	display: none;
	153	}
536f0460	154	}
963ba889	155	}
f4143537	156
963ba889 RW	157	.general-settings-container {
	158	.loading-icon {
	159	display: none;
	160	}
	161	.loading {
	162	.loading-icon {
	163	display: inline-block;
	164	}
	165	}
	166	label {
	167	display: inline-block;
536f0460	168	}
963ba889 RW	169	}
	170	.processor-container {
	171	position: relative;
f4143537	172
963ba889 RW	173	.loading-container {
	174	display: none;
	175	position: absolute;
536f0460 DW	176	width: 100%;
536f0460 DW	177	height: 100%;
963ba889 RW	178	text-align: center;
	179	background-color: rgba(255, 255, 255, 0.5);
	180
	181	.vertical-align {
	182	height: 100%;
	183	width: 0%;
	184	display: inline-block;
	185	vertical-align: middle;
	186	}
536f0460	187	}
f4143537	188
963ba889 RW	189	&.loading {
	190	.loading-container {
	191	display: block;
	192	}
536f0460	193	}
963ba889	194	}
f4143537	195
963ba889 RW	196	.preferences-page-container {
	197	.checkbox-container {
	198	margin: 30px 5px;
	199	line-height: 20px;
	200
	201	input {
	202	line-height: 20px;
	203	margin: 0;
	204	}
	205
	206	.loading-icon {
	207	display: none;
	208	}
	209
	210	&.loading {
	211	.loading-icon {
	212	display: inline-block;
	213	}
	214	}
	215	}
	216	}
	217
	218	.notification-area {
	219	height: 600px;
c3e72743 DW	220	@media (max-height: 670px) {
	221	height: 500px;
	222	}
963ba889 RW	223	box-sizing: border-box;
	224	border-radius: 4px;
	225	margin-bottom: 30px;
	226	border: 1px solid #e3e3e3;
	227
	228	.control-area {
	229	box-sizing: border-box;
	230	display: inline-block;
	231	width: 300px;
536f0460	232	height: 100%;
963ba889 RW	233	overflow: auto;
	234	-webkit-overflow-scrolling: touch;
	235	border-right: 1px solid #e3e3e3;
	236
	237	.content {
	238	position: relative;
	239
	240	.content-item-container {
	241	cursor: pointer;
	242	}
	243
	244	&:empty + .empty-text {
	245	display: block;
	246	}
	247	}
	248
	249	.loading-icon {
	250	display: none;
	251	}
	252
	253	.empty-text {
	254	display: none;
	255	text-align: center;
	256	padding-top: 20px;
	257	}
	258
	259	&.loading {
	260	.loading-icon {
	261	display: block;
	262	text-align: center;
	263	box-sizing: border-box;
	264	padding: 5px;
	265	}
	266
	267	.content:empty + .empty-text {
	268	display: none;
	269	}
	270	}
536f0460	271	}
f4143537	272
963ba889 RW	273	.content-area {
	274	box-sizing: border-box;
	275	display: inline-block;
	276	width: calc(100% - 300px);
	277	float: right;
f4143537	278
963ba889 RW	279	.toggle-mode {
	280	display: none;
	281	}
	282
	283	.header {
	284	height: 50px;
	285	box-sizing: border-box;
	286	border-bottom: 1px solid #e3e3e3;
536f0460	287	padding: 5px;
963ba889 RW	288
	289	.image-container {
	290	display: inline-block;
	291	height: 25px;
	292	width: 24px;
	293	float: left;
	294	}
	295
	296	.subject-container {
	297	display: inline-block;
	298	max-width: calc(100% - 24px);
	299	white-space: nowrap;
	300	overflow: hidden;
	301	text-overflow: ellipsis;
	302	height: 25px;
	303	padding-left: 5px;
	304	box-sizing: border-box;
	305	}
	306
	307	.timestamp {
	308	font-size: 10px;
	309	line-height: 10px;
	310	margin: 0;
	311	color: #666;
	312	margin-left: 30px;
	313	}
	314
	315	&:empty {
	316	display: none;
	317	}
	318	}
	319
c22141bd	320	> .content {
963ba889	321	height: 500px;
c3e72743 DW	322	@media (max-height: 670px) {
	323	height: 400px;
	324	}
963ba889 RW	325	box-sizing: border-box;
	326	overflow: auto;
	327	-webkit-overflow-scrolling: touch;
	328	padding: 15px;
	329
	330	&:empty {
	331	display: none;
	332
	333	& + .empty-text {
	334	display: block;
	335	text-align: center;
	336	padding-top: 100px;
	337	}
	338	}
	339	}
	340
	341	.empty-text {
	342	display: none;
	343	}
	344
	345	.footer {
	346	height: 50px;
	347	box-sizing: border-box;
	348	text-align: center;
	349
	350	a {
	351	line-height: 50px;
	352	}
	353
	354	&:empty {
	355	display: none;
	356	}
536f0460 DW	357	}
536f0460 DW	358	}
963ba889	359	}
f4143537	360
963ba889	361	@media (max-width: 979px) {
963ba889 RW	362	.notification-area {
	363	position: relative;
	364	overflow: hidden;
	365
	366	.control-area {
	367	border-right: none;
	368	width: 100%;
	369	position: absolute;
	370	top: 0;
	371	left: 0;
	372	opacity: 1;
	373	visibility: visible;
	374	transition: left 0.25s;
	375	}
	376
	377	.content-area {
	378	width: 100%;
	379	position: absolute;
	380	top: 0;
	381	right: -100%;
	382	opacity: 0;
	383	visibility: hidden;
	384	transition: right 0.25s, opacity 0.25s, visibility 0.25s;
	385
	386	.toggle-mode {
	387	display: inline-block;
	388	float: left;
	389	width: 70px;
	390	height: 50px;
	391	line-height: 50px;
	392	box-sizing: border-box;
	393	border-right: 1px solid #e3e3e3;
	394	border-bottom: 1px solid #e3e3e3;
	395	}
	396
	397	.header {
	398	display: inline-block;
	399	width: calc(100% - 70px);
	400	}
	401	}
	402
	403	&.show-content-area {
	404	.control-area {
	405	left: -100%;
	406	opacity: 0;
	407	visibility: hidden;
	408	transition: left 0.25s, opacity 0.25s, visibility 0.25s;
	409	}
	410
	411	.content-area {
	412	right: 0;
	413	opacity: 1;
	414	visibility: visible;
	415	transition: right 0.25s;
	416	}
	417	}
	418	}
	419	}
	420
5005d8cf RW	421	$message-drawer-width: 320px;
5005d8cf RW	422
fd998fc6	423	.message-app {
5005d8cf RW	424	display: flex;
	425	flex-direction: column;
	426	@include transition();
	427
fd998fc6 MN	428	&.drawer {
	429	z-index: $zindex-sticky;
	430	position: fixed;
	431	top: $navbar-height;
	432	right: 0;
	433	height: calc(100% - #{$navbar-height});
	434	width: $message-drawer-width;
	435	box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
	436
	437	.body-container {
	438	& > * {
	439	position: absolute;
	440	}
	441	}
	442	}
	443
	444	&.main {
	445	height: 768px;
	446	}
	447
5005d8cf RW	448	&.hidden {
	449	display: block;
	450	right: $message-drawer-width * -1;
	451	}
	452
	453	.header-container {
	454	flex-shrink: 0;
	455	}
	456
	457	.body-container {
	458	flex: 1;
	459	overflow: hidden;
	460
	461	& > * {
5005d8cf RW	462	right: 0;
	463	left: 0;
	464	top: 0;
	465	bottom: 0;
5005d8cf RW	466	}
	467	}
	468
	469	.footer-container {
	470	flex-shrink: 0;
	471	overflow-x: hidden;
87dc257d SR	472
	473	textarea {
	474	direction: ltr;
	475	}
5005d8cf RW	476	}
	477
	478	.matchtext {
	479	background-color: lighten($primary, 40%);
	480	color: $body-color;
	481	height: 1.5rem;
	482	}
	483	.contact-status {
	484	position: absolute;
	485	left: 39px;
	486	top: 39px;
	487	width: 10px;
	488	height: 10px;
	489	border-radius: 50%;
	490	&.online {
	491	border: 1px solid $body-bg;
	492	background-color: $green;
	493	}
	494	}
	495
	496	.message {
	497	p {
	498	margin: 0;
	499	}
	500	}
	501
	502	.clickable {
	503	cursor: pointer;
	504
	505	&:hover {
	506	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, .1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
	507	}
	508	}
	509
	510	a,
	511	.btn-link {
	512	color: inherit;
	513	}
dfd6eec2 BB	514	.btn-link {
	515	&:hover,
	516	&:focus {
347fb901	517	background-color: rgba($black, .035);
dfd6eec2 BB	518	text-decoration: none;
	519	}
	520	}
5005d8cf RW	521
	522	.icon {
	523	margin-right: 0;
	524	}
	525
	526	.overview-section-toggle {
	527	.collapsed-icon-container {
	528	display: none;
	529	}
	530	.expanded-icon-container {
	531	display: inline-block;
	532	}
	533
	534	&.collapsed {
	535	.collapsed-icon-container {
	536	display: inline-block;
	537	}
	538	.expanded-icon-container {
	539	display: none;
	540	}
	541	}
	542	}
	543
	544	.btn.btn-link.btn-icon {
	545	height: $icon-width;
	546	width: $icon-width;
	547	padding: 0;
	548	border-radius: 50%;
	549	flex-shrink: 0;
	550
	551	@include hover-focus {
	552	background-color: $gray-200;
	553	}
	554
	555	@each $size, $length in $iconsizes {
	556	&.icon-size-#{$size} {
	557	height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
	558	width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
	559	}
	560	}
	561	}
	562
	563	.view-overview-body {
	564	.section {
	565	display: block;
	566
	567	&.expanded {
	568	display: flex;
	569	}
	570	}
	571	}
	572
	573	.view-conversation {
	574	.content-message-container {
	575	img {
	576	max-width: 100%;
	577	}
	578	}
	579	}
051c675f BB	580	.list-group .list-group-item {
	581	border-left: 0;
	582	border-right: 0;
	583	&:first-child {
	584	border-top: 0;
	585	}
	586	&:last-child {
	587	border-bottom: 0;
	588	}
	589	}
4d446b88 BB	590	.last-message {
	591	min-height: 1.5rem;
	592	}
4631749c	593	.section {
4631749c BB	594	.collapsing {
	595	overflow: hidden;
	596	}
	597	}
c3377415 RW	598
	599	.lazy-load-list {
	600	overflow-y: auto;
	601	}
5005d8cf RW	602	}
	603
	604	.dir-rtl {
	605	.message-drawer {
	606	box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
	607	}
	608	}