252 lines
7.8 KiB
SCSS
252 lines
7.8 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
*
|
|
* @authors yutent (yutent@doui.cc)
|
|
* @date 2017-09-19 18:00:24
|
|
* @version $Id$
|
|
*/
|
|
|
|
@import "var.scss";
|
|
|
|
|
|
.do-layer {width:auto;height:auto;
|
|
|
|
a {text-decoration:none;}
|
|
|
|
|
|
.layer-box {position:absolute;z-index:65535;opacity:0;
|
|
|
|
&.shift {transition: all .5s ease-out;}
|
|
|
|
&.__tc {top:0;left:50%;}
|
|
&.__tl {top:0;left:0;}
|
|
&.__tr {top:0;left:100%;}
|
|
&.__ct {top:50%;left:50%;}
|
|
&.__cc {top:47.5%;left:50%;}
|
|
&.__bc {top:100%;left:50%;}
|
|
&.__bl {top:100%;left:0;}
|
|
&.__br {top:100%;left:100%;}
|
|
|
|
|
|
|
|
&.scale {transform:scale(1.02);transition:transform .1s linear;}
|
|
|
|
/* 默认皮肤 */
|
|
&.skin-normal {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3);
|
|
|
|
|
|
/* 弹层标题栏 */
|
|
.layer-title {width:100%;height:43px;padding:0 10px;line-height:43px;font-size:16px;color:nth($cd, 2);}
|
|
|
|
/* 弹层主体内容 */
|
|
.layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;word-break:break-all;word-wrap: break-word;
|
|
|
|
// .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
|
|
|
|
.prompt-value {width: 100%;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
|
|
|
|
&.alert {border-color:nth($cr, 2)}
|
|
&:focus {border-color:nth($ct, 2)}
|
|
}
|
|
.msg-box {line-height:30px;}
|
|
}
|
|
|
|
|
|
/* 弹层按钮部分 */
|
|
.layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
|
|
|
|
a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 2);text-align:center;cursor:pointer;
|
|
|
|
&::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
|
|
|
|
&:hover {
|
|
&::before {opacity:1;transform:scale(1, .8);}
|
|
}
|
|
&:active {background:nth($cp, 2)}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* ;alert/confirm/prompt 3类弹层 */
|
|
&.type-1,
|
|
&.type-2,
|
|
&.type-3 {max-width:600px;min-width:300px;}
|
|
|
|
|
|
&.type-4 {padding:0;
|
|
|
|
.layer-content {padding:0;}
|
|
.frame-box {display:block;width:100%;height:100%;margin:0;padding:0;border:0;resize: none;}
|
|
}
|
|
|
|
/* tips类弹层(type 5) */
|
|
&.type-5 {visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);box-shadow:none;
|
|
|
|
i.arrow {position:absolute;width:0;height:0;border:6px solid transparent;content: ""}
|
|
i.offset-top {left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
|
|
i.offset-bottom {left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
|
|
i.offset-top-left {right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
|
|
i.offset-bottom-left {right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
|
|
|
|
.layer-content {min-height:20px;margin:0;padding:0}
|
|
}
|
|
|
|
|
|
/* loading类弹层 */
|
|
&.type-6 {z-index:65539;box-shadow:none;background:transparent;}
|
|
|
|
|
|
/* 特殊类弹层(toast弹层) */
|
|
&.type-toast {position:fixed;min-width:10px;padding:0;background:transparent;
|
|
|
|
.layer-content {min-height:40px;height:40px;padding:0}
|
|
|
|
.toast-box {display:inline-block;position:relative;min-height:40px;padding:5px 12px 5px 50px;line-height:28px;border-radius:3px;word-break: break-all;
|
|
|
|
&.style-info {border:1px solid nth($ct, 2);background:#edfbf8;color:nth($ct, 3);}
|
|
&.style-warn {border:1px solid nth($co, 2);background:#fffbed;color:nth($co, 3);}
|
|
&.style-deny {border:1px solid nth($cr, 2);background:#fffbed;color:nth($cr, 3);}
|
|
|
|
>i {position:absolute;left:12px;top:5px;line-height:28px;font-size:26px;}
|
|
}
|
|
}
|
|
|
|
|
|
/* 内置几种loading动画 */
|
|
.loading {position:relative;width:100px;height:100px;margin:auto;
|
|
|
|
.dot-box {position:absolute;display:block;}
|
|
|
|
/* 常规的转动 */
|
|
&.style-1,&.style-2 {
|
|
|
|
.dot-box {width:70%;height:70%;margin:15%;line-height:70px;font-size:70px;text-align:center;
|
|
|
|
i {display:block;width:100%;height:100%;}
|
|
}
|
|
}
|
|
|
|
&.style-1 {
|
|
.dot-box {animation: circle .8s infinite linear;}
|
|
}
|
|
&.style-2 {
|
|
.dot-box {animation: round .6s infinite linear;}
|
|
}
|
|
|
|
/* 频谱波动 */
|
|
&.style-3 {height:50px;
|
|
|
|
.dot-box{width:100%;height:100%;
|
|
|
|
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);animation: bounce 1s infinite ease-in-out;transform:scaleY(.6);
|
|
|
|
&:nth-child(2) {animation-delay:.1s;}
|
|
&:nth-child(3) {animation-delay:.2s;}
|
|
&:nth-child(4) {animation-delay:.3s;}
|
|
&:nth-child(5) {animation-delay:.4s;}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 缓动圆圈 */
|
|
&.style-4 {
|
|
|
|
.dot-box{width:60%;height:60%;margin:20%;
|
|
|
|
i {position:absolute;display:block;width:60px;height:60px;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);
|
|
|
|
&::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
|
|
|
|
&:nth-child(2) {animation-delay:.1s;}
|
|
&:nth-child(3) {animation-delay:.2s;}
|
|
&:nth-child(4) {animation-delay:.3s;}
|
|
&:nth-child(5) {animation-delay:.4s;}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 矩阵 */
|
|
&.style-5 {
|
|
|
|
.dot-box{width:90%;height:90%;margin:5%;
|
|
|
|
i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);animation: grid 1.5s infinite linear;
|
|
|
|
&:nth-child(4),
|
|
&:nth-child(8) {animation-delay:.2s;}
|
|
&:nth-child(1),
|
|
&:nth-child(5),
|
|
&:nth-child(9) {animation-delay:.3s;}
|
|
|
|
&:nth-child(2),
|
|
&:nth-child(6) {animation-delay:.4s;}
|
|
|
|
&:nth-child(3) {animation-delay:.5s;}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.mask {position:fixed;z-index:65534;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);
|
|
|
|
&.shift {transition: all .5s ease-out;}
|
|
&.inner {position:absolute;}
|
|
}
|
|
&:active {z-index:65536;}
|
|
}
|
|
|
|
|
|
/* 指令式的tips */
|
|
.do-layer__tips {visibility:hidden;position:fixed;z-index:65534;min-width:75px;max-width:600px;padding:10px;line-height:1.5;border-radius:3px;font-size:14px;color:#fff;background:rgba(0,0,0,.5);
|
|
|
|
i.arrow {position:absolute;width:0;height:0;border:6px solid transparent;content: ""}
|
|
i.offset-top {left:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
|
|
i.offset-bottom {left:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
|
|
i.offset-top-left {right:5px;bottom:-14px;border-top:8px solid rgba(0,0,0,.5);}
|
|
i.offset-bottom-left {right:5px;top:-14px;border-bottom:8px solid rgba(0,0,0,.5);}
|
|
|
|
.layer-content {min-height:20px;margin:0;padding:0}
|
|
}
|
|
|
|
|
|
|
|
@keyframes circle {
|
|
to {transform: rotate(360deg)}
|
|
}
|
|
|
|
@keyframes circle2 {
|
|
70%,to {transform: rotate(405deg);}
|
|
}
|
|
|
|
@keyframes round {
|
|
from,24.99%, to {transform:rotate(0deg)}
|
|
25%,49.99% {transform:rotate(90deg)}
|
|
50%,74.99% {transform:rotate(180deg)}
|
|
75%,99.99% {transform:rotate(270deg)}
|
|
}
|
|
|
|
|
|
@keyframes bounce {
|
|
25% {transform: scaleY(1.3);}
|
|
50% {transform: scaleY(.6);}
|
|
}
|
|
|
|
|
|
@keyframes grid {
|
|
36% {transform: scale(.1);opacity:.3}
|
|
60% {transform: scale(1);opacity:1}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width:480px) {
|
|
.do-layer {
|
|
.layer-box {
|
|
&.type-1,&.type-2,&.type-3,&.type-4,&.type-7 {width:90%;}
|
|
}
|
|
}
|
|
} |
JavaScript
95.2%
CSS
4.8%