103 lines
1.7 KiB
SCSS
103 lines
1.7 KiB
SCSS
.page-container--rating {
|
|
--primary-colour: #191919;
|
|
--secondary-colour: hsl(233 80% 70%);
|
|
--star-colour: hsl(38 90% 55%);
|
|
|
|
transition: 0.3s;
|
|
|
|
.screen__content {
|
|
@apply pb-6;
|
|
h1 {
|
|
@apply text-3xl;
|
|
}
|
|
h2 {
|
|
@apply text-5xl mt-6;
|
|
}
|
|
}
|
|
|
|
.rating {
|
|
@apply mx-auto my-6;
|
|
max-width: 300px;
|
|
transform: rotateY(180deg);
|
|
|
|
&__items {
|
|
@apply flex justify-center items-center;
|
|
display: flex;
|
|
gap: 0 0.5em;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
|
|
input:hover ~ label .star-fill,
|
|
input:checked ~ label .star-fill {
|
|
@apply bg-yellow-500;
|
|
}
|
|
|
|
label {
|
|
width: 20%;
|
|
aspect-ratio: 1;
|
|
@apply cursor--pointer;
|
|
}
|
|
|
|
label .star-fill {
|
|
@apply grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
@apply bg-slate-300;
|
|
clip-path: polygon(
|
|
50% 0%,
|
|
61% 35%,
|
|
98% 35%,
|
|
68% 57%,
|
|
79% 91%,
|
|
50% 70%,
|
|
21% 91%,
|
|
32% 57%,
|
|
2% 35%,
|
|
39% 35%
|
|
);
|
|
}
|
|
|
|
label:hover .label-description::after {
|
|
@apply text-yellow-500 text-2xl;
|
|
|
|
content: attr(data-content);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
|
|
// margin-top: 1em;
|
|
margin-inline: auto;
|
|
|
|
width: 100%;
|
|
height: 2em;
|
|
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
@apply bg-slate-200 border-none p-4 text-lg my-4;
|
|
width: 80%;
|
|
@screen md {
|
|
min-width: 600px;
|
|
}
|
|
}
|
|
.cta--back {
|
|
@apply mt-3 mx-auto;
|
|
}
|
|
.cta--back[disabled] {
|
|
@apply bg-slate-300;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|