drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize Modal style

Browse source 
optimize Modal style
This commit is contained in:
梁灏 2016-11-08 23:46:10 +08:00
parent 3fa1c31eda
commit 09a0430201
7 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/modal/modal.vue
View file

@ -8,7 +8,7 @@
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
@ -175,7 +175,7 @@
let showHead = true;
if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
showHead = false;
}

4
src/styles/components/modal.less
View file

@ -46,7 +46,7 @@
}
&-close {
.content-close;
.content-close(1px, 31px);
}
&-body {
@ -57,7 +57,7 @@
&-footer {
border-top: 1px solid @border-color-split;
padding: 10px 18px 10px 10px;
padding: 12px 18px 12px 10px;
text-align: right;
button + button {
margin-left: 8px;

4
src/styles/mixins/close.less
View file

@ -1,5 +1,5 @@
.close-base(@top: 0) {
font-size: 22px;
.close-base(@top: 0, @icon-font-size: 22px) {
font-size: @icon-font-size;
color: @legend-color;
transition: color @transition-time ease;
position: relative;

15
src/styles/mixins/content.less
View file

@ -2,15 +2,18 @@
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
padding: 14px 16px;
line-height: 1;
p {
p,
&-inner
{
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-size: @font-size-base;
color: @title-color;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -18,8 +21,8 @@
}
}
.content-close(@top: 0) {
font-size: 12px;
.content-close(@top: 0, @icon-font-size: 22px) {
font-size: @font-size-small;
position: absolute;
right: 16px;
top: 8px;
@ -27,6 +30,6 @@
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(@top);
.close-base(@top, @icon-font-size);
}
}