From d60bb940287ef93e7c3b1e85d04a6eddbd1b8e6e Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Fri, 1 Dec 2023 20:13:57 -0700
Subject: [PATCH] Disabled links (#164)
* Disabled links, Fixes
* bump v
* fix checks
---
docs/components/button.md | 2 ++
lib/assets/branding/logo.svg | 4 ++--
lib/assets/icons/bell-ring.svg | 1 -
lib/assets/styles/classes.scss | 22 ++++++++++++----------
lib/components/base/Button.vue | 7 +++++++
lib/components/base/MarkdownEditor.vue | 4 ++--
package.json | 2 +-
7 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/docs/components/button.md b/docs/components/button.md
index 6b93f5508..8da132261 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -24,6 +24,8 @@
+
+
```vue
diff --git a/lib/assets/branding/logo.svg b/lib/assets/branding/logo.svg
index 3d73b0f8b..a6b2e3807 100644
--- a/lib/assets/branding/logo.svg
+++ b/lib/assets/branding/logo.svg
@@ -1,4 +1,4 @@
diff --git a/lib/assets/icons/bell-ring.svg b/lib/assets/icons/bell-ring.svg
index 56c1a1e9e..7e4f8040f 100644
--- a/lib/assets/icons/bell-ring.svg
+++ b/lib/assets/icons/bell-ring.svg
@@ -3,5 +3,4 @@
-
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 44f792fee..81f456762 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -268,8 +268,8 @@ a,
border: none;
outline: 2px solid transparent;
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
cursor: pointer;
&:not(.btn-outline.btn-hover-filled, .btn-transparent) {
@@ -277,7 +277,7 @@ a,
}
}
- &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
+ &:active:not(&:disabled, &.disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
filter: var(--filter-active);
}
@@ -286,7 +286,8 @@ a,
}
&:disabled:not(.quiet-disabled),
- &[disabled]:not(.quiet-disabled) {
+ &[disabled]:not(.quiet-disabled),
+ &.disabled:not(.quiet-disabled) {
cursor: not-allowed;
filter: grayscale(50%);
opacity: 0.5;
@@ -353,8 +354,8 @@ a,
color: var(--color-base);
}
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
background-color: var(--color-button-bg);
&.btn-hover-filled,
@@ -376,8 +377,8 @@ a,
border-color: var(--color-contrast);
}
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
&.btn-hover-filled,
&.btn-hover-filled-only {
border-color: var(--_accent-color);
@@ -570,6 +571,7 @@ a,
.project-list.display-mode--grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.75rem;
@media screen and (max-width: 80rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -596,7 +598,7 @@ a,
background-color: var(--color-raised-bg);
border-radius: var(--radius-lg);
- border: var(--card-border-width) solid var(--card-divider);
+ border: var(--card-border-width) solid var(--color-card-divider);
margin-bottom: var(--gap-md);
outline: 2px solid transparent;
@@ -974,7 +976,7 @@ a,
}
tr:nth-child(2n) {
- background-color: var(--color-accent-contrast);
+ background-color: var(--color-alt-bg);
}
td:not(:last-of-type),
diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index de2da5ec0..1a43112ef 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -44,6 +44,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
})
const accentedButton = computed(() =>
@@ -73,6 +77,7 @@ const accentedButton = computed(() =>
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
+ disabled: disabled,
}"
:to="link"
:target="external ? '_blank' : '_self'"
@@ -102,6 +107,7 @@ const accentedButton = computed(() =>
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
+ disabled: disabled,
}"
:href="link"
:target="external ? '_blank' : '_self'"
@@ -132,6 +138,7 @@ const accentedButton = computed(() =>
'btn-outline': outline,
'color-accent-contrast': accentedButton,
}"
+ :disabled="disabled"
@click="action"
>
diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue
index 434283f7d..d8cec4371 100644
--- a/lib/components/base/MarkdownEditor.vue
+++ b/lib/components/base/MarkdownEditor.vue
@@ -48,7 +48,7 @@