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

Small button refactor, overflow and popout menus

Browse Source
This commit is contained in:
Prospector
2023-10-11 08:04:50 -07:00
parent c70ebb6cce
commit a708cf7f69
13 changed files with 556 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/assets/icons/bookmark.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-bookmark"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

1
lib/assets/icons/more-horizontal.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-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

1
lib/assets/icons/more-vertical.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-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

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

@@ -321,19 +321,30 @@ a,
.btn {
@extend .button-base;
--text-color: var(--color-contrast);
--text-color: var(--color-base);
--background-color: var(--color-button-bg);
--shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
&.btn-outline {
--background-color: var(--color-contrast);
&.btn-outline,
&.btn-transparent {
--background-color: var(--color-base);
--text-color: var(--color-raised-bg);
box-sizing: border-box;
background-color: transparent;
border: 2px solid var(--background-color);
color: var(--background-color);
transition: background-color 0.2s ease-in-out;
&:focus-visible:not(&:disabled),
&:hover:not(&:disabled) {
background-color: var(--color-button-bg);
filter: none;
}
}
&.btn-outline {
--background-color: var(--color-contrast);
border: 2px solid var(--background-color);
padding-block: calc(var(--gap-sm) - 2px);
}
@@ -353,6 +364,7 @@ a,
}
&.btn-secondary {
--text-color: var(--color-contrast);
--background-color: var(--color-brand-highlight);
}
@@ -361,6 +373,36 @@ a,
--background-color: var(--color-orange);
}
&.btn-red {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-red);
}
&.btn-orange {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-orange);
}
&.btn-green {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-green);
}
&.btn-blue {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-blue);
}
&.btn-purple {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-purple);
}
&.btn-gray {
--text-color: var(--color-accent-contrast);
--background-color: var(--color-gray);
}
&.btn-large {
font-weight: 700;
min-height: 2.5rem;
@@ -373,20 +415,21 @@ a,
box-shadow: var(--shadow);
border-radius: var(--radius-md);
padding-inline: var(--gap-lg);
padding-block: var(--gap-sm);
padding: var(--gap-sm) var(--gap-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: fit-content;
height: fit-content;
text-decoration: none;
gap: 0.5rem;
line-height: 1.25rem;
svg {
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5rem;
width: 1.25rem;
height: 1.25rem;
}
:deep(.external-icon) {
@@ -398,17 +441,7 @@ a,
}
&.icon-only {
padding: 0;
height: 2.25rem;
width: 2.25rem;
svg {
min-width: 1.25rem;
max-width: 1.25rem;
min-height: 1.25rem;
max-height: 1.25rem;
margin: auto;
}
padding: var(--gap-sm);
}
&.transparent {

2
lib/assets/styles/variables.scss
View File

@@ -25,6 +25,7 @@ html {
--color-button-bg: hsl(220, 13%, 91%);
--color-base: hsl(221, 39%, 11%);
--color-secondary: #6b7280;
--color-contrast: #1a202c;
--color-accent-contrast: #ffffff;
@@ -67,6 +68,7 @@ html {
--color-button-bg: hsl(222, 13%, 30%);
--color-base: var(--dark-color-base);
--color-secondary: #96a2b0;
--color-contrast: var(--dark-color-contrast);
--color-accent-contrast: #000000;