목록 높이 값, 전체 프레임 변수값으로 변경
This commit is contained in:
khk
parent
0a1523fbff
commit
7e68c9ab5e
|
|
@ -16,7 +16,6 @@
|
|||
.left-side-tabs-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: calc(100% - 60px);
|
||||
div[id^='tabs'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -31,7 +30,6 @@
|
|||
|
||||
.mat-tab-group {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-search">
|
||||
<div class="list-search-frame">
|
||||
<div class="searchbox">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<mat-form-field floatLabel="never">
|
||||
|
|
|
|||
|
|
@ -13,63 +13,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox {
|
||||
.mat-form-field {
|
||||
display: block;
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
padding-bottom: 0 !important;
|
||||
height: 100%;
|
||||
.mat-form-field-flex {
|
||||
height: 59px;
|
||||
padding: 0 10px 0 20px;
|
||||
align-items: center;
|
||||
.mat-form-field-infix {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
min-height: 20px;
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
.mat-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
bottom: 0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-list {
|
||||
height: calc(100% - 120px);
|
||||
//height: calc(100% - 120px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.search-result {
|
||||
height: calc(100% - 130px);
|
||||
//height: calc(100% - 130px);
|
||||
overflow: auto;
|
||||
.result-num {
|
||||
padding: 10px;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-search">
|
||||
<div class="list-search-frame">
|
||||
<div class="searchbox">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<mat-form-field floatLabel="never">
|
||||
|
|
|
|||
|
|
@ -16,55 +16,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox {
|
||||
.mat-form-field {
|
||||
display: block;
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
padding-bottom: 0 !important;
|
||||
height: 100%;
|
||||
.mat-form-field-flex {
|
||||
height: 59px;
|
||||
padding: 0 10px 0 20px;
|
||||
align-items: center;
|
||||
.mat-form-field-infix {
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
.mat-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
bottom: 0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-label-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -74,7 +25,7 @@
|
|||
::ng-deep .message-box {
|
||||
.message-section {
|
||||
position: relative;
|
||||
height: calc(100% - 120px);
|
||||
//height: calc(100% - 120px);
|
||||
.message-tab {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -16,15 +16,6 @@
|
|||
}
|
||||
|
||||
.current-head {
|
||||
/*display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
|
|
@ -52,7 +43,7 @@
|
|||
}
|
||||
|
||||
.oraganization-tab {
|
||||
height: calc(100% - 120px);
|
||||
// height: calc(100% - 120px);
|
||||
flex-direction: inherit;
|
||||
display: flex;
|
||||
.oraganization-tab-tree {
|
||||
|
|
|
|||
|
|
@ -2,17 +2,13 @@
|
|||
.app-layout-native-title-bar {
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 60px;
|
||||
color: #ffffff;
|
||||
//background: rgba(37, 27, 30, 0.9);
|
||||
//border-bottom: 1px solid #d5dadb;
|
||||
|
||||
.app-layout-native-title-bar-logo {
|
||||
width: 32px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-top: 57px;
|
||||
border-top: none;
|
||||
.split-area {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ body {
|
|||
color: #333;
|
||||
font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
|
||||
Gulim, '굴림';
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 18px !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -259,7 +259,7 @@ $daesang-grey: (
|
|||
background-color: mat-color($accent, B100);
|
||||
}
|
||||
.main-container {
|
||||
border: 3px solid mat-color($accent, B100);
|
||||
border-color: mat-color($accent, B100);
|
||||
}
|
||||
.global-menu {
|
||||
background-color: mat-color($accent, B100);
|
||||
|
|
@ -337,7 +337,6 @@ $daesang-grey: (
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
height: 60px;
|
||||
background-color: #eeeeee;
|
||||
background: $gradient-light;
|
||||
background: -webkit-linear-gradient(
|
||||
|
|
@ -349,10 +348,6 @@ $daesang-grey: (
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.list-search{
|
||||
height:60px;
|
||||
}
|
||||
|
||||
mat-tab-group[vertical] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@
|
|||
|
||||
.tree-node-frame {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
height: 64px;
|
||||
|
||||
.tree-node-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
*ngIf="!!message.resType && message.resType === ContentType.AttachFile"
|
||||
>attach_file</mat-icon
|
||||
>
|
||||
{{ message.title }}
|
||||
<span class="final-message">{{ message.title }}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="date">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.message-list {
|
||||
&.list-item {
|
||||
dl {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1 1 auto;
|
||||
width: calc(100% - 80px);
|
||||
width: calc(100% - 90px);
|
||||
dt {
|
||||
.name {
|
||||
font-size: 1.1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
|
@ -22,21 +22,21 @@
|
|||
}
|
||||
|
||||
dd {
|
||||
color: #777777;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
justify-items: center;
|
||||
.final-message {
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.date {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
font-size: 0.9em;
|
||||
height: 40px;
|
||||
.noti-new {
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="list-search">
|
||||
<div class="list-search-frame">
|
||||
<div class="selectbox">
|
||||
<!--<mat-label>회사선택</mat-label>-->
|
||||
<mat-select [(value)]="companyCode">
|
||||
|
|
@ -30,16 +30,3 @@
|
|||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<!--검색창만 있는 경우--------------------------------------------------------------------------
|
||||
<div class="list-search">
|
||||
<div class="searchbox">
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
placeholder="name"
|
||||
(keydown.enter)="onKeyDownEnter(searchWordInput.value)"
|
||||
/>
|
||||
<div class="btn-search"><i class="material-icons">search</i></div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -11,55 +11,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 14px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 38%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.searchbox {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
input {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding-left: 0;
|
||||
&:focus {
|
||||
& + .mat-form-field-label-wrapper {
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-label {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-search {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 45%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
+ .searchbox {
|
||||
width: 54%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,22 +16,22 @@
|
|||
</div>
|
||||
<span
|
||||
*ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
|
||||
class="text-accent-color badge-mobile-state"
|
||||
class="text-accent-color marker-mobile-state"
|
||||
>
|
||||
<mat-icon>phone_android</mat-icon>
|
||||
</span>
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<div class="user-info">
|
||||
<div class="user">
|
||||
<span
|
||||
*ngIf="getWorkstatusInfo('text').length > 0"
|
||||
class="work-status"
|
||||
[ngClass]="getWorkstatusInfo('style')"
|
||||
>{{ getWorkstatusInfo('text') }}</span
|
||||
>
|
||||
<span class="name">
|
||||
<b>{{ userInfo | ucapTranslate: 'name' }}</b>
|
||||
<span class="detail">
|
||||
<b class="name">{{ userInfo | ucapTranslate: 'name' }}</b>
|
||||
<span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,16 +48,6 @@ $thumbnail-msize: 40px;
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*.list-item {
|
||||
@extend %list-item;
|
||||
&:hover {
|
||||
background-color: $bg-list-hover;
|
||||
}
|
||||
.mat-checkbox {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}*/
|
||||
|
||||
.item-default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -77,36 +67,29 @@ $thumbnail-msize: 40px;
|
|||
padding: 0;
|
||||
width: calc(100% - 50px);
|
||||
transform: translateY(2px);
|
||||
.detail {
|
||||
.user-info {
|
||||
.user {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-bottom: 2px;
|
||||
.work-status {
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
color: #ffffff;
|
||||
font-size: 0.9em;
|
||||
width: 40px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
min-width: 32px;
|
||||
margin-right: 4px;
|
||||
border-radius: 24px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.name {
|
||||
margin-bottom: 2px;
|
||||
.detail {
|
||||
color: $font-dark;
|
||||
width: calc(100% - 40px);
|
||||
@include ellipsis(1);
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
.grade {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dept {
|
||||
font-size: 0.9em;
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
[default]="defaultPath"
|
||||
/>
|
||||
</div>
|
||||
<span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
|
||||
<span *ngIf="roomInfo.isTimeRoom" class="text-warn-color marker-timer">
|
||||
<mat-icon>timer</mat-icon>
|
||||
</span>
|
||||
<!-- <div style="position: relative;">
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
</div> -->
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="room-info">
|
||||
<div class="detail">
|
||||
<div class="room-name">
|
||||
<div class="name">
|
||||
<ng-container [ngSwitch]="roomInfo.roomType">
|
||||
<ng-container *ngSwitchCase="RoomType.Mytalk">
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div
|
||||
class="num bg-accent-light"
|
||||
class="member bg-accent-light"
|
||||
*ngIf="roomInfo.roomType === RoomType.Multi"
|
||||
>
|
||||
{{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<mat-icon>notifications_off</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-msg">
|
||||
<div class="final-message">
|
||||
{{ finalEventMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,14 +86,13 @@
|
|||
</dd>
|
||||
</dl>
|
||||
|
||||
<div
|
||||
class="noti-num"
|
||||
<span
|
||||
class="noti-sum"
|
||||
*ngIf="roomInfo.noReadCnt > 0"
|
||||
[matBadgeHidden]="roomInfo.noReadCnt === 0"
|
||||
[matBadge]="roomInfo.noReadCnt"
|
||||
matBadgeOverlap="true"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="below after"
|
||||
>
|
||||
</div>
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -78,20 +78,19 @@ $thumbnail-msize: 40px;
|
|||
.info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.detail {
|
||||
.room-info {
|
||||
flex-direction: column;
|
||||
width: calc(100% - 80px);
|
||||
.room-name {
|
||||
.detail {
|
||||
display: inline-flex;
|
||||
color: $font-dark;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 1.1em;
|
||||
@include ellipsis(1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.mat-icon {
|
||||
|
|
@ -105,8 +104,7 @@ $thumbnail-msize: 40px;
|
|||
margin-left: 4px;
|
||||
line-height: unset;
|
||||
}
|
||||
.num {
|
||||
font-size: 0.9em;
|
||||
.member {
|
||||
flex: none;
|
||||
margin-left: 6px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -114,10 +112,8 @@ $thumbnail-msize: 40px;
|
|||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.room-msg {
|
||||
font-size: 12px;
|
||||
.final-message {
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
.date {
|
||||
|
|
@ -127,7 +123,6 @@ $thumbnail-msize: 40px;
|
|||
text-align: right;
|
||||
margin-left: 10px;
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
align-items: flex-start;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
|
@ -147,34 +142,3 @@ $thumbnail-msize: 40px;
|
|||
background-color: $bg-list-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.noti {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 22px;
|
||||
max-width: 60px;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
color: #ffffff;
|
||||
@include ellipsis(1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.noti-num {
|
||||
&.mat-badge {
|
||||
position: absolute !important;
|
||||
right: 40px !important;
|
||||
bottom: 22px !important;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
color: #ffffff;
|
||||
max-width: 60px;
|
||||
@include ellipsis(1);
|
||||
overflow: visible;
|
||||
border-radius: 50%;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
// Partials
|
||||
@import 'partials/breakpoints';
|
||||
@import 'partials/main-frame';
|
||||
@import 'partials/forms';
|
||||
@import 'partials/general';
|
||||
@import 'partials/helpers';
|
||||
|
|
@ -14,6 +15,7 @@
|
|||
@import 'partials/scrollbars';
|
||||
@import 'partials/paginator';
|
||||
@import 'partials/presence';
|
||||
@import 'partials/search-frame';
|
||||
@import 'partials/list-item';
|
||||
@import 'partials/dialogs';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,40 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
.ellipsis {
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
@if $row == 1 {
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
.ellipsis2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
} @else if $row >= 2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $row;
|
||||
-webkit-box-orient: vertical;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
$listH-row2: 64px;
|
||||
$listH-row2: 60px;
|
||||
$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;
|
||||
}
|
||||
|
||||
//expansion-panel 높이
|
||||
.group-tree {
|
||||
.tree-node-frame {
|
||||
height: $listH-row2;
|
||||
.group-name {
|
||||
font-size: 0.96em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-card-header .mat-card-title {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -56,7 +64,12 @@ $line-basic: 1px solid #dddddd;
|
|||
}
|
||||
}
|
||||
}
|
||||
span[class*='badge'] {
|
||||
&.checkbox {
|
||||
.mat-checkbox {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
span[class*='marker'] {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
width: 20px;
|
||||
|
|
@ -77,4 +90,37 @@ $line-basic: 1px solid #dddddd;
|
|||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
.noti-sum.mat-badge {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 20px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
//list-item 폰트 사이즈
|
||||
.list-item {
|
||||
font-size: 1em;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.grade {
|
||||
font-size: 0.8em;
|
||||
margin-left: 4px;
|
||||
color: #777777;
|
||||
}
|
||||
.work-status,
|
||||
.member {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.final-message,
|
||||
.dept {
|
||||
font-size: 0.86em;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
.date {
|
||||
font-size: 0.7em;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
$frame-border: 3px;
|
||||
$frame-outside: 50px;
|
||||
$current-head: 50px;
|
||||
$search-frame: 50px;
|
||||
|
||||
@mixin div-box-shadow {
|
||||
width: calc(100% - #{$frame-outside});
|
||||
}
|
||||
|
||||
.mat-toolbar {
|
||||
&.mat-toolbar-single-row {
|
||||
height: $frame-outside;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-top: $frame-outside;
|
||||
border-width: $frame-border;
|
||||
border-style: solid;
|
||||
.mat-tab-group {
|
||||
&.global-menu {
|
||||
width: $frame-outside;
|
||||
}
|
||||
}
|
||||
.left-side-tabs-body {
|
||||
@include div-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.current-head {
|
||||
height: $frame-outside;
|
||||
}
|
||||
|
||||
// 글로벌 메뉴 별 리스트 높이 값
|
||||
.left-side-tabs-contents {
|
||||
.left-group-side {
|
||||
.search-result {
|
||||
height: calc(100% - #{$current-head + $search-frame});
|
||||
}
|
||||
}
|
||||
.app-layout-chat-left-sidenav-chat-list {
|
||||
height: calc(100% - #{$current-head + $search-frame});
|
||||
}
|
||||
.oraganization-tab {
|
||||
height: calc(100% - #{$current-head + $search-frame});
|
||||
}
|
||||
.message-section {
|
||||
height: calc(100% - #{$current-head + $search-frame});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
$search-font-size: 14px;
|
||||
|
||||
@mixin list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
height: $search-frame;
|
||||
align-items: center;
|
||||
// padding: 0 10px 0 20px;
|
||||
font-size: $search-font-size;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.list-search-frame {
|
||||
@include list-search;
|
||||
.searchbox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
input {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.btn-search {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.list-search-frame {
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 40%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
& + .searchbox {
|
||||
width: 60%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
.list-search-frame {
|
||||
.searchbox {
|
||||
height: 100%;
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
height: $search-frame;
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
padding-bottom: 0 !important;
|
||||
height: 100%;
|
||||
.mat-form-field-flex {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
padding: 0 20px;
|
||||
.mat-form-field-infix {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
margin-left: auto;
|
||||
.mat-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
bottom: 0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 46%;
|
||||
padding-left: 20px;
|
||||
|
||||
& + .searchbox {
|
||||
width: 54%;
|
||||
display: inline-flex;
|
||||
input {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.btn-search {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user