jam-cloud/web/app/assets/stylesheets/events/react-components/EventList.scss

81 lines
1.4 KiB
SCSS

@import "events/constants";
@import "client/common.scss";
.EventList {
.event-header {
background-color: $cta-color;
color: white;
font-size: 24px;
text-align: center;
padding: 20px 0;
border-width: $chunkyBorderWidth 0 $chunkyBorderWidth;
border-style: solid;
border-color: $copy-color-on-dark;
}
.event-section {
padding: 10px;
//s border-width: 0 0 $chunkyBorderWidth;
//border-style: solid;
//border-color: $copy-color-on-dark;
&.loading {
text-align:center;
}
}
.event {
display:grid;
grid-template-columns: 10rem 20rem;
align-content:center;
height:8rem;
border-style: solid;
border-width: 2px 0 2px 0;
border-color: $copy-color-on-dark;
&:first-child {
border-width:0 0 1px 0;
}
&:last-child {
border-width:1px 0 0 0;
}
&:only-child {
border-width:0;
}
&.no-image {
grid-template-columns: 30rem;
}
}
.title-link {
color:white;
}
img.thumb {
width:100%;
max-height:400px;
}
div.thumb {
display: grid;
justify-content: center;
align-content: center;
text-transform: uppercase;
padding-right:1rem;
}
.detail {
display:grid;
justify-content: center;
padding-left:1rem;
align-content:center;
}
.title {
font-size:1.5rem;
}
.when {
font-size:1rem;
}
}