237 lines
7.3 KiB
SCSS
237 lines
7.3 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
*
|
|
* @authors yutent (yutent@doui.cc)
|
|
* @date 2017-09-19 18:00:24
|
|
* @version $Id$
|
|
*/
|
|
|
|
@import "var.scss";
|
|
|
|
|
|
.do-layer {display:flex;justify-content:center;align-items:center;width:auto;height:auto;
|
|
|
|
a {text-decoration:none;}
|
|
|
|
|
|
.layer-box {flex:0 auto;position:absolute;z-index:65535;opacity:0;
|
|
|
|
&.shift {transition: all .5s ease-out;}
|
|
|
|
|
|
|
|
|
|
&.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;word-break:break-all;word-wrap: break-word;
|
|
|
|
.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;
|
|
|
|
.layer-content {padding:10px;}
|
|
}
|
|
|
|
|
|
&.type-4 {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;}
|
|
}
|
|
|
|
|
|
/* loading类弹层 */
|
|
&.type-6 {z-index:65539;box-shadow:none;background:transparent;
|
|
|
|
.layer-content {display:flex;justify-content:center;align-items:center;}
|
|
}
|
|
|
|
|
|
/* 特殊类弹层(toast弹层) */
|
|
&.type-toast {position:fixed;min-width:10px;padding:0;background:transparent;
|
|
|
|
.layer-content {min-height:40px;height:40px;}
|
|
|
|
.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 {
|
|
|
|
.dot-box {width:70%;height:70%;margin:15%;line-height:70px;font-size:70px;text-align:center;animation: circle .8s infinite linear;
|
|
|
|
i {display:block;width:100%;height:100%;}
|
|
}
|
|
}
|
|
|
|
|
|
/* 频谱波动 */
|
|
&.style-2 {height:40px;
|
|
|
|
.dot-box{display:flex;justify-content:center;width:100%;height:100%;
|
|
|
|
i {float:left;display:block;width:6px;height:100%;margin:0 3px;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-3 {width:50px;height:50px;
|
|
|
|
.dot-box{width:100%;height:100%;
|
|
|
|
i {position:absolute;display:block;width:100%;height:100%;animation: circle2 2s infinite ease-in-out;transform: rotate(45deg);opacity:.5;
|
|
|
|
&::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-4 {width:60px;height:60px;
|
|
|
|
.dot-box{
|
|
|
|
i {float:left;display:block;width:20px;height:20px;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:transparent;backdrop-filter:blur(5px);
|
|
|
|
&.shift {transition: all .5s ease-out;}
|
|
&.inner {position:absolute;}
|
|
}
|
|
&:active {z-index:65536;}
|
|
}
|
|
|
|
|
|
/* 指令式的tips */
|
|
.do-layer__tips {visibility:hidden;position:absolute;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;}
|
|
}
|
|
|
|
|
|
|
|
@keyframes circle {
|
|
to {transform: rotate(360deg)}
|
|
}
|
|
|
|
@keyframes circle2 {
|
|
70%,to {transform: rotate(405deg);opacity:1}
|
|
}
|
|
|
|
|
|
@keyframes bounce {
|
|
25% {transform: scaleY(1);}
|
|
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%