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
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
23 changed files with 1028 additions and 222 deletions
|
|
@ -148,7 +148,8 @@
|
|||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
|
|
@ -186,7 +187,8 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
|
||||
--color-glow-primary: var(--color-argon-800);
|
||||
--color-glow-secondary: var(--color-krypton-800);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
|
||||
|
|
@ -225,7 +227,8 @@
|
|||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
|
|
@ -262,7 +265,8 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
|
||||
--color-glow-primary: var(--color-argon-800);
|
||||
--color-glow-secondary: var(--color-krypton-800);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
|
||||
|
|
@ -273,7 +277,6 @@
|
|||
html:has(#themeLight:checked) .dark-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#themeToggleDark {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -301,7 +304,8 @@
|
|||
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
|
||||
--color-glow-primary: var(--color-argon-800);
|
||||
--color-glow-secondary: var(--color-krypton-800);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
|
||||
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
|
||||
|
|
@ -338,7 +342,8 @@
|
|||
drop-shadow(0 0 0.25em var(--color-secondary));
|
||||
--color-glow-primary: var(--color-white);
|
||||
--color-glow-secondary: var(--color-white);
|
||||
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
--transition-glow:
|
||||
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
|
||||
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
|
||||
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
|
|
@ -353,7 +358,6 @@
|
|||
html:has(#themeDark:checked) .dark-only {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#themeToggleLight {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -657,31 +661,172 @@ i[data-icon]::before {
|
|||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
i[data-icon][data-icon="arrow-left"]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
i[data-icon][data-icon="arrow-up"]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
}
|
||||
i[data-icon][data-icon="arrow-right"]::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
i[data-icon][data-icon="arrow-down"]::before {
|
||||
i[data-icon=arrow_down]::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
i[data-icon][data-icon="info"]::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
i[data-icon=arrow_down_left]::before {
|
||||
mask-image: url("../icon/arrow_down_left.svg");
|
||||
}
|
||||
i[data-icon][data-icon="home"]::before {
|
||||
i[data-icon=arrow_down_right]::before {
|
||||
mask-image: url("../icon/arrow_down_right.svg");
|
||||
}
|
||||
i[data-icon=arrow_left]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
i[data-icon=arrow_right]::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
i[data-icon=arrow_up]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
}
|
||||
i[data-icon=arrow_up_left]::before {
|
||||
mask-image: url("../icon/arrow_up_left.svg");
|
||||
}
|
||||
i[data-icon=arrow_up_right]::before {
|
||||
mask-image: url("../icon/arrow_up_right.svg");
|
||||
}
|
||||
i[data-icon=basket]::before {
|
||||
mask-image: url("../icon/basket.svg");
|
||||
}
|
||||
i[data-icon=bed]::before {
|
||||
mask-image: url("../icon/bed.svg");
|
||||
}
|
||||
i[data-icon=clock]::before {
|
||||
mask-image: url("../icon/clock.svg");
|
||||
}
|
||||
i[data-icon=code]::before {
|
||||
mask-image: url("../icon/code.svg");
|
||||
}
|
||||
i[data-icon=creature]::before {
|
||||
mask-image: url("../icon/creature.svg");
|
||||
}
|
||||
i[data-icon=cross]::before {
|
||||
mask-image: url("../icon/cross.svg");
|
||||
}
|
||||
i[data-icon=cross_small]::before {
|
||||
mask-image: url("../icon/cross_small.svg");
|
||||
}
|
||||
i[data-icon=cup_1]::before {
|
||||
mask-image: url("../icon/cup_1.svg");
|
||||
}
|
||||
i[data-icon=cup_2]::before {
|
||||
mask-image: url("../icon/cup_2.svg");
|
||||
}
|
||||
i[data-icon=dect]::before {
|
||||
mask-image: url("../icon/dect.svg");
|
||||
}
|
||||
i[data-icon=external]::before {
|
||||
mask-image: url("../icon/external.svg");
|
||||
}
|
||||
i[data-icon=fairydust]::before {
|
||||
mask-image: url("../icon/fairydust.svg");
|
||||
}
|
||||
i[data-icon=flag]::before {
|
||||
mask-image: url("../icon/flag.svg");
|
||||
}
|
||||
i[data-icon=gluten]::before {
|
||||
mask-image: url("../icon/gluten.svg");
|
||||
}
|
||||
i[data-icon=hackertours]::before {
|
||||
mask-image: url("../icon/hackertours.svg");
|
||||
}
|
||||
i[data-icon=hare_head]::before {
|
||||
mask-image: url("../icon/hare_head.svg");
|
||||
}
|
||||
i[data-icon=history]::before {
|
||||
mask-image: url("../icon/history.svg");
|
||||
}
|
||||
i[data-icon=home]::before {
|
||||
mask-image: url("../icon/home.svg");
|
||||
}
|
||||
i[data-icon][data-icon="menu-small"]::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
i[data-icon=hygene]::before {
|
||||
mask-image: url("../icon/hygene.svg");
|
||||
}
|
||||
i[data-icon][data-icon="light"]::before {
|
||||
i[data-icon=info]::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
}
|
||||
i[data-icon=lightbulb]::before {
|
||||
mask-image: url("../icon/lightbulb.svg");
|
||||
}
|
||||
i[data-icon][data-icon="warning"]::before {
|
||||
i[data-icon=link]::before {
|
||||
mask-image: url("../icon/link.svg");
|
||||
}
|
||||
i[data-icon=location]::before {
|
||||
mask-image: url("../icon/location.svg");
|
||||
}
|
||||
i[data-icon=lock]::before {
|
||||
mask-image: url("../icon/lock.svg");
|
||||
}
|
||||
i[data-icon=login]::before {
|
||||
mask-image: url("../icon/login.svg");
|
||||
}
|
||||
i[data-icon=logout]::before {
|
||||
mask-image: url("../icon/logout.svg");
|
||||
}
|
||||
i[data-icon=menu]::before {
|
||||
mask-image: url("../icon/menu.svg");
|
||||
}
|
||||
i[data-icon=menu_small]::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
}
|
||||
i[data-icon=merch]::before {
|
||||
mask-image: url("../icon/merch.svg");
|
||||
}
|
||||
i[data-icon=message]::before {
|
||||
mask-image: url("../icon/message.svg");
|
||||
}
|
||||
i[data-icon=microphone]::before {
|
||||
mask-image: url("../icon/microphone.svg");
|
||||
}
|
||||
i[data-icon=network]::before {
|
||||
mask-image: url("../icon/network.svg");
|
||||
}
|
||||
i[data-icon=pen]::before {
|
||||
mask-image: url("../icon/pen.svg");
|
||||
}
|
||||
i[data-icon=plate_and_cutlery]::before {
|
||||
mask-image: url("../icon/plate_and_cutlery.svg");
|
||||
}
|
||||
i[data-icon=power]::before {
|
||||
mask-image: url("../icon/power.svg");
|
||||
}
|
||||
i[data-icon=question]::before {
|
||||
mask-image: url("../icon/question.svg");
|
||||
}
|
||||
i[data-icon=schedule]::before {
|
||||
mask-image: url("../icon/schedule.svg");
|
||||
}
|
||||
i[data-icon=search]::before {
|
||||
mask-image: url("../icon/search.svg");
|
||||
}
|
||||
i[data-icon=settings]::before {
|
||||
mask-image: url("../icon/settings.svg");
|
||||
}
|
||||
i[data-icon=signup]::before {
|
||||
mask-image: url("../icon/signup.svg");
|
||||
}
|
||||
i[data-icon=soldering_iron]::before {
|
||||
mask-image: url("../icon/soldering_iron.svg");
|
||||
}
|
||||
i[data-icon=tick]::before {
|
||||
mask-image: url("../icon/tick.svg");
|
||||
}
|
||||
i[data-icon=tick_small]::before {
|
||||
mask-image: url("../icon/tick_small.svg");
|
||||
}
|
||||
i[data-icon=ticket]::before {
|
||||
mask-image: url("../icon/ticket.svg");
|
||||
}
|
||||
i[data-icon=toast]::before {
|
||||
mask-image: url("../icon/toast.svg");
|
||||
}
|
||||
i[data-icon=train]::before {
|
||||
mask-image: url("../icon/train.svg");
|
||||
}
|
||||
i[data-icon=vegan]::before {
|
||||
mask-image: url("../icon/vegan.svg");
|
||||
}
|
||||
i[data-icon=warning]::before {
|
||||
mask-image: url("../icon/warning.svg");
|
||||
}
|
||||
|
||||
|
|
@ -1005,6 +1150,45 @@ main > div.generator i {
|
|||
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--text-5xl), 1fr));
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
.icon-grid 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;
|
||||
}
|
||||
.icon-grid div:hover, .icon-grid div:focus {
|
||||
background-color: var(--color-shade-2);
|
||||
}
|
||||
.icon-grid div:hover i[data-icon]::after, .icon-grid div:focus 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;
|
||||
}
|
||||
.icon-grid div i[data-icon] {
|
||||
font-size: var(--text-5xl);
|
||||
position: relative;
|
||||
}
|
||||
.icon-grid div i[data-icon].icon-small {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
|
|
@ -1242,14 +1426,14 @@ table td.val:not(.empty).hover {
|
|||
table td.val:not(.empty):hover {
|
||||
background-color: var(--color-shade-3);
|
||||
}
|
||||
table td.val.highlighted[data-dim="A"] {
|
||||
background-color: #60a5f9;
|
||||
table td.val.highlighted[data-dim=A] {
|
||||
background-color: rgb(96, 165, 249);
|
||||
}
|
||||
table td.val.highlighted[data-dim="B"] {
|
||||
background-color: #d381f7;
|
||||
table td.val.highlighted[data-dim=B] {
|
||||
background-color: rgb(211, 129, 247);
|
||||
}
|
||||
table td.val.highlighted[data-dim="C"] {
|
||||
background-color: #ff7975;
|
||||
table td.val.highlighted[data-dim=C] {
|
||||
background-color: rgb(255, 121, 117);
|
||||
}
|
||||
table td.val.currentDimension:not(.hover) {
|
||||
background-color: var(--color-shade-2);
|
||||
|
|
@ -1321,7 +1505,7 @@ div.filterBox > div label {
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
div.filterBox > div label input[type="checkbox"] {
|
||||
div.filterBox > div label input[type=checkbox] {
|
||||
appearance: none;
|
||||
background-color: var(--color-shade-1);
|
||||
margin: 0;
|
||||
|
|
@ -1334,7 +1518,7 @@ div.filterBox > div label input[type="checkbox"] {
|
|||
position: relative;
|
||||
font-family: inherit;
|
||||
}
|
||||
div.filterBox > div label input[type="checkbox"]::before {
|
||||
div.filterBox > div label input[type=checkbox]::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "x";
|
||||
|
|
@ -1344,7 +1528,7 @@ div.filterBox > div label input[type="checkbox"]::before {
|
|||
transform: scale(0);
|
||||
transition: 120ms transform ease-in-out;
|
||||
}
|
||||
div.filterBox > div label input[type="checkbox"]:checked::before {
|
||||
div.filterBox > div label input[type=checkbox]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue