app/assets/stylesheets/records/events.scss
.event-box {
border-bottom: 1px solid $color-white;
}
.event-location {
font-size: 15px;
}
.event-links {
text-align: right;
a {
color: $color-white;
margin-right: 5px;
&:hover {
color: $color-white;
}
}
}
.events-list {
background-color: $color-green;
.event-box {
height: 50px;
&:hover {
color: $color-white;
}
&.event-box-artist-header {
margin-top: 50px;
text-transform: uppercase;
&:first-of-type {
margin-top: 0;
}
.item-column {
margin-top: 0;
top: 0;
&.event-artist-name {
@include vertical-align(12px);
font-weight: bolder;
line-height: 24px;
}
}
}
.item-column {
@include vertical-align(9px);
line-height: 18px;
}
.event-date {
font-size: 14px;
font-weight: bold;
}
}
}
.events-boxes {
background-color: $color-green;
padding: 0 50px 50px;
.more-events {
@include vertical-align(25px);
position: absolute;
right: 0;
}
.event-box {
display: table;
height: 90px;
width: 100%;
&:last-of-type {
border-bottom: 0;
}
.item-column {
display: table-cell;
vertical-align: middle;
&.event-date {
text-align: center;
width: 5%;
span {
display: block;
&.event-date-month {
font-size: 15px;
text-transform: uppercase;
}
&.event-date-day {
font-size: 30px;
font-weight: bold;
}
&.event-date-year {
font-size: 15px;
}
}
}
&.event-extra {
width: 10%
}
&.event-details {
width: 75%;
span {
display: block;
&.event-artist-name {
font-size: 30px;
text-transform: uppercase;
a {
font-weight: lighter;
}
}
}
}
&.event-links {
width: 10%;
}
}
}
}
@include respond-to(small) {
.events-boxes {
.event-box {
div {
&.event-details {
width: 75%;
span {
&.event-artist-name {
font-size: 22px
}
}
}
&.event-links {
display: none;
width: 10%;
}
}
}
}
.events-list {
&.page-section {
padding-bottom: 50px;
}
.event-box {
.event-date-header,
.event-links-header {
width: 0;
}
.event-artist-name {
width: 100%;
}
.event-date {
width: 25%;
}
.event-location {
overflow: hidden;
white-space: nowrap;
width: 75%;
}
.event-links {
display: none;
width: 0;
}
.item-column {
@include vertical-align(9px);
line-height: 18px;
}
}
}
}