$border-radius-base: 4px;
$border-radius: $border-radius-base;
$border-radius-top: $border-radius-base $border-radius-base 0 0;
$padding-base: 15px;
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
@mixin transition($time){
-webkit-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
-moz-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
-o-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
-ms-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
}
.page-title{
text-align: center;
color: #FFFFFF;
font-weight: 100;
font-size: 40px;
margin-top: 60px;
margin-bottom: 40px;
}
.wrapper{
width: 100%;
min-height: 930px;
display: block;
position: relative;
background: #333333;
background-image: url('https://images.unsplash.com/photo-1448485780098-7e0b78781fc1?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450');
background-size: cover;
background-position: center center;
position: relative;
padding-bottom: 50px;
&:after{
position: absolute;
width: 100%;
height: 100%;
background: #111111;
display: block;
content: "";
top:0;
left:0;
z-index:1;
opacity: .6;
}
.container{
z-index:2;
position: relative;
}
footer{
position: absolute;
z-index: 3;
bottom: 20px;
width: 100%;
text-align:center;
h3{
color: #FFFFFF;
font-weight: 200;
}
.social-icon{
color:#FFFFFF;
opacity: 0.8;
font-size: 34px;
margin: 20px;
&:hover{
opacity: 1;
}
}
}
}
.ticket-card{
margin-top: 15vh;
margin-bottom: 15vh;
background: #FFFFFF;
border-radius: $border-radius;
&:hover,
&.active{
.cover{
img{
@include translate(0,-50px);
box-shadow: 0 10px 20px -4px rgba(22,22,22,.5);
}
}
}
.cover{
border-radius: $border-radius-top;
position: relative;
margin: 15px;
img{
width: 100%;
position: relative;
z-index: 2;
margin-top: -30px;
box-shadow: 0 10px 16px -6px rgba(22,22,22,.5);
border-radius: $border-radius-base;
@include translate(0,0);
@include transition(300ms);
}
.info{
position: absolute;
width: 100%;
bottom: 0px;
padding: 0 $padding-base;
color: #777777;
.going,
.tickets-left{
padding-bottom: 10px;
border-bottom: 1px solid #f3f3f3;
width: 50%;
}
.going{
float:left;
}
.tickets-left{
float:right;
text-align: right;
}
.fa{
color: #CCCCCC;
margin-right: 5px;
}
}
}
.artist{
float:left;
.info{
font-weigth: 600;
font-size: 12px;
text-transform: uppercase;
color: #BBBBBB;
margin-bottom: 0;
}
.name{
font-weight: 200;
font-size: 22px;
margin-top: 5px;
}
}
.ticket{
float: left;
small{
font-size: 75%;
}
}
.price{
float: right;
text-align: right;
.from{
color: #BBBBBB;
}
.value{
font-size: 28px;
font-weight: 200;
color: #00bbff;
margin-top: -5px;
b{
font-size: 18px;
font-weight: 200;
//vertical-align: top;
}
}
}
.list-unstyled{
max-height: 200px;
overflow-x: scroll;
background: #EEEEEE;
margin-bottom: 0;
box-shadow: inset 0px 4px 10px rgba(0,0,0,0.25);
li{
border-bottom: 1px dotted #CCCCCC;
padding: 5px $padding-base * 2;
overflow: hidden;
width: 100%;
display:block;
position: relative;
.btn-buy{
position: absolute;
right: 15px;
top: 13px;
padding: 8px 20px;
border-radius: 6px;
background: #00bbff;
border:0;
opacity: 0;
@include transition(300ms);
}
&:hover{
.btn-buy{
opacity: 1;
}
}
&:last-child{
border-bottom: none;
}
&:before,
&:after{
display: table;
content: " ";
clear: both;
}
.price{
.value{
color: #444444;
font-size: 22px;
margin-top: 10px;
}
}
}
}
.body{
padding: 5px $padding-base * 2;
.info{
color: #777777;
}
.location,
.date{
padding-top: 10px;
//border-top: 1px solid #f3f3f3;
width: 50%;
}
.location{
float:left;
}
.date{
float:right;
text-align: right;
}
.fa{
color: #CCCCCC;
margin-right: 5px;
}
}
.footer{
.btn{
width: 100%;
background: transparent;
border-top: 1px dotted #BBBBBB;
border-radius: 0;
padding: 15px 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: #666666;
box-shadow: none;
&:focus,
&:hover,
&:active{
outline: none !important;
}
}
}
}
!
