:root
{
--xcss-svg-lock: url('data:image/svg+xml;utf8,');
--xcss-svg-warning: url('data:image/svg+xml;utf8,');
--xcss-svg-error: url('data:image/svg+xml;utf8,');
--xcss-svg-check: url('data:image/svg+xml;utf8,');
--xcss-svg-cancel: url('data:image/svg+xml;utf8,');
--xcss-svg-close: url('data:image/svg+xml;utf8,');
--xcss-svg-submit: url('data:image/svg+xml;utf8,');
--xcss-svg-search: url('data:image/svg+xml;utf8,');
--xcss-svg-van: url('data:image/svg+xml;utf8,');
--xcss-svg-cplus: url('data:image/svg+xml;utf8,');
--xcss-svg-plus: url('data:image/svg+xml;utf8,');
--xcss-svg-cart: url('data:image/svg+xml;utf8,');
--xcss-svg-shippingbox: url('data:image/svg+xml;utf8,');
--xcss-svg-signout: url('data:image/svg+xml;utf8,');
--xcss-svg-cog: url('data:image/svg+xml;utf8,');
--xcss-svg-upload: url('data:image/svg+xml;utf8,');
--xcss-svg-reload: url('data:image/svg+xml;utf8,');
--xcss-svg-bars: url('data:image/svg+xml;utf8,');
--xcss-svg-info: url('data:image/svg+xml;utf8,');
--xcss-svg-apps: url('data:image/svg+xml;utf8,');
--xcss-svg-calendar: url('data:image/svg+xml;utf8,');
--xcss-svg-arrowright: url('data:image/svg+xml;utf8,');
--xcss-svg-arrowdown: url('data:image/svg+xml;utf8,');
--xcss-svg-arrowup: url('data:image/svg+xml;utf8,');
--xcss-svg-arrowup: url('data:image/svg+xml;utf8,');
--xcss-svg-arrowleft: url('data:image/svg+xml;utf8,');
--xcss-svg-heart: url('data:image/svg+xml;utf8,');
}
.xcss-svg
{
height: 100px;
width: 100%;
background-repeat: no-repeat;
background-color: black;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
.xcss-svg-color-white { background-color: white; }
.xcss-svg-color-black-hover:hover, .xcss-svg-color-black-hover:hover * { background-color: black; transition: background-color 0.3s ease-in-out; }
.xcss-svg-lock-mask
{
-webkit-mask-image: var(--xcss-svg-lock);
mask-image: var(--xcss-svg-lock);
}
.xcss-svg-warning-mask
{
-webkit-mask-image: var(--xcss-svg-warning);
mask-image: var(--xcss-svg-warning);
}
.xcss-svg-error-mask
{
-webkit-mask-image: var(--xcss-svg-error);
mask-image: var(--xcss-svg-error);
}
.xcss-svg-check-mask
{
-webkit-mask-image: var(--xcss-svg-check);
mask-image: var(--xcss-svg-check);
}
.xcss-svg-cancel-mask
{
-webkit-mask-image: var(--xcss-svg-cancel);
mask-image: var(--xcss-svg-cancel);
}
.xcss-svg-submit-mask
{
-webkit-mask-image: var(--xcss-svg-submit);
mask-image: var(--xcss-svg-submit);
}
.xcss-svg-search-mask
{
-webkit-mask-image: var(--xcss-svg-search);
mask-image: var(--xcss-svg-search);
}
.xcss-svg-van-mask
{
-webkit-mask-image: var(--xcss-svg-van);
mask-image: var(--xcss-svg-van);
}
.xcss-svg-cplus-mask
{
-webkit-mask-image: var(--xcss-svg-cplus);
mask-image: var(--xcss-svg-cplus);
}
.xcss-svg-plus-mask
{
-webkit-mask-image: var(--xcss-svg-plus);
mask-image: var(--xcss-svg-plus);
}
.xcss-svg-cart-mask
{
-webkit-mask-image: var(--xcss-svg-cart);
mask-image: var(--xcss-svg-cart);
}
.xcss-svg-shippingbox-mask
{
-webkit-mask-image: var(--xcss-svg-shippingbox);
mask-image: var(--xcss-svg-shippingbox);
}
.xcss-svg-signout-mask
{
-webkit-mask-image: var(--xcss-svg-signout);
mask-image: var(--xcss-svg-signout);
}
.xcss-svg-cog-mask
{
-webkit-mask-image: var(--xcss-svg-cog);
mask-image: var(--xcss-svg-cog);
}
.xcss-svg-close-mask
{
-webkit-mask-image: var(--xcss-svg-close);
mask-image: var(--xcss-svg-close);
}
.xcss-svg-upload-mask
{
-webkit-mask-image: var(--xcss-svg-upload);
mask-image: var(--xcss-svg-upload);
}
.xcss-svg-reload-mask
{
-webkit-mask-image: var(--xcss-svg-reload);
mask-image: var(--xcss-svg-reload);
}
.xcss-svg-bars-mask
{
-webkit-mask-image: var(--xcss-svg-bars);
mask-image: var(--xcss-svg-bars);
}
.xcss-svg-info-mask
{
-webkit-mask-image: var(--xcss-svg-info);
mask-image: var(--xcss-svg-info);
}
.xcss-svg-apps-mask
{
-webkit-mask-image: var(--xcss-svg-apps);
mask-image: var(--xcss-svg-apps);
}
.xcss-svg-calendar-mask
{
-webkit-mask-image: var(--xcss-svg-calendar);
mask-image: var(--xcss-svg-calendar);
}
.xcss-svg-arrowright-mask
{
-webkit-mask-image: var(--xcss-svg-arrowright);
mask-image: var(--xcss-svg-arrowright);
}
.xcss-svg-arrowdown-mask
{
-webkit-mask-image: var(--xcss-svg-arrowdown);
mask-image: var(--xcss-svg-arrowdown);
}
.xcss-svg-arrowup-mask
{
-webkit-mask-image: var(--xcss-svg-arrowup);
mask-image: var(--xcss-svg-arrowup);
}
.xcss-svg-arrowleft-mask
{
-webkit-mask-image: var(--xcss-svg-arrowleft);
mask-image: var(--xcss-svg-arrowleft);
}