删除旧样式文件
宇天
parent
33111851db
commit
045bc6c6be
|
|
@ -1,106 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors yutent (yutent@doui.cc)
|
|
||||||
* @date 2016-02-14 14:00:06
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
@import "var.scss";
|
|
||||||
|
|
||||||
.do-datepicker { position:relative;display:inline-block;width:100%; height:100%;color:nth($cd, 2);font-size:14px;
|
|
||||||
|
|
||||||
&.mini {width:155px;height:30px;line-height:30px;}
|
|
||||||
&.medium {width:175px;height:35px;line-height:35px;}
|
|
||||||
&.large {width:195px;height:40px;line-height:40px;}
|
|
||||||
|
|
||||||
a { text-decoration:none;color:nth($cd, 2);
|
|
||||||
|
|
||||||
&:hover {color:nth($cd, 1);}
|
|
||||||
&:active {color:nth($cd, 3);}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-input {position:relative; display:block; width:100%; height:100%;
|
|
||||||
|
|
||||||
.input { width:100%; height:100%;padding:0 5px; line-height:18px; border:1px solid nth($cp, 3);color:nth($cd, 2); @include ts();
|
|
||||||
|
|
||||||
&:focus { border-color:nth($ct, 2); }
|
|
||||||
&[disabled] {background:#f7f8fb;cursor:not-allowed;}
|
|
||||||
}
|
|
||||||
.icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.calendar-box { position:fixed;z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cd, 2); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 2);content:""}
|
|
||||||
|
|
||||||
dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
|
|
||||||
|
|
||||||
a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;cursor:pointer;
|
|
||||||
|
|
||||||
&::after {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
|
|
||||||
|
|
||||||
&:active {font-weight:bold;
|
|
||||||
&::after {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.prev-month {left:35px;}
|
|
||||||
&.next-month {left:auto; right:35px;}
|
|
||||||
&.next-year {left:auto; right:0;}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
dd.table { width:100%; height:auto;
|
|
||||||
.thead {width:100%; height:35px; margin-bottom:5px;color:#fff;}
|
|
||||||
span.td {position:relative;float:left; width:33px;margin:1px;border-radius:3px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.tr span.td { height:30px; line-height:30px;cursor:pointer;
|
|
||||||
|
|
||||||
&::before {position:absolute;left:1px;top:0;z-index:-1;display:block;width:30px;height:30px;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0); transition:opacity .45s cubic-bezier(0.23, 1, 0.32, 1),transform .45s cubic-bezier(0.23, 1, 0.32, 1);}
|
|
||||||
|
|
||||||
&:hover,&.selected {
|
|
||||||
&::before {opacity:1;transform:scale(1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.weeken {color:nth($ct, 3);}
|
|
||||||
&.selected {color:#fff;
|
|
||||||
&::before {background:nth($ct, 1);}
|
|
||||||
}
|
|
||||||
&.disabled { color:nth($cp, 2); cursor:default;
|
|
||||||
|
|
||||||
&::before {display:none;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dd.time { position:relative; width:100%; height:41px; padding:5px 0; margin-top:5px; line-height:30px; border-top:1px solid #eee;
|
|
||||||
|
|
||||||
label { float:left; width:60px; height:30px;
|
|
||||||
input { width:30px; height:30px; border:1px solid nth($cp, 2); text-align:center; }
|
|
||||||
}
|
|
||||||
.now { float:right; width:50px; height:30px; border-radius:3px; background:nth($cp, 2);text-align:center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
|
|
||||||
|
|
||||||
.ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;cursor:pointer;}
|
|
||||||
|
|
||||||
.ok { background:nth($ct, 2); color:#fff;
|
|
||||||
&:hover { background:nth($ct, 1); }
|
|
||||||
&:active { background:nth($ct, 3); }
|
|
||||||
}
|
|
||||||
.cancel {background:nth($cp, 2);}
|
|
||||||
}
|
|
||||||
|
|
||||||
dd.tips { position:absolute; z-index:65535; left:25%; top:40%; width:50%; height:30px; line-height:28px; background:#fffbed;color:nth($co, 3);border:1px solid nth($co, 2);border-radius:5px; font-size:12px; text-align:center; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes ripple {
|
|
||||||
from {transform: scale(0);opacity:0;}
|
|
||||||
30% {opacity:.8;}
|
|
||||||
to {transform: scale(1.2); opacity:0;}
|
|
||||||
}
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors yutent (yutent@doui.cc)
|
|
||||||
* @date 2017-05-20 21:35:30
|
|
||||||
* @version $Id$
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "var.scss";
|
|
||||||
|
|
||||||
|
|
||||||
/*--------各种按钮---------*/
|
|
||||||
.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border:0;border-radius:2px;text-align:center;font-size:12px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;@include ts;
|
|
||||||
|
|
||||||
&.medium {min-width:80px;height:30px;padding:0 8px;line-height:30px;font-size:14px}
|
|
||||||
&.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:3px;font-size:18px;}
|
|
||||||
|
|
||||||
&:hover {background:nth($cp, 1);}
|
|
||||||
&:active {background:nth($cp, 3);}
|
|
||||||
|
|
||||||
&.teal {background:nth($ct, 2);color:#fff;}
|
|
||||||
&.teal:hover {background:nth($ct, 1);}
|
|
||||||
&.teal:active {background:nth($ct, 3);}
|
|
||||||
&.green {background:nth($cg, 2);color:#fff;}
|
|
||||||
&.green:hover {background:nth($cg, 1);}
|
|
||||||
&.green:active {background:nth($cg, 3);}
|
|
||||||
&.blue {background:nth($cb, 2);color:#fff;}
|
|
||||||
&.blue:hover {background:nth($cb, 1);}
|
|
||||||
&.blue:active {background:nth($cb, 3);}
|
|
||||||
&.purple {background:nth($cpp, 2);color:#fff;}
|
|
||||||
&.purple:hover {background:nth($cpp, 1);}
|
|
||||||
&.purple:active {background:nth($cpp, 3);}
|
|
||||||
&.red {background:nth($cr, 2);color:#fff;}
|
|
||||||
&.red:hover {background:nth($cr, 1);}
|
|
||||||
&.red:active {background:nth($cr, 3);}
|
|
||||||
&.orange {background:nth($co, 2);color:#fff;}
|
|
||||||
&.orange:hover {background:nth($co, 1);}
|
|
||||||
&.orange:active {background:nth($co, 3);}
|
|
||||||
&.grey {background:nth($cgr, 2);color:#fff;}
|
|
||||||
&.grey:hover {background:nth($cgr, 1);}
|
|
||||||
&.grey:active {background:nth($cgr, 3);}
|
|
||||||
&.dark {background:nth($cd, 2);color:#fff;}
|
|
||||||
&.dark:hover {background:nth($cd, 1);}
|
|
||||||
&.dark:active {background:nth($cd, 3);}
|
|
||||||
|
|
||||||
&.disabled {background:nth($cp, 1);color:nth($cp, 3);cursor:not-allowed;}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*--------各种input---------*/
|
|
||||||
|
|
||||||
|
|
||||||
.do-ui-input {width:auto;height:30px;padding:0 5px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:13px;@include ts();color: nth($cd, 2);
|
|
||||||
|
|
||||||
&:focus {background:#fff;border-color:nth($cd, 2);}
|
|
||||||
|
|
||||||
&::placeholder {color:nth($cgr, 1);}
|
|
||||||
&:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.do-ui-textarea {width:auto;height:120px;padding:5px 8px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:14px;@include ts();color: nth($cd, 2);
|
|
||||||
|
|
||||||
&:focus {background:#fff;border-color:nth($cd, 2);}
|
|
||||||
|
|
||||||
&:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* select框 */
|
|
||||||
.do-ui-select {position:relative;display:inline-block;width:auto;min-width:100px;height:30px;color:nth($cgr, 1);
|
|
||||||
|
|
||||||
select {width:100%;height:100%;padding:5px 13px;line-height:1;background:nth($cp, 1);border-radius:5px;appearance:none;border:2px solid transparent;outline:none;color: nth($cd, 2);font-size:13px;
|
|
||||||
|
|
||||||
&:focus {background:#fff;border-color:nth($cd, 2);}
|
|
||||||
&::-ms-expand {display:none;}
|
|
||||||
&:disabled {border-color:transparent;background:#fff8ed;color:nth($cp, 3)}
|
|
||||||
}
|
|
||||||
.trigon {position:absolute;right:7px;top:0;width:15px;height:30px;padding:7px 0;font-size:12px;text-align:center;
|
|
||||||
i {float:left;width:15px;height:12px;line-height:12px;}
|
|
||||||
i:nth-child(2) {margin-top:-6px;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 单选和复选框 */
|
|
||||||
.do-ui-radio,
|
|
||||||
.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;padding:0 5px 0 35px;line-height:30px;color:nth($cd, 1);font-size:13px;
|
|
||||||
|
|
||||||
>input {position:absolute;left:7px;top:5px;width:20px;height:20px;border-radius:50%;border:1px solid nth($cp, 3);background:#fff;appearance:none;
|
|
||||||
|
|
||||||
&:checked {box-shadow:0 0 5px nth($cb, 1);}
|
|
||||||
&:checked::after {display:block;width:12px;height:12px;margin:3px;border-radius:50%;background:nth($cgr, 1);content:""}
|
|
||||||
|
|
||||||
&:disabled {background:#fff8ed;box-shadow:none;cursor:not-allowed;}
|
|
||||||
&:disabled:checked::after {background:nth($cgr, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {color:nth($cp, 3);cursor:not-allowed;}
|
|
||||||
}
|
|
||||||
|
|
||||||
.do-ui-checkbox {
|
|
||||||
|
|
||||||
>input {border-radius:3px;
|
|
||||||
|
|
||||||
&:checked::after {width:100%;height:100%;margin:0;line-height:18px;font-size:18px;text-align:center;color:nth($cgr, 1);background:none;content:"✓"}
|
|
||||||
|
|
||||||
&:disabled:checked::after {color:nth($cgr, 1);background:none;}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 引用文本 */
|
|
||||||
.do-ui-quote {display:inline-block;position:relative;min-height:60px;margin:10px 0;padding:15px 10px 5px 50px;border:1px solid nth($cp, 3);border-radius:10px;background:nth($cp, 1);color:nth($cgr, 1);font-size:14px;word-break: break-all;
|
|
||||||
|
|
||||||
i {position:absolute;left:8px;top:0;font-size:30px;line-height:1.5;color:nth($cp, 3);}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 提醒文本 */
|
|
||||||
.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 30px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);font-size:14px;word-break: break-all;
|
|
||||||
|
|
||||||
p {margin:0!important;}
|
|
||||||
i {position:absolute;left:5px;top:2px;font-size:20px;line-height:1.5;}
|
|
||||||
}
|
|
||||||
.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;}
|
|
||||||
|
|
@ -1,276 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors yutent (yutent@doui.cc)
|
|
||||||
* @date 2018-06-12 13:08:26
|
|
||||||
* @version $Id$
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "var.scss";
|
|
||||||
|
|
||||||
|
|
||||||
.do-button {overflow:hidden;position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:pointer;font-size:14px;
|
|
||||||
|
|
||||||
&::before {position:absolute;left:-50%;top:-50%;display:block;width:200%;height:200%;border-radius:50%;background:rgba(220,220,220,.5); 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 {
|
|
||||||
&::before {background:rgba(0,0,0,.1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text,&__icon {position:relative;display:inline-block;}
|
|
||||||
&__icon {font-size:20px;vertical-align:top;}
|
|
||||||
|
|
||||||
&.small {height:20px;padding:0 5px;line-height:20px;font-size:12px;
|
|
||||||
|
|
||||||
i {font-size:16px;}
|
|
||||||
}
|
|
||||||
&.medium {min-width:100px;height:35px;line-height:35px;font-size:16px;
|
|
||||||
|
|
||||||
i {padding-right:5px;font-size:24px;}
|
|
||||||
}
|
|
||||||
&.large {min-width:160px;height:50px;padding:0 13px;line-height:50px;font-size:18px;
|
|
||||||
|
|
||||||
i {padding-right:10px;font-size:28px;}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&.teal {color:nth($ct, 2);}
|
|
||||||
&.green {color:nth($cg, 2);}
|
|
||||||
&.blue {color:nth($cb, 2);}
|
|
||||||
&.purple {color:nth($cpp, 2);}
|
|
||||||
&.red {color:nth($cr, 2);}
|
|
||||||
&.orange {color:nth($co, 2);}
|
|
||||||
&.plain {color:nth($cp, 3);}
|
|
||||||
&.grey {color:nth($cgr, 2);}
|
|
||||||
&.dark {color:nth($cd, 2);}
|
|
||||||
|
|
||||||
&.disabled {color:nth($cp, 2);cursor:not-allowed;
|
|
||||||
|
|
||||||
&::before {display:none;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.do-radio {position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
|
|
||||||
|
|
||||||
|
|
||||||
&__box {float:left;width:20px;height:20px;margin:5px;margin-left:0;border:1px solid nth($cgr, 2);border-radius:50%;}
|
|
||||||
&.checked &__box::after {display:block;width:14px;height:14px;margin:2px;border-radius:50%;content:""}
|
|
||||||
|
|
||||||
&.teal &__box {border-color:nth($ct, 2);
|
|
||||||
&::after {background:nth($ct, 2);}
|
|
||||||
}
|
|
||||||
&.teal {color:nth($ct, 2);}
|
|
||||||
|
|
||||||
&.green &__box {border-color:nth($cg, 2);
|
|
||||||
&::after {background:nth($cg, 2);}
|
|
||||||
}
|
|
||||||
&.green {color:nth($cg, 2);}
|
|
||||||
|
|
||||||
&.blue &__box {border-color:nth($cb, 2);
|
|
||||||
&::after {background:nth($cb, 2);}
|
|
||||||
}
|
|
||||||
&.blue {color:nth($cb, 2);}
|
|
||||||
|
|
||||||
&.purple &__box {border-color:nth($cpp, 2);
|
|
||||||
&::after {background:nth($cpp, 2);}
|
|
||||||
}
|
|
||||||
&.purple {color:nth($cpp, 2);}
|
|
||||||
|
|
||||||
&.red &__box {border-color:nth($cr, 2);
|
|
||||||
&::after {background:nth($cr, 2);}
|
|
||||||
}
|
|
||||||
&.red {color:nth($cr, 2);}
|
|
||||||
|
|
||||||
&.orange &__box {border-color:nth($co, 2);
|
|
||||||
&::after {background:nth($co, 2);}
|
|
||||||
}
|
|
||||||
&.orange {color:nth($co, 2);}
|
|
||||||
|
|
||||||
&.plain &__box {border-color:nth($cp, 3);
|
|
||||||
&::after {background:nth($cp, 3);}
|
|
||||||
}
|
|
||||||
&.plain {color:nth($cp, 3);}
|
|
||||||
|
|
||||||
&.grey &__box {border-color:nth($cgr, 2);
|
|
||||||
&::after {background:nth($cgr, 2);}
|
|
||||||
}
|
|
||||||
&.grey {color:nth($cgr, 2);}
|
|
||||||
|
|
||||||
&.dark &__box {border-color:nth($cd, 2);
|
|
||||||
&::after {background:nth($cd, 2);}
|
|
||||||
}
|
|
||||||
&.dark {color:nth($cd, 2);}
|
|
||||||
|
|
||||||
|
|
||||||
&.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
|
|
||||||
&.disabled.checked {color:nth($cd, 1);}
|
|
||||||
&.disabled &__box {border-color:nth($cp, 3);
|
|
||||||
&::after {background:nth($cp, 3);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.do-switch {position:relative;display:inline-block;width:45px;height:30px;padding-right:10px;cursor:default;
|
|
||||||
|
|
||||||
&__label {position:relative;display:inline-block;width:100%;height:14px;margin:7px 0;background:nth($cp, 3);border-radius:7px;}
|
|
||||||
|
|
||||||
&__dot {position:absolute;left:0;top:-3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
|
|
||||||
|
|
||||||
&:hover &__dot {transform:scale(1.1);}
|
|
||||||
&.disabled {cursor:not-allowed;}
|
|
||||||
&.disabled:hover &__dot {transform:scale(1);}
|
|
||||||
|
|
||||||
&.checked &__dot {left:auto;right:0;}
|
|
||||||
|
|
||||||
&.teal.checked &__dot {background:nth($ct, 2);}
|
|
||||||
&.teal.checked &__label {background:nth($ct, 1) + a0;}
|
|
||||||
|
|
||||||
&.green.checked &__dot {background:nth($cg, 2);}
|
|
||||||
&.green.checked &__label {background:nth($cg, 1) + a0;}
|
|
||||||
|
|
||||||
&.blue.checked &__dot {background:nth($cb, 2);}
|
|
||||||
&.blue.checked &__label {background:nth($cb, 1) + a0;}
|
|
||||||
|
|
||||||
&.purple.checked &__dot {background:nth($cpp, 2);}
|
|
||||||
&.purple.checked &__label {background:nth($cpp, 1) + a0;}
|
|
||||||
|
|
||||||
&.red.checked &__dot {background:nth($cr, 2);}
|
|
||||||
&.red.checked &__label {background:nth($cr, 1) + a0;}
|
|
||||||
|
|
||||||
&.orange.checked &__dot {background:nth($co, 2);}
|
|
||||||
&.orange.checked &__label {background:nth($co, 1) + a0;}
|
|
||||||
|
|
||||||
&.plain.checked &__dot {background:nth($cp, 3);}
|
|
||||||
&.plain.checked &__label {background:nth($cp, 2);}
|
|
||||||
|
|
||||||
&.grey.checked &__dot {background:nth($cgr, 2);}
|
|
||||||
&.grey.checked &__label {background:nth($cgr, 1) + a0;}
|
|
||||||
|
|
||||||
&.dark.checked &__dot {background:nth($cd, 2);}
|
|
||||||
&.dark.checked &__label {background:nth($cd, 1) + a0;}
|
|
||||||
|
|
||||||
&.disabled.checked &__dot {background:#fff;}
|
|
||||||
&.disabled &__label, &.disabled.checked &__label {
|
|
||||||
|
|
||||||
&::before {display:block;position:absolute;top:5px;width:8px;height:4px;border-radius:2px;background:#fff;content:"";}
|
|
||||||
}
|
|
||||||
&.disabled &__label::before {right:5px;}
|
|
||||||
&.disabled.checked &__label::before {left:5px;}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.do-checkbox {position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
|
|
||||||
|
|
||||||
|
|
||||||
&__box {float:left;width:18px;height:18px;margin:6px;margin-left:0;line-height:16px;border:1px solid nth($cgr, 2);border-radius:3px;font-size:16px;text-align:center;}
|
|
||||||
&.checked &__box {color:#fff;font-weight:bold;}
|
|
||||||
|
|
||||||
&.grey {color:nth($cgr, 2);}
|
|
||||||
&.grey &__box {border-color:nth($cgr, 2);}
|
|
||||||
&.grey.checked &__box {background:nth($cgr, 2);}
|
|
||||||
|
|
||||||
&.dark {color:nth($cd, 2);}
|
|
||||||
&.dark &__box {border-color:nth($cd, 2);}
|
|
||||||
&.dark.checked &__box {background:nth($cd, 2);}
|
|
||||||
|
|
||||||
&.teal {color:nth($ct, 2);}
|
|
||||||
&.teal &__box {border-color:nth($ct, 2);}
|
|
||||||
&.teal.checked &__box {background:nth($ct, 2);}
|
|
||||||
|
|
||||||
&.green {color:nth($cg, 2);}
|
|
||||||
&.green &__box {border-color:nth($cg, 2);}
|
|
||||||
&.green.checked &__box {background:nth($cg, 2);}
|
|
||||||
|
|
||||||
&.blue {color:nth($cb, 2);}
|
|
||||||
&.blue &__box {border-color:nth($cb, 2);}
|
|
||||||
&.blue.checked &__box {background:nth($cb, 2);}
|
|
||||||
|
|
||||||
&.purple {color:nth($cpp, 2);}
|
|
||||||
&.purple &__box {border-color:nth($cpp, 2);}
|
|
||||||
&.purple.checked &__box {background:nth($cpp, 2);}
|
|
||||||
|
|
||||||
&.orange {color:nth($co, 2);}
|
|
||||||
&.orange &__box {border-color:nth($co, 2);}
|
|
||||||
&.orange.checked &__box {background:nth($co, 2);}
|
|
||||||
|
|
||||||
&.plain {color:nth($cp, 3);}
|
|
||||||
&.plain &__box {border-color:nth($cp, 3);}
|
|
||||||
&.plain.checked &__box {background:nth($cp, 3);}
|
|
||||||
|
|
||||||
&.red {color:nth($cr, 2);}
|
|
||||||
&.red &__box {border-color:nth($cr, 2);}
|
|
||||||
&.red.checked &__box {background:nth($cr, 2);}
|
|
||||||
|
|
||||||
&.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
|
|
||||||
&.disabled &__box {border-color:nth($cp, 3);}
|
|
||||||
&.disabled.checked {color:nth($cd, 1);}
|
|
||||||
&.disabled.checked &__box {background:nth($cp, 3);}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.do-input {position:relative;display:inline-block;width:180px;height:30px;line-height:30px;border-bottom:1px solid nth($cp, 2);cursor:default;font-size:14px;
|
|
||||||
|
|
||||||
&.icon-left {padding-left:30px;}
|
|
||||||
&.icon-right {padding-right:30px;}
|
|
||||||
|
|
||||||
&__holder {visibility:hidden;position:absolute;bottom:0;left:0;width:100%;height:30px;padding:0 5px;color: nth($cp, 3);@include ts(bottom, .2s);
|
|
||||||
|
|
||||||
&.visible {visibility:visible;}
|
|
||||||
}
|
|
||||||
&__input {position:relative;width:100%;height:30px;padding:0 5px;border:0;background:none;font-size:14px;color:nth($cd, 2);}
|
|
||||||
&__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;}
|
|
||||||
|
|
||||||
&::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;}
|
|
||||||
|
|
||||||
&.active &__holder {bottom:20px;}
|
|
||||||
&.active::after {left:0;width:100%;}
|
|
||||||
|
|
||||||
&.icon-left &__icon {left:0;}
|
|
||||||
&.icon-right &__icon {right:0;}
|
|
||||||
|
|
||||||
&.icon-left &__holder {padding-left:30px;}
|
|
||||||
&.icon-right &__holder {padding-right:30px;}
|
|
||||||
|
|
||||||
&.grey {color:nth($cgr, 2);
|
|
||||||
&::after {background:nth($cgr, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dark {color:nth($cd, 2);
|
|
||||||
&::after {background:nth($cd, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.teal{color:nth($ct, 2);
|
|
||||||
&::after {background:nth($ct, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.green {color:nth($cg, 2);
|
|
||||||
&::after {background:nth($cg, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.red {color:nth($cr, 2);
|
|
||||||
&::after {background:nth($cr, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.blue {color:nth($cb, 2);
|
|
||||||
&::after {background:nth($cb, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.purple {color:nth($cpp, 2);
|
|
||||||
&::after {background:nth($cpp, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.orange {color:nth($co, 2);
|
|
||||||
&::after {background:nth($co, 1);}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {background:#fff8ed;color:nth($cp, 3);}
|
|
||||||
&.disabled &__input {cursor:not-allowed;color:nth($cp, 3);}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,237 +0,0 @@
|
||||||
@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%;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue