Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating the css components

Browse Source
This commit is contained in:
Antoine M 2024-02-21 11:02:49 +01:00
parent fecdf47eff
commit 112103bdbb
13 changed files with 478 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/assets/css/components/LanguageSelect.scss Normal file
View File

@ -0,0 +1,113 @@
.language-select {
@apply relative flex flex-wrap gap-4;
@apply bg-transparent;
background-image: url("../../img/shapes-background/language-selector-background.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
box-sizing: border-box;
&__toggle,
&__country-list {
@apply border-none w-full;
}
&__label {
@apply bg-construction font-bold text-4xl py-3 px-6 block text-zuume;
line-height: 1;
}
&__toggle {
@apply py-3
bg-transparent
text-neutral-800
capitalize
text-base
flex
px-5
pr-12
my-0
w-fit
cursor-pointer
items-center;
transform: skew(-2deg);
.flag {
@apply bg-slate-200 rounded-full w-8 h-8 flex justify-center items-center border-4 border-solid border-slate-800 overflow-hidden;
img {
@apply w-full h-full object-cover;
}
}
.language {
@apply font-bold ml-1 text-2xl text-zuume text-slate-900;
}
&:after {
@apply block w-4 h-4 absolute right-5
bg-center bg-no-repeat bg-contain;
content: "";
background-image: url("../../img/select_deploy_icon.svg");
}
&:hover {
&:after {
transition: all 0.3s ease-in-out;
filter: invert(27%) sepia(40%) saturate(1344%) hue-rotate(156deg) brightness(97%)
contrast(102%);
}
}
}
&__country-list {
&[aria-hidden="true"] {
@apply hidden;
}
@apply my-0
bg-white
py-2
absolute
top-0
z-30
list-none
pl-0
overflow-y-auto w-full;
max-height: 286px;
box-sizing: border-box;
overflow-y: scroll;
top: 100%;
transform: translate(0, -10px);
}
li {
@apply flex items-center text-neutral-800 cursor-pointer pl-8 py-2;
span {
@apply font-bold text-slate-800;
}
.flag {
@apply pr-4 w-6 h-auto;
}
&:hover {
@apply bg-slate-200;
}
}
}
.language-select:has(.language-select__country-list[aria-hidden="false"]) {
.language-select__toggle::after {
transform: rotate(180deg);
}
}
.page-container--welcome {
.language-select {
isolation: isolate;
&__country-list {
top: 0;
transform: translate(0, calc(-100% + 10px));
z-index: -2;
}
}
}

36
src/assets/css/components/Modal.scss
View File

@ -1,36 +0,0 @@
dialog {
&::backdrop {
backdrop-filter: blur(6px) brightness(0.2);
}
width: clamp(50%, 900px, 90%);
}
.game-modal {
&__close-button {
@apply absolute top-2 right-2 bg-construction p-4 border-none;
}
overflow: visible;
}
.modal-content-container {
@apply w-full;
box-sizing: border-box;
@apply p-8 grid gap-x-8;
grid-template-columns: 1fr 1fr;
h2 {
@apply text-5xl py-8;
}
&__content {
}
&__cover {
@apply px-6 py-12 bg-neutral-50;
align-self: center;
box-sizing: border-box;
img {
@apply block w-full h-auto object-contain object-center;
}
}
}

17
src/assets/css/components/Page-container.scss
View File

@ -5,26 +5,23 @@
h1.titling-construction {
@apply mx-auto text-4xl;
}
.screen {
@apply flex flex-col justify-center items-center relative overflow-hidden;
@apply bg-lhoist;
height: calc(99.8dvh - $margin * 2);
width: calc(100% - $margin * 2);
margin: $margin auto 0 auto;
}
h2.screen-subtitle {
@apply text-6xl mt-4 mb-12;
}
.screen {
@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
height: calc(99.8dvh - $margin * 2);
width: calc(100% - $margin * 2);
margin: $margin auto 0 auto;
&__content {
@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative;
padding-bottom: -100px;
background-image: url("../../img/mask.svg");
background-position: center;
background-size: cover;
// padding-bottom: -100px;
}
}
}

10
src/assets/css/components/Tutorials.scss Normal file
View File

@ -0,0 +1,10 @@
.tutorial-container {
&__slides-controls {
@apply mt-12 flex gap-4;
}
&__animated-cover {
svg {
max-height: 300px;
}
}
}

39
src/assets/css/components/cta.scss
View File

