|
|
@@ -0,0 +1,331 @@
|
|
|
+/**
|
|
|
+ * Mcx Dialog Mobile v0.1.0
|
|
|
+ * Copyright (C) 2018 mcx
|
|
|
+ * https://github.com/code-mcx/mcx-dialog-mobile
|
|
|
+ */
|
|
|
+.dialog-mobile-bg {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 19;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ -ms-transform: translate3d(0, 0, 0);
|
|
|
+ -webkit-transform: translate3d(0, 0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+}
|
|
|
+/*alert confirm*/
|
|
|
+.dialog-mobile {
|
|
|
+ padding: 0 40px 40px 40px;
|
|
|
+ text-align:center;
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ z-index: 20;
|
|
|
+ min-width:200px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 0px;
|
|
|
+ -ms-transform: translate3d(0, 0, 0);
|
|
|
+ -webkit-transform: translate3d(0, 0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-title {
|
|
|
+ padding: 0.8em 1em 0.5em;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 5px 5px 0 0;
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-content {
|
|
|
+ position: relative;
|
|
|
+ padding:50px 0 40px 0;
|
|
|
+ line-height: 2em;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ font-size:15px;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-content em {
|
|
|
+ color:#df6400
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-button,
|
|
|
+.dialog-mobile .dialog-sure-button,
|
|
|
+.dialog-mobile .dialog-cancel-button {
|
|
|
+ display:inline-block;
|
|
|
+ position: relative;
|
|
|
+ margin:0 5px;
|
|
|
+ padding:0 30px;
|
|
|
+ min-width: 70px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:14px;
|
|
|
+ cursor:pointer;
|
|
|
+ border-radius:0px;
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-button{
|
|
|
+ color: #fff;
|
|
|
+ background:#000;
|
|
|
+ border:1px solid #000;
|
|
|
+ min-width:100px;
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-cancel-button {
|
|
|
+ color: #000;
|
|
|
+ background: #fff;
|
|
|
+ border:1px solid #999;
|
|
|
+ min-width:100px;
|
|
|
+}
|
|
|
+.dialog-mobile .dialog-sure-button{
|
|
|
+ color: #fff;
|
|
|
+ background:#000;
|
|
|
+ border:1px solid #000;
|
|
|
+ min-width:100px;
|
|
|
+}
|
|
|
+.dialog-mobile button[i='1']{
|
|
|
+ color: #000 !important;
|
|
|
+ background:#fff !important;
|
|
|
+ border:1px solid #777;
|
|
|
+ min-width:100px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 닫기 아이콘 */
|
|
|
+.dialog-close-btn {
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ right:0;
|
|
|
+ padding:20px;
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ cursor:pointer;
|
|
|
+ background:url('/image/btn_top_close.png') no-repeat 50% 50%;
|
|
|
+}
|
|
|
+
|
|
|
+/*bottom dialog*/
|
|
|
+.dialog-mobile-bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 10001;
|
|
|
+ width: 100%;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+}
|
|
|
+.dialog-mobile-bottom .bottom-btn-item {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.bottom-btn-item .dialog-item-btn {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 0.5em 0;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.bottom-btn-item .dialog-item-btn:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+.dialog-mobile-bottom .dialog-cancel-btn {
|
|
|
+ margin-top: 0.6em;
|
|
|
+ text-align: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 0.5em 0;
|
|
|
+}
|
|
|
+/*toast*/
|
|
|
+.dialog-mobile-toast {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 5em;
|
|
|
+}
|
|
|
+.dialog-mobile-toast .toast-content {
|
|
|
+ padding: 0.5em 1em;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: #333333;
|
|
|
+}
|
|
|
+/*loading*/
|
|
|
+.mobile-loading-bg {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10000;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ -webkit-transform: translate3d(0, 0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+}
|
|
|
+.mobile-loading {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10001;
|
|
|
+ min-width: 2em;
|
|
|
+ min-height: 2em;
|
|
|
+ padding: 0.8em 1.6em;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #FFFFF0;
|
|
|
+ background-color: #0A0A0A;
|
|
|
+ -webkit-transform: translate3d(0, 0, 0);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+}
|
|
|
+/*animation*/
|
|
|
+.animation-zoom-in, .animation-zoom-out,
|
|
|
+.animation-bottom-in, .animation-bottom-out,
|
|
|
+.animation-bg-fadeIn {
|
|
|
+ -webkit-animation-duration: 0.3s;
|
|
|
+ -webkit-animation-fill-mode: both;
|
|
|
+ animation-duration: 0.3s;
|
|
|
+ animation-fill-mode: both;
|
|
|
+}
|
|
|
+.animation-fade-in, .animation-fade-out {
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
+ -webkit-animation-fill-mode: both;
|
|
|
+ animation-duration: 1s;
|
|
|
+ animation-timing-function: ease-out;
|
|
|
+ animation-fill-mode: both;
|
|
|
+}
|
|
|
+.animation-zoom-in {
|
|
|
+ -webkit-animation-name: zoomIn;
|
|
|
+ animation-name: zoomIn;
|
|
|
+}
|
|
|
+.animation-zoom-out {
|
|
|
+ -webkit-animation-name: zoomOut;
|
|
|
+ animation-name: zoomOut;
|
|
|
+}
|
|
|
+.animation-fade-in {
|
|
|
+ -webkit-animation-name: fadeIn;
|
|
|
+ animation-name: fadeIn;
|
|
|
+}
|
|
|
+.animation-fade-out {
|
|
|
+ -webkit-animation-name: fadeOut;
|
|
|
+ animation-name: fadeOut;
|
|
|
+}
|
|
|
+.animation-bottom-in {
|
|
|
+ -webkit-animation-name: bottomIn;
|
|
|
+ animation-name: bottomIn;
|
|
|
+}
|
|
|
+.animation-bottom-out {
|
|
|
+ -webkit-animation-name: bottomOut;
|
|
|
+ animation-name: bottomOut;
|
|
|
+}
|
|
|
+.animation-bg-fadeIn {
|
|
|
+ -webkit-animation-name: fadeIn;
|
|
|
+ animation-name: fadeIn;
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes zoomIn {
|
|
|
+ from{
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-transform: scale(0, 0);
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 1;
|
|
|
+ -webkit-transform: scale(1, 1);
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes zoomOut {
|
|
|
+ from{
|
|
|
+ opacity: 1;
|
|
|
+ -webkit-transform: scale(1, 1);
|
|
|
+ }
|
|
|
+ 90%{
|
|
|
+ -webkit-transform: scale(0.3, 0.3);
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-transform: scale(0, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes zoomIn {
|
|
|
+ from{
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0, 0);
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1, 1);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes zoomOut {
|
|
|
+ from{
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1, 1);
|
|
|
+ }
|
|
|
+ 90%{
|
|
|
+ transform: scale(0.3, 0.3);
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0, 0);
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes fadeIn {
|
|
|
+ from{
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes fadeOut {
|
|
|
+ from{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 30%{
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes fadeIn {
|
|
|
+ from{
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes fadeOut {
|
|
|
+ from{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 30%{
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes bottomIn {
|
|
|
+ from{
|
|
|
+ bottom: -1000px;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@-webkit-keyframes bottomOut {
|
|
|
+ from{
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ bottom: -1000px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes bottomIn {
|
|
|
+ from{
|
|
|
+ bottom: -1000px;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes bottomOut {
|
|
|
+ from{
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ bottom: -1000px;
|
|
|
+ }
|
|
|
+}
|
sowon4187