@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/library.less");
@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/variables.less");
@barcode: white;
@body: #FFB563;
@grey: #A2A2A2;
@ticket-body: #161616;
body {
background-color: @body;
font-family: "Montserrat", "Helvetica Neue", "Open Sans", "Arial";
font-weight: 300;
}
.container-fluid {
.center;
width: 100%;
}
.ticket {
border-radius: 4px;
display: inline-block;
max-width: 320px;
text-align: left;
text-transform: uppercase;
width: 100%;
&.dark {
background-color: @ticket-body;
color: white;
}
&.light {
background-color: white;
color: @ticket-body;
.ticket-body {
border-color: @ticket-body;
}
}
}
.ticket-head {
background-position: center;
background-size: cover;
border-radius: 4px 4px 0 0;
color: white;
height: 140px;
position: relative;
.from-to {
.center;
font-size: 24px;
font-weight: 600;
width: 100%;
z-index: 2;
}
.icon {
display: inline-block;
margin: 0 40px;
transform: rotate(135deg) translate(25%, 25%);
}
}
.ticket-body {
border-bottom: 1px dashed white;
padding: 15px 45px;
position: relative;
p {
color: @grey;
font-size: 12px;
}
.flight-info {
margin-top: 15px;
}
.flight-date {
font-size: 12px;
margin-top: 15px;
}
&:before,
&:after {
background-color: @body;
border-radius: 100%;
content: "";
height: 15px;
position: absolute;
top: 100%;
width: 20px;
}
&:before {
left: 0;
transform: translate(-70%, -45%);
}
&:after {
right: 0;
transform: translate(70%, -45%);
}
}
.barcode {
.h-align;
// inherits color from the 'color' property of .light or .dark
box-shadow:
1px 0 0 1px,
5px 0 0 1px,
10px 0 0 1px,
11px 0 0 1px,
15px 0 0 1px,
18px 0 0 1px,
22px 0 0 1px,
23px 0 0 1px,
26px 0 0 1px,
30px 0 0 1px,
35px 0 0 1px,
37px 0 0 1px,
41px 0 0 1px,
44px 0 0 1px,
47px 0 0 1px,
51px 0 0 1px,
56px 0 0 1px,
59px 0 0 1px,
64px 0 0 1px,
68px 0 0 1px,
72px 0 0 1px,
74px 0 0 1px,
77px 0 0 1px,
81px 0 0 1px,
85px 0 0 1px,
88px 0 0 1px,
92px 0 0 1px,
95px 0 0 1px,
96px 0 0 1px,
97px 0 0 1px,
101px 0 0 1px,
105px 0 0 1px,
109px 0 0 1px,
110px 0 0 1px,
113px 0 0 1px,
116px 0 0 1px,
120px 0 0 1px,
123px 0 0 1px,
127px 0 0 1px,
130px 0 0 1px,
131px 0 0 1px,
134px 0 0 1px,
135px 0 0 1px,
138px 0 0 1px,
141px 0 0 1px,
144px 0 0 1px,
147px 0 0 1px,
148px 0 0 1px,
151px 0 0 1px,
155px 0 0 1px,
158px 0 0 1px,
162px 0 0 1px,
165px 0 0 1px,
168px 0 0 1px,
173px 0 0 1px,
176px 0 0 1px,
177px 0 0 1px,
180px 0 0 1px;
display: inline-block;
height: 30px;
margin-right: 85px;
margin-top: 25px;
transform: translateX(-90px);
width: 0;
}
.disclaimer {
color: @grey;
font-family: "IM Fell French Canon";
font-size: 14px;
font-style: italic;
line-height: 1.25;
padding: 15px 25px;
text-transform: none;
}
.layer {
.transition(all 0.2s ease);
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px 4px 0 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
// typography reset
p,
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
View Compiled
