styleguide: update icons.scss, update navigation icons, add WIP icon grid
All checks were successful
/ build (push) Successful in 11s
All checks were successful
/ build (push) Successful in 11s
This commit is contained in:
parent
c4c3396c76
commit
da8c820122
23 changed files with 1028 additions and 222 deletions
|
|
@ -374,6 +374,51 @@ main > div.generator {
|
|||
}
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--text-5xl), 1fr));
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
div {
|
||||
width: var(--text-5xl);
|
||||
height: var(--text-5xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-shade-2);
|
||||
|
||||
i[data-icon]::after {
|
||||
content: attr(data-icon);
|
||||
font-size: var(--text-xl);
|
||||
background-color: var(--color-shade-2);
|
||||
padding: 0.5rem;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: calc((var(--text-xl) * -1) - 2rem);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
font-size: var(--text-5xl);
|
||||
position: relative;
|
||||
|
||||
&.icon-small {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue