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

handling cursors

Browse Source
This commit is contained in:
Antoine M 2024-05-14 14:22:54 +02:00
parent 8d58c64bff
commit a8604ede69
11 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/App.scss
View File

@ -1,5 +1,6 @@
@import "./generalites/base.scss"; @import "./generalites/base.scss";
@import "./generalites/typography.scss"; @import "./generalites/typography.scss";
@import "./generalites/cursors.scss";
@import "./components/Titling.scss"; @import "./components/Titling.scss";
@ -24,13 +25,13 @@
@import "./components/ui/CountrySelect.scss"; @import "./components/ui/CountrySelect.scss";
@import "./components/ui/LanguageSelect.scss"; @import "./components/ui/LanguageSelect.scss";
@import "./components/ui/DropdownSelect.scss"; @import "./components/ui/DropdownSelect.scss";
@import "./components/ui/Modal.scss";
@import "./components/ui/Cta.scss"; @import "./components/ui/Cta.scss";
@import "./components/ui/Loading.scss"; @import "./components/ui/Loading.scss";
@import "./components/ui/Marquee.scss"; @import "./components/ui/Marquee.scss";
@import "./components/animation/Clouds.scss"; @import "./components/animation/Clouds.scss";
@import "./components/modals/Modal.scss";
@import "./components/modals/CookiesModal.scss"; @import "./components/modals/CookiesModal.scss";
@import "./pages/welcome.scss"; @import "./pages/welcome.scss";

1
src/assets/css/components/game/GameQuestion.scss
View File

