maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Define inline svg color in css

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-03-27 14:06:25 +03:00
parent e9a45042e4
commit 4ed729a17d
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/TabNav/TabNav.css
View file

@ -41,7 +41,7 @@
border-bottom-color: transparent;
transition: var(--transitionStyleButton);
background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
&:hover {
@ -59,7 +59,7 @@
margin-top: 0;
&:hover {
background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
background-position: right center;
}
}

3
src/marketplace.css
View file

@ -51,6 +51,9 @@
--matterColorLightTransparent: rgba(255, 255, 255, 0.65);
/* Used with inline CSS SVGs */
--marketplaceColorEncoded: %23c0392b;
/* ================ Spacing unites ================ */
/* Multiples of mobile and desktop spacing units should be used with margins and paddings. */