EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styleguide: update icons.scss, update navigation icons, add WIP icon grid
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-03-06 02:17:45 +01:00
commit da8c820122
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
23 changed files with 1028 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

131
styleguide/assets/style/icons.scss
View file

@ -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");
}
}
}