1.2.5原版
This commit is contained in:
anian
@@ -0,0 +1,380 @@
|
||||
<style>
|
||||
[class|=coco],
|
||||
[class|=coco]::after,
|
||||
[class|=coco]::before {
|
||||
box-sizing: border-box;
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.coco-msg-progress {
|
||||
width: 13px;
|
||||
height: 13px
|
||||
}
|
||||
|
||||
.coco-msg__circle {
|
||||
stroke-width: 2;
|
||||
stroke-linecap: square;
|
||||
fill: none;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.coco-msg-stage:hover .coco-msg__circle {
|
||||
-webkit-animation-play-state: paused !important;
|
||||
animation-play-state: paused !important
|
||||
}
|
||||
|
||||
.coco-msg__background {
|
||||
stroke-width: 2;
|
||||
fill: none
|
||||
}
|
||||
|
||||
.coco-msg-stage {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
width: auto;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: 3000
|
||||
}
|
||||
|
||||
.coco-msg-wrapper {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
transition: height .3s ease, padding .3s ease;
|
||||
padding: 6px 0;
|
||||
will-change: transform, opacity
|
||||
}
|
||||
|
||||
.coco-msg {
|
||||
padding: 15px 21px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.coco-msg-content,
|
||||
.coco-msg-icon,
|
||||
.coco-msg-wait {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.coco-msg-icon {
|
||||
position: relative;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.coco-msg-icon svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 11px;
|
||||
height: 11px
|
||||
}
|
||||
|
||||
.coco-msg-wait {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
fill: #4eb127
|
||||
}
|
||||
|
||||
.coco-msg-wait svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.coco-msg-close {
|
||||
width: 14px;
|
||||
height: 14px
|
||||
}
|
||||
|
||||
.coco-msg-content {
|
||||
margin: 0 10px;
|
||||
min-width: 240px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: -apple-system, Microsoft Yahei, sans-serif;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, .01)
|
||||
}
|
||||
|
||||
.coco-msg.info {
|
||||
color: #0fafad;
|
||||
background-color: #e7fdfc;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c0faf9
|
||||
}
|
||||
|
||||
.coco-msg.info .coco-msg-icon {
|
||||
background-color: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg.success {
|
||||
color: #4ebb23;
|
||||
background-color: #f3ffe8;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #d9f8bb
|
||||
}
|
||||
|
||||
.coco-msg.success .coco-msg-icon {
|
||||
background-color: #4ebb23
|
||||
}
|
||||
|
||||
.coco-msg.warning {
|
||||
color: #f1b306;
|
||||
background-color: #fff9eb;
|
||||
box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #fcf2cd
|
||||
}
|
||||
|
||||
.coco-msg.warning .coco-msg-icon {
|
||||
background-color: #f1b306
|
||||
}
|
||||
|
||||
.coco-msg.error {
|
||||
color: #f34b51;
|
||||
background-color: #fff7f7;
|
||||
box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #ffe3e3
|
||||
}
|
||||
|
||||
.coco-msg.error .coco-msg-icon {
|
||||
background-color: #f34b51
|
||||
}
|
||||
|
||||
.coco-msg.loading {
|
||||
color: #0fafad;
|
||||
background-color: #e7fdfc;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
|
||||
}
|
||||
|
||||
.coco-msg_loading {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.coco-msg-circular {
|
||||
-webkit-animation: coco-msg-rotate 2s linear infinite both;
|
||||
animation: coco-msg-rotate 2s linear infinite both;
|
||||
transform-origin: center center;
|
||||
height: 18px !important;
|
||||
width: 18px !important
|
||||
}
|
||||
|
||||
.coco-msg-path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke: #0fafad;
|
||||
-webkit-animation: coco-msg-dash 1.5s ease-in-out infinite;
|
||||
animation: coco-msg-dash 1.5s ease-in-out infinite;
|
||||
stroke-linecap: round
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-rotate {
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-rotate {
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px
|
||||
}
|
||||
}
|
||||
|
||||
.coco-msg.info .coco-msg-wait {
|
||||
fill: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg.success .coco-msg-wait {
|
||||
fill: #4ebb23
|
||||
}
|
||||
|
||||
.coco-msg.warning .coco-msg-wait {
|
||||
fill: #f1b306
|
||||
}
|
||||
|
||||
.coco-msg.error .coco-msg-wait {
|
||||
fill: #f34b51
|
||||
}
|
||||
|
||||
.coco-msg.loading .coco-msg-wait {
|
||||
fill: #0fafad
|
||||
}
|
||||
|
||||
.coco-msg-pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_info {
|
||||
0% {
|
||||
stroke: #0fafad
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #0fafad;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_info {
|
||||
0% {
|
||||
stroke: #0fafad
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #0fafad;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_success {
|
||||
0% {
|
||||
stroke: #4eb127
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #4eb127;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_success {
|
||||
0% {
|
||||
stroke: #4eb127
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #4eb127;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_warning {
|
||||
0% {
|
||||
stroke: #fcbc0b
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #fcbc0b;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_warning {
|
||||
0% {
|
||||
stroke: #fcbc0b
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #fcbc0b;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg_error {
|
||||
0% {
|
||||
stroke: #eb262d
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #eb262d;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg_error {
|
||||
0% {
|
||||
stroke: #eb262d
|
||||
}
|
||||
|
||||
to {
|
||||
stroke: #eb262d;
|
||||
stroke-dasharray: 0 100
|
||||
}
|
||||
}
|
||||
|
||||
.coco-msg-fade-in {
|
||||
-webkit-animation: coco-msg-fade .2s ease-out both;
|
||||
animation: coco-msg-fade .2s ease-out both
|
||||
}
|
||||
|
||||
.coco-msg-fade-out {
|
||||
animation: coco-msg-fade .3s linear reverse both
|
||||
}
|
||||
|
||||
@-webkit-keyframes coco-msg-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, -80%, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes coco-msg-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, -80%, 0)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate3d(-50%, 0, 0)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user