|
- .popupS-layer{
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,.25);
- -moz-box-shadow: 0 0 20px rgba(0,0,0,.25);
- box-shadow: 0 0 20px rgba(0,0,0,.25);
- position: relative;
- border-radius:6px;
- background-color: #FFF;
- margin:20px;
- z-index:1000;
-
- }
- .popupS-resetFocus {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
- .popupS-close{
- position: absolute;
- top: 0;
- right: 0;
- line-height: 40px;
- font-size: 32px;
- text-align: center;
- font-weight: 700;
- width: 32px;
- height: 40px;
- cursor: pointer;
- z-index:1020;
- }
- .popupS-title{
- position: absolute;
- width: 100%;
- line-height: 40px;
- text-align: center;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0 auto;
- z-index:1001;
- }
- .popupS-title + .popupS-content{
- padding-bottom:20px;
- }
- .popupS-content{
- max-width:700px;
- padding:40px;
- border-radius:6px;
- }
- .popupS-content img{
- max-width:100%;
- height:auto;
- }
- .popupS-layer .btn{
- float:right;
- }
-
- /*
- * Default Animation
- * very Important
- */
-
- .popupS-layer{
- -webkit-transition: opacity .3s;
- -o-transition: opacity .3s;
- transition: opacity .3s;
- opacity: 0;
- }
- .popupS-overlay{
- -webkit-transition: opacity .3s ease;
- -o-transition: opacity .3s ease;
- transition: opacity .3s ease;
- background:rgb(0,0,0);
- opacity: 0;
- }
- .popupS-layer.popupS-open{
- opacity: 1;
- }
- .popupS-open>.popupS-overlay{
- opacity:.6;
- }
-
- /* Loader */
-
- @-moz-keyframes spinner {
- to {-moz-transform: rotate(360deg);
- transform: rotate(360deg);}
- }
- @-o-keyframes spinner {
- to {-o-transform: rotate(360deg);
- transform: rotate(360deg);}
- }
- @-webkit-keyframes spinner {
- to {-webkit-transform: rotate(360deg);}
- }
- @keyframes spinner {
- to {transform: rotate(360deg);}
- }
- @-moz-keyframes pulsate {
- 0% {
- -moz-transform:scale(.1);
- transform:scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- -moz-transform:scale(1.2);
- transform:scale(1.2);
- opacity:0;
- }
- }
- @-o-keyframes pulsate {
- 0% {
- -o-transform:scale(.1);
- transform:scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- -o-transform:scale(1.2);
- transform:scale(1.2);
- opacity:0;
- }
- }
- @-webkit-keyframes pulsate {
- 0% {
- transform:scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- transform:scale(1.2);
- opacity:0;
- }
- }
- @keyframes pulsate {
- 0% {
- transform:scale(.1);
- opacity: 0.0;
- }
- 50% {
- opacity:1;
- }
- 100% {
- transform:scale(1.2);
- opacity:0;
- }
- }
- .popupS-loading{
- width: 30px;
- height: 30px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -15px;
- margin-left: -15px;
- border-radius: 30px;
- }
- .popupS-loading.pulser{
- border: 3px solid #1caff6;
- opacity: 0;
- -moz-animation: pulsate 1s ease-out infinite;
- -o-animation: pulsate 1s ease-out infinite;
- -webkit-animation: pulsate 1s ease-out infinite;
- animation: pulsate 1s ease-out infinite;
- }
- .popupS-loading.spinner{
- border-top: 3px solid #1caff6;
- border-right: 3px solid transparent;
- -moz-animation: spinner .6s linear infinite;
- -o-animation: spinner .6s linear infinite;
- -webkit-animation: spinner .6s linear infinite;
- animation: spinner .6s linear infinite;
- }
|