mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-19 23:02:33 +00:00
56e6b854c2
spacing class helpers added(margin, padding), Normalize css added, Icon size class helpers added, slideInLeft, slideInRight animation added, Chat app almost completed.
111 lines
2.7 KiB
SCSS
111 lines
2.7 KiB
SCSS
@import "src/app/core/scss/fuse";
|
|
|
|
:host {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
|
|
.sidenav-header {
|
|
|
|
md-toolbar {
|
|
border-bottom: 1px solid rgba(0, 0, 0, .08);
|
|
|
|
.avatar-wrapper {
|
|
|
|
.avatar, .status {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 8px;
|
|
background: #FFFFFF;
|
|
font-size: 13px;
|
|
@include mat-elevation(1);
|
|
|
|
.icon {
|
|
margin: 0;
|
|
color: rgba(0, 0, 0, 0.54);
|
|
}
|
|
|
|
input {
|
|
padding-left: 12px;
|
|
height: 36px;
|
|
color: rgba(0, 0, 0, 0.54);
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidenav-content {
|
|
.contact-list, .chat-list {
|
|
|
|
.mat-subheader {
|
|
padding-left: 16px;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
color: mat-color($accent);
|
|
}
|
|
|
|
.contact {
|
|
white-space: normal;
|
|
text-align: left;
|
|
letter-spacing: .010em;
|
|
min-height: 88px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
padding: 16px;
|
|
font-weight: 400;
|
|
|
|
.avatar-wrapper {
|
|
|
|
.avatar {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
|
|
.contact-name {
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.contact-last-message {
|
|
line-height: 1.6em;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.54);
|
|
}
|
|
|
|
.contact-mood {
|
|
|
|
}
|
|
|
|
.unread-message-count {
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
background-color: mat-color($accent);
|
|
color: map-get($accent, default-contrast);
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-results-message {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 88px;
|
|
padding: 16px;
|
|
background: #FFFFFF;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|