| 1 | .rc-dialog {
|
| 2 | position: relative;
|
| 3 | width: auto;
|
| 4 | margin: 10px;
|
| 5 | }
|
| 6 | .rc-dialog-wrap {
|
| 7 | position: fixed;
|
| 8 | overflow: auto;
|
| 9 | top: 0;
|
| 10 | right: 0;
|
| 11 | bottom: 0;
|
| 12 | left: 0;
|
| 13 | z-index: 1050;
|
| 14 | -webkit-overflow-scrolling: touch;
|
| 15 | outline: 0;
|
| 16 | }
|
| 17 | .rc-dialog-content {
|
| 18 | position: relative;
|
| 19 | background-color: #fff;
|
| 20 | border: 1px solid #999;
|
| 21 | border: 1px solid rgba(0, 0, 0, 0.2);
|
| 22 | border-radius: 6px;
|
| 23 | box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
| 24 | background-clip: padding-box;
|
| 25 | outline: 0;
|
| 26 | }
|
| 27 | .rc-dialog-header {
|
| 28 | padding: 15px;
|
| 29 | border-bottom: 1px solid #e5e5e5;
|
| 30 | }
|
| 31 | .rc-dialog-close {
|
| 32 | cursor: pointer;
|
| 33 | border: 0;
|
| 34 | background: transparent;
|
| 35 | font-size: 21px;
|
| 36 | position: absolute;
|
| 37 | right: 20px;
|
| 38 | top: 12px;
|
| 39 | font-weight: 700;
|
| 40 | line-height: 1;
|
| 41 | color: #000;
|
| 42 | text-shadow: 0 1px 0 #fff;
|
| 43 | filter: alpha(opacity=20);
|
| 44 | opacity: 0.2;
|
| 45 | text-decoration: none;
|
| 46 | }
|
| 47 | .rc-dialog-close-x:after {
|
| 48 | content: '×';
|
| 49 | }
|
| 50 | .rc-dialog-close:hover {
|
| 51 | opacity: 1;
|
| 52 | filter: alpha(opacity=100);
|
| 53 | text-decoration: none;
|
| 54 | }
|
| 55 | .rc-dialog-title {
|
| 56 | margin: 0;
|
| 57 | line-height: 1.42857143;
|
| 58 | }
|
| 59 | .rc-dialog-body {
|
| 60 | position: relative;
|
| 61 | padding: 15px;
|
| 62 | }
|
| 63 | .rc-dialog-footer {
|
| 64 | padding: 15px;
|
| 65 | text-align: right;
|
| 66 | border-top: 1px solid #e5e5e5;
|
| 67 | }
|
| 68 | .rc-dialog-footer .btn + .btn {
|
| 69 | margin-left: 5px;
|
| 70 | margin-bottom: 0;
|
| 71 | }
|
| 72 | .rc-dialog-footer .btn-group .btn + .btn {
|
| 73 | margin-left: -1px;
|
| 74 | }
|
| 75 | .rc-dialog-footer .btn-block + .btn-block {
|
| 76 | margin-left: 0;
|
| 77 | }
|
| 78 | @media (min-width: 768px) {
|
| 79 | .rc-dialog {
|
| 80 | width: 600px;
|
| 81 | margin: 30px auto;
|
| 82 | }
|
| 83 | .rc-dialog-content {
|
| 84 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
| 85 | }
|
| 86 | }
|
| 87 | .rc-dialog-slide-fade-enter,
|
| 88 | .rc-dialog-slide-fade-appear {
|
| 89 | transform: translate(0, -25%);
|
| 90 | }
|
| 91 | .rc-dialog-slide-fade-enter,
|
| 92 | .rc-dialog-slide-fade-appear,
|
| 93 | .rc-dialog-slide-fade-leave {
|
| 94 | animation-duration: 0.3s;
|
| 95 | animation-fill-mode: both;
|
| 96 | animation-timing-function: ease-out;
|
| 97 | animation-play-state: paused;
|
| 98 | }
|
| 99 | .rc-dialog-slide-fade-enter.rc-dialog-slide-fade-enter-active,
|
| 100 | .rc-dialog-slide-fade-appear.rc-dialog-slide-fade-appear-active {
|
| 101 | animation-name: rcDialogSlideFadeIn;
|
| 102 | animation-play-state: running;
|
| 103 | }
|
| 104 | .rc-dialog-slide-fade-leave.rc-dialog-slide-fade-leave-active {
|
| 105 | animation-name: rcDialogSlideFadeOut;
|
| 106 | animation-play-state: running;
|
| 107 | }
|
| 108 | @keyframes rcDialogSlideFadeIn {
|
| 109 | 0% {
|
| 110 | transform: translate(0, -25%);
|
| 111 | }
|
| 112 | 100% {
|
| 113 | transform: translate(0, 0);
|
| 114 | }
|
| 115 | }
|
| 116 | @keyframes rcDialogSlideFadeOut {
|
| 117 | 0% {
|
| 118 | transform: translate(0, 0);
|
| 119 | }
|
| 120 | 100% {
|
| 121 | transform: translate(0, -25%);
|
| 122 | }
|
| 123 | }
|
| 124 | .rc-dialog-mask {
|
| 125 | position: fixed;
|
| 126 | top: 0;
|
| 127 | right: 0;
|
| 128 | left: 0;
|
| 129 | bottom: 0;
|
| 130 | background-color: #373737;
|
| 131 | background-color: rgba(55, 55, 55, 0.6);
|
| 132 | height: 100%;
|
| 133 | filter: alpha(opacity=50);
|
| 134 | z-index: 1050;
|
| 135 | }
|
| 136 | .rc-dialog-mask-hidden {
|
| 137 | display: none;
|
| 138 | }
|
| 139 | .rc-dialog-fade-enter,
|
| 140 | .rc-dialog-fade-appear {
|
| 141 | opacity: 0;
|
| 142 | animation-duration: 0.3s;
|
| 143 | animation-fill-mode: both;
|
| 144 | animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
| 145 | animation-play-state: paused;
|
| 146 | }
|
| 147 | .rc-dialog-fade-leave {
|
| 148 | animation-duration: 0.3s;
|
| 149 | animation-fill-mode: both;
|
| 150 | animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
| 151 | animation-play-state: paused;
|
| 152 | }
|
| 153 | .rc-dialog-fade-enter.rc-dialog-fade-enter-active,
|
| 154 | .rc-dialog-fade-appear.rc-dialog-fade-appear-active {
|
| 155 | animation-name: rcDialogFadeIn;
|
| 156 | animation-play-state: running;
|
| 157 | }
|
| 158 | .rc-dialog-fade-leave.rc-dialog-fade-leave-active {
|
| 159 | animation-name: rcDialogFadeOut;
|
| 160 | animation-play-state: running;
|
| 161 | }
|
| 162 | @keyframes rcDialogFadeIn {
|
| 163 | 0% {
|
| 164 | opacity: 0;
|
| 165 | }
|
| 166 | 100% {
|
| 167 | opacity: 1;
|
| 168 | }
|
| 169 | }
|
| 170 | @keyframes rcDialogFadeOut {
|
| 171 | 0% {
|
| 172 | opacity: 1;
|
| 173 | }
|
| 174 | 100% {
|
| 175 | opacity: 0;
|
| 176 | }
|
| 177 | }
|