gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 14:31:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

CSS: Button and Tag fixes (#3616)

Browse Source
This commit is contained in:
Pavel Laptev 2024-04-26 16:08:13 +02:00 committed by GitHub
parent 720dbfc875
commit 06240b3e78
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/src/lib/components/Button.svelte
View File

@ -102,39 +102,7 @@
&:disabled {
cursor: default;
pointer-events: none;
opacity: 0.7;
&.neutral.solid,
&.pop.solid,
&.success.solid,
&.error.solid,
&.warning.solid,
&.purple.solid {
--btn-clr: var(--clr-text-2);
--btn-bg: var(--clr-bg-3);
& .badge {
--btn-bg: var(--clr-scale-ntrl-100);
}
}
&.neutral.soft,
&.pop.soft,
&.success.soft,
&.error.soft,
&.warning.soft,
&.purple.soft {
--btn-clr: var(--clr-text-2);
--btn-bg: var(--clr-bg-3);
}
&.ghost {
--btn-clr: var(--clr-text-2);
}
&.ghost.solid {
border-color: var(--clr-bg-3);
}
opacity: 0.5;
}
&.wide {
display: flex;
@ -238,7 +206,7 @@
.pop {
&.soft {
--btn-clr: var(--clr-theme-pop-on-bg);
--btn-clr: var(--clr-theme-pop-on-soft);
--btn-bg: var(--clr-scale-pop-80);
/* if button */
&:not(.not-clickable, &:disabled):hover {
@ -261,7 +229,7 @@
.success {
&.soft {
--btn-clr: var(--clr-theme-succ-on-bg);
--btn-clr: var(--clr-theme-succ-on-soft);
--btn-bg: var(--clr-scale-succ-80);
/* if button */
&:not(.not-clickable, &:disabled):hover {
@ -284,7 +252,7 @@
.error {
&.soft {
--btn-clr: var(--clr-theme-err-on-bg);
--btn-clr: var(--clr-theme-err-on-soft);
--btn-bg: var(--clr-scale-err-80);
/* if button */
&:not(.not-clickable, &:disabled):hover {
@ -307,7 +275,7 @@
.warning {
&.soft {
--btn-clr: var(--clr-theme-warn-on-bg);
--btn-clr: var(--clr-theme-warn-on-soft);
--btn-bg: var(--clr-scale-warn-80);
/* if button */
&:not(.not-clickable, &:disabled):hover {
@ -330,7 +298,7 @@
.purple {
&.soft {
--btn-clr: var(--clr-theme-purp-on-bg);
--btn-clr: var(--clr-theme-purp-on-soft);
--btn-bg: var(--clr-scale-purp-80);
/* if button */
&:not(.not-clickable, &:disabled):hover {

48
app/src/lib/components/Tag.svelte
View File

@ -114,7 +114,7 @@
.pop {
&.soft {
color: var(--clr-theme-pop-on-bg);
color: var(--clr-theme-pop-on-soft);
background: var(--clr-scale-pop-80);
/* if button */
&:not(.not-button, &:disabled):hover {
@ -134,7 +134,7 @@
.success {
&.soft {
color: var(--clr-theme-succ-on-bg);
color: var(--clr-theme-succ-on-soft);
background: var(--clr-scale-succ-80);
/* if button */
&:not(.not-button, &:disabled):hover {
@ -154,7 +154,7 @@
.error {
&.soft {
color: var(--clr-theme-err-on-bg);
color: var(--clr-theme-err-on-soft);
background: var(--clr-scale-err-80);
/* if button */
&:not(.not-button, &:disabled):hover {
@ -174,7 +174,7 @@
.warning {
&.soft {
color: var(--clr-theme-warn-on-bg);
color: var(--clr-theme-warn-on-soft);
background: var(--clr-scale-warn-80);
/* if button */
&:not(.not-button, &:disabled):hover {
@ -194,7 +194,7 @@
.purple {
&.soft {
color: var(--clr-theme-purp-on-bg);
color: var(--clr-theme-purp-on-soft);
background: var(--clr-scale-purp-80);
/* if button */
&:not(.not-button, &:disabled):hover {
@ -214,43 +214,15 @@
/* modifiers */
.not-button {
cursor: default;
user-select: none;
}
.disabled {
cursor: default;
pointer-events: none;
/* opacity: 0.5; */
opacity: 0.6;
}
&.neutral.solid,
&.pop.solid,
&.success.solid,
&.error.solid,
&.warning.solid,
&.purple.solid {
color: var(--clr-text-2);
background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
}
&.neutral.soft,
&.pop.soft,
&.success.soft,
&.error.soft,
&.warning.soft,
&.purple.soft {
color: var(--clr-text-2);
background: oklch(from var(--clr-scale-ntrl-60) l c h / 0.15);
}
&.ghost {
color: var(--clr-text-2);
}
&.ghost.solid {
border: 1px solid oklch(from var(--clr-scale-ntrl-0) l c h / 0.1);
}
.not-button {
cursor: default;
user-select: none;
}
.reversedDirection {