diff --git a/gulpfile.js b/gulpfile.js index 482e3bc..9337a0b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -59,7 +59,7 @@ function style() { .src(paths.styles.src) // Add sourcemaps .pipe(sourcemaps.init()) - // Resolve imports and calculated colors + // Resolve imports, calculated colors and inlined SVG files .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()])) // * Process legacy builds * @@ -95,8 +95,8 @@ function style() { .pipe(filter('**/*.css')) // Calculate size before minifying .pipe(bytediff.start()) - // Minify using cssnano - .pipe(postcss([cssnano()])) + // Minify using cssnano, use extra-low precision while minifying inline SVGs + .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) // Write the amount saved by minifying .pipe(bytediff.stop(data => formatByteMessage('cssnano', data))) // Rename the files have the .min suffix diff --git a/src/assets/select-arrow.svg b/src/assets/select-arrow.svg new file mode 100755 index 0000000..43c6b41 --- /dev/null +++ b/src/assets/select-arrow.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/parts/_forms.css b/src/parts/_forms.css index 8f5fed2..66d4a69 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -44,7 +44,7 @@ textarea { } select { - background: var(--background) var(--down-arrow-path) calc(100% - 12px) 50% / 12px no-repeat; + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; padding-right: 35px; } diff --git a/src/variables-dark.css b/src/variables-dark.css index 6730da3..6c46d4e 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -22,5 +22,5 @@ --form-placeholder: #a9a9a9; --form-text: #ffffff; - --down-arrow-path: svg-load("../arrow-light.svg"); + --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef); } diff --git a/src/variables-light.css b/src/variables-light.css index 3d04add..3d8ed1d 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -22,5 +22,5 @@ --form-placeholder: #949494; --form-text: #000000; - --down-arrow-path: svg-load("../arrow-dark.svg"); + --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); }