rename css disabled property to make it button specific, adjust darkmode disabled css

This commit is contained in:
Julian Stirling 2025-07-01 11:16:25 +01:00
parent 3671d52499
commit 75eac81b80
2 changed files with 13 additions and 6 deletions

View file

@ -17,6 +17,7 @@
@global-primary-background: #C32280; @global-primary-background: #C32280;
@inverse-primary-muted-color: lighten(@global-primary-background, 15%); @inverse-primary-muted-color: lighten(@global-primary-background, 15%);
@darkened-primary-color: darken(@global-primary-background, 15%);
@inverse-global-color: fade(@global-inverse-color, 80%); @inverse-global-color: fade(@global-inverse-color, 80%);
@global-border: #d5d5d5; @global-border: #d5d5d5;
@ -364,6 +365,12 @@ a:hover {
border: 1px solid #f0506e; border: 1px solid #f0506e;
} }
.uk-button-disabled {
border: 1px solid #999999 !important;
background-color: #cccccc !important;
color: #919191 !important;
}
.hook-inverse() { .hook-inverse() {
.uk-button { .uk-button {
background-color: rgba(27, 13, 13, 0.15); background-color: rgba(27, 13, 13, 0.15);
@ -387,12 +394,12 @@ a:hover {
color: #fff; color: #fff;
border-color: #fff; border-color: #fff;
} }
}
.disabled { .uk-button-disabled {
border: 1px solid #999999 !important; border: 1px solid @darkened-primary-color !important;
background-color: #cccccc !important; background-color: #333333 !important;
color: #919191 !important; color: #777777 !important;
}
} }
.uk-icon-button, .uk-icon-button,

View file

@ -1,7 +1,7 @@
<template> <template>
<a <a
class="uk-button" class="uk-button"
:class="[isDisabled ? 'disabled' : '', buttonPrimary ? 'uk-button-primary' : 'uk-button-default']" :class="[isDisabled ? 'uk-button-disabled' : '', buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
:href="URL" :href="URL"
download download
> {{ buttonLabel }}</a > {{ buttonLabel }}</a