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

109 lines
1.6 KiB
SCSS

@import '../../../../../../../styles/variables';
.day-list-container {
padding-bottom: 2rem;
.day-weekend {
background: #dccfed;
}
.button {
min-width: 9ch;
}
.icon {
margin-right: 1ch;
margin-left: 1ch;
display: inline-block;
}
.several-times {
padding-left: 2em;
width: 96.5%;
}
.date-choice {
margin-bottom: 0.5em;
border-radius: 0.25em;
background: $bg-grey;
.columns {
margin-bottom: 0;
}
label {
font-weight: 600;
}
input {
margin-bottom: 1rem;
}
input,
.button {
width: 100%;
display: block;
}
hr {
margin: 0.5em -1em;
background: $rules;
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
}
.date-choice-item {
width: 75%;
}
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $primary_color;
border: 0;
background: transparent;
text-align: left;
.fa,
.icon {
float: left;
color: $primary_color;
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;
}
}