frontend/css/farm_designer/farm_events.scss
.farm-event-panel {
.fa-calendar {
position: absolute;
top: 0.5rem;
left: 1rem;
}
.panel-content {
padding: 0 1rem 6rem 0;
padding-bottom: inherit;
}
}
.farm-events {
max-height: calc(100vh - 15rem);
@media screen and (max-width: 450px) {
max-height: calc(100vh - 20rem);
}
overflow-y: auto;
overflow-x: hidden;
margin-right: -10px;
padding-bottom: inherit;
}
.farm-event {
display: flex;
margin-top: 1rem;
margin-right: 10px;
}
.farm-event-year {
text-align: center;
margin-top: 1rem;
font-size: 1.1rem;
font-weight: bold;
}
.farm-event-date {
flex: 1;
text-align: center;
}
.farm-event-date-day {
font-size: 2rem;
}
.farm-event-data {
flex: 5;
max-width: 83%;
}
.farm-event-variable {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 125%;
font-size: 1rem;
line-height: 1.25rem;
}
.farm-event-data-block {
display: flex;
position: relative;
padding: 0.8rem;
font-size: 1.2rem;
align-items: center;
background: $white;
border-bottom: 1px solid $gray;
p,
span {
color: $medium_gray;
}
.farm-event-data-time {
z-index: 1;
width: 6rem;
}
.farm-event-data-executable {
z-index: 1;
margin-left: 1rem;
max-width: 65%;
overflow-wrap: anywhere;
p {
margin-top: 0.2rem;
margin-bottom: 0.75rem !important;
}
}
&:hover {
i {
opacity: 1;
}
}
.edit-link {
position: absolute;
right: 0.8rem;
}
.fa-external-link {
margin-left: 0.5rem;
}
i {
opacity: 0;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: $white;
opacity: 0.7;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 7rem;
bottom: 0;
width: 1px;
background: $gray;
}
}