리스트 목록 - 높이값 64px조정
This commit is contained in:
khk
parent
3eca5d2d2d
commit
9f091fef50
|
|
@ -10,12 +10,13 @@
|
|||
}
|
||||
::ng-deep .mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-side-tabs-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: calc(100% - 70px);
|
||||
width: calc(100% - 60px);
|
||||
div[id^='tabs'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
|
||||
.mat-tab-group {
|
||||
display: flex;
|
||||
width: 70px;
|
||||
width: 60px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
.mat-tab-label {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.mat-ink-bar {
|
||||
|
|
@ -102,6 +103,9 @@
|
|||
stroke-linejoin: miter;
|
||||
fill: none;
|
||||
}
|
||||
.mat-badge-content {
|
||||
right: -4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[aria-selected='true'] {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
|
@ -70,7 +69,7 @@
|
|||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list {
|
||||
height: calc(100% - 130px);
|
||||
height: calc(100% - 120px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
|
@ -75,7 +74,7 @@
|
|||
::ng-deep .message-box {
|
||||
.message-section {
|
||||
position: relative;
|
||||
height: calc(100% - 130px);
|
||||
height: calc(100% - 120px);
|
||||
.message-tab {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
}
|
||||
.search-result {
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 30px);
|
||||
overflow: auto;
|
||||
.result-num {
|
||||
padding: 10px;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.oraganization-tab {
|
||||
height: calc(100% - 130px);
|
||||
height: calc(100% - 120px);
|
||||
flex-direction: inherit;
|
||||
display: flex;
|
||||
.oraganization-tab-tree {
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
padding: 10px 20px;
|
||||
.profile-img {
|
||||
margin-right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.responsive-chats-button {
|
||||
display: none;
|
||||
line-height: normal;
|
||||
|
|
@ -57,8 +59,6 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
&.thumbnail-mask {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
|
@ -73,20 +73,20 @@
|
|||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
.room-name {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: normal;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.room-type {
|
||||
font-size: 14px;
|
||||
font-size: 0.9rem;
|
||||
line-height: normal;
|
||||
margin-top: 6px;
|
||||
margin-top: 2px;
|
||||
height: 20px;
|
||||
span {
|
||||
border-radius: 10px;
|
||||
padding: 1px 10px;
|
||||
margin-right: 6px;
|
||||
font-size: 13px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
.mat-icon {
|
||||
line-height: normal;
|
||||
color: #ffffff;
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
|
||||
::ng-deep .mat-dialog-container {
|
||||
.mat-tab-body-wrapper {
|
||||
height: 380px;
|
||||
width: 100%;
|
||||
.mat-tab-body {
|
||||
|
|
@ -85,6 +86,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: flex;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
color: #ffffff;
|
||||
//background: rgba(37, 27, 30, 0.9);
|
||||
//border-bottom: 1px solid #d5dadb;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-top: 47px;
|
||||
padding-top: 57px;
|
||||
border-top: none;
|
||||
.split-area {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -337,7 +337,7 @@ $daesang-grey: (
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
height: 70px;
|
||||
height: 60px;
|
||||
background-color: #eeeeee;
|
||||
background: $gradient-light;
|
||||
background: -webkit-linear-gradient(
|
||||
|
|
@ -349,6 +349,10 @@ $daesang-grey: (
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.list-search{
|
||||
height:60px;
|
||||
}
|
||||
|
||||
mat-tab-group[vertical] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<cdk-virtual-scroll-viewport
|
||||
#cvsvGroup
|
||||
itemSize="80"
|
||||
itemSize="64"
|
||||
perfectScrollbar
|
||||
fxFlexFill
|
||||
>
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
<!-- This is the tree node template for leaf nodes -->
|
||||
<mat-tree-node
|
||||
*matTreeNodeDef="let node"
|
||||
style="height: 80px;"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
|
|
@ -37,7 +36,6 @@
|
|||
<mat-tree-node
|
||||
*matTreeNodeDef="let node; when: isHeader"
|
||||
class="tree-node-frame ucap-clickable"
|
||||
style="height: 80px;"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
.tree-node-frame {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
height: 40px;
|
||||
height: 64px;
|
||||
|
||||
.tree-node-header {
|
||||
position: relative;
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
|
||||
.mat-tree-node {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<span>{{ message.regDate | ucapDate: 'C' }}</span>
|
||||
<span
|
||||
*ngIf="message.type === MessageType.Receive && !message.readYn"
|
||||
class="badge-new bg-warn-darkest"
|
||||
class="noti-new bg-warn-darkest"
|
||||
>
|
||||
N
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -7,22 +7,22 @@
|
|||
width: calc(100% - 80px);
|
||||
dt {
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-size: 1.1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
span {
|
||||
font-size: 13px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
color: #777777;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -30,22 +30,25 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-self: flex-start;
|
||||
.badge-new {
|
||||
font-size: 0.9em;
|
||||
height: 40px;
|
||||
.noti-new {
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
align-self: flex-end;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
font-size: 0.9em;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<mat-card class="mat-elevation-z0 ucap-message-write">
|
||||
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
|
||||
<perfect-scrollbar>
|
||||
<div class="add-row">
|
||||
<button
|
||||
mat-button
|
||||
|
|
@ -16,7 +17,8 @@
|
|||
class="receiver-sum text-accent-color"
|
||||
>
|
||||
{{
|
||||
'message.countOfReceiver' | translate: { count: receiverList.length }
|
||||
'message.countOfReceiver'
|
||||
| translate: { count: receiverList.length }
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -82,17 +84,46 @@
|
|||
<span class="mdi mdi-delete"></span>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
<mat-list-item *ngFor="let attachment of attachmentList">
|
||||
{{ attachment.name }}
|
||||
<mat-list-item
|
||||
*ngFor="let attachment of attachmentList"
|
||||
class="attach-file"
|
||||
>
|
||||
<div class="file-name">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span
|
||||
>{{ attachment.name }}
|
||||
<button mat-button aria-label="파일삭제">
|
||||
<!--<span class="mdi mdi-delete"></span>-->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-trash-2"
|
||||
>
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path
|
||||
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
|
||||
></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</form>
|
||||
|
||||
<div class="message-option">
|
||||
<div class="editor-tools">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="이미지"
|
||||
(click)="onClickImage()"
|
||||
>
|
||||
<button mat-icon-button aria-label="이미지" (click)="onClickImage()">
|
||||
<span class="mdi mdi-camera mdi-24px"></span>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -112,24 +143,11 @@
|
|||
>/1000
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions>
|
||||
<!--<div>
|
||||
<span
|
||||
[class.editor-length-invalid]="
|
||||
0 === contentLength || 1000 < contentLength
|
||||
"
|
||||
>{{ contentLength }}</span
|
||||
>/1000
|
||||
</div>-->
|
||||
<div class="editor-actions-spacer"></div>
|
||||
<div class="editor-actions">
|
||||
<button
|
||||
mat-stroked-button
|
||||
(click)="onClickCancel()"
|
||||
class="mat-primary"
|
||||
>
|
||||
<button mat-stroked-button (click)="onClickCancel()" class="mat-primary">
|
||||
{{ 'common.messages.cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -198,5 +216,4 @@
|
|||
</button>-->
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
</mat-card>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
.ucap-message-write {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.message-receiver-list {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
form {
|
||||
height: 400px;
|
||||
perfect-scrollbar {
|
||||
.ps--active-x > .ps__rail-x {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-write-body {
|
||||
|
||||
|
||||
[contenteditable] {
|
||||
}
|
||||
|
||||
[contenteditable]:hover,
|
||||
[contenteditable]:focus {
|
||||
}
|
||||
|
||||
[contenteditable]:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
|
@ -37,6 +31,18 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
.message-option {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
height: 40px;
|
||||
.editor-tools {
|
||||
}
|
||||
.length {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
|
|
@ -60,23 +66,13 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
.message-option {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
height: 40px;
|
||||
.editor-tools {
|
||||
}
|
||||
.length {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
min-height: 250px;
|
||||
border: 1px solid #dddddd;
|
||||
//overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-card-actions {
|
||||
margin: 0 0 20px;
|
||||
border-top: 1px solid #dddddd;
|
||||
|
|
@ -119,8 +115,9 @@
|
|||
}
|
||||
.mat-chip-list {
|
||||
.mat-chip-list-wrapper {
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
/* max-height: 100px;
|
||||
overflow: auto;*/
|
||||
}
|
||||
}
|
||||
.message-title {
|
||||
|
|
@ -128,3 +125,25 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
::ng-deep .attach-file {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
.mat-list-item-content {
|
||||
padding: 0 !important;
|
||||
.file-name {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
button {
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
height: 10px;
|
||||
border: 1px solid #ffffff;
|
||||
align-self: flex-end;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<div>
|
||||
<div class="user-info">
|
||||
<span
|
||||
*ngIf="getWorkstatusInfo('text').length > 0"
|
||||
class="work-status"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
>
|
||||
<span class="name">
|
||||
<b>{{ userInfo | ucapTranslate: 'name' }}</b>
|
||||
{{ userInfo | ucapTranslate: 'grade' }}
|
||||
<span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="dept">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $font-white: #ffffff;
|
|||
$line-basic: 1px solid #dddddd;
|
||||
$bg-list-item-msg: #f0f4f6;
|
||||
$bg-list-hover: #efefef;
|
||||
$listH-row2: 80px;
|
||||
$listH-row2: 60px;
|
||||
$presence-size: 8px;
|
||||
$thumbnail-msize: 40px;
|
||||
|
||||
|
|
@ -26,23 +26,6 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
}
|
||||
|
||||
.badge-mobile-state {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
bottom: 14px;
|
||||
left: 60px;
|
||||
text-align: center;
|
||||
.mat-icon {
|
||||
font-size: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
%list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -65,7 +48,7 @@ $thumbnail-msize: 40px;
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
/*.list-item {
|
||||
@extend %list-item;
|
||||
&:hover {
|
||||
background-color: $bg-list-hover;
|
||||
|
|
@ -73,13 +56,14 @@ $thumbnail-msize: 40px;
|
|||
.mat-checkbox {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.item-default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
dt {
|
||||
flex: none;
|
||||
position: relative;
|
||||
.thumbnail {
|
||||
width: $thumbnail-msize;
|
||||
height: auto;
|
||||
|
|
@ -92,34 +76,37 @@ $thumbnail-msize: 40px;
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 50px);
|
||||
transform: translateY(2px);
|
||||
.detail {
|
||||
div {
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-bottom: 2px;
|
||||
.work-status {
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-size: 0.9em;
|
||||
width: 40px;
|
||||
justify-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.name {
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
color: $font-dark;
|
||||
width: calc(100% - 40px);
|
||||
@include ellipsis(1);
|
||||
b {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.grade {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dept {
|
||||
font-size: 12px;
|
||||
font-size: 0.9em;
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,8 +60,7 @@
|
|||
class="num bg-accent-light"
|
||||
*ngIf="roomInfo.roomType === RoomType.Multi"
|
||||
>
|
||||
{{ roomInfo.joinUserCount }}
|
||||
{{ 'common.units.persons' | translate }}
|
||||
{{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
|
||||
</div>
|
||||
<div *ngIf="!checkable && !roomInfo.receiveAlarm">
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
|
|
|
|||
|
|
@ -24,23 +24,6 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
}
|
||||
|
||||
.badge-timer {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
bottom: 14px;
|
||||
left: 46px;
|
||||
text-align: center;
|
||||
.mat-icon {
|
||||
font-size: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
|
|
@ -84,15 +67,7 @@ $thumbnail-msize: 40px;
|
|||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
%list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $listH-row2;
|
||||
border-bottom: $line-basic;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.item-default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -113,10 +88,9 @@ $thumbnail-msize: 40px;
|
|||
display: inline-flex;
|
||||
color: $font-dark;
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-size: 1.1em;
|
||||
@include ellipsis(1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -126,17 +100,17 @@ $thumbnail-msize: 40px;
|
|||
fill: currentColor;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
font-size: 16px;
|
||||
font-size: 1.1em;
|
||||
color: #666666;
|
||||
margin-left: 4px;
|
||||
line-height: unset;
|
||||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
font-size: 0.9em;
|
||||
flex: none;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
padding: 0 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -167,7 +141,6 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
|
||||
.list-item {
|
||||
@extend %list-item;
|
||||
&:hover {
|
||||
background-color: $bg-list-hover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,19 @@
|
|||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
$listH-row2: 64px;
|
||||
$line-basic: 1px solid #dddddd;
|
||||
%list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: $listH-row2;
|
||||
border-bottom: $line-basic;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.mat-card-header .mat-card-title {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -27,6 +40,7 @@
|
|||
}
|
||||
|
||||
.list-item {
|
||||
@extend %list-item;
|
||||
.thumbnail {
|
||||
&-mask {
|
||||
width: 40px;
|
||||
|
|
@ -34,6 +48,7 @@
|
|||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
|
|
@ -41,4 +56,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
span[class*='badge'] {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
bottom: 0px;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
.mat-icon {
|
||||
font-size: 1em;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
text-indent: -10000000px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
.presence {
|
||||
@extend %presence;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user