fineP
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dialog-box): [dialog-box] modify smb theme (#1985) 

* fix(dialog-box): [dialog-box] modify smb theme

* fix(dialog-box): [dialog-box] modify smb theme

* fix(dialog-box): modify dialog-box bottom of height
This commit is contained in:
James 2024-08-25 23:24:12 -07:00 committed by GitHub
parent 93f956a576
commit 3799ef19c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/theme/src/dialog-box/index.less
View File

@ -75,15 +75,18 @@
.@{dialog-box-prefix-cls}__title {
flex: 1;
}
.@{dialog-box-prefix-cls}__btn-tools {
display: flex;
justify-content: space-between;
}
.@{dialog-box-prefix-cls}__headerbtn {
position: absolute;
position: relative;
border: none;
background: none;
padding: 0;
line-height: 1;
top: var(--ti-dialog-box-btn-position-top);
right: var(--ti-dialog-box-btn-position-right);
top: calc(0px - var(--ti-dialog-box-btn-tools-position-top));
right: calc(0px - var(--ti-dialog-box-btn-tools-position-right));
cursor: pointer;
&:hover {

6
packages/theme/src/dialog-box/smb-theme.js
View File

@ -10,12 +10,12 @@ export const tinyDialogBoxSmbTheme = {
'ti-dialog-box-body-text-color': 'var(--ti-common-color-text-primary)',
'ti-dialog-box-footer-btn-min-width': 'calc(var(--ti-common-space-base) * 24)',
'ti-dialog-box-drawer-divider-border-color': 'transparent',
'ti-dialog-box-footer-margin-bottom': 'var(--ti-common-space-6x)',
'ti-dialog-box-footer-margin-bottom': 'var(--ti-common-space-8x)',
'ti-dialog-box-footer-align': 'right',
'ti-dialog-box-footer-padding-top': 'var(--ti-common-space-6x)',
'ti-dialog-box-resize-icon-color': 'var(--ti-common-color-icon-normal)',
'ti-dialog-box-resize-icon-color-hover': 'var(--ti-common-color-icon-normal)',
'ti-dialog-box-resize-icon-size': 'var(--ti-common-font-size-2)',
'ti-dialog-box-btn-position-top': 'var(--ti-common-space-5x)',
'ti-dialog-box-btn-position-right': 'var(--ti-common-space-5x)'
'ti-dialog-box-btn-tools-position-top': 'var(--ti-common-size-3x)',
'ti-dialog-box-btn-tools-position-right': 'var(--ti-common-size-3x)'
}

56
packages/vue/src/dialog-box/src/pc.vue
View File

@ -38,33 +38,35 @@
<slot name="title">
<span class="tiny-dialog-box__title">{{ title }}</span>
</slot>
<button
v-if="resize && !state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(true)"
>
<icon-fullscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="resize && state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(false)"
>
<icon-minscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="showClose"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Close"
@click="handleClose('close', $event)"
>
<icon-close class="tiny-svg-size tiny-dialog-box__close" />
</button>
<div class="tiny-dialog-box__btn-tools">
<button
v-if="resize && !state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(true)"
>
<icon-fullscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="resize && state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(false)"
>
<icon-minscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="showClose"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Close"
@click="handleClose('close', $event)"
>
<icon-close class="tiny-svg-size tiny-dialog-box__close" />
</button>
</div>
</div>
<div class="tiny-dialog-box__body">
<slot></slot>