eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

More button options and dividers in overflow menus

Browse Source
This commit is contained in:
Prospector
2023-10-11 14:57:23 -07:00
parent ffc46d6a48
commit f9a9ece320
8 changed files with 201 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/assets/icons/copy.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 337 B

113
lib/assets/styles/classes.scss
View File

@@ -266,10 +266,13 @@ a,
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
cursor: pointer;
filter: brightness(0.85);
&:not(.btn-outline.btn-hover-filled, .btn-transparent) {
filter: brightness(0.85);
}
}
&:active:not(&:disabled) {
&:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
filter: brightness(0.8);
}
@@ -321,86 +324,118 @@ a,
.btn {
@extend .button-base;
--text-color: var(--color-base);
--background-color: var(--color-button-bg);
--shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
--_text-color: var(--color-base);
--_background-color: var(--color-button-bg);
--_accent-color: var(--color-base);
--_shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
&.btn-outline,
&.btn-transparent {
--background-color: var(--color-base);
--text-color: var(--color-raised-bg);
box-sizing: border-box;
background-color: transparent;
color: var(--background-color);
transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out , color 0.2s ease-in-out;
box-shadow: none;
}
&.btn-transparent {
--_accent-color: var(--color-base);
color: var(--_accent-color);
&.btn-hover-filled-only {
color: var(--color-base);
}
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
background-color: var(--color-button-bg);
filter: none;
&.btn-hover-filled, &.btn-hover-filled-only {
color: var(--_text-color);
background-color: var(--_background-color);
}
}
}
&.btn-outline {
--background-color: var(--color-contrast);
border: 2px solid var(--background-color);
--_accent-color: var(--color-contrast);
border: 2px solid var(--_accent-color);
padding-block: calc(var(--gap-sm) - 2px);
}
color: var(--_background-color);
&.btn-raised {
--shadow: var(--shadow-inset-sm), var(--shadow-raised);
--background-color: var(--color-raised-bg);
&.btn-hover-filled-only {
color: var(--color-contrast);
border-color: var(--color-contrast);
}
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
&.btn-hover-filled, &.btn-hover-filled-only {
border-color: var(--_accent-color);
color: var(--_text-color);
background-color: var(--_background-color);
}
}
}
&.btn-danger {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-red);
--_accent-color: var(--color-red);
}
&.btn-primary {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-brand);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-brand);
--_accent-color: var(--color-brand);
}
&.btn-secondary {
--text-color: var(--color-contrast);
--background-color: var(--color-brand-highlight);
--_text-color: var(--color-contrast);
--_background-color: var(--color-brand-highlight);
--_accent-color: var(--color-brand-highlight);
}
&.btn-highlight {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-orange);
--_accent-color: var(--color-orange);
}
&.btn-red {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-red);
--_accent-color: var(--color-red);
}
&.btn-orange {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-orange);
--_accent-color: var(--color-orange);
}
&.btn-green {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-green);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-green);
--_accent-color: var(--color-green);
}
&.btn-blue {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-blue);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-blue);
--_accent-color: var(--color-blue);
}
&.btn-purple {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-purple);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-purple);
--_accent-color: var(--color-purple);
}
&.btn-gray {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-gray);
--_text-color: var(--color-accent-contrast);
--_background-color: var(--color-gray);
--_accent-color: var(--color-gray);
}
&.btn-large {
@@ -410,9 +445,9 @@ a,
box-sizing: border-box;
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
color: var(--_text-color);
background-color: var(--_background-color);
box-shadow: var(--_shadow);
border-radius: var(--radius-md);
padding: var(--gap-sm) var(--gap-lg);