app/assets/stylesheets/issues.css.less
@import "bootstrap/mixins";
@import "mixins";
@parties_num: 7;
.issue-tags {
a:after {
content: ",";
}
a:last-child:after {
content: "";
}
}
.page-header {
aside {
line-height: 1em;
margin-bottom: 0.5em;
}
.issue-title {
margin-bottom: 0;
}
}
.issue-description {
font-size: 1.3em;
line-height: 1.5em;
margin: 1em 0 2em 0;
}
.issue-timeline {
.promises {
a {
color: inherit;
}
}
.timeline {
.yearmarker {
width: 70px;
margin: 0 auto;
position: relative;
text-align: center;
background: white;
color: lightgray;
font-size: 1.5em;
font-weight: 200;
border: 1px solid lightgray;
border-width: 1px 0;
}
.timeline-entry {
position: relative;
padding-top: 40px;
.date {
position: absolute;
color: white;
text-align: center;
line-height: 1;
left: 50%;
height: 64px;
width: 64px;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px 10px 0 10px;
margin: 10px 0 0 -30px;
border-radius: 50%;
border: 5px solid white;
font-weight: bold;
z-index: 100;
background-color: gray;
box-shadow: 0 0 0 2px lightgray, 0 0 0 20px rgba(0,0,0, 0.03);
.day {
font-size: 1.6em;
}
.month {
font-size: 0.7em;
text-transform: uppercase;
}
}
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
bottom: 0;
margin-left: -1px;
width: 3px;
background-color: lightgray;
}
}
.votes {
position: relative;
.vote {
padding: 0 50px 10px 50px;
margin-bottom: 10px;
.vote-title {
color: black;
font-size: 1.25em;
font-weight: 200px;
margin-bottom: 0;
}
}
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
bottom: 0;
margin-left: -1px;
width: 3px;
background-color: lightgray;
}
}
}
.positions {
position: relative;
border: 0 solid #eee;
border-width: 1px 0;
background-color: #fafafa;
padding: 0 20px 30px 20px;
margin-bottom: 20px;
h4 {
margin-bottom: 0;
font-size: inherit;
}
.position-description {
margin-bottom: 0;
font-style: italic;
}
img {
max-width: 32px;
margin-top: -2px;
}
}
.new-positions {
position: relative;
border: 0 solid #eee;
border-width: 1px 0;
background-color: #fafafa;
padding: 0 20px 30px 20px;
margin-bottom: 20px;
.group { font-size: 0.9em; }
.promises { display: none; }
hr.divider {
width: 100%;
margin: 10px 0;
border-top: 1px solid #d9d9d9;
}
.position { margin-bottom: 20px; }
h4 {
margin-bottom: 0;
font-size: inherit;
}
.position-description {
margin-bottom: 0;
font-style: italic;
}
img {
max-width: 32px;
margin-top: -2px;
}
}
}
@media (max-width: 767px) {
.issue-timeline {
.timeline {
.timeline-entry {
display: none;
}
.votes {
padding: 20px 0;
.vote {
padding-left: 0;
padding-right: 0;
}
&:before {
display: none;
}
}
}
.positions:after {
display: none;
}
}
}