116 lines
2.3 KiB
SCSS
116 lines
2.3 KiB
SCSS
@use './responsive.scss' as r;
|
|
@use './colors.scss' as *;
|
|
|
|
|
|
.calendar-schedule {
|
|
$calendar-height-row: 60px;
|
|
|
|
$border-style: solid lightgray 1px;
|
|
|
|
display: grid;
|
|
font-size: xx-small;
|
|
|
|
@include r.media-large {
|
|
& {
|
|
font-size: small;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
display: contents;
|
|
font-weight: bold;
|
|
|
|
div {
|
|
width: 100%;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rooms {
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
div {
|
|
flex: 1 0 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.main-column {
|
|
border-right: $border-style;
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
height: $calendar-height-row;
|
|
box-sizing: border-box;
|
|
border-top: $border-style;
|
|
}
|
|
|
|
.times-left {
|
|
border-right: $border-style;
|
|
}
|
|
|
|
.times-left, .times-right{
|
|
width: 100%;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.main-entry {
|
|
position: relative;
|
|
border-right: $border-style;
|
|
|
|
.event {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: calc($calendar-height-row * var(--minutes) / 60.0);
|
|
height: calc($calendar-height-row * var(--duration) / 60.0);
|
|
width: 30%;
|
|
padding: 1px 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
--fg-color: black;
|
|
|
|
&.room-vorne {
|
|
--bg-color: var(--color-vhvorne);
|
|
|
|
left: 2.5%;
|
|
}
|
|
|
|
&.room-mitte {
|
|
--bg-color: var(--color-vhmitte);
|
|
|
|
left: 35%
|
|
}
|
|
|
|
&.room-hinten {
|
|
--bg-color: var(--color-vhhinten);
|
|
--fg-color: white;
|
|
|
|
left: 67.5%;
|
|
}
|
|
|
|
div {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 3px;
|
|
border-radius: 4px;
|
|
color: var(--fg-color);
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-grid-2-days {
|
|
grid-template-columns: auto repeat(2, 1fr) auto;
|
|
}
|
|
|
|
.calendar-grid-3-days {
|
|
grid-template-columns: auto repeat(3, 1fr) auto;
|
|
}
|
|
|