design 변경
This commit is contained in:
parent
2e83971c18
commit
f747490a7c
|
@ -1,11 +1,4 @@
|
|||
<div class="container">
|
||||
<!--<div>
|
||||
LG ucap
|
||||
<button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
|
||||
<mat-icon>chat</mat-icon>
|
||||
</button>
|
||||
</div>-->
|
||||
<!-- <div class="logo">로고</div> -->
|
||||
<mat-tab-group
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
|
@ -14,7 +7,14 @@
|
|||
>
|
||||
<mat-tab [aria-label]="MainMenu.Group">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>group</mat-icon>
|
||||
<!--<mat-icon>group</mat-icon>-->
|
||||
<div class="icon-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-layout-chat-left-sidenav-group
|
||||
class="left-group-side"
|
||||
|
@ -23,20 +23,43 @@
|
|||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Chat">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon
|
||||
<!--<mat-icon
|
||||
[matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
|
||||
[matBadge]="badgeChatUnReadCount$ | async"
|
||||
matBadgeDescription="확인하지 않은 메시지가 있습니다."
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
>chat</mat-icon
|
||||
>
|
||||
>-->
|
||||
<div class="icon-item" [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
|
||||
[matBadge]="badgeChatUnReadCount$ | async"
|
||||
matBadgeDescription="확인하지 않은 메시지가 있습니다."
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
|
||||
<path
|
||||
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
|
||||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Organization">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>device_hub</mat-icon>
|
||||
<!--<mat-icon>device_hub</mat-icon>-->
|
||||
<div class="icon-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
|
||||
<circle class="st0" cx="18.4" cy="18.5" r="3" />
|
||||
<circle class="st0" cx="12" cy="5" r="3" />
|
||||
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
|
||||
<circle class="st0" cx="6.1" cy="18.5" r="3" />
|
||||
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
|
||||
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-layout-chat-left-sidenav-organization
|
||||
[selectedUserList]="selectedUserList"
|
||||
|
@ -47,7 +70,20 @@
|
|||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Call">
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>phone</mat-icon>
|
||||
<!--<mat-icon>phone</mat-icon>-->
|
||||
<div class="icon-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone">
|
||||
<path class="st0"
|
||||
d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
|
||||
c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
|
||||
c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
|
||||
c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
|
||||
c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
|
||||
c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
|
||||
</mat-tab>
|
||||
|
|
|
@ -8,12 +8,8 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
::ng-deep .mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
|
@ -25,21 +21,22 @@
|
|||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
::ng-deep .organization-side{
|
||||
::ng-deep .organization-side {
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
::ng-deep .global-menu {
|
||||
border-right: 1px solid #dddddd;
|
||||
border-right: 2px solid #4f4f4f;
|
||||
.mat-tab-label-container {
|
||||
border-right: 1px solid #dddddd;
|
||||
background-color: #4f4f4f;
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
padding-top: 0px;
|
||||
flex-flow: column;
|
||||
height: 280px;
|
||||
padding-top:10px;
|
||||
.mat-tab-label {
|
||||
height: 80px;
|
||||
padding:0 16px;
|
||||
}
|
||||
}
|
||||
.mat-ink-bar {
|
||||
|
@ -49,7 +46,48 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.left-group-side{
|
||||
position: relative;
|
||||
height:100%;
|
||||
.left-group-side {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label {
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
background: var(--white);
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(0.9);
|
||||
transition: transform .3s cubic-bezier(.4,0,0,1);
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: #ffffff;
|
||||
stroke-width: 1.5;
|
||||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
fill: none;
|
||||
color: #2329d6;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[aria-selected='true'] {
|
||||
opacity: 1;
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
background: #ef4c73;
|
||||
transform: scale(1.0);
|
||||
/*svg {
|
||||
stroke: #ef4c73;
|
||||
fill: #ef4c73;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,11 +2,15 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
height: 70px;
|
||||
background: #352a37;
|
||||
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
|
||||
background: linear-gradient(to right, #352a37, #ef4c73);
|
||||
h3 {
|
||||
display: inline-flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
color:#ffffff;
|
||||
}
|
||||
.btn-box {
|
||||
height: 100%;
|
||||
|
@ -23,6 +27,7 @@
|
|||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
background-color:#f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
|
@ -70,7 +75,7 @@
|
|||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list {
|
||||
height: calc(100% - 120px);
|
||||
height: calc(100% - 130px);
|
||||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list-viewport {
|
||||
|
|
|
@ -2,9 +2,6 @@
|
|||
<div class="current-head">
|
||||
<h3>그룹</h3>
|
||||
<div class="btn-box">
|
||||
<button mat-icon-button>
|
||||
<mat-icon>person_add</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
#groupMenuTrigger="matMenuTrigger"
|
||||
|
|
|
@ -3,7 +3,12 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
height: 70px;
|
||||
background-color: #eeeeee;
|
||||
background: #f15f79;
|
||||
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
|
||||
background: linear-gradient(to right, #352a37, #ef4c73);
|
||||
color:#ffffff;
|
||||
h3 {
|
||||
display: inline-flex;
|
||||
padding-left: 10px;
|
||||
|
@ -14,12 +19,13 @@
|
|||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.mat-icon-button {
|
||||
svg{
|
||||
stroke:#333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-result {
|
||||
height: calc(100% - 120px);
|
||||
height: calc(100% - 130px);
|
||||
overflow: auto;
|
||||
.result-num {
|
||||
padding: 10px;
|
||||
|
|
|
@ -10,7 +10,24 @@
|
|||
aria-label="chats button"
|
||||
class="responsive-chats-button"
|
||||
>
|
||||
<mat-icon>chat</mat-icon>
|
||||
<!--<mat-icon>chat</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
|
||||
|
||||
<g>
|
||||
<path d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
|
||||
c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
|
||||
c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
|
||||
c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
|
||||
c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z" />
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="9" cy="12" r="1" />
|
||||
<circle cx="12.5" cy="12" r="1" />
|
||||
<circle cx="16" cy="12" r="1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<!-- / RESPONSIVE CHATS BUTTON-->
|
||||
<button
|
||||
|
|
|
@ -24,19 +24,19 @@
|
|||
}
|
||||
.chat-toolbar {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
height: 80px;
|
||||
min-height: 70px;
|
||||
align-items: center;
|
||||
background-color: #ffffff !important;
|
||||
border: 1px solid #dddddd;
|
||||
|
||||
border-bottom: 1px solid #dddddd;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,.16);
|
||||
.chat-header {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.profile-img {
|
||||
margin-right: 20px;
|
||||
margin-right: 16px;
|
||||
.responsive-chats-button {
|
||||
display: none;
|
||||
&:last-child {
|
||||
|
@ -45,7 +45,7 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #252525;
|
||||
background-color: #604850;
|
||||
color: #efefef;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
$right-color:#565e6b;
|
||||
$right-color:#686566;
|
||||
.right{
|
||||
height:100%;
|
||||
flex-direction: row-reverse;
|
||||
|
@ -8,6 +8,7 @@ $right-color:#565e6b;
|
|||
height:100%;
|
||||
display:inline-flex;
|
||||
background-color:$right-color;
|
||||
background-color:#7a7a7a;
|
||||
}
|
||||
.slide-box{
|
||||
display:inline-flex;
|
||||
|
|
|
@ -10,7 +10,11 @@
|
|||
class="button app-layout-native-title-bar-minimize"
|
||||
(click)="onClickMinimize()"
|
||||
>
|
||||
<mat-icon>minimize</mat-icon>
|
||||
<!--<mat-icon>minimize</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<line x1="5" y1="18" x2="19" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
|
@ -18,8 +22,20 @@
|
|||
(click)="onClickMaxmize()"
|
||||
>
|
||||
<ng-container [ngSwitch]="windowStateChanged$ | async">
|
||||
<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>
|
||||
<mat-icon *ngSwitchDefault>maximize</mat-icon>
|
||||
<!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
|
||||
<path class="st0"
|
||||
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
|
||||
<path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
|
||||
</svg>
|
||||
|
||||
<!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
|
||||
<rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
|
||||
</svg>
|
||||
|
||||
</ng-container>
|
||||
</button>
|
||||
<button
|
||||
|
@ -27,7 +43,12 @@
|
|||
class="button app-layout-native-title-bar-close"
|
||||
(click)="onClickClose()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
<!--<mat-icon>close</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
|
|
@ -7,15 +7,13 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
padding-right: 0px;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// flex-direction: row-reverse;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
background: #4f4f4f;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #d5dadb;
|
||||
color:#ffffff;
|
||||
//background: rgba(37, 27, 30, 0.9);
|
||||
//border-bottom: 1px solid #d5dadb;
|
||||
|
||||
.app-layout-native-title-bar-logo {
|
||||
width: 16px;
|
||||
|
@ -39,7 +37,7 @@
|
|||
outline: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 100%;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
max-width: 30px;
|
||||
padding: 5px;
|
||||
|
@ -49,7 +47,9 @@
|
|||
transition: background 0.2s linear, color 0.2s linear;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
|
||||
vertical-align: middle;
|
||||
margin-left:6px;
|
||||
transform: translateY(-2px);
|
||||
.mat-icon {
|
||||
//transform: translateY(-2px);
|
||||
width: 16px;
|
||||
|
@ -62,7 +62,7 @@
|
|||
&.app-layout-native-title-bar-close,
|
||||
&.app-layout-native-title-bar-maximize,
|
||||
&.app-layout-native-title-bar-minimize {
|
||||
color: black;
|
||||
color: darken(white, 20%);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
|
@ -72,18 +72,18 @@
|
|||
|
||||
&:hover {
|
||||
&.app-layout-native-title-bar-close {
|
||||
background: #e81123;
|
||||
color: darken(white, 20%);
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 0);
|
||||
}
|
||||
|
||||
&.app-layout-native-title-bar-minimize {
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 20%);
|
||||
color: darken(white,0);
|
||||
}
|
||||
|
||||
&.app-layout-native-title-bar-maximize {
|
||||
background: darken(#000000, 10%);
|
||||
color: darken(white, 20%);
|
||||
color: darken(white, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,8 @@
|
|||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-top: 30px;
|
||||
border:3px solid #4f4f4f;
|
||||
border-top:none;
|
||||
|
||||
.left-side {
|
||||
width: 380px;
|
||||
|
|
|
@ -51,7 +51,8 @@ $lg-red: (
|
|||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
400: #ef4c73,
|
||||
/* 400: #ec407a,*/ 500: #ed097e,
|
||||
/* 400: #ec407a,*/
|
||||
500: #ed097e,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
|
@ -98,7 +99,7 @@ $lg-red: (
|
|||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-light {
|
||||
background: mat-color($accent, 300);
|
||||
background: mat-color($accent, 300) !important;
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-color {
|
||||
|
@ -127,10 +128,6 @@ $lg-red: (
|
|||
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
|
||||
background-color: mat-color($accent, 200);
|
||||
}
|
||||
/*.mat-form-field-appearance-legacy .mat-hint{
|
||||
color: mat-color($accent, 800);
|
||||
}*/
|
||||
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-label {
|
||||
color: mat-color($primary);
|
||||
|
|
|
@ -160,11 +160,11 @@ $meBox-bg: #ffffff;
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right:40px;
|
||||
margin-left:0;
|
||||
margin-right: 40px;
|
||||
margin-left: 0;
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
img{
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
@ -172,8 +172,8 @@ $meBox-bg: #ffffff;
|
|||
&.me {
|
||||
.chat-row {
|
||||
flex-direction: row-reverse;
|
||||
margin-left:40px;
|
||||
margin-right:0;
|
||||
margin-left: 40px;
|
||||
margin-right: 0;
|
||||
.profile-info {
|
||||
flex-direction: row-reverse;
|
||||
display: flex;
|
||||
|
@ -283,8 +283,8 @@ $meBox-bg: #ffffff;
|
|||
}
|
||||
}
|
||||
}
|
||||
.bubble-main{
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: keep-all;
|
||||
.bubble-main {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
.more-spacer {
|
||||
flex: 1 1 auto;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -14,7 +13,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
//height: 40px !important;
|
||||
padding: 0 20px;
|
||||
.mat-expansion-panel-header-title {
|
||||
align-items: center;
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
align-items: center;
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 14px;
|
||||
background-color:#f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
|
|
|
@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
|
|||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 50px);
|
||||
width: calc(100% - 60px);
|
||||
.detail {
|
||||
flex-direction: column;
|
||||
width: calc(100% - 80px);
|
||||
|
@ -116,6 +116,7 @@ $thumbnail-msize: 40px;
|
|||
color: $font-dark;
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
@include ellipsis(1);
|
||||
|
@ -130,11 +131,16 @@ $thumbnail-msize: 40px;
|
|||
font-size: 16px;
|
||||
color: #666666;
|
||||
margin-left: 4px;
|
||||
line-height:unset;
|
||||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
flex: none;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
background-color: #ef4c73;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.room-msg {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
(click)="onToggleFab()"
|
||||
></div>
|
||||
<div class="fab-container">
|
||||
<button mat-fab class="fab-toggler" (click)="onToggleFab()">
|
||||
<button mat-fab class="fab-toggler bg-accent-dark" (click)="onToggleFab()">
|
||||
<mat-icon [@fabToggler]="fabTogglerState">add</mat-icon>
|
||||
</button>
|
||||
<div [@speedDialStagger]="buttons.length">
|
||||
|
|
Loading…
Reference in New Issue
Block a user