ng-deep 정리중(6차)
This commit is contained in:
khk
parent
2a385a7b7b
commit
771b88b1b3
|
|
@ -75,18 +75,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// perfect-scrollbar right로 2px이동
|
||||
::ng-deep .ps__rail-y {
|
||||
& > .ps__thumb-y {
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .cdk-virtual-scroll-orientation-vertical {
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
contain: unset;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
animationDuration="0ms"
|
||||
[selectedIndex]="0"
|
||||
(selectedIndexChange)="onSelectedIndexChange($event)"
|
||||
class="message-tab"
|
||||
class="message-tab tab_num3"
|
||||
>
|
||||
<mat-tab [label]="MessageType.Receive">
|
||||
<ng-template mat-tab-label>
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
</mat-radio-group>
|
||||
</form>
|
||||
</div>
|
||||
<div style="height: calc(100% - 65.5px)">
|
||||
<div style="height: calc(100% - 50px)">
|
||||
<perfect-scrollbar
|
||||
fxFlex="1 1 auto"
|
||||
*ngIf="!!(messageSearchList$ | async)"
|
||||
|
|
|
|||
|
|
@ -66,18 +66,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//쪽지 local style
|
||||
::ng-deep .message-box {
|
||||
.mat-tab-label {
|
||||
min-width: 33%;
|
||||
}
|
||||
.mat-radio-label {
|
||||
.mat-radio-label-content {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ $tablet-s-width: 768px;
|
|||
}
|
||||
}
|
||||
|
||||
//rightDrawer공통
|
||||
/*rightDrawer공통
|
||||
::ng-deep .rightDrawer-item {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
|
|
@ -23,4 +23,4 @@ $tablet-s-width: 768px;
|
|||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
(selectedIndexChange)="onSelectedIndexChange($event)"
|
||||
class="tab_num2"
|
||||
>
|
||||
<mat-tab label="{{ 'common.file.type.images' | translate }}"></mat-tab>
|
||||
<mat-tab label="{{ 'common.file.type.video' | translate }}"></mat-tab>
|
||||
|
|
@ -164,8 +165,7 @@
|
|||
</div>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="btn-box"
|
||||
>
|
||||
<div class="btn-box">
|
||||
<button
|
||||
mat-flat-button
|
||||
[disabled]="selectedFileList.length > 0 ? 'false' : 'true'"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ $tablet-s-width: 768px;
|
|||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.rightDrawer-albumbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
(selectedIndexChange)="onSelectedIndexChange($event)"
|
||||
class="tab_num2"
|
||||
>
|
||||
<mat-tab label="{{ 'chat.typeReceived' | translate }}"></mat-tab>
|
||||
<mat-tab label="{{ 'chat.typeSent' | translate }}"></mat-tab>
|
||||
|
|
|
|||
|
|
@ -178,16 +178,6 @@ $tablet-s-width: 768px;
|
|||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.mat-paginator-page-size {
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-paginator-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.mat-row:hover {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
height: calc(100% - 60px);
|
||||
|
||||
.table-box {
|
||||
height: calc(100% - 111.5px);
|
||||
height: calc(100% - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
.footer-fix {
|
||||
|
|
|
|||
|
|
@ -260,20 +260,20 @@
|
|||
{{ 'profile.open' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="setting">
|
||||
<!--<div class=" zoom setting">
|
||||
<button
|
||||
mat-menu-item
|
||||
class="zoom minus-square"
|
||||
class="icon-button"
|
||||
(click)="onClickZoomOut($event)"
|
||||
>
|
||||
축소</button
|
||||
<i class="mid mdi-minus-box-outline"></i>축소</button
|
||||
><span class="set-size" (click)="onClickZoomLabel($event)">{{ zoom }}%</span
|
||||
><button
|
||||
mat-menu-item
|
||||
class="zoom plus-square"
|
||||
class="icon-button"
|
||||
(click)="onClickZoomIn($event)"
|
||||
>
|
||||
확대
|
||||
<i class="mid mdi-plus-box-outline"></i>확대
|
||||
</button>
|
||||
</div>-->
|
||||
<div class="setting">
|
||||
|
|
|
|||
|
|
@ -218,40 +218,32 @@
|
|||
|
||||
@include weblink(#2d3a4a);
|
||||
|
||||
::ng-deep .myset {
|
||||
.myset {
|
||||
.mat-menu-content {
|
||||
.setting {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
.zoom {
|
||||
height: 16px;
|
||||
background-repeat: no-repeat;
|
||||
height: 48px;
|
||||
&.plus-square {
|
||||
margin-left: 10px;
|
||||
padding-left: 26px;
|
||||
background-position: left 50%;
|
||||
line-height: normal;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
&.minus-square {
|
||||
margin-right: 10px;
|
||||
padding-right: 26px;
|
||||
background-position: right 50%;
|
||||
line-height: normal;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
&:hover {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.set-size {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoom {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 16px;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 48px;
|
||||
button {
|
||||
&:hover {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .status-pc-set {
|
||||
|
|
|
|||
|
|
@ -55,19 +55,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*::ng-deep .mat-drawer-inner-container {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-labels {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
//border-bottom: 2px solid #dddddd;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-around;
|
||||
}*/
|
||||
|
||||
::ng-deep .left-drawer-toggle {
|
||||
.left-drawer-toggle {
|
||||
position: absolute;
|
||||
top: calc(50% - 30px);
|
||||
left: -4px;
|
||||
|
|
|
|||
|
|
@ -300,6 +300,20 @@ $daesang-grey: (
|
|||
background-color: mat-color($accent, 300);
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
& > .ps__thumb-y {
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-virtual-scroll-orientation-vertical {
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
contain: none;
|
||||
}
|
||||
}
|
||||
|
||||
.global-menu {
|
||||
.mat-tab-label[aria-selected='true'] {
|
||||
.mat-tab-label-content {
|
||||
|
|
@ -356,6 +370,31 @@ $daesang-grey: (
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
//탭개수에 의한 width 정의
|
||||
.mat-tab-group {
|
||||
&.tab_num2 {
|
||||
.mat-tab-label {
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
&.tab_num3 {
|
||||
.mat-tab-label {
|
||||
width: 33%;
|
||||
min-width: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//쪽지 라디오 버튼 정렬
|
||||
.message-box {
|
||||
.mat-radio-label {
|
||||
.mat-radio-label-content {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-tab-group[vertical] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -408,12 +447,28 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
|
||||
//대화 말풍선 global 적용
|
||||
.message-row {
|
||||
.message-main {
|
||||
.bubble {
|
||||
background-color: mat-color($accent, 100);
|
||||
border: 1px solid mat-color($accent, 200);
|
||||
overflow: hidden;
|
||||
.bubble-main {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
a {
|
||||
color: #0367a6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
min-width: 300px;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
|
|
@ -428,13 +483,7 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
}
|
||||
/*.대화방 검색창 bg
|
||||
chat-search-frame {
|
||||
.chat-search {
|
||||
//background-color: mat-color($accent, 600, 0.7);
|
||||
background-color: mat-color($accent, 800, 0.8);
|
||||
}
|
||||
}*/
|
||||
|
||||
.translationForm {
|
||||
background-color: mat-color($accent, 200, 0.4);
|
||||
}
|
||||
|
|
@ -471,4 +520,25 @@ $daesang-grey: (
|
|||
background-color: mat-color($accent, B100);
|
||||
}
|
||||
}
|
||||
|
||||
.rightDrawer-item {
|
||||
.footer-fix {
|
||||
.mat-paginator-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
.footer-fix {
|
||||
height: 100px;
|
||||
.mat-paginator-container {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
.mat-paginator-page-size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -165,22 +165,3 @@ $tablet-s-width: 768px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//대화창 공통
|
||||
::ng-deep .bubble {
|
||||
.bubble-main {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
a {
|
||||
color: #0367a6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
min-width: 300px;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,10 +67,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .message-row.me > .event-info {
|
||||
border-radius: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.feather-calendar {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,10 +96,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .message-row.me > .event-info {
|
||||
border-radius: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.feather-calendar {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,14 +50,14 @@ $search-item-color: #444444;
|
|||
min-width: 30px;
|
||||
padding: 0 10px;
|
||||
align-self: center;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.7em;
|
||||
font-weight: normal;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .chat-search {
|
||||
.chat-search {
|
||||
margin: 0 4px 4px;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
|
|
@ -67,7 +67,7 @@ $search-item-color: #444444;
|
|||
.search-form {
|
||||
form {
|
||||
display: flex;
|
||||
icon-img {
|
||||
.icon-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@ $search-item-color: #444444;
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .chatroom-search {
|
||||
.chatroom-search {
|
||||
position: relative;
|
||||
.btns {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -79,69 +79,36 @@
|
|||
<mat-list>
|
||||
<mat-list-item
|
||||
*ngFor="let oldAttachment of oldAttachmentList"
|
||||
class="attach-file"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="file-name">
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span
|
||||
>{{ oldAttachment.resContent }}
|
||||
>
|
||||
<span class="file-name">{{ oldAttachment.resContent }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="기존파일삭제"
|
||||
(click)="onClickDeleteOldAttachment(oldAttachment)"
|
||||
>
|
||||
<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>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
*ngFor="let attachment of attachmentList"
|
||||
class="attach-file"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="file-name">
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span
|
||||
>{{ attachment.name }}
|
||||
><span class="file-name">{{ attachment.name }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="파일삭제"
|
||||
(click)="onClickDelelteAttachment(attachment)"
|
||||
>
|
||||
<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>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
|
|
|
|||
|
|
@ -128,25 +128,30 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.attach-file-list {
|
||||
width: 100%;
|
||||
.attach-file {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
.mat-list-item-content {
|
||||
padding: 0 !important;
|
||||
.file-name {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0 -16px;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
span {
|
||||
margin-right: 6px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.file-name {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
button {
|
||||
flex: 0 0 auto;
|
||||
width: 24px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="mat-elevation-z6 btn-upload-profile-image"
|
||||
class="mat-elevation-z6 icon-button btn-upload-profile-image"
|
||||
*ngIf="isMe && editableProfileImage"
|
||||
matTooltip="{{ 'profile.changeProfileImage' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"
|
||||
(click)="profileImageFileInput.click()"
|
||||
>
|
||||
<span class="mdi mdi-upload mdi-18px"></span>
|
||||
<i class="mid mdi-camera"></i>
|
||||
</button>
|
||||
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -206,22 +206,19 @@ $login-max-height: 800px;
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .btn-upload-profile-image {
|
||||
.btn-upload-profile-image {
|
||||
display: flex;
|
||||
margin-left: -26px;
|
||||
margin-right: 10px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
&.mat-mini-fab {
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user