Added various icons to use for input prefixes. Updated pagination cocmponent.

This commit is contained in:
2025-12-02 00:13:25 -05:00
parent de00bee801
commit e962832f24
18 changed files with 271 additions and 31 deletions

View File

@@ -224,11 +224,13 @@ code {
.pagination > .page-sizes {
justify-content: flex-end;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.pagination > .page-sizes > * {
/*.pagination > .page-sizes > * {
max-width: 6rem;
}
}*/
/* Circle */
.j-circle-image-container {
@@ -351,6 +353,14 @@ code {
background-image: var(--card-background-image);
}
.j-card-2 {
background-image: linear-gradient(0deg, var(--surface-container-low), var(--surface-container-high));
border-top-color: var(--surface-container-outline-high);
border-left-color: var(--surface-container-outline);
border-right-color: var(--surface-container-outline);
border-bottom-color: var(--surface-container-outline-low);
}
/* Input */
.j-input-prefix {
display: flex;
@@ -658,6 +668,10 @@ code {
mask-image: url("../svg/warning-fill.svg");
}
.j-icon-search {
mask-image: url("../svg/search.svg");
}
.j-icon-globe {
mask-image: url("../svg/globe.svg");
}
@@ -666,6 +680,30 @@ code {
mask-image: url("../svg/translate.svg");
}
.j-icon-cart {
mask-image: url("../svg/shopping-cart.svg");
}
.j-icon-circle {
mask-image: url("../svg/circle.svg");
}
.j-icon-tag {
mask-image: url("../svg/tag.svg");
}
.j-icon-person {
mask-image: url("../svg/person.svg");
}
.j-icon-sort {
mask-image: url("../svg/sort.svg");
}
.j-icon-grid {
mask-image: url("../svg/grid-view.svg");
}
.j-icon-2 {
background-repeat: no-repeat;
background-position: center;
@@ -720,6 +758,22 @@ code {
}
/* Background Colors */
.background-color-surface {
background-color: var(--color-black);
}
.background-color-surface-container {
background-color: var(--surface-container);
}
.background-color-surface-container-high {
background-color: var(--surface-container-high);
}
.background-color-surface-container-low {
background-color: var(--surface-container-low);
}
.background-color-black {
background-color: var(--color-black);
}