From 045bc6c6be33641ecc5303f4a1dc0280e455d019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 4 Sep 2019 18:36:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A7=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/datepicker.scss | 106 --------------- src/css/elem-ui.scss | 129 ------------------ src/css/form.scss | 276 -------------------------------------- src/css/layer-normal.scss | 237 -------------------------------- 4 files changed, 748 deletions(-) delete mode 100644 src/css/datepicker.scss delete mode 100644 src/css/elem-ui.scss delete mode 100644 src/css/form.scss delete mode 100644 src/css/layer-normal.scss diff --git a/src/css/datepicker.scss b/src/css/datepicker.scss deleted file mode 100644 index 39c351a..0000000 --- a/src/css/datepicker.scss +++ /dev/null @@ -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;} -} \ No newline at end of file diff --git a/src/css/elem-ui.scss b/src/css/elem-ui.scss deleted file mode 100644 index 1ddb5de..0000000 --- a/src/css/elem-ui.scss +++ /dev/null @@ -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;} \ No newline at end of file diff --git a/src/css/form.scss b/src/css/form.scss deleted file mode 100644 index c850b63..0000000 --- a/src/css/form.scss +++ /dev/null @@ -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);} - -} \ No newline at end of file diff --git a/src/css/layer-normal.scss b/src/css/layer-normal.scss deleted file mode 100644 index 815f819..0000000 --- a/src/css/layer-normal.scss +++ /dev/null @@ -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%;} - } - } -} \ No newline at end of file