Commit 1fb1d2f1 authored by effulgentsia's avatar effulgentsia
Browse files

Issue #3085245 by bnjmnm, narendra.rajwar27, lauriii, olli: Un-inline SVGs in...

Issue #3085245 by bnjmnm, narendra.rajwar27, lauriii, olli: Un-inline SVGs in pcss.css files, add build tool to inline them when compiled
parent 73f11519
......@@ -349,6 +349,7 @@ createrole
createuser
crema
cript
crossout
crudui
crypted
cscript
......@@ -370,6 +371,8 @@ customly
customrequest
cves
cweagans
dasharray
dashoffset
data's
databasefilename
databasename
......@@ -859,6 +862,7 @@ kakec
kangarookitten
kerneltest
kernighan
keyframes
keyname
keypresses
keyvalue
......
......@@ -57,6 +57,7 @@
"postcss-custom-properties": "^9.0.2",
"postcss-header": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-url": "^8.0.0",
"prettier": "^1.14.0",
"stylelint": "^13.0.0",
"stylelint-checkstyle-formatter": "^0.1.1",
......
......@@ -7,6 +7,7 @@ const postcssCalc = require("postcss-calc");
const postcssImport = require('postcss-import');
const autoprefixer = require('autoprefixer');
const postcssHeader = require('postcss-header');
const postcssUrl = require('postcss-url');
module.exports = (filePath, callback) => {
// Transform the file.
......@@ -27,6 +28,11 @@ module.exports = (filePath, callback) => {
postcssHeader({
header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
}),
postcssUrl({
filter: '**/*.svg',
url: 'inline',
optimizeSvgEncode: true,
})
])
.process(css, { from: filePath })
.then(result => {
......
......@@ -96,7 +96,7 @@
padding-left: 1.75rem; /* LTR */
/* Ensure that long titles are not truncated. */
white-space: normal;
background: transparent url(../../../../misc/icons/ffffff/pencil.svg);
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 0 50%; /* LTR */
background-size: 1.25rem 1.25rem;
......
......@@ -79,7 +79,7 @@
*/
.js .form-autocomplete {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 100% 50%;
}
......@@ -89,16 +89,16 @@
}
.js[dir="rtl"] .form-autocomplete {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
background-position: 0 50%;
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
}
/* IE11 does not animate inline SVG. */
......
......@@ -27,7 +27,7 @@
*/
.js .form-autocomplete {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
background-image: url(../../images/icons/868686/magnifier.svg);
background-repeat: no-repeat;
background-position: 100% 50%;
}
......@@ -35,14 +35,14 @@
display: none;
}
.js[dir="rtl"] .form-autocomplete {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12,0.999781c4.539454,-0.1723607 8.188006,4.7870352 6.687355,9.068641 -1.176799,4.383903 -6.993833,6.416563 -10.637224,3.700244C7.724367,13.37766 7.484721,14.04405 7.204281,14.209562 5.957802,15.456041 4.711323,16.702521 3.464844,17.949 2.99349,17.477646 2.522135,17.006291 2.050781,16.534937 3.500651,15.085067 4.950521,13.635198 6.400391,12.185328 3.589655,8.7174615 5.251885,2.9379071 9.463496,1.4755074 10.269777,1.1615612 11.134941,0.99941873 12,0.999781Z m0,2C8.757533,2.8766662 6.151424,6.4190919 7.223318,9.477382c0.841211,3.131959 4.993992,4.58038 7.599894,2.649077C17.567776,10.397214 17.723417,6.0022025 15.10805,4.0831465 14.233251,3.38528 13.118898,2.996997 12,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
background-image: url(../../images/icons/868686/magnifier-rtl.svg);
background-position: 0 50%;
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
background-image: url(../../images/icons/004adc/spinner.svg);
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
background-image: url(../../images/icons/004adc/spinner-rtl.svg);
}
/* IE11 does not animate inline SVG. */
/* stylelint-disable-next-line selector-type-no-unknown */
......
......@@ -80,11 +80,11 @@
.breadcrumb__item + .breadcrumb__item::before {
padding: 0 0.75rem;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z' fill='%23545560'/%3e%3c/svg%3e");
}
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3e%3cpath d='M3.793.647l.707.707L1.854 4 4.5 6.647l-.707.707L.439 4z' fill='%23545560'/%3e%3c/svg%3e");
}
.breadcrumb__link:hover,
......
......@@ -28,11 +28,11 @@
.breadcrumb__item + .breadcrumb__item::before {
padding: 0 0.75rem;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' height='8' width='5'%3E%3Cpath d='M1.2070312,0.64696878 0.5,1.354 3.1464844,4.0004844 0.5,6.6469688 1.2070312,7.354 4.5605468,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
content: url(../../images/icons/545560/arrow-breadcrumb.svg);
}
[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M3.7929688,0.64696878 4.5,1.354 1.8535156,4.0004844 4.5,6.6469688 3.7929688,7.354 0.4394532,4.0004844Z' fill='%23545560'/%3E%3C/svg%3E");
content: url(../../images/icons/545560/arrow-breadcrumb-rtl.svg);
}
.breadcrumb__link:hover,
......
......@@ -198,7 +198,7 @@ rgba(0, 0, 0, 0.1);
transition: transform 0.12s ease-in 0s;
transform: rotate(0); /* LTR */
text-align: center;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
background-size: contain;
}
......@@ -325,7 +325,7 @@ rgba(0, 0, 0, 0.1);
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%230036B1'/%3e%3c/svg%3e");
}
.claro-details[open] > .claro-details__summary {
......@@ -637,7 +637,7 @@ rgba(0, 0, 0, 0.1);
margin-left: 0.3em;
content: "";
vertical-align: super;
background-image: url(../../images/core/ee0000/required.svg);
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23e00'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 0.4375rem 0.4375rem;
}
......@@ -142,7 +142,7 @@
transition: transform var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(0); /* LTR */
text-align: center;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%23545560'/%3E%3C/svg%3E") no-repeat 50% 50%;
background-image: url(../../images/icons/545560/chevron-right.svg);
background-size: contain;
}
[dir="rtl"] .claro-details__summary::before {
......@@ -263,7 +263,7 @@
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5.2109375,1.3144531 3.7890625,2.7226562 9.0917969,8.0761719 3.7890625,13.429688 5.2109375,14.837891 11.908203,8.0761719Z' fill='%230036B1'/%3E%3C/svg%3E");
background-image: url(../../images/icons/0036b1/chevron-right.svg);
}
.claro-details[open] > .claro-details__summary {
......
......@@ -147,7 +147,7 @@ transparent;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
}
.ui-dialog > .ui-dialog-content {
......
......@@ -81,7 +81,7 @@
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='1.5' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
}
.ui-dialog > .ui-dialog-content {
......
......@@ -190,7 +190,7 @@
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center;
background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23222330'/%3e%3c/svg%3e") no-repeat center;
background-size: contain;
}
......
......@@ -140,7 +140,7 @@
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center;
background: url(../../images/icons/222330/chevron-down.svg) no-repeat center;
background-size: contain;
}
......
......@@ -67,7 +67,7 @@
border: 1px solid #8e929c;
border-radius: 2px;
background: #fff no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
}
......@@ -97,7 +97,7 @@
color: transparent; /* IE */
border-color: #003cc5;
background-color: #003cc5;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active::-ms-check,
......@@ -109,7 +109,7 @@
.form-boolean--type-radio:checked::-ms-check {
color: transparent; /* IE */
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
}
......@@ -121,7 +121,7 @@
.form-boolean--type-radio:checked::-ms-check {
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
}
......@@ -132,7 +132,7 @@
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
border-color: #222330;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #222330;
}
......@@ -177,7 +177,7 @@
.form-boolean--type-radio.error:checked::-ms-check,
.form-boolean--type-radio.error:checked:active::-ms-check,
.form-boolean--type-radio.error:checked:hover::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3e%3c/svg%3e");
}
.form-boolean--type-radio.error:checked:focus::-ms-check {
......@@ -203,11 +203,11 @@
.form-boolean--type-checkbox[disabled]:checked::-ms-check {
color: transparent; /* IE */
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
}
.form-boolean--type-radio[disabled]:checked::-ms-check,
.form-boolean--type-radio[disabled].error:checked::-ms-check {
color: transparent; /* IE */
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
}
......@@ -15,7 +15,7 @@
border: 1px solid var(--input-border-color);
border-radius: 2px;
background: var(--input-bg-color) no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
background-image: url(../../images/icons/ffffff/checkmark.svg);
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
}
......@@ -40,7 +40,7 @@
color: transparent; /* IE */
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
background-image: url(../../images/icons/ffffff/checkmark-sm.svg);
}
.form-boolean--type-checkbox:checked:active::-ms-check,
.form-boolean--type-checkbox:checked:hover::-ms-check {
......@@ -50,7 +50,7 @@
.form-boolean--type-radio:checked::-ms-check {
color: transparent; /* IE */
border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url(../../images/icons/004adc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-checkbox:checked:active::-ms-check,
......@@ -60,7 +60,7 @@
}
.form-boolean--type-radio:checked::-ms-check {
border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url(../../images/icons/004adc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus::-ms-check {
......@@ -69,7 +69,7 @@
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
border-color: var(--input-fg-color);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
background-image: url(../../images/icons/222330/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active::-ms-check,
......@@ -107,7 +107,7 @@
.form-boolean--type-radio.error:checked::-ms-check,
.form-boolean--type-radio.error:checked:active::-ms-check,
.form-boolean--type-radio.error:checked:hover::-ms-check {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
background-image: url(../../images/icons/d72222/circle.svg);
}
.form-boolean--type-radio.error:checked:focus::-ms-check {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
......@@ -130,10 +130,10 @@
}
.form-boolean--type-checkbox[disabled]:checked::-ms-check {
color: transparent; /* IE */
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url(../../images/icons/82828c/checkmark.svg);
}
.form-boolean--type-radio[disabled]:checked::-ms-check,
.form-boolean--type-radio[disabled].error:checked::-ms-check {
color: transparent; /* IE */
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url(../../images/icons/82828c/checkmark.svg);
}
......@@ -129,7 +129,7 @@
border: 1px solid #8e929c;
border-radius: 2px;
background: #fff no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
-webkit-appearance: none;
......@@ -157,7 +157,7 @@
.form-boolean--type-checkbox:checked {
border-color: #003cc5;
background-color: #003cc5;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active,
......@@ -168,7 +168,7 @@
.form-boolean--type-radio:checked {
border-color: #003cc5;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
}
......@@ -179,7 +179,7 @@
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: #222330;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #222330;
}
......@@ -224,7 +224,7 @@
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3e%3c/svg%3e");
}
.form-boolean--type-radio.error:checked:focus {
......@@ -249,10 +249,10 @@
}
.form-boolean--type-checkbox[disabled]:checked {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3e%3c/svg%3e");
}
......@@ -69,7 +69,7 @@
border: 1px solid var(--input-border-color);
border-radius: 2px;
background: var(--input-bg-color) no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
background-image: url(../../images/icons/ffffff/checkmark.svg);
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
appearance: none;
......@@ -91,7 +91,7 @@
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
background-image: url(../../images/icons/ffffff/checkmark-sm.svg);
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
......@@ -100,7 +100,7 @@
}
.form-boolean--type-radio:checked {
border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
background-image: url(../../images/icons/004adc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
......@@ -109,7 +109,7 @@
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: var(--input-fg-color);
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
background-image: url(../../images/icons/222330/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
......@@ -147,7 +147,7 @@
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
background-image: url(../../images/icons/d72222/circle.svg);
}
.form-boolean--type-radio.error:checked:focus {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
......@@ -169,9 +169,9 @@
box-shadow: none;
}
.form-boolean--type-checkbox[disabled]:checked {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url(../../images/icons/82828c/checkmark.svg);
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
background-image: url(../../images/icons/82828c/circle.svg);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment