小鱼开发
320 lines
8.7 KiB
SCSS
320 lines
8.7 KiB
SCSS
/******************************************************************
|
|
* mDialog 默认的动画效果
|
|
*/
|
|
/**
|
|
* 淡入效果
|
|
*/
|
|
@keyframes mDialogFadeIn {
|
|
from {
|
|
opacity: 0; }
|
|
to {
|
|
opacity: 1; } }
|
|
|
|
.mDialogFadeIn {
|
|
animation-name: mDialogFadeIn; }
|
|
|
|
/**
|
|
* 淡出效果
|
|
*/
|
|
@keyframes mDialogFadeOut {
|
|
from {
|
|
opacity: 1; }
|
|
to {
|
|
opacity: 0; } }
|
|
|
|
.mDialogFadeOut {
|
|
animation-name: mDialogFadeOut; }
|
|
|
|
/**
|
|
* 类似zoomIn
|
|
*/
|
|
@keyframes mDialogZoomIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3); }
|
|
50% {
|
|
opacity: 1; } }
|
|
|
|
.mDialogZoomIn {
|
|
animation-name: mDialogZoomIn; }
|
|
|
|
/**
|
|
* 类似zoomOut
|
|
*/
|
|
@keyframes mDialogZoomOut {
|
|
from {
|
|
opacity: 1; }
|
|
50% {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3); }
|
|
to {
|
|
opacity: 0; } }
|
|
|
|
.mDialogZoomOut {
|
|
animation-name: mDialogZoomOut; }
|
|
|
|
/**
|
|
* 类似苹果确认提示框效果，也是comfirm的默认的效果
|
|
*/
|
|
@keyframes mDialogBigIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1.2, 1.2); }
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1, 1); } }
|
|
|
|
.mDialogBigIn {
|
|
animation-name: mDialogBigIn; }
|
|
|
|
/**
|
|
* 类似苹果确认提示框效果，也是comfirm的默认的效果
|
|
*/
|
|
@keyframes mDialogBigOut {
|
|
0% {
|
|
opacity: 1; }
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.2, 1.2); } }
|
|
|
|
.mDialogBigOut {
|
|
animation-name: mDialogBigOut; }
|
|
|
|
/******************************************************************
|
|
* mDialog container 容器
|
|
*/
|
|
.mDialog-layer-container {
|
|
visibility: hidden;
|
|
position: fixed;
|
|
animation-timing-function: ease-out;
|
|
box-sizing: border-box; }
|
|
.mDialog-layer-container * {
|
|
box-sizing: border-box; }
|
|
.mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-title {
|
|
border-radius: 0; }
|
|
.mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-main {
|
|
border-radius: 0; }
|
|
.mDialog-layer-container.mDialog-layer-container-full > .mDialog-layer-btns {
|
|
border-radius: 0; }
|
|
|
|
/******************************************************************
|
|
* mDialog title 标题
|
|
*/
|
|
.mDialog-layer-title {
|
|
border-radius: 2.6667vw 2.6667vw 0 0;
|
|
background: #F5f5f5;
|
|
clear: both;
|
|
border-bottom: 1px solid #d5d5d5;
|
|
padding: 2.6667vw;
|
|
overflow: hidden;
|
|
font-size: 4.8vw; }
|
|
|
|
/******************************************************************
|
|
* mDialog main 主题内容
|
|
*/
|
|
.mDialog-layer-main {
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
font-size: 4.2667vw; }
|
|
.mDialog-layer-main:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
.mDialog-layer-main.mDialog-layer-main-full > div {
|
|
height: 100%;
|
|
overflow: hidden; }
|
|
.mDialog-layer-main > div {
|
|
position: relative; }
|
|
|
|
/******************************************************************
|
|
* mDialog btns 底部按钮集
|
|
*/
|
|
.mDialog-layer-btns {
|
|
clear: both;
|
|
border-top: 1px solid #e8e8e8;
|
|
background: #fff;
|
|
border-radius: 0 0 2.6667vw 2.6667vw;
|
|
display: flex; }
|
|
.mDialog-layer-btns > .mDialog-btn {
|
|
flex: 1;
|
|
display: block;
|
|
text-align: center;
|
|
position: relative;
|
|
color: #007aff;
|
|
font-size: 4.8vw;
|
|
padding: 2.6667vw 0; }
|
|
.mDialog-layer-btns > .mDialog-btn:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
border-left: 1px solid #d5d5d5;
|
|
color: #d5d5d5; }
|
|
.mDialog-layer-btns > .mDialog-btn:active {
|
|
background-color: rgba(0, 0, 0, 0.05); }
|
|
.mDialog-layer-btns > .mDialog-btn:first-child:after {
|
|
border-left: 0; }
|
|
|
|
/******************************************************************
|
|
* mDialog close 关闭按钮
|
|
*/
|
|
.mDialog-close {
|
|
position: absolute;
|
|
width: 8.667vw;
|
|
height: 8.667vw;
|
|
overflow: hidden;
|
|
right: 0;
|
|
top: 0;
|
|
margin-top: -4.3333vw;
|
|
margin-right: -4.3333vw;
|
|
border-radius: 100%;
|
|
background-color: black; }
|
|
.mDialog-close:before {
|
|
transform: rotate(45deg);
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1.3333vw;
|
|
right: 1.3333vw;
|
|
background: #fff;
|
|
height: 0.8vw;
|
|
margin-top: -0.4vw;
|
|
border-radius: 1.0667vw; }
|
|
.mDialog-close:after {
|
|
transform: rotate(-45deg);
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1.3333vw;
|
|
right: 1.3333vw;
|
|
background: #fff;
|
|
height: 0.8vw;
|
|
margin-top: -0.4vw;
|
|
border-radius: 1.0667vw; }
|
|
|
|
/******************************************************************
|
|
* mDialog 遮罩层
|
|
*/
|
|
.mDialog-shade {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: ease-out; }
|
|
.mDialog-shade.in {
|
|
animation-name: mDialogFadeIn; }
|
|
.mDialog-shade.out {
|
|
animation-name: mDialogFadeOut; }
|
|
|
|
/******************************************************************
|
|
* mDialog open方法 content是内容
|
|
*/
|
|
.mDialog-default-section {
|
|
background: #fff;
|
|
font-size: 4.2667vw;
|
|
padding: 2.6667vw; }
|
|
|
|
/******************************************************************
|
|
* mDialog msg 信息提示框
|
|
*/
|
|
.mDialog-msg-section {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
border-radius: 2.6667vw;
|
|
padding: 4vw;
|
|
color: #fff; }
|
|
|
|
/******************************************************************
|
|
* mDialog 加载提示框
|
|
*/
|
|
|
|
@keyframes line-spin-fade-loader {
|
|
50% {
|
|
opacity: 0.3; }
|
|
100% {
|
|
opacity: 1; } }
|
|
|
|
.mDialog-loading-section {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: 2vw;
|
|
padding: 4vw 8vw;
|
|
overflow: hidden; }
|
|
.mDialog-loading-section .loading-txt {
|
|
font-size: 4.2667vw;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-top: 2.6667vw;
|
|
white-space: nowrap; }
|
|
.mDialog-loading-section .loading-icon {
|
|
position: relative;
|
|
width: 16.533vw;
|
|
height: 16.533vw;
|
|
margin: 0 auto; }
|
|
.mDialog-loading-section .loading-icon > div {
|
|
background-color: #fff;
|
|
border-radius: 0.5333vw;
|
|
animation-fill-mode: both;
|
|
position: absolute;
|
|
width: 1.0667vw;
|
|
height: 4.8vw;
|
|
margin-left: -0.5333vw; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(1) {
|
|
top: 11.733vw;
|
|
left: 50%;
|
|
animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(2) {
|
|
top: 10.7173vw;
|
|
left: 10.7173vw;
|
|
transform: rotate(-45deg);
|
|
transform-origin: top center;
|
|
animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(3) {
|
|
top: 8.533vw;
|
|
left: 11.733vw;
|
|
transform-origin: top center;
|
|
transform: rotate(-90deg);
|
|
animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(4) {
|
|
top: 5.816vw;
|
|
left: 11.733vw;
|
|
transform: rotate(-135deg);
|
|
transform-origin: top center;
|
|
animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(5) {
|
|
top: 0px;
|
|
left: 50%;
|
|
animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(6) {
|
|
top: 5.816vw;
|
|
left: 5.816vw;
|
|
transform-origin: top center;
|
|
transform: rotate(135deg);
|
|
animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(7) {
|
|
top: 8.2667vw;
|
|
left: 4.8vw;
|
|
margin-left: -0.5333vw;
|
|
transform: rotate(90deg);
|
|
transform-origin: top center;
|
|
animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; }
|
|
.mDialog-loading-section .loading-icon > div:nth-child(8) {
|
|
top: 10.7173vw;
|
|
left: 5.816vw;
|
|
margin-left: -0.5333vw;
|
|
transform: rotate(45deg);
|
|
transform-origin: top center;
|
|
animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; }
|
|
.mDialog-loading-section.loading-notext {
|
|
padding: 8vw; }
|
|
|
|
/******************************************************************
|
|
* mDialog confirm 确认框
|
|
*/
|
|
.mDialog-confirm-section {
|
|
background: #fff;
|
|
padding: 5.333vw 4vw;
|
|
border-radius: 2.6667vw 2.6667vw 0 0; } |