103 lines
1.8 KiB
SCSS
103 lines
1.8 KiB
SCSS
.LP-Voting {
|
|
$-block: &;
|
|
|
|
font-family: $-primary-sans-serif-font;
|
|
gap: 16PX;
|
|
font-size: 42px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
.LP-Headline {
|
|
margin-bottom: 0;
|
|
height: 33px;
|
|
}
|
|
|
|
&__Left {
|
|
position: relative;
|
|
}
|
|
|
|
&__Choices {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-end;
|
|
margin-bottom: calc(1.5 * 18px);
|
|
width: max-content;
|
|
|
|
--indication-color: #{$-light-brown};
|
|
&:hover {
|
|
--indication-color: #{$-beige};
|
|
}
|
|
}
|
|
|
|
&__Vote {
|
|
color: $-beige;
|
|
text-decoration: none;
|
|
transition: color .4s;
|
|
|
|
&:hover,
|
|
&:hover ~ &,
|
|
&:focus,
|
|
&focus ~ & {
|
|
color: $-grey;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:hover {
|
|
#{$-block}__Label {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&--overall {
|
|
color: var(--indication-color);
|
|
}
|
|
}
|
|
|
|
&__Label {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
height: 1.5em;
|
|
left: 0px;
|
|
width: 100%;
|
|
text-align: center;
|
|
top: 83px;
|
|
background-color: white;
|
|
color: $-grey;
|
|
}
|
|
|
|
&__Label, &__CurrentVote {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__CurrentVote {
|
|
margin-top: -29px;
|
|
color: $-light-brown;
|
|
}
|
|
|
|
&__Date, &__Vote {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__UserVote {
|
|
#{$-block}__Vote {
|
|
&, &:hover {
|
|
color: black;
|
|
cursor: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__Info{
|
|
font-size: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
&Label {
|
|
display: block;
|
|
}
|
|
}
|
|
} |