From a8604ede69084a9ff1e872c2394f73824806dff0 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 14 May 2024 14:22:54 +0200 Subject: [PATCH] handling cursors --- src/assets/css/App.scss | 3 ++- .../css/components/game/GameQuestion.scss | 1 + src/assets/css/components/game/Help.scss | 2 +- .../css/components/ui/CountrySelect.scss | 4 ++-- .../css/components/ui/DropdownSelect.scss | 4 ++-- .../css/components/ui/LanguageSelect.scss | 7 +++--- src/assets/css/generalites/cursors.scss | 23 +++++++++++++++++++ src/assets/css/pages/Game.scss | 7 +++--- src/assets/css/pages/Profile.scss | 2 +- src/assets/css/pages/Rating.scss | 2 +- src/assets/css/pages/Thematiques.scss | 4 +++- 11 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 src/assets/css/generalites/cursors.scss diff --git a/src/assets/css/App.scss b/src/assets/css/App.scss index dfbddc6..fbc88ba 100644 --- a/src/assets/css/App.scss +++ b/src/assets/css/App.scss @@ -1,5 +1,6 @@ @import "./generalites/base.scss"; @import "./generalites/typography.scss"; +@import "./generalites/cursors.scss"; @import "./components/Titling.scss"; @@ -24,13 +25,13 @@ @import "./components/ui/CountrySelect.scss"; @import "./components/ui/LanguageSelect.scss"; @import "./components/ui/DropdownSelect.scss"; -@import "./components/ui/Modal.scss"; @import "./components/ui/Cta.scss"; @import "./components/ui/Loading.scss"; @import "./components/ui/Marquee.scss"; @import "./components/animation/Clouds.scss"; +@import "./components/modals/Modal.scss"; @import "./components/modals/CookiesModal.scss"; @import "./pages/welcome.scss"; diff --git a/src/assets/css/components/game/GameQuestion.scss b/src/assets/css/components/game/GameQuestion.scss index fbf08a0..f27af51 100644 --- a/src/assets/css/components/game/GameQuestion.scss +++ b/src/assets/css/components/game/GameQuestion.scss @@ -3,6 +3,7 @@ @apply flex items-center gap-4 flex-wrap mt-12; } &__answer-button { + @apply cursor--pointer ; @apply bg-neutral-100 border-none rounded-full flex flex-col justify-center items-center shrink-0 w-fit h-auto diff --git a/src/assets/css/components/game/Help.scss b/src/assets/css/components/game/Help.scss index 8d2519b..ead54df 100644 --- a/src/assets/css/components/game/Help.scss +++ b/src/assets/css/components/game/Help.scss @@ -1,5 +1,5 @@ .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); &:after { @apply block bg-white w-full h-full absolute top-0 left-0 z-0; diff --git a/src/assets/css/components/ui/CountrySelect.scss b/src/assets/css/components/ui/CountrySelect.scss index 0064fa7..e6967eb 100644 --- a/src/assets/css/components/ui/CountrySelect.scss +++ b/src/assets/css/components/ui/CountrySelect.scss @@ -18,7 +18,6 @@ pl-8 my-0 w-80 - cursor-pointer items-center; transform: skew(-6deg); @@ -46,6 +45,7 @@ } @apply max-h-64 my-0 absolute z-30 + cursor--pointer pl-8 overflow-y-auto rounded-b-lg shadow-lg w-full; box-sizing: border-box; overflow-y: scroll; @@ -53,7 +53,7 @@ } li { - @apply flex items-center text-neutral-800 my-3 cursor-pointer; + @apply flex items-center text-neutral-800 my-3; .flag { @apply pr-4; } diff --git a/src/assets/css/components/ui/DropdownSelect.scss b/src/assets/css/components/ui/DropdownSelect.scss index ae987fb..0b22f32 100644 --- a/src/assets/css/components/ui/DropdownSelect.scss +++ b/src/assets/css/components/ui/DropdownSelect.scss @@ -13,7 +13,7 @@ flex pl-8 my-0 - cursor-pointer + items-center; &:after { @@ -42,7 +42,7 @@ @apply list-none; 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 { diff --git a/src/assets/css/components/ui/LanguageSelect.scss b/src/assets/css/components/ui/LanguageSelect.scss index 3d0281a..cf2bfac 100644 --- a/src/assets/css/components/ui/LanguageSelect.scss +++ b/src/assets/css/components/ui/LanguageSelect.scss @@ -1,5 +1,5 @@ .language-select { - @apply relative flex flex-wrap gap-4; + @apply relative flex flex-wrap gap-4 cursor--pointer; @apply bg-transparent; background-image: url("../../../img/shapes-background/language-selector-background.svg"); background-size: 100% 100%; @@ -30,7 +30,7 @@ my-0 w-fit w-full - cursor-pointer + cursor--pointer justify-end items-center; transform: skew(-2deg); @@ -66,6 +66,7 @@ } &__country-list { + @apply cursor--pointer; &[aria-hidden="true"] { @apply hidden; } @@ -88,7 +89,7 @@ } 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 { @apply font-bold text-slate-800; } diff --git a/src/assets/css/generalites/cursors.scss b/src/assets/css/generalites/cursors.scss new file mode 100644 index 0000000..d890e19 --- /dev/null +++ b/src/assets/css/generalites/cursors.scss @@ -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; +} diff --git a/src/assets/css/pages/Game.scss b/src/assets/css/pages/Game.scss index fe718b5..f9993b2 100644 --- a/src/assets/css/pages/Game.scss +++ b/src/assets/css/pages/Game.scss @@ -26,9 +26,10 @@ &::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } - cursor: url("../../img/cursors/lhoist-curseur-pointeur.svg") 64 64, auto; + @apply cursor--open-hand; + :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; @@ -47,7 +48,7 @@ @apply w-fit h-full relative; .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; img { diff --git a/src/assets/css/pages/Profile.scss b/src/assets/css/pages/Profile.scss index b1c8d76..4156750 100644 --- a/src/assets/css/pages/Profile.scss +++ b/src/assets/css/pages/Profile.scss @@ -5,7 +5,7 @@ .profile-select { @apply grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 list-none gap-2 px-2; &__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; &:hover, &--selected { diff --git a/src/assets/css/pages/Rating.scss b/src/assets/css/pages/Rating.scss index 7e04e59..c22336d 100644 --- a/src/assets/css/pages/Rating.scss +++ b/src/assets/css/pages/Rating.scss @@ -42,7 +42,7 @@ label { width: 20%; aspect-ratio: 1; - cursor: pointer; + @apply cursor--pointer; } label .star-fill { diff --git a/src/assets/css/pages/Thematiques.scss b/src/assets/css/pages/Thematiques.scss index e38b5a6..9cc65a6 100644 --- a/src/assets/css/pages/Thematiques.scss +++ b/src/assets/css/pages/Thematiques.scss @@ -33,9 +33,11 @@ bottom: -120px !important; } } + .swiper-button-prev, .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; &:after { @apply w-8 h-8 block bg-contain bg-no-repeat bg-center;