@ -3,6 +3,7 @@
@apply flex items-center gap-4 flex-wrap mt-12; @apply flex items-center gap-4 flex-wrap mt-12;
} }
&__answer-button { &__answer-button {
@apply cursor--pointer ;
@apply bg-neutral-100 border-none @apply bg-neutral-100 border-none
rounded-full flex flex-col justify-center items-center shrink-0 rounded-full flex flex-col justify-center items-center shrink-0
w-fit h-auto w-fit h-auto

2
src/assets/css/components/game/Help.scss
View File

@ -1,5 +1,5 @@
.help { .help {
@apply absolute top-0 right-0 z-10 flex items-center gap-x-3 py-2 px-3 text-zuume text-xl pr-6 border-none cursor-pointer; @apply absolute top-0 right-0 z-10 flex items-center gap-x-3 py-2 px-3 text-zuume text-xl pr-6 border-none;
transform: translate(3px, -2px); transform: translate(3px, -2px);
&:after { &:after {
@apply block bg-white w-full h-full absolute top-0 left-0 z-0; @apply block bg-white w-full h-full absolute top-0 left-0 z-0;

4
src/assets/css/components/ui/CountrySelect.scss
View File

@ -18,7 +18,6 @@
pl-8 pl-8
my-0 my-0
w-80 w-80
cursor-pointer
items-center; items-center;
transform: skew(-6deg); transform: skew(-6deg);
@ -46,6 +45,7 @@
} }
@apply max-h-64 my-0 absolute @apply max-h-64 my-0 absolute
z-30 z-30
cursor--pointer
pl-8 overflow-y-auto rounded-b-lg shadow-lg w-full; pl-8 overflow-y-auto rounded-b-lg shadow-lg w-full;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll; overflow-y: scroll;
@ -53,7 +53,7 @@
} }
li { li {
@apply flex items-center text-neutral-800 my-3 cursor-pointer; @apply flex items-center text-neutral-800 my-3;
.flag { .flag {
@apply pr-4; @apply pr-4;
} }

4
src/assets/css/components/ui/DropdownSelect.scss
View File

@ -13,7 +13,7 @@
flex flex
pl-8 pl-8
my-0 my-0
cursor-pointer
items-center; items-center;
&:after { &:after {
@ -42,7 +42,7 @@
@apply list-none; @apply list-none;
li { li {
@apply pl-8 flex items-center text-neutral-800 py-3 cursor-pointer; @apply pl-8 flex items-center text-neutral-800 py-3;
} }
li:hover { li:hover {

7
src/assets/css/components/ui/LanguageSelect.scss
View File

@ -1,5 +1,5 @@
.language-select { .language-select {
@apply relative flex flex-wrap gap-4; @apply relative flex flex-wrap gap-4 cursor--pointer;
@apply bg-transparent; @apply bg-transparent;
background-image: url("../../../img/shapes-background/language-selector-background.svg"); background-image: url("../../../img/shapes-background/language-selector-background.svg");
background-size: 100% 100%; background-size: 100% 100%;
@ -30,7 +30,7 @@
my-0 my-0
w-fit w-fit
w-full w-full
cursor-pointer cursor--pointer
justify-end justify-end
items-center; items-center;
transform: skew(-2deg); transform: skew(-2deg);
@ -66,6 +66,7 @@
} }
&__country-list { &__country-list {
@apply cursor--pointer;
&[aria-hidden="true"] { &[aria-hidden="true"] {
@apply hidden; @apply hidden;
} }
@ -88,7 +89,7 @@
} }
li { li {
@apply flex items-center text-neutral-800 cursor-pointer pl-8 py-2; @apply flex items-center text-neutral-800 pl-8 py-2 cursor--pointer;
span { span {
@apply font-bold text-slate-800; @apply font-bold text-slate-800;
} }

23
src/assets/css/generalites/cursors.scss Normal file
View File

@ -0,0 +1,23 @@
.cursor--open-hand {
cursor: url("../../img/cursors/lhoist-curseur-open-hand.svg") 64 64, grab;
}
.cursor--pointer {
cursor: url("../../img/cursors/lhoist-curseur-pointeur.svg") 64 64, pointer;
}
.cursor--grab {
cursor: url("../../img/cursors/lhoist-curseur-drag.svg") 64 64, grabbing;
}
.cursor--loupe {
cursor: url("../../img/cursors/lhoist-curseur-loupe-objet.svg") 64 64, zoom-in;
}
html {
cursor: url("../../img/cursors/lhoist-curseur-open-hand.svg") 64 64, pointer;
}
button,
a,
a::after {
@apply cursor--pointer;
}

7
src/assets/css/pages/Game.scss
View File

@ -26,9 +26,10 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/ display: none; /* Chrome, Safari, Opera*/
} }
cursor: url("../../img/cursors/lhoist-curseur-pointeur.svg") 64 64, auto; @apply cursor--open-hand;
:active { :active {
cursor: url("../../img/cursors/lhoist-curseur-drag.svg") 64 64, auto; @apply cursor--grab;
} }
@apply w-screen overflow-x-scroll left-0 top-0 absolute h-full; @apply w-screen overflow-x-scroll left-0 top-0 absolute h-full;
@ -47,7 +48,7 @@
@apply w-fit h-full relative; @apply w-fit h-full relative;
.lhoist-blocks-focus-object { .lhoist-blocks-focus-object {
cursor: url("../../img/cursors/lhoist-curseur-loupe-objet.svg") 64 64, auto; @apply cursor--loupe;
@apply absolute w-auto block object-contain; @apply absolute w-auto block object-contain;
img { img {

2
src/assets/css/pages/Profile.scss
View File

@ -5,7 +5,7 @@
.profile-select { .profile-select {
@apply grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 list-none gap-2 px-2; @apply grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 list-none gap-2 px-2;
&__profile-type { &__profile-type {
@apply flex flex-col justify-center items-center py-10 px-3 rounded-lg cursor-pointer gap-2 w-fit mx-auto; @apply flex flex-col justify-center items-center py-10 px-3 rounded-lg cursor--pointer gap-2 w-fit mx-auto;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
&:hover, &:hover,
&--selected { &--selected {

2
src/assets/css/pages/Rating.scss
View File

@ -42,7 +42,7 @@
label { label {
width: 20%; width: 20%;
aspect-ratio: 1; aspect-ratio: 1;
cursor: pointer; @apply cursor--pointer;
} }
label .star-fill { label .star-fill {

4
src/assets/css/pages/Thematiques.scss
View File

@ -33,9 +33,11 @@
bottom: -120px !important; bottom: -120px !important;
} }
} }
.swiper-button-prev, .swiper-button-prev,
.swiper-button-next { .swiper-button-next {
@apply bg-construction p-2 rounded-full w-auto; @apply bg-construction p-2 rounded-full w-auto cursor--pointer;
aspect-ratio: 1/1; aspect-ratio: 1/1;
&:after { &:after {
@apply w-8 h-8 block bg-contain bg-no-repeat bg-center; @apply w-8 h-8 block bg-contain bg-no-repeat bg-center;