@ -1,39 +0,0 @@
.cta {
@apply block;
&--round {
@apply w-20 h-20;
border-radius: 50%;
}
&--construction {
@apply bg-construction;
}
&--button-icon {
@apply relative border-none cursor-pointer;
transition: all 0.4s ease-in-out;
&:after {
@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
content: "";
transform: translate(-50%, -50%);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
&:hover {
scale: 1.2;
}
}
&--play {
&:after {
background-image: url("../../img/icons/icon-play.svg");
}
}
&--next {
&:after {
background-image: url("../../img/icons/arrow-next.svg");
}
}
}
.motion-button {
@apply bg-transparent w-fit h-fit border-none;
}

11
src/assets/css/components/ui/AppLogo.scss Normal file
View File

@ -0,0 +1,11 @@
.application-logo {
@apply text-zuume text-center;
animation-play-state: bg-red-500;
&__title {
@apply text-9xl;
}
&__subtitle {
@apply text-6xl bg-construction w-fit mx-auto px-3 block mb-10;
transform: rotate(-3deg);
}
}

74
src/assets/css/components/ui/Cta.scss Normal file
View File

@ -0,0 +1,74 @@
.cta {
@apply block;
&--round {
@apply w-20 h-20;
border-radius: 50%;
}
&--construction {
@apply bg-construction;
}
&--lhoist {
@apply bg-lhoistdark;
}
&--button-icon {
@apply relative border-none cursor-pointer;
text-decoration: none;
transition: all 0.4s ease-in-out;
&:after {
@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
content: "";
transform: translate(-50%, -50%);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
&:hover {
scale: 1.2;
}
}
&--play {
@apply p-3;
&:after {
@apply w-10 h-9;
background-image: url("../../../img/icons/icon-play.svg");
translate: 6px 1px;
}
}
&--next {
&:after {
background-image: url("../../../img/icons/arrow-next.svg");
}
}
&--previous {
&:after {
background-image: url("../../../img/icons/arrow-previous.svg");
}
}
&--home {
&:after {
background-image: url("../../../img/icons/home.svg");
}
}
&--back {
&:after {
background-image: url("../../../img/icons/icon-back.svg");
}
}
&--start {
@apply text-5xl text-white p-8 py-4 flex items-center gap-6 h-fit;
line-height: 0.4;
span {
@apply block text-zuume;
}
&:after {
@apply inline-block static;
transform: none;
background-image: url("../../../img/icons/arrow-start.svg");
}
}
}
.motion-button {
@apply bg-transparent w-fit h-fit border-none;
}

21
src/assets/css/components/ui/Loading.scss Normal file
View File

@ -0,0 +1,21 @@
.loading {
&__animation {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
animation: translate 2s infinite linear;
}
&__text {
@apply text-7xl tracking-wider text-zuume text-white text-center;
transform: translate(0, -50px);
}
}
@keyframes translate {
from {
translate: -2vw;
}
to {
translate: 2vw;
}
}

60
src/assets/css/components/ui/Modal.scss Normal file
View File

@ -0,0 +1,60 @@
body:has(dialog) {
overflow: hidden;
}
dialog {
border: none;
transform: skew(0deg, -0.7deg);
background-color: transparent;
&::backdrop {
backdrop-filter: blur(3px) brightness(0.4);
}
width: clamp(50%, 900px, 90%);
overflow-y: scroll;
overflow-x: hidden;
max-width: 80vw;
max-height: 90dvh;
}
.game-modal {
&__close-button {
@apply absolute top-3 right-3 bg-construction p-3 border-none cursor-pointer;
img {
@apply w-6 h-6;
}
}
overflow: visible;
}
.modal-content-container {
@apply w-full
p-8 grid gap-x-8;
@apply pt-28 pb-16;
box-sizing: border-box;
grid-template-columns: 1fr 1fr;
&__background {
@apply h-full w-full absolute top-0 left-0 object-fill;
}
background-image: url("../../../img/shapes-background/modal-background.svg");
background-position: center top;
background-size: 100% 100%;
background-repeat: no-repeat;
h2 {
@apply text-5xl py-8;
}
&__content {
}
&__cover {
@apply px-6 py-12 bg-neutral-50;
align-self: center;
box-sizing: border-box;
img {
@apply block w-full h-auto object-contain object-center;
}
}
}

1
src/assets/css/components/ui/close-icon.scss Normal file
View File

@ -0,0 +1 @@
.close{}

95
src/assets/css/pages/Rating.scss Normal file
View File

@ -0,0 +1,95 @@
.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;
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 min-w-96 p-4 text-lg my-4;
min-width: 600px;
}
.cta--back {
@apply mt-3 mx-auto;
}
}

56
src/assets/css/pages/Results.scss Normal file
View File

@ -0,0 +1,56 @@
.results-modal {
.modal-content-container {
@apply flex flex-col items-center pt-16 pb-10;
&__celebration {
@apply absolute top-0 left-0 w-full h-full z-10;
pointer-events: none;
}
&__celebration-confettis-fixe {
@apply absolute top-0 left-0 z-10 w-full;
// svg > g {
// @apply bg-purple-900 opacity-100 w-full;
// }
}
}
.visual-results {
@apply relative;
&__cup {
@apply w-48 h-48;
}
&__score {
@apply bg-neutral-300 h-12 w-12 rounded-full
flex
justify-center
items-center
text-3xl
text-zuume
absolute
top-0
right-0;
transform: translateX(100%);
}
.succes-indicator {
@apply w-3 h-3 absolute top-0 right-0 bg-green-600 rounded-full p-2;
transform: translate(40%, -40%);
}
}
.results-explanation {
@apply text-center mt-6 max-w-md text-lg font-normal;
line-height: 1.3;
}
.cta--home {
@apply mt-8;
}
}
.page-container--results {
.screen {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}

30
src/assets/css/pages/welcome.scss Normal file
View File

@ -0,0 +1,30 @@
.page-container--welcome {
@apply bg-lhoist flex flex-col items-center justify-center text-center;
min-height: 100dvh;
.application-logo {
@apply mb-0;
&__title {
@apply text-white;
}
&__subtitle {
}
}
.truck-animation {
margin-top: -40px;
svg {
@apply max-h-96;
}
}
.interaction-buttons {
@apply flex items-stretch gap-6;
.cta--start,
.language-select {
@apply h-auto;
}
.cta--start {
@apply py-2;
}
}
}