f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-31 13:02:38 +00:00
Code Wiki Activity

Change icons to mask-image

Browse Source 
Removes icons as components, uses mask-image instead.

Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.

rename the icon files for consistency.
This commit is contained in:
Gazook89
2024-08-26 15:51:35 -05:00
parent d4d27aab6a
commit 7b767368df
6 changed files with 66 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
client/icons/customIcons.less
View File

@@ -1,57 +1,69 @@
.fac {
display : inline-block;
display : inline-block;
background-color : currentColor;
mask-size : contain;
mask-repeat : no-repeat;
mask-position : center;
width : 1em;
aspect-ratio : 1;
}
.position-top-left {
content: url('../icons/position-top-left.svg');
mask-image: url('../icons/position-top-left.svg');
}
.position-top-right {
content: url('../icons/position-top-right.svg');
mask-image: url('../icons/position-top-right.svg');
}
.position-bottom-left {
content: url('../icons/position-bottom-left.svg');
mask-image: url('../icons/position-bottom-left.svg');
}
.position-bottom-right {
content: url('../icons/position-bottom-right.svg');
mask-image: url('../icons/position-bottom-right.svg');
}
.position-top {
content: url('../icons/position-top.svg');
mask-image: url('../icons/position-top.svg');
}
.position-right {
content: url('../icons/position-right.svg');
mask-image: url('../icons/position-right.svg');
}
.position-bottom {
content: url('../icons/position-bottom.svg');
mask-image: url('../icons/position-bottom.svg');
}
.position-left {
content: url('../icons/position-left.svg');
mask-image: url('../icons/position-left.svg');
}
.mask-edge {
content: url('../icons/mask-edge.svg');
mask-image: url('../icons/mask-edge.svg');
}
.mask-corner {
content: url('../icons/mask-corner.svg');
mask-image: url('../icons/mask-corner.svg');
}
.mask-center {
content: url('../icons/mask-center.svg');
mask-image: url('../icons/mask-center.svg');
}
.book-front-cover {
content: url('../icons/book-front-cover.svg');
mask-image: url('../icons/book-front-cover.svg');
}
.book-back-cover {
content: url('../icons/book-back-cover.svg');
mask-image: url('../icons/book-back-cover.svg');
}
.book-inside-cover {
content: url('../icons/book-inside-cover.svg');
mask-image: url('../icons/book-inside-cover.svg');
}
.book-part-cover {
content: url('../icons/book-part-cover.svg');
mask-image: url('../icons/book-part-cover.svg');
}
.davek {
content: url('../icons/Davek.svg');
mask-image: url('../icons/Davek.svg');
}
.rellanic {
content: url('../icons/Rellanic.svg');
mask-image: url('../icons/Rellanic.svg');
}
.iokharic {
content: url('../icons/Iokharic.svg');
mask-image: url('../icons/Iokharic.svg');
}
.zoom-to-fit {
mask-image: url('../icons/zoom-to-fit.svg');
}
.fit-width {
mask-image: url('../icons/fit-width.svg');
}