app/assets/stylesheets/pages/_event_show.scss
.event {
&-container {
@extend .container;
}
&-title {
color: #fff;
margin: 60px 0 42px;
font-size: 34px;
}
&-card {
position: relative;
height: 492px;
width: 100%;
@include clearfix;
}
&-description p {
font-size: 15px;
}
&-logo {
float: left;
margin-right: 25px;
position: relative;
img {
height: 492px;
width: 492px;
}
}
&-info {
color: #5f5f5f;
font-size: 16px;
height: 100%;
overflow: hidden;
.block-info {
padding-top: 30px;
padding-right: 25px;
&-date {
vertical-align: middle;
}
&-address label,
&-link a {
width: 80%;
display: inline-block;
vertical-align: middle;
}
&-address {
label {
margin-bottom: 0;
}
}
#map-trigger {
cursor: pointer;
text-align: left;
padding: 0;
}
}
.icon-events {
margin-right: 20px;
}
.avatar {
margin-right: 15px;
vertical-align: middle;
}
}
&-share {
.btn-fab {
top: -33px;
right: 30px;
}
.btn-fab.child {
right: 41px;
}
}
&-buttons {
position: absolute;
right: 28px;
bottom: 47px;
@include media(max-width 400px) {
.btn {
padding: 9px 14px;
font-size: 12px;
}
}
}
@include media(max-width 1000px) {
&-buttons {
bottom: 17px;
right: 17px;
}
}
@include media(max-width 599px) {
&-card {
height: auto;
}
&-title {
font-size: 30px;
}
&-logo {
float: inherit;
margin-right: 0;
img {
position: relative;
width: 100%;
height: 100%;
}
}
&-info {
padding: 0 20px;
font-size: 14px;
.block-info {
padding-right: 0;
&-link a {
word-break: break-word;
}
}
}
&-buttons {
position: static;
margin-top: 50px;
padding-bottom: 30px;
text-align: center;
}
}
@include media(min-width 600px max-width 700px) {
&-card {
height: 280px;
}
&-logo img {
height: 280px;
width: 280px;
}
&-logo {
margin-right: 15px;
}
&-info {
padding-right: 30px;
font-size: 12px;
.block-info {
padding-top: 15px;
}
}
&-buttons .btn {
font-size: 12px;
padding: 9px 10px;
}
}
@include media(min-width 700px max-width 1000px) {
&-card {
height: 320px;
}
&-logo img {
height: 320px;
width: 320px;
}
&-info {
padding-right: 30px;
font-size: 14px;
.block-info {
padding-top: 20px;
}
}
&-buttons .btn {
padding: 9px 14px;
}
}
&-actions {
text-align: center;
.btn {
min-width: 200px;
margin: 5px;
}
}
}