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

add Modal component

Browse source 
add Modal component
This commit is contained in:
梁灏 2016-09-29 15:47:19 +08:00
parent 39e6e96563
commit be966e9f49
20 changed files with 763 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

36
styles/animation/ease.less Normal file
View file

@ -0,0 +1,36 @@
.ease-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
animation-duration: @transition-time;
}
.@{className}-leave {
animation-timing-function: linear;
animation-duration: @transition-time;
}
}
.ease-motion(ease, ivuEase);
@keyframes ivuEaseIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes ivuEaseOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}

3
styles/animation/index.less
View file

@ -23,4 +23,5 @@
}
@import "fade";
@import "move";
@import "move";
@import "ease";

11
styles/components/alert.less
View file

@ -62,16 +62,7 @@
}
&-close {
font-size: 12px;
position: absolute;
right: 16px;
top: 8px;
overflow: hidden;
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(-3px);
}
.content-close(-3px);
}
&-with-desc {

16
styles/components/card.less
View file

@ -35,21 +35,7 @@
}
&-head {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
line-height: 1;
p {
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-header;
}
&-extra {

3
styles/components/index.less
View file

@ -18,4 +18,5 @@
@import "progress";
@import "timeline";
@import "page";
@import "steps";
@import "steps";
@import "modal";

133
styles/components/modal.less Normal file
View file

@ -0,0 +1,133 @@
@modal-prefix-cls: ~"@{css-prefix}modal";
@confirm-prefix-cls: ~"@{css-prefix}modal-confirm";
.@{modal-prefix-cls} {
width: auto;
margin: 0 auto;
position: relative;
outline: none;
top: 100px;
&-hidden {
display: none;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask;
}
&-content {
position: relative;
background-color: #fff;
border: 0;
border-radius: @border-radius-base;
background-clip: padding-box;
}
&-header {
.content-header;
}
&-close {
.content-close;
}
&-body {
padding: 16px;
font-size: 12px;
line-height: 1.5;
}
&-footer {
border-top: 1px solid @border-color-split;
padding: 10px 18px 10px 10px;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
}
@media (max-width: 768px) {
.@{modal-prefix-cls} {
width: auto !important;
margin: 10px;
}
.vertical-center-modal {
.@{modal-prefix-cls} {
flex: 1;
}
}
}
.@{confirm-prefix-cls} {
padding: 10px 25px 20px;
&-head {
&-icon {
display: inline-block;
font-size: 28px;
margin-right: 5px;
padding: 0 1px;
position: relative;
top: 5px;
&-info {
color: @primary-color;
}
&-success {
color: @success-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
&-confirm {
color: @warning-color;
}
}
&-title {
display: inline-block;
font-size: @font-size-base;
color: @text-color;
font-weight: 700;
}
}
&-body{
margin-left: 35px;
margin-top: 8px;
font-size: 12px;
color: @text-color;
}
&-footer{
margin-top: 20px;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
}

32
styles/mixins/content.less Normal file
View file

@ -0,0 +1,32 @@
@icon-prefix-cls: ~"@{css-prefix}icon";
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
line-height: 1;
p {
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.content-close(@top: 0) {
font-size: 12px;
position: absolute;
right: 16px;
top: 8px;
overflow: hidden;
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(@top);
}
}

4
styles/mixins/index.less
View file

@ -11,4 +11,6 @@
@import "close";
@import "checkbox";
@import "input";
@import "breadcrumb";
@import "breadcrumb";
@import "mask";
@import "content"; // card、modal

13
styles/mixins/mask.less Normal file
View file

@ -0,0 +1,13 @@
.mask() {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
&-hidden {
display: none;
}
}

3
styles/themes/default/custom.less
View file

@ -99,9 +99,10 @@
@tag-font-size : 12px;
// Z-index
@zindex-spin : 8;
@zindex-affix : 10;
@zindex-back-top : 10;
@zindex-spin : 8;
@zindex-modal : 1000;
@zindex-message : 1010;
@zindex-notification : 1010;
@zindex-loading-bar : 2000;