ng-deep 제거

This commit is contained in:
khk 2020-03-30 17:54:36 +09:00
parent a6e1150cb9
commit f3ec2412dc
13 changed files with 224 additions and 545 deletions

View File

@ -18,9 +18,6 @@
.message-item { .message-item {
cursor: pointer; cursor: pointer;
} }
::ng-deep .ps__rail-y {
left: auto !important;
}
.message-box { .message-box {
position: relative; position: relative;
height: 100%; height: 100%;

View File

@ -1560,7 +1560,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
CreateChatDialogData, CreateChatDialogData,
CreateChatDialogResult CreateChatDialogResult
>(CreateChatDialogComponent, { >(CreateChatDialogComponent, {
width: '600px', maxWidth: '94vw',
maxHeight: '90vh',
data: { data: {
type: UserSelectDialogType.MessageForward, type: UserSelectDialogType.MessageForward,
title: this.translateService.instant('chat.forwardEventTo'), title: this.translateService.instant('chat.forwardEventTo'),
@ -1765,6 +1766,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
CreateChatDialogData, CreateChatDialogData,
CreateChatDialogResult CreateChatDialogResult
>(CreateChatDialogComponent, { >(CreateChatDialogComponent, {
maxWidth: '94vw',
maxHeight: '90vh',
data: { data: {
type: UserSelectDialogType.EditChatMember, type: UserSelectDialogType.EditChatMember,
title: this.translateService.instant('chat.modifyRoomMember'), title: this.translateService.instant('chat.modifyRoomMember'),
@ -1831,6 +1834,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
SelectGroupDialogData, SelectGroupDialogData,
SelectGroupDialogResult SelectGroupDialogResult
>(SelectGroupDialogComponent, { >(SelectGroupDialogComponent, {
maxWidth: '90vw',
maxHeight: '94vh',
data: { data: {
title: this.translateService.instant('chat.addMemberToGroup') title: this.translateService.instant('chat.addMemberToGroup')
} }

View File

@ -30,6 +30,8 @@
} }
} }
} }
//이용시 주의사항
::ng-deep.use-caution { ::ng-deep.use-caution {
.notice { .notice {
ol { ol {

View File

@ -47,7 +47,7 @@
} }
.dialog-tab-grouplist { .dialog-tab-grouplist {
height: calc(100% - 140px); height: calc(100% - 130px);
width: 100%; width: 100%;
.group, .group,
.search-result { .search-result {
@ -64,7 +64,7 @@
} }
} }
::ng-deep .dialog-tab-chatlist { /*::ng-deep .dialog-tab-chatlist {
height: 508px; height: 508px;
width: 100%; width: 100%;
.chat { .chat {
@ -82,10 +82,10 @@
} }
} }
} }
*/
::ng-deep .dialog-tab-orglist { ::ng-deep .dialog-tab-orglist {
width: 100%; width: 100%;
height: calc(100% - 150px); height: calc(100% - 130px);
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
position: relative; position: relative;
.oraganization { .oraganization {
@ -95,7 +95,6 @@
&-tab { &-tab {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
// border-bottom: 1px solid #dddddd;
position: relative; position: relative;
&-tree { &-tree {
display: inline-flex; display: inline-flex;
@ -133,8 +132,8 @@
margin-top: 10px; margin-top: 10px;
} }
.mat-chip.mat-standard-chip .mat-chip-remove { .mat-chip.mat-standard-chip .mat-chip-remove {
line-height: 24px;
} }
.confirm-card { .confirm-card {
.mat-card-content { .mat-card-content {
.content-box { .content-box {

View File

@ -124,7 +124,8 @@ export class MessageWriteDialogComponent implements OnInit {
CreateChatDialogData, CreateChatDialogData,
CreateChatDialogResult CreateChatDialogResult
>(CreateChatDialogComponent, { >(CreateChatDialogComponent, {
//width: '600px', maxWidth: '94vw',
maxHeight: '90vh',
data: { data: {
type: UserSelectDialogType.EditChatMember, type: UserSelectDialogType.EditChatMember,
title: this.translateService.instant('message.selectRecipient'), title: this.translateService.instant('message.selectRecipient'),

View File

@ -1,358 +1,15 @@
$desktop-l-width: 1440px;
$tablet-l-width: 1024px;
$tablet-s-width: 768px;
$mob-l-width: 640px;
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
@content;
}
}
.login { .login {
width: 100%; width: 100%;
background-size: cover; height: 100%;
height: calc(100% - 50px);
background: #eaeff1;
margin-top: 50px;
overflow: hidden;
/*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
background: linear-gradient(to top, #93a3af, #eaeff1);*/
.login-wrapper { .login-wrapper {
flex: 1 0 auto; display: flex;
background-color: #ffffff;
background-size: 100% auto;
position: relative;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex;
}
}
$main: #777;
$back: #aaa;
$accent: hsl(220, 50%, 40%);
$sans: 'Open Sans', sans-serif;
$heebo: 'Heebo', sans-serif;
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
$base: 3vh;
$time: 1800ms;
$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
@mixin word-break-keep {
word-break: keep-all;
}
.slider {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
&_wrap {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translateX(100%); .login-form-box {
top: 0%; width: 300px;
left: 0; height: 400px;
right: auto;
overflow: hidden;
transition: transform $time/4 $ease-in-out;
transform-origin: 0% 50%;
transition-delay: $time/4;
opacity: 0;
&-hacked {
opacity: 1;
}
}
&_back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter $time/4 $ease-in-out;
background-color: #2d3a4a;
}
&_inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.7);
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
opacity $time/4 step-end;
opacity: 0;
//box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
padding: $base * 3;
box-sizing: border-box;
border: 1px solid #ffffff;
}
&_header {
display: flex;
flex-flow: row;
width: 40%;
height: 20px;
justify-content: center;
font-size: $base * 0.6;
color: #ffffff;
.company-name {
flex: 0 0 auto;
padding-right: 20px;
}
.h-line {
flex: 1 1 auto;
align-self: center;
height: 2px;
border-bottom: 1px solid #ffffff;
}
}
&_content {
position: relative;
top: 64%;
width: 40%;
transform: translateY(-50%);
color: white;
font-family: $hangul;
opacity: 0;
transition: opacity $time/4;
h1 {
font-weight: 900;
font-size: $base * 1.24;
line-height: 1.2;
margin-bottom: $base/2;
pointer-events: none;
text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
@include word-break-keep();
}
p {
font-size: $base * 0.64;
line-height: $base * 0.9;
margin-bottom: $base/2;
@include word-break-keep();
}
}
&_link {
cursor: pointer;
position: absolute;
display: flex;
justify-content: center;
justify-items: center;
font-family: $heebo;
font-size: 1.2rem;
letter-spacing: $base * 0.1;
font-weight: 100;
display: block;
bottom: 10%;
color: #ffffff;
padding: 10px 60px 10px 30px;
border-radius: 100px;
color: #00dbed;
width: $base * 5;
// next버튼 숨김
display: none;
&:before {
content: '';
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: $base/3;
height: $base/3;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: $heebo;
font-weight: 100;
top: 50%;
left: $base * 4;
}
&:hover {
background-color: #134a67;
color: #ffffff;
}
}
&_slide {
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: transform $time/3 $ease-in-out;
transition-delay: $time/3;
pointer-events: none;
z-index: 0;
&-active {
transform: translatex(0%);
z-index: 2;
.slider_wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
animation: none;
}
.slider_back {
filter: blur(#{$base * 0.2});
transition: filter $time/2 $ease-in-out;
transition-delay: $time/2 !important;
}
.slider_inner {
transform: scale(0.7);
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
pointer-events: auto;
opacity: 1;
transition: transform $time/2 $ease-in-out,
box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
transition-delay: $time/2;
}
.slider_content {
opacity: 1;
transition-delay: $time * 3/4;
}
}
&:not(.slider_slide-active) .slider_wrap {
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
animation-name: hack;
animation-duration: $time/2;
animation-delay: $time/4;
animation-timing-function: $ease-in-out;
}
&:nth-child(1) .slider_back,
&:nth-child(1) .slider_inner {
// background-image: url(/assets/images/login/bg_login01.png);
//background: #eee;
}
&:nth-child(2) .slider_back,
&:nth-child(2) .slider_inner {
// background-image: url(/assets/images/login/bg_login02.png);
//background: #aaa;
}
&:nth-child(3) .slider_back,
&:nth-child(3) .slider_inner {
// background-image: url(/assets/images/login/bg_login03.png);
//background: #888;
}
}
}
::ng-deep .login-form-box {
position: absolute;
width: 20vw;
height: 50%;
min-height: 480px;
display: flex;
justify-content: flex-end;
z-index: 100;
@media screen and (max-width: #{$desktop-l-width}) {
width: 24vw;
min-height: 480px;
}
@media screen and (max-width: #{$tablet-l-width}) {
width: 36vw;
min-height: 420px;
}
.mat-form-field-label-wrapper {
color: #06b2d6;
}
/*.mat-form-field {
padding-top: 20px;
.mat-form-field-wrapper {
padding-bottom: 0;
.mat-form-field-infix {
padding-top: 0;
border: 0;
}
.mat-form-field-label-wrapper {
top: -1.4em;
}
.mat-form-field-underline {
bottom: 0;
}
//min-size 반응형 적용
@include tab {
.mat-form-field-infix {
input {
font-size: 0.9em;
}
}
.mat-form-field-label-wrapper {
font-size: 0.9em;
}
.mat-form-field-subscript-wrapper {
.mat-error {
font-size: 0.8em;
}
}
&.mat-focused,
&:not(.mat-form-field-hide-placeholder) {
.mat-form-field-label-wrapper {
font-size: 0;
}
}
}
}
}
.error-container {
padding-top: 10px;
}*/
}
@media all and (max-width: 1400px) {
.slider {
&_content {
transform: translateY(-50%);
color: white;
font-family: $heebo;
opacity: 0;
transition: opacity $time/4;
h1 {
font-weight: 900;
font-size: $base * 1.2;
margin-bottom: $base;
}
p {
display: none;
}
}
&-active {
.slider_inner {
transform: scale(0.9);
}
} }
} }
} }

View File

@ -55,13 +55,13 @@ $lg-red: (
50: #ffffff, 50: #ffffff,
100: #fff9fc, 100: #fff9fc,
200: #f1e1e5, 200: #f1e1e5,
/*300: #f06292,*/ 300: #ef4c73, 300: #ef4c73,
400: #ec407a, 400: #ec407a,
500: #ed097e, 500: #ed097e,
600: #d81b60, 600: #d81b60,
700: #c2185b, 700: #c2185b,
800: #ad1457, 800: #ad1457,
/*900: #880e4f,*/ 900: #5f2a41, 900: #5f2a41,
A100: #ff80ab, A100: #ff80ab,
A200: #ff4081, A200: #ff4081,
A400: #ff3399, A400: #ff3399,
@ -291,29 +291,12 @@ $daesang-grey: (
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: mat-color($accent, 700); background-color: mat-color($accent, 700);
cursor: pointer; cursor: pointer;
.mat-chip-remove {
opacity: 0.6;
}
} }
.load-container .loader:after { .load-container .loader:after {
background-color: mat-color($accent, 300); 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 { .global-menu {
.mat-tab-label[aria-selected='true'] { .mat-tab-label[aria-selected='true'] {
.mat-tab-label-content { .mat-tab-label-content {
@ -372,7 +355,7 @@ $daesang-grey: (
color: #ffffff; color: #ffffff;
} }
//탭개수에 의한 width 정의 //[S]탭개수에 의한 width 정의
.mat-tab-group { .mat-tab-group {
&.tab_num2 { &.tab_num2 {
.mat-tab-label { .mat-tab-label {
@ -394,8 +377,9 @@ $daesang-grey: (
border: none; border: none;
} }
} }
//[E]탭개수에 의한 width 정의
//쪽지 라디오 버튼 정렬 //[S]쪽지 라디오 버튼 정렬
.message-box { .message-box {
.mat-radio-label { .mat-radio-label {
.mat-radio-label-content { .mat-radio-label-content {
@ -403,10 +387,23 @@ $daesang-grey: (
} }
} }
} }
//[E]쪽지 라디오 버튼 정렬
//[S]mat-tab-group
/*mat-tab-group {
display: flex;
flex-direction: row;
.mat-tab-header {
width: 100%;
.mat-tab-label-container {
width: 100%;
}
}
}*/
mat-tab-group[vertical] { mat-tab-group[vertical] {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
.mat-tab-header { .mat-tab-header {
border-bottom: none; border-bottom: none;
.mat-tab-labels { .mat-tab-labels {
@ -435,6 +432,32 @@ $daesang-grey: (
} }
} }
//설정 general-theme
.theme-list {
.mat-tab-header {
width: 100%;
border: none !important;
.mat-tab-labels {
position: relative;
width: 100%;
flex-direction: row !important;
.mat-tab-label {
width: 140px;
height: 120px;
&.mat-tab-label-active {
opacity: 1;
}
.mat-tab-label-content {
position: relative;
flex-flow: column;
width: 100%;
}
}
}
}
}
//[E]mat-tab-group
nav[mat-tab-nav-bar][vertical] { nav[mat-tab-nav-bar][vertical] {
display: flex; display: flex;
flex-direction: row !important; flex-direction: row !important;
@ -466,7 +489,7 @@ $daesang-grey: (
} }
} }
//대화 말풍선 global 적용 //[S]대화 말풍선 global 적용
.message-row { .message-row {
.message-main { .message-main {
.bubble { .bubble {
@ -502,8 +525,22 @@ $daesang-grey: (
} }
} }
} }
//[E]대화 말풍선 global 적용
//[s] 번역 //[S]스티커
.sticker-selector {
.mat-tab-header {
.mat-tab-label {
min-width: 16%;
@media screen and (max-width: #{$tablet-s-width}) {
padding: 0 10px;
}
}
}
}
//[E]스티커
//[S]번역
.translationForm { .translationForm {
background-color: mat-color($accent, 200, 0.4); background-color: mat-color($accent, 200, 0.4);
.select-language { .select-language {
@ -531,6 +568,7 @@ $daesang-grey: (
.translation-preview { .translation-preview {
background-color: mat-color($accent, 900, 0.8); background-color: mat-color($accent, 900, 0.8);
} }
//[E] 번역
.tree-has-child { .tree-has-child {
li { li {

View File

@ -159,7 +159,7 @@ $login-max-height: 800px;
.policy { .policy {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
bottom: 2vh; bottom: 0;
display: block; display: block;
background-color: #58b0b1; background-color: #58b0b1;
width: 100%; width: 100%;

View File

@ -2,39 +2,39 @@
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate> <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
<perfect-scrollbar> <perfect-scrollbar>
<div class="write-form"> <div class="write-form">
<div class="add-row"> <div class="add-row">
<button <button
mat-button mat-button
(click)="onClickReceiverList()" (click)="onClickReceiverList()"
class="mat-mini-fab mat-button-base mat-accent mat-elevation-z" class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
> >
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
<span class="mat-fab__label">{{ <span class="mat-fab__label">{{
'message.addReceiver' | translate 'message.addReceiver' | translate
}}</span> }}</span>
</button> </button>
<span <span
*ngIf="!!receiverList && receiverList.length > 0" *ngIf="!!receiverList && receiverList.length > 0"
class="receiver-sum text-accent-color" class="receiver-sum text-accent-color"
> >
{{ {{
'message.countOfReceiver' 'message.countOfReceiver'
| translate: { count: receiverList.length } | translate: { count: receiverList.length }
}} }}
</span> </span>
</div> </div>
<mat-chip-list #chipList aria-label="receiver selection"> <mat-chip-list #chipList aria-label="receiver selection">
<mat-chip <mat-chip
*ngFor="let receiver of receiverList" *ngFor="let receiver of receiverList"
removable="true" removable="true"
(removed)="onRemovedReceiver(receiver)" (removed)="onRemovedReceiver(receiver)"
> >
{{ receiver.name }} {{ receiver.name }}
<span matChipRemove class="mdi mdi-close"></span> <span matChipRemove class="mdi mdi-close"></span>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
<!--<mat-form-field class="message-receiver-list"> <!--<mat-form-field class="message-receiver-list">
<perfect-scrollbar> <perfect-scrollbar>
<mat-chip-list #chipList aria-label="receiver selection"> <mat-chip-list #chipList aria-label="receiver selection">
<mat-chip <mat-chip
@ -56,65 +56,67 @@
</mat-form-field> </mat-form-field>
--> -->
<mat-form-field class="message-title"> <mat-form-field class="message-title">
<input <input
matInput matInput
#inputTitle #inputTitle
formControlName="title" formControlName="title"
placeholder="{{ 'message.fieldTitle' | translate }}" placeholder="{{ 'message.fieldTitle' | translate }}"
maxlength="100" maxlength="100"
/> />
<mat-hint align="end">{{ inputTitle.value?.length || 0 }}/100</mat-hint> <mat-hint align="end"
</mat-form-field> >{{ inputTitle.value?.length || 0 }}/100</mat-hint
>
</mat-form-field>
<div class="message-content"> <div class="message-content">
<mat-card-content class="message-write-body"> <mat-card-content class="message-write-body">
<div <div
#editor #editor
class="ucap-message-write-editor" class="ucap-message-write-editor"
contenteditable="true" contenteditable="true"
(paste)="onPasteEditor($event)" (paste)="onPasteEditor($event)"
(input)="onInputEditor()" (input)="onInputEditor()"
></div> ></div>
<input type="file" #fileInput style="display: none" multiple /> <input type="file" #fileInput style="display: none" multiple />
<mat-list> <mat-list>
<mat-list-item <mat-list-item
*ngFor="let oldAttachment of oldAttachmentList" *ngFor="let oldAttachment of oldAttachmentList"
class="attach-file-list" class="attach-file-list"
> >
<div class="attach-file"> <div class="attach-file">
<span class="mdi mdi-attachment mdi-18px"> </span> <span class="mdi mdi-attachment mdi-18px"> </span>
<span class="file-name">{{ oldAttachment.resContent }}</span> <span class="file-name">{{ oldAttachment.resContent }}</span>
<button <button
mat-button mat-button
class="icon-button" class="icon-button"
aria-label="기존파일삭제" aria-label="기존파일삭제"
(click)="onClickDeleteOldAttachment(oldAttachment)" (click)="onClickDeleteOldAttachment(oldAttachment)"
> >
<i class="mid mdi-18px mdi-delete-outline"></i> <i class="mid mdi-18px mdi-delete-outline"></i>
</button> </button>
</div> </div>
</mat-list-item> </mat-list-item>
<mat-list-item <mat-list-item
*ngFor="let attachment of attachmentList" *ngFor="let attachment of attachmentList"
class="attach-file-list" class="attach-file-list"
> >
<div class="attach-file"> <div class="attach-file">
<span class="mdi mdi-attachment mdi-18px"> </span <span class="mdi mdi-attachment mdi-18px"> </span
><span class="file-name">{{ attachment.name }}</span> ><span class="file-name">{{ attachment.name }}</span>
<button <button
mat-button mat-button
class="icon-button" class="icon-button"
aria-label="파일삭제" aria-label="파일삭제"
(click)="onClickDelelteAttachment(attachment)" (click)="onClickDelelteAttachment(attachment)"
> >
<i class="mid mdi-18px mdi-delete-outline"></i> <i class="mid mdi-18px mdi-delete-outline"></i>
</button> </button>
</div> </div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</mat-card-content> </mat-card-content>
</div> </div>
</div> </div>
</perfect-scrollbar> </perfect-scrollbar>
</form> </form>

View File

@ -18,10 +18,9 @@
animationDuration="0ms" animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)" (selectedTabChange)="onSelectedTabChange($event)"
fxLayout="row" fxLayout="row"
horizontal
class="theme-list" class="theme-list"
> >
<mat-tab> <mat-tab fxLayout="row" fxFlex="0 0 auto">
<ng-template mat-tab-label class="theme-item"> <ng-template mat-tab-label class="theme-item">
<div class="theme-box default-theme"></div> <div class="theme-box default-theme"></div>
<div class="theme-name"> <div class="theme-name">

View File

@ -23,33 +23,6 @@
} }
} }
::ng-deep .theme-list {
.mat-tab-header {
width: 100%;
border: none !important;
.mat-tab-labels {
position: relative;
width: 100%;
flex-direction: row !important;
.mat-tab-label {
width: 140px;
height: 120px;
&.mat-tab-label-active {
opacity: 1;
}
.mat-tab-label-content {
position: relative;
flex-flow: column;
width: 100%;
}
}
}
}
.mat-tab-body-wrapper {
border: none !important;
}
}
.theme-box { .theme-box {
width: 140px; width: 140px;
height: 98px; height: 98px;
@ -75,3 +48,6 @@
position: relative; position: relative;
padding-top: 10px; padding-top: 10px;
} }
.theme-item {
height: 100%;
}

View File

@ -20,6 +20,15 @@ body:not(.is-mobile) {
border-radius: 12px; border-radius: 12px;
} }
} }
.cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper {
width: 100%;
height: 100%;
contain: none;
}
}
perfect-scrollbar { perfect-scrollbar {
.ps-content { .ps-content {
position: inherit; position: inherit;
@ -27,3 +36,10 @@ perfect-scrollbar {
height: inherit; height: inherit;
} }
} }
.ps__rail-y {
left: auto !important;
& > .ps__thumb-y {
margin-right: -2px;
}
}

View File

@ -1,52 +1,15 @@
$tablet-l-width: 1024px; $tablet-l-width: 1024px;
$tablet-s-width: 768px; $tablet-s-width: 768px;
::ng-deep .sticker-selector { .sticker-selector {
height: 210px; .mat-tab-group {
border-top: 1px solid #cccccc; height: 200px;
.mat-tab-header {
.mat-tab-label {
//padding: 0 10px;
min-width: 16%;
@media screen and (max-width: #{$tablet-s-width}) {
padding: 0 10px;
}
}
}
.mat-tab-body-wrapper {
height: 150px !important;
overflow: auto;
}
@media screen and (max-width: #{$tablet-s-width}) {
height: 180px;
.mat-tab-body-wrapper {
height: 130px;
}
}
}
.sticker-item-box {
flex-wrap: wrap;
padding: 10px 20px 0;
overflow: auto;
.sticker-item {
width: 60px;
margin-bottom: 10px;
display: inline-flex;
cursor: pointer;
}
}
@media screen and (max-width: #{$tablet-s-width}) {
.sticker-item-box {
.sticker-item {
width: 50px;
}
} }
} }
.selected-sticker { .selected-sticker {
height: 80px;
border-top: 1px solid #cccccc;
position: relative; position: relative;
padding: 10px 20px; padding: 10px 20px;
text-align: right; text-align: right;
@ -63,3 +26,27 @@ $tablet-s-width: 768px;
color: #ffffff; color: #ffffff;
} }
} }
.sticker-item-box {
flex-wrap: wrap;
padding: 10px 20px 0;
overflow: auto;
height: 150px !important;
overflow: auto;
@media screen and (max-width: #{$tablet-s-width}) {
height: 130px;
}
.sticker-item {
width: 60px;
height: 60px;
margin-bottom: 10px;
display: inline-flex;
cursor: pointer;
@media screen and (max-width: #{$tablet-s-width}) {
width: 50px;
height: 50px;
}
}
}