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/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";

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

@ -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

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

@ -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;

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

@ -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;
}

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

@ -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 {

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

@ -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;
}

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 {
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 {

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

@ -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 {

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

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

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

@ -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;