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
|
|
@ -27,7 +27,7 @@ function loadImage(base64Image) {
|
|||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgViewBox = `0 0 ${Math.trunc(800 / this.height * this.width)} 800`;
|
||||
let svgViewBox = `0 0 ${Math.trunc((800 / this.height) * this.width)} 800`;
|
||||
svg.setAttribute("height", this.height);
|
||||
svg.setAttribute("width", this.width);
|
||||
svg.setAttribute("viewBox", svgViewBox);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -165,7 +165,8 @@ $mobile-navigation-height: 4rem;
|
|||
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))
|
||||
|
|
@ -207,7 +208,8 @@ $mobile-navigation-height: 4rem;
|
|||
--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));
|
||||
|
|
|
|||
188
styleguide/assets/style/icons.css
Normal file
188
styleguide/assets/style/icons.css
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
i[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
i[data-icon]::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
i[data-icon=arrow_down]::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
i[data-icon=arrow_down_left]::before {
|
||||
mask-image: url("../icon/arrow_down_left.svg");
|
||||
}
|
||||
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=hygene]::before {
|
||||
mask-image: url("../icon/hygene.svg");
|
||||
}
|
||||
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=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");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icons.css.map */
|
||||
1
styleguide/assets/style/icons.css.map
Normal file
1
styleguide/assets/style/icons.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["icons.scss"],"names":[],"mappings":"AA4DE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE","file":"icons.css"}
|
||||
|
|
@ -1,55 +1,86 @@
|
|||
i[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
$icons: (
|
||||
"arrow_down",
|
||||
"arrow_down_left",
|
||||
"arrow_down_right",
|
||||
"arrow_left",
|
||||
"arrow_right",
|
||||
"arrow_up",
|
||||
"arrow_up_left",
|
||||
"arrow_up_right",
|
||||
"basket",
|
||||
"bed",
|
||||
"clock",
|
||||
"code",
|
||||
"creature",
|
||||
"cross",
|
||||
"cross_small",
|
||||
"cup_1",
|
||||
"cup_2",
|
||||
"dect",
|
||||
"external",
|
||||
"fairydust",
|
||||
"flag",
|
||||
"gluten",
|
||||
"hackertours",
|
||||
"hare_head",
|
||||
"history",
|
||||
"home",
|
||||
"hygene",
|
||||
"info",
|
||||
"lightbulb",
|
||||
"link",
|
||||
"location",
|
||||
"lock",
|
||||
"login",
|
||||
"logout",
|
||||
"menu",
|
||||
"menu_small",
|
||||
"merch",
|
||||
"message",
|
||||
"microphone",
|
||||
"network",
|
||||
"pen",
|
||||
"plate_and_cutlery",
|
||||
"power",
|
||||
"question",
|
||||
"schedule",
|
||||
"search",
|
||||
"settings",
|
||||
"signup",
|
||||
"soldering_iron",
|
||||
"tick",
|
||||
"tick_small",
|
||||
"ticket",
|
||||
"toast",
|
||||
"train",
|
||||
"vegan",
|
||||
"warning"
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
i {
|
||||
&[data-icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-icon="arrow-left"]::before {
|
||||
mask-image: url("../icon/arrow_left.svg");
|
||||
}
|
||||
|
||||
&[data-icon="arrow-up"]::before {
|
||||
mask-image: url("../icon/arrow_up.svg");
|
||||
}
|
||||
|
||||
&[data-icon="arrow-right"]::before {
|
||||
mask-image: url("../icon/arrow_right.svg");
|
||||
}
|
||||
|
||||
&[data-icon="arrow-down"]::before {
|
||||
mask-image: url("../icon/arrow_down.svg");
|
||||
}
|
||||
|
||||
&[data-icon="info"]::before {
|
||||
mask-image: url("../icon/info.svg");
|
||||
}
|
||||
|
||||
&[data-icon="home"]::before {
|
||||
mask-image: url("../icon/home.svg");
|
||||
}
|
||||
|
||||
&[data-icon="menu-small"]::before {
|
||||
mask-image: url("../icon/menu_small.svg");
|
||||
}
|
||||
|
||||
&[data-icon="light"]::before {
|
||||
mask-image: url("../icon/lightbulb.svg");
|
||||
}
|
||||
|
||||
&[data-icon="warning"]::before {
|
||||
mask-image: url("../icon/warning.svg");
|
||||
@each $icon in $icons {
|
||||
&[data-icon="#{$icon}"]::before {
|
||||
mask-image: url("../icon/#{$icon}.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,WAAY;EACV,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,SAAS;EACtB,OAAO,EAAE,yTAAyT",
|
||||
"sources": ["merch.scss"],
|
||||
"names": [],
|
||||
"file": "merch.ccss"
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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