funky-framadate-front/src/app/features/administration/form/date/list/day/day-list.component.scss

121 lines
1.8 KiB
SCSS

@import '../../../../../../../styles/variables';
.day-list-container {
padding-bottom: 2rem;
.bottom,
.top {
padding-left: 1rem;
padding-right: 1rem;
}
.top {
padding-top: 1rem;
}
.bottom {
padding-bottom: 1rem;
}
.day-weekend {
background: #dccfed;
}
.button {
min-width: 9ch;
}
.date-choice {
margin-bottom: 0.5em;
border-radius: 0.25em;
background: $bg-grey;
.columns {
margin-bottom: 0;
}
label {
font-weight: 600;
}
input,
.button {
width: 100%;
display: block;
}
hr {
background: $rules;
margin: 0;
}
}
.colored-weekend-days {
.date-choice {
&.day-weekend {
background: #b1a1d5;
}
&:nth-of-type(odd) {
background: #9880d5;
&.day-weekend {
background: #8e72d4;
}
}
}
}
.date-choice-item {
width: 75%;
border-color: $border-color !important;
}
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $primary_color;
border: 0;
border-radius: 0.25rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: transparent;
text-align: left;
margin-right: 0;
.fa,
.icon {
float: left;
color: $primary_color;
margin: 0;
margin-right: 1rem;
height: 1.25rem;
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
}
&:hover {
color: $white;
background-color: $primary_color;
.fa,
.icon {
color: $white;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%);
}
}
}
.format-helper {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
}
.add_date {
margin-top: 2rem;
}
}