diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue index 12fd81226..e9d4aa9a7 100644 --- a/front/src/components/ui/Button.vue +++ b/front/src/components/ui/Button.vue @@ -217,7 +217,10 @@ onMounted(() => { white-space: nowrap; justify-content: space-between; align-items: center; - cursor: pointer; + + &:not([disabled]) { + cursor: pointer; + } padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding); &.is-icon-only { diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue index 1bd9c5dd1..bacebc447 100644 --- a/front/src/components/ui/Link.vue +++ b/front/src/components/ui/Link.vue @@ -128,7 +128,9 @@ onMounted(() => { // Decoration - cursor: pointer; + &:not([disabled]) { + cursor: pointer; + } transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale)); transition:background-color .2s, border-color .3s; diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss index a9b4b158a..a9758919c 100644 --- a/front/src/style/colors.scss +++ b/front/src/style/colors.scss @@ -533,6 +533,9 @@ &:hover { color:var(--link-hover-color); } + &[disabled] { + cursor: default; + } } // Fallback for `active` indicators (pressed) @@ -570,9 +573,9 @@ border: 1px solid var(--background-color); &.interactive { - &:hover:not(:has(.interactive:hover)) { - color:var(--hover-color, var(--color)); - background-color:var(--hover-background-color); + &:hover:not(:has(.interactive:hover)):not([disabled]) { + color: var(--hover-color, var(--color)); + background-color: var(--hover-background-color); border-color: var(--hover-background-color); } &[aria-pressed=true] { @@ -599,7 +602,7 @@ border: 1px solid transparent; &.interactive { - &:hover:not(:has(.interactive:hover)) { + &:hover:not(:has(.interactive:hover)):not([disabled]) { color: var(--hover-color, var(--color)); background-color: var(--hover-background-color); border-color: var(--hover-background-color); @@ -634,7 +637,7 @@ border: 1px solid var(--border-color); &.interactive, button { - &:hover { + &:hover:not([disabled]) { color:var(--hover-color, var(--color)); border-color: var(--hover-border-color); } diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue index bcf810a8b..4d73f4e7d 100644 --- a/front/src/ui/components/Sidebar.vue +++ b/front/src/ui/components/Sidebar.vue @@ -309,6 +309,7 @@ const isOpen = ref(false) thin-font icon="bi-heart" thick-when-active + :disabled="!store.state.auth.authenticated" > {{ t('components.Sidebar.link.favorites') }}