| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- div.cs-skin-elastic {
- background: transparent;
- font-size: 16px;
- font-weight: 700;
- color: #fff;
- }
- .cs-skin-elastic > span {
- background-color: #E9585B;
- border: 3px solid #E9585B;
- z-index: 100;
- }
- .cs-skin-elastic > span::after {
- font-family: 'FontAwesome';
- content: '\f078';
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .cs-skin-elastic .cs-options {
- overflow: visible;
- background: transparent;
- opacity: 1;
- visibility: visible;
- padding-bottom: 1.25em;
- pointer-events: none;
- }
- .cs-skin-elastic.cs-active .cs-options {
- pointer-events: auto;
- }
- .cs-skin-elastic .cs-options > ul::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- -webkit-transform: scale3d(1,0,1);
- transform: scale3d(1,0,1);
- background: #fff;
- -webkit-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- -webkit-transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
- }
- .cs-skin-elastic.cs-active .cs-options > ul::before {
- -webkit-transform: scale3d(1,1,1);
- transform: scale3d(1,1,1);
- -webkit-transition: none;
- transition: none;
- -webkit-animation: expand 0.6s ease-out;
- animation: expand 0.6s ease-out;
- }
- .cs-skin-elastic .cs-options ul li {
- opacity: 0;
- -webkit-transform: translate3d(0,-25px,0);
- transform: translate3d(0,-25px,0);
- -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
- transition: opacity 0.15s, transform 0.15s;
- }
- .cs-skin-elastic.cs-active .cs-options ul li {
- -webkit-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- opacity: 1;
- -webkit-transition: none;
- transition: none;
- -webkit-animation: bounce 0.6s ease-out;
- animation: bounce 0.6s ease-out;
- }
- .cs-skin-elastic .cs-options span {
- padding: 0.8em 1em;
- text-align: center;
- color: #424242;
- }
- .cs-skin-elastic .cs-options span:hover,
- .cs-skin-elastic .cs-options li.cs-focus span,
- .cs-skin-elastic .cs-options .cs-selected span {
- color: #E9585B;
- }
- @-webkit-keyframes expand {
- 0% { -webkit-transform: scale3d(1,0,1); }
- 25% { -webkit-transform: scale3d(1,1.2,1); }
- 50% { -webkit-transform: scale3d(1,0.85,1); }
- 75% { -webkit-transform: scale3d(1,1.05,1) }
- 100% { -webkit-transform: scale3d(1,1,1); }
- }
- @keyframes expand {
- 0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
- 25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
- 50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
- 75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
- 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
- }
- @-webkit-keyframes bounce {
- 0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; }
- 25% { -webkit-transform: translate3d(0,10px,0); }
- 50% { -webkit-transform: translate3d(0,-6px,0); }
- 75% { -webkit-transform: translate3d(0,2px,0); }
- 100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
- }
- @keyframes bounce {
- 0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; }
- 25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
- 50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); }
- 75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); }
- 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
- }
|