setting-frame수정(미완)

This commit is contained in:
khk 2019-11-21 19:08:31 +09:00
parent 44def4db5f
commit 447577aa1b
2 changed files with 74 additions and 29 deletions

View File

@ -10,42 +10,42 @@
<span class="mdi mdi-settings"></span>
일반
</ng-template>
<ucap-settings-general></ucap-settings-general>
<ucap-settings-general class="setting-category general"></ucap-settings-general>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-lock"></span>
개인정보취급방침
</ng-template>
<ucap-settings-privacy></ucap-settings-privacy>
<ucap-settings-privacy class="setting-category"></ucap-settings-privacy>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-bell"></span>
알림
</ng-template>
<ucap-settings-notification></ucap-settings-notification>
<ucap-settings-notification class="setting-category"></ucap-settings-notification>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-headset"></span>
장치
</ng-template>
<ucap-settings-device></ucap-settings-device>
<ucap-settings-device class="setting-category"></ucap-settings-device>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-view-grid-plus"></span>
사용권한
</ng-template>
<ucap-settings-permission></ucap-settings-permission>
<ucap-settings-permission class="setting-category"></ucap-settings-permission>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span class="mdi mdi-phone"></span>
통화
</ng-template>
<ucap-settings-call></ucap-settings-call>
<ucap-settings-call class="setting-category"></ucap-settings-call>
</mat-tab>
</mat-tab-group>
@ -86,11 +86,7 @@
</div>
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">

View File

@ -1,25 +1,24 @@
::ng-deep .cdk-overlay-pane {
width: 600px;
max-height: 90%;
.setting-frame {
height:800px;
}
::ng-deep .setting-frame{
padding: 16px;
height:100%;
min-width: 500px;
position: relative;
.mat-dialog-container {
position: relative;
}
}
}
.confirm-card {
padding: 16px;
min-width: 500px;
position: relative;
.mat-card-header {
position: relative;
width: 100%;
border-bottom:1px solid #dddddd;
margin-bottom: 12px;
.mat-card-header-text {
.mat-card-title {
}
}
}
.mat-card-content {
@ -27,21 +26,24 @@
display: flex;
align-items: flex-start;
height: calc(100% - 100px);
.setting-tab {
width: 100%;
height: 100%;
border-bottom:1px solid #dddddd;
.setting-tab{
position: relative;
.mat-tab-group {
width: 100%;
height: 100%;
width:100%;
height:100%;
.mat-tab-body-wrapper{
border-left:1px solid #dddddd;
position: relative;
height:100%;
padding: 0 0 10px 10px;
}
}
}
.button-farm {
text-align: right;
position: relative;
position: absolute;
width: 100%;
bottom: 10px;
.mat-primary {
@ -49,3 +51,50 @@
}
}
}
::ng-deep .setting-tab{
.mat-tab-group{
position: relative;
height:100%;
width:100%;
.mat-tab-header{
.mat-tab-label-container{
.mat-tab-list{
.mat-tab-labels{
border-bottom:0;
padding-right:10px;
.mat-tab-label{
padding:0 10px;
}
}
}
}
}
.mat-tab-body-wrapper{
.mat-tab-body{
.mat-tab-body-conten{
position:relative;
width:100%;
height:100%;
.mat-list-base{
position:relative;
}
}
}
}
}
}
::ng-deep .setting-category{
.mat-list-base{
position:relative;
.mat-list-item{
font-size:15px;
}
.mat-divider{
}
}
}