590 lines
11 KiB
SCSS
590 lines
11 KiB
SCSS
@import "../config";
|
|
|
|
.header {
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
}
|
|
|
|
.header-left {
|
|
float: left;
|
|
|
|
& > * {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
a {
|
|
i {
|
|
font-size: 1.8rem;
|
|
padding: 0 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
&:first-child i::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 100%;
|
|
height: 100%;
|
|
width: 4rem;
|
|
}
|
|
|
|
&:last-child i::after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 100%;
|
|
left: -4rem;
|
|
width: 4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
float: right;
|
|
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.calendar-table {
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
overflow-y: visible;
|
|
padding-bottom: 1rem;
|
|
position: relative;
|
|
transition: width $transitionTime;
|
|
}
|
|
|
|
.calendar-edit {
|
|
width: 0;
|
|
height: 100%;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: width $transitionTime;
|
|
|
|
.calendar-edit-main {
|
|
position: sticky;
|
|
opacity: 0;
|
|
transition: opacity $transitionTime, visibility $transitionTime;
|
|
top: 1rem;
|
|
visibility: hidden;
|
|
height: 100vh;
|
|
z-index: 2;
|
|
background-color: var(--background-secondary-color);
|
|
}
|
|
}
|
|
|
|
.calendar-edit-search {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.calendar-edit-list {
|
|
height: calc(100% - 4.5rem);
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.calendar-work-group {
|
|
position: relative;
|
|
display: block;
|
|
border-radius: $border-radius;
|
|
line-height: 2rem;
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-text-color);
|
|
|
|
padding: 0 0.5rem;
|
|
margin: 0.5rem;
|
|
|
|
&::after {
|
|
content: attr(data-language);
|
|
bottom: 0;
|
|
right: 1rem;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&:hover .calendar-tools {
|
|
display: block;
|
|
}
|
|
|
|
&.drag {
|
|
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
|
|
z-index: 2;
|
|
|
|
.calendar-tools {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.pending::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--background-primary-color);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@include no-select()
|
|
}
|
|
|
|
.calendar[data-editable = "true"].edit {
|
|
.calendar-table {
|
|
width: calc(100% - 16rem);
|
|
border-right: solid 1px var(--table-border-color);
|
|
}
|
|
|
|
.calendar-edit {
|
|
width: 16rem;
|
|
}
|
|
|
|
.calendar-edit-main {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.calendar-tools {
|
|
position: absolute;
|
|
top: -5rem;
|
|
right: 0;
|
|
background-color: var(--background-primary-color);
|
|
border-radius: $border-radius;
|
|
display: none;
|
|
z-index: 10;
|
|
width: max-content;
|
|
|
|
border: solid 1px var(--input-border-color);
|
|
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
|
|
|
|
div {
|
|
clear: left;
|
|
|
|
span {
|
|
float: left;
|
|
display: block;
|
|
width: 2rem;
|
|
line-height: 2rem;
|
|
height: 2rem;
|
|
text-align: center;
|
|
color: var(--icon-color-focused);
|
|
transition: color $transitionTime, background-color $transitionTime;
|
|
box-sizing: content-box;
|
|
|
|
i {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--table-header-color);
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--icon-color-inactive);
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
span:first-child {
|
|
color: var(--text-primary-color);
|
|
width: 6rem;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
span {
|
|
padding-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
span {
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
.calendar-entry {
|
|
position: absolute;
|
|
display: block;
|
|
border-radius: $border-radius;
|
|
z-index: 1;
|
|
line-height: 2rem;
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-text-color);
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
&::after {
|
|
content: attr(data-language);
|
|
bottom: 0;
|
|
right: 1rem;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&:hover .calendar-tools {
|
|
display: block;
|
|
}
|
|
|
|
&.drag {
|
|
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
|
|
z-index: 2;
|
|
|
|
.calendar-tools {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.pending::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--background-primary-color);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&.error {
|
|
outline: solid 0.4rem var(--error-color);
|
|
}
|
|
|
|
@include no-select()
|
|
}
|
|
|
|
.calendar-table-box {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
width: max-content;
|
|
height: max-content;
|
|
|
|
.calendar-header, .calendar-row {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
width: max-content;
|
|
height: max-content;
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-row {
|
|
.calendar-cell:not(:first-child) {
|
|
&:hover {
|
|
background-color: var(--table-header-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.room-to-time {
|
|
.calendar-header {
|
|
line-height: 2rem;
|
|
height: 2rem;
|
|
width: 100%;
|
|
|
|
.calendar-cell:first-child {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-cell:not(:first-child) {
|
|
width: 12rem;
|
|
position: relative;
|
|
padding-left: 0.2rem;
|
|
|
|
&::before {
|
|
content: '';
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
border-left: solid 1px var(--table-border-color);
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-row {
|
|
line-height: 2rem;
|
|
height: 1.3rem;
|
|
|
|
.calendar-cell {
|
|
position: relative;
|
|
width: 12rem;
|
|
|
|
&::before {
|
|
content: '';
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
border-left: solid 1px var(--table-border-color);
|
|
position: absolute;
|
|
}
|
|
|
|
.calendar-entry {
|
|
top: 0.1rem;
|
|
bottom: 0;
|
|
width: auto !important;
|
|
left: 0.1rem !important;
|
|
right: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.calendar-cell:first-child {
|
|
width: 6rem;
|
|
left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-cell:first-child::before {
|
|
border-left: none;
|
|
}
|
|
|
|
&:nth-child(4n + 2) .calendar-cell::before {
|
|
border-top: solid 1px var(--table-border-color);
|
|
}
|
|
|
|
&.calendar-now::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 6rem;
|
|
right: 0;
|
|
height: 1px;
|
|
border-bottom: solid 1px $primary-color;
|
|
}
|
|
|
|
&.calendar-now::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 6rem;
|
|
transform: scale(1, 0.5) rotate(-45deg);
|
|
transform-origin: bottom;
|
|
border-bottom: solid 0.4rem $primary-color;
|
|
border-right: solid 0.4rem $primary-color;
|
|
border-top: solid 0.4rem transparent;
|
|
border-left: solid 0.4rem transparent;
|
|
margin-top: -0.55rem;
|
|
margin-left: -0.3rem;
|
|
}
|
|
|
|
@for $i from 0 through 14 {
|
|
&.calendar-now-#{$i}::after, &.calendar-now-#{$i}::before {
|
|
top: ($i / 16) * 100%
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.time-to-room {
|
|
flex-direction: row;
|
|
|
|
.calendar-header, .calendar-row {
|
|
flex-direction: column;
|
|
line-height: 3rem;
|
|
|
|
.calendar-cell {
|
|
height: 3rem;
|
|
}
|
|
}
|
|
|
|
.calendar-header {
|
|
.calendar-cell {
|
|
position: relative;
|
|
width: 6rem;
|
|
|
|
&:not(:first-child) {
|
|
border-top: solid 1px var(--table-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-row {
|
|
.calendar-cell {
|
|
position: relative;
|
|
width: 1.5rem;
|
|
|
|
&:not(:first-child) {
|
|
border-top: solid 1px var(--table-border-color);
|
|
}
|
|
|
|
.calendar-entry {
|
|
top: 0.5rem !important;
|
|
bottom: 0.5rem;
|
|
width: 0;
|
|
left: 0;
|
|
height: auto !important;
|
|
}
|
|
|
|
&:first-child {
|
|
font-size: 0.8rem;
|
|
position: relative;
|
|
padding-left: 0.2rem;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2n + 2) .calendar-cell::before {
|
|
content: '';
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
border-left: solid 1px var(--table-border-color);
|
|
position: absolute;
|
|
}
|
|
|
|
&.calendar-now::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 3rem;
|
|
bottom: 0;
|
|
width: 1px;
|
|
border-right: solid 1px $primary-color;
|
|
}
|
|
|
|
&.calendar-now::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 3rem;
|
|
transform: scale(0.5, 1) rotate(45deg);
|
|
transform-origin: right;
|
|
border-bottom: solid 0.4rem $primary-color;
|
|
border-right: solid 0.4rem $primary-color;
|
|
border-top: solid 0.4rem transparent;
|
|
border-left: solid 0.4rem transparent;
|
|
margin-top: -0.3rem;
|
|
margin-left: -0.55rem;
|
|
}
|
|
|
|
@for $i from 0 through 14 {
|
|
&.calendar-now-#{$i}::after, &.calendar-now-#{$i}::before {
|
|
left: ($i / 16) * 100%
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.color-picker {
|
|
.color-picker-entry {
|
|
position: relative;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
float: left;
|
|
|
|
input {
|
|
visibility: hidden;
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: 0.5rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 1.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
input:checked ~ label::before {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: transparent;
|
|
top: 1rem;
|
|
left: 0.8rem;
|
|
width: 1.1rem;
|
|
height: 0.5rem;
|
|
transform: rotate(-45deg);
|
|
border-left: solid 0.3rem var(--background-primary-color);
|
|
border-bottom: solid 0.3rem var(--background-primary-color);
|
|
}
|
|
}
|
|
|
|
.color-picker-custom {
|
|
position: relative;
|
|
clear: both;
|
|
height: 4rem;
|
|
|
|
& > input {
|
|
visibility: hidden;
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: 0.5rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 1.5rem;
|
|
z-index: 1;
|
|
border: solid 0.1rem var(--text-primary-color);
|
|
}
|
|
|
|
input:checked ~ label::before {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: transparent;
|
|
top: 1rem;
|
|
left: 0.8rem;
|
|
width: 1.1rem;
|
|
height: 0.5rem;
|
|
transform: rotate(-45deg);
|
|
border-left: solid 0.3rem var(--text-primary-color);
|
|
border-bottom: solid 0.3rem var(--text-primary-color);
|
|
}
|
|
|
|
label input {
|
|
position: absolute;
|
|
left: 4rem;
|
|
top: 0.2rem;
|
|
height: 2rem;
|
|
width: 4rem;
|
|
}
|
|
}
|
|
}
|