Y-SLD/assets/playkit/examples/css/apps/messaging.css

191 lines
12 KiB
CSS

.app-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: 'Raleway', sans-serif;
width: 100%;
border: 1px solid #eceeef;
border-radius: 0.25rem; }
.app-main {
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-left: 1px solid #eceeef;
background: #f7f7f9; }
.app-main-header {
height: 90px;
background: #fff;
padding: 1.5rem;
border-bottom: 1px solid #eceeef; }
.app-main-heading {
margin-bottom: 0;
line-height: 40px; }
.app-main-content {
-webkit-box-flex: 2;
-ms-flex: 2 2 0%;
flex: 2 2 0%; }
.app-panel {
height: calc(100% - 66px);
top: 66px;
position: fixed;
width: 340px;
left: -340px;
right: auto;
z-index: 997;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #fff;
-webkit-transition: left .5s, top .5s;
transition: left .5s, top .5s;
-webkit-box-flex: 0;
-ms-flex: 0 0 340px;
flex: 0 0 340px;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08); }
.app-panel.show {
left: 0; }
body.navbar-collapse-in .app-panel {
top: 132px; }
body.menubar-open .app-panel {
left: -340px; }
@media (min-width: 768px) {
.app-panel {
position: static;
height: auto;
box-shadow: none; } }
.app-panel-inner {
height: auto; }
@media (max-width: 767px) {
.app-panel-inner {
height: calc(100% - 90px);
overflow: hidden; } }
.app-panel-toggle {
position: absolute;
top: 25%;
right: -30px;
display: block;
width: 30px;
height: 50px;
background: #fff;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08); }
.app-panel-toggle .fa {
text-align: center;
line-height: 50px;
width: 25px;
font-size: 1.13rem; }
.app-panel-toggle .fa-chevron-left {
display: none; }
.show .app-panel-toggle .fa-chevron-left {
display: block; }
.show .app-panel-toggle .fa-chevron-right {
display: none; }
@media (min-width: 768px) {
.app-panel-toggle {
display: none; } }
.panel-item {
border: 1px solid #eceeef;
border-radius: 0.25rem;
margin-bottom: .5rem;
padding: .75rem; }
.panel-item:last-child {
margin-bottom: 0; }
a.panel-item {
display: block; }
.app-search {
position: relative;
height: 90px;
padding: 1.5rem;
border-bottom: 1px solid #eceeef; }
.app-search .search-field {
border: none;
outline: none;
box-shadow: none;
width: 100%;
height: 40px;
padding: .75rem;
border-radius: 500px;
border: 1px solid #eceeef; }
.app-search .search-icon {
position: absolute;
top: 2.25rem;
right: 2.25rem; }
.app-messaging .app-main-content {
max-height: 300px; }
@media (min-width: 768px) {
.app-messaging .app-main-content .scroll-container {
max-height: 300px; }
.app-messaging .app-panel-inner .scroll-container {
max-height: 400px; } }
.contacts-list .media.active, .contacts-list .media:hover {
border-color: #60c84c; }
.contacts-list .connection-methods .btn {
border-color: #eceeef; }
.contacts-list .connection-methods .btn:hover, .contacts-list .connection-methods .btn.active {
border-color: #60c84c;
background: #60c84c; }
.messages-list .msg {
padding: 1rem;
border: 1px solid #eceeef;
border-radius: 0.25rem;
margin-bottom: 1.5rem; }
.messages-list .msg:last-child {
margin-bottom: 0; }
.messages-list .msg-in {
background: #fff; }
.messages-list .msg-out {
background: #eceeef; }
#app-messaging-form {
border-top: 1px solid #eceeef;
background: #fff;
padding: 1.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
#app-messaging-form .msg-form-field,
#app-messaging-form .msg-form-submit {
border: none;
outline: none;
box-shadow: none;
height: 51px; }
#app-messaging-form .msg-form-field {
line-height: 50px;
font-size: 1.25rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%; }
#app-messaging-form .msg-form-submit {
-webkit-box-flex: 0;
-ms-flex: 0 0 150px;
flex: 0 0 150px; }
/*# sourceMappingURL=data:application/json;charset=utf8;base64,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QjtFQUNoQixxQkFBYztFQUFkLHFCQUFjO0VBQWQsY0FBYyxFQUFFO0VBQ2hCOztJQUVFLGFBQWE7SUFDYixjQUFjO0lBQ2QsaUJBQWlCO0lBQ2pCLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGtCQUFrQjtJQUNsQixtQkFBbUI7SUFDbkIsb0JBQWE7UUFBYixpQkFBYTtZQUFiLGFBQWEsRUFBRTtFQUNqQjtJQUNFLG9CQUFnQjtRQUFoQixvQkFBZ0I7WUFBaEIsZ0JBQWdCLEVBQUUiLCJmaWxlIjoiYXBwcy9tZXNzYWdpbmcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFwcC13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZm9udC1mYW1pbHk6ICdSYWxld2F5Jywgc2Fucy1zZXJpZjtcbiAgd2lkdGg6IDEwMCU7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07IH1cblxuLmFwcC1tYWluIHtcbiAgZmxleDogMSAxIDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJhY2tncm91bmQ6ICNmN2Y3Zjk7IH1cblxuLmFwcC1tYWluLWhlYWRlciB7XG4gIGhlaWdodDogOTBweDtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgcGFkZGluZzogMS41cmVtO1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2VjZWVlZjsgfVxuXG4uYXBwLW1haW4taGVhZGluZyB7XG4gIG1hcmdpbi1ib3R0b206IDA7XG4gIGxpbmUtaGVpZ2h0OiA0MHB4OyB9XG5cbi5hcHAtbWFpbi1jb250ZW50IHtcbiAgZmxleDogMiAyIDAlOyB9XG5cbi5hcHAtcGFuZWwge1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDY2cHgpO1xuICB0b3A6IDY2cHg7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgd2lkdGg6IDM0MHB4O1xuICBsZWZ0OiAtMzQwcHg7XG4gIHJpZ2h0OiBhdXRvO1xuICB6LWluZGV4OiA5OTc7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIHRyYW5zaXRpb246IGxlZnQgLjVzLCB0b3AgLjVzO1xuICBmbGV4OiAwIDAgMzQwcHg7XG4gIGJveC1zaGFkb3c6IDJweCAwIDRweCByZ2JhKDAsIDAsIDAsIDAuMDgpOyB9XG4gIC5hcHAtcGFuZWwuc2hvdyB7XG4gICAgbGVmdDogMDsgfVxuICBib2R5Lm5hdmJhci1jb2xsYXBzZS1pbiAuYXBwLXBhbmVsIHtcbiAgICB0b3A6IDEzMnB4OyB9XG4gIGJvZHkubWVudWJhci1vcGVuIC5hcHAtcGFuZWwge1xuICAgIGxlZnQ6IC0zNDBweDsgfVxuICBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgICAuYXBwLXBhbmVsIHtcbiAgICAgIHBvc2l0aW9uOiBzdGF0aWM7XG4gICAgICBoZWlnaHQ6IGF1dG87XG4gICAgICBib3gtc2hhZG93OiBub25lOyB9IH1cblxuLmFwcC1wYW5lbC1pbm5lciB7XG4gIGhlaWdodDogYXV0bzsgfVxuICBAbWVkaWEgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgICAuYXBwLXBhbmVsLWlubmVyIHtcbiAgICAgIGhlaWdodDogY2FsYygxMDAlIC0gOTBweCk7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuOyB9IH1cblxuLmFwcC1wYW5lbC10b2dnbGUge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMjUlO1xuICByaWdodDogLTMwcHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICB3aWR0aDogMzBweDtcbiAgaGVpZ2h0OiA1MHB4O1xuICBiYWNrZ3JvdW5kOiAjZmZmO1xuICBib3gtc2hhZG93OiAycHggMnB4IDZweCByZ2JhKDAsIDAsIDAsIDAuMDgpOyB9XG4gIC5hcHAtcGFuZWwtdG9nZ2xlIC5mYSB7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIGxpbmUtaGVpZ2h0OiA1MHB4O1xuICAgIHdpZHRoOiAyNXB4O1xuICAgIGZvbnQtc2l6ZTogMS4xM3JlbTsgfVxuICAuYXBwLXBhbmVsLXRvZ2dsZSAuZmEtY2hldnJvbi1sZWZ0IHtcbiAgICBkaXNwbGF5OiBub25lOyB9XG4gIC5zaG93IC5hcHAtcGFuZWwtdG9nZ2xlIC5mYS1jaGV2cm9uLWxlZnQge1xuICAgIGRpc3BsYXk6IGJsb2NrOyB9XG4gIC5zaG93IC5hcHAtcGFuZWwtdG9nZ2xlIC5mYS1jaGV2cm9uLXJpZ2h0IHtcbiAgICBkaXNwbGF5OiBub25lOyB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5hcHAtcGFuZWwtdG9nZ2xlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7IH0gfVxuXG4ucGFuZWwtaXRlbSB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IC41cmVtO1xuICBwYWRkaW5nOiAuNzVyZW07IH1cbiAgLnBhbmVsLWl0ZW06bGFzdC1jaGlsZCB7XG4gICAgbWFyZ2luLWJvdHRvbTogMDsgfVxuXG5hLnBhbmVsLWl0ZW0ge1xuICBkaXNwbGF5OiBibG9jazsgfVxuXG4uYXBwLXNlYXJjaCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiA5MHB4O1xuICBwYWRkaW5nOiAxLjVyZW07XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZWNlZWVmOyB9XG4gIC5hcHAtc2VhcmNoIC5zZWFyY2gtZmllbGQge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiA0MHB4O1xuICAgIHBhZGRpbmc6IC43NXJlbTtcbiAgICBib3JkZXItcmFkaXVzOiA1MDBweDtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjZWNlZWVmOyB9XG4gIC5hcHAtc2VhcmNoIC5zZWFyY2gtaWNvbiB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMi4yNXJlbTtcbiAgICByaWdodDogMi4yNXJlbTsgfVxuXG4uYXBwLW1lc3NhZ2luZyAuYXBwLW1haW4tY29udGVudCB7XG4gIG1heC1oZWlnaHQ6IDMwMHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAuYXBwLW1lc3NhZ2luZyAuYXBwLW1haW4tY29udGVudCAuc2Nyb2xsLWNvbnRhaW5lciB7XG4gICAgbWF4LWhlaWdodDogMzAwcHg7IH1cbiAgLmFwcC1tZXNzYWdpbmcgLmFwcC1wYW5lbC1pbm5lciAuc2Nyb2xsLWNvbnRhaW5lciB7XG4gICAgbWF4LWhlaWdodDogNDAwcHg7IH0gfVxuXG4uY29udGFjdHMtbGlzdCAubWVkaWEuYWN0aXZlLCAuY29udGFjdHMtbGlzdCAubWVkaWE6aG92ZXIge1xuICBib3JkZXItY29sb3I6ICM2MGM4NGM7IH1cblxuLmNvbnRhY3RzLWxpc3QgLmNvbm5lY3Rpb24tbWV0aG9kcyAuYnRuIHtcbiAgYm9yZGVyLWNvbG9yOiAjZWNlZWVmOyB9XG4gIC5jb250YWN0cy1saXN0IC5jb25uZWN0aW9uLW1ldGhvZHMgLmJ0bjpob3ZlciwgLmNvbnRhY3RzLWxpc3QgLmNvbm5lY3Rpb24tbWV0aG9kcyAuYnRuLmFjdGl2ZSB7XG4gICAgYm9yZGVyLWNvbG9yOiAjNjBjODRjO1xuICAgIGJhY2tncm91bmQ6ICM2MGM4NGM7IH1cblxuLm1lc3NhZ2VzLWxpc3QgLm1zZyB7XG4gIHBhZGRpbmc6IDFyZW07XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IDEuNXJlbTsgfVxuICAubWVzc2FnZXMtbGlzdCAubXNnOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ib3R0b206IDA7IH1cblxuLm1lc3NhZ2VzLWxpc3QgLm1zZy1pbiB7XG4gIGJhY2tncm91bmQ6ICNmZmY7IH1cblxuLm1lc3NhZ2VzLWxpc3QgLm1zZy1vdXQge1xuICBiYWNrZ3JvdW5kOiAjZWNlZWVmOyB9XG5cbiNhcHAtbWVzc2FnaW5nLWZvcm0ge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgI2VjZWVlZjtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgcGFkZGluZzogMS41cmVtO1xuICBkaXNwbGF5OiBmbGV4OyB9XG4gICNhcHAtbWVzc2FnaW5nLWZvcm0gLm1zZy1mb3JtLWZpZWxkLFxuICAjYXBwLW1lc3NhZ2luZy1mb3JtIC5tc2ctZm9ybS1zdWJtaXQge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgaGVpZ2h0OiA1MXB4OyB9XG4gICNhcHAtbWVzc2FnaW5nLWZvcm0gLm1zZy1mb3JtLWZpZWxkIHtcbiAgICBsaW5lLWhlaWdodDogNTBweDtcbiAgICBmb250LXNpemU6IDEuMjVyZW07XG4gICAgZmxleDogMSAxIDAlOyB9XG4gICNhcHAtbWVzc2FnaW5nLWZvcm0gLm1zZy1mb3JtLXN1Ym1pdCB7XG4gICAgZmxleDogMCAwIDE1MHB4OyB9XG4iXX0= */