|
@import "compass/css3"; |
|
|
|
@mixin gray-stripe { |
|
background-size: 35px 35px; |
|
background-color: #EcEcEc; |
|
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%,transparent 75%, transparent); |
|
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%,transparent 75%, transparent); |
|
} |
|
|
|
@mixin blue-stripe { |
|
background-size: 35px 35px; |
|
background-color: #ffcc00; |
|
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); |
|
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); |
|
} |
|
|
|
@mixin green-stripe { |
|
background-size: 35px 35px; |
|
background-color: #8bc53f; |
|
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); |
|
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); |
|
} |
|
|
|
@mixin inner-shadow { |
|
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, .2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, .2); |
|
} |
|
@-webkit-keyframes myanimation { |
|
from { |
|
left: 0%; |
|
} |
|
to { |
|
left: 50%; |
|
} |
|
} |
|
|
|
h1 { |
|
text-align:center; |
|
font-family: 'Roboto', sans-serif; |
|
font-weight: 400; |
|
font-size: 20px; |
|
padding: 5px 2px; |
|
color: #777; |
|
} |
|
|
|
.checkout-wrap { |
|
color: #444; |
|
font-family: 'Roboto', sans-serif; |
|
margin: 40px auto; |
|
max-width: 800px; |
|
position: relative; |
|
} |
|
ul.checkout-bar { |
|
li { |
|
color: #ccc; |
|
display: block; |
|
font-size: 18px; |
|
font-weight: 600; |
|
padding: 1px 1px 4px 4px; |
|
position: relative; |
|
&:before { |
|
@include inner-shadow; |
|
background: #848484; |
|
border: 2px solid #FFF; |
|
border-radius: 80%; |
|
color: #fff; |
|
font-size: 24px; |
|
font-weight: 700; |
|
left: 200px; |
|
line-height: 30px; |
|
height: 355px; |
|
position: absolute; |
|
text-align: center; |
|
text-shadow: 1px 1px rgba(0, 0, 0, 0.2); |
|
top: 4px; |
|
width: 35px; |
|
z-index: 999; |
|
} |
|
&.active { |
|
color: #8bc53f; |
|
font-weight: bold; |
|
&:before { |
|
background: #8bc53f; |
|
z-index: 99999; |
|
} |
|
} |
|
&.visited { |
|
background: #ffcc00; |
|
color: #ffcc00; |
|
z-index: 99999; |
|
&:before { |
|
background: #ffcc00; |
|
z-index: 99999; |
|
} |
|
} |
|
&:nth-child(1) { |
|
&:before { |
|
content: "1"; |
|
} |
|
} |
|
&:nth-child(2) { |
|
&:before { |
|
content: "2"; |
|
} |
|
} |
|
&:nth-child(3) { |
|
&:before { |
|
content: "3"; |
|
} |
|
} |
|
&:nth-child(4) { |
|
&:before { |
|
content: "4"; |
|
} |
|
} |
|
&:nth-child(5) { |
|
&:before { |
|
content: "5"; |
|
} |
|
} |
|
&:nth-child(6) { |
|
&:before { |
|
content: "6"; |
|
} |
|
} |
|
} |
|
a { |
|
color: #000000; |
|
font-size: 16px; |
|
font-weight: 600; |
|
text-decoration: none; |
|
} |
|
} |
|
|
|
|
|
|
|
@media all and (min-width: 800px) { |
|
.checkout-bar li.active:after { |
|
-webkit-animation: myanimation 3s 0; |
|
@include green-stripe; |
|
@include inner-shadow; |
|
content:""; |
|
height: 15px; |
|
width: 100%; |
|
left: 50%; |
|
position: absolute; |
|
top: -50px; |
|
z-index: 0; |
|
} |
|
.checkout-wrap { |
|
margin: 80px auto; |
|
} |
|
ul.checkout-bar { |
|
@include inner-shadow; |
|
@include gray-stripe; |
|
border-radius: 15px; |
|
height: 15px; |
|
margin: 0 auto; |
|
padding: 0; |
|
position: absolute; |
|
width: 100%; |
|
&:before { |
|
@include blue-stripe; |
|
@include inner-shadow; |
|
border-radius: 15px; |
|
content: " "; |
|
height: 15px; |
|
left: 0; |
|
position: absolute; |
|
width: 10%; |
|
} |
|
li { |
|
display: inline-block; |
|
margin: 20px 0 0; |
|
padding: 0; |
|
text-align: center; |
|
width: 19%; |
|
&:before { |
|
height: 45px; |
|
left: 40%; |
|
line-height: 45px; |
|
position: absolute; |
|
top: -65px; |
|
width: 45px; |
|
z-index: 99; |
|
} |
|
&.visited { |
|
background: none; |
|
&:after { |
|
@include blue-stripe; |
|
@include inner-shadow; |
|
content: ""; |
|
height: 15px; |
|
left: 50%; |
|
position: absolute; |
|
top: -50px; |
|
width: 100%; |
|
z-index: 99; |
|
} |
|
} |
|
} |
|
} |
|
} |