IMPR: Select2 is optional now

This commit is contained in:
Tony Air 2021-01-15 01:13:57 +07:00
parent 88789fe5b1
commit 4deb6efa5d
5 changed files with 296 additions and 373 deletions

152
dist/records.json vendored
View File

@ -72,158 +72,6 @@
831
]
},
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox@2.7.1/node_modules/@a2nt/meta-lightbox/src/scss/app.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox@2.7.1/node_modules/@a2nt/meta-lightbox/src/scss/app.scss": 953
},
"usedIds": [
254,
953
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/_components/_ui.map.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/_components/_ui.map.scss": 140
},
"usedIds": [
140,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/app.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/app.scss": 200,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/select2@4.0.13/node_modules/select2/dist/css/select2.css": 282
},
"usedIds": [
200,
254,
282
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/cms.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/cms.scss": 209
},
"usedIds": [
209,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/editor.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/editor.scss": 98
},
"usedIds": [
98,
254
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/order.scss": [
{
"chunks": {
"byName": {
"mini-css-extract-plugin": 323
},
"bySource": {
"0 mini-css-extract-plugin": 323
},
"usedIds": [
323
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./src/scss/types/order.scss": 558
},
"usedIds": [
254,
558
]
}
}
],
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/bootstrap@4.5.3_jquery@3.5.1+popper.js@1.16.1/node_modules/bootstrap/js/dist/alert.js": 6,

View File

@ -2,13 +2,6 @@
import $ from 'jquery';
//import 'bootstrap-select/dist/js/bootstrap-select';
//$.fn.selectpicker.Constructor.BootstrapVersion = '4';
import select2 from 'select2/dist/js/select2.js';
//import Inputmask from 'inputmask';
//import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle';
import Events from '../_events';
import SpinnerUI from './_ui.spinner';
import FormFieldUI from './_ui.form.fields';
@ -41,14 +34,6 @@ const FormBasics = (($) => {
new FormFieldUI(el);
});
const $selectFields = $el
.find('select:not([readonly])')
.not('.no-select2');
$selectFields.each((i, el) => {
$(el).select2();
});
$fields.each((e, el) => {
const $el = $(el);
@ -118,17 +103,6 @@ const FormBasics = (($) => {
const ui = this;
const $el = $(ui._el);
const $selectFields = $el
.find('select:not([readonly])')
.not('.no-select2');
$selectFields.each((i, el) => {
const $el = $(el);
if ($el.hasClass('select2-hidden-accessible')) {
$el.select2('destroy');
}
});
$.removeData(ui._el, DATA_KEY);
ui._el = null;
$el.removeClass(`${NAME}-active`);

View File

@ -0,0 +1,97 @@
'use strict';
import $ from 'jquery';
import select2 from 'select2/dist/js/select2.js';
import Events from '../_events';
const FormSelect2 = (($) => {
// Constants
const NAME = 'jsFormSelect2';
const DATA_KEY = NAME;
const $Html = $('html, body');
const W = window;
const D = document;
class FormSelect2 {
constructor(el) {
const ui = this;
const $el = $(el);
ui._el = el;
ui.dispose();
console.log(`${NAME}: init`);
$el.data(DATA_KEY, this);
const $fields = $el.find(Events.FORM_FIELDS);
const $selectFields = $el
.find('select:not([readonly])')
.not('.no-select2');
$selectFields.each((i, el) => {
$(el).select2();
});
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
const ui = this;
const $el = $(ui._el);
const $selectFields = $el
.find('select:not([readonly])')
.not('.no-select2');
$selectFields.each((i, el) => {
const $el = $(el);
if ($el.hasClass('select2-hidden-accessible')) {
$el.select2('destroy');
}
});
$.removeData(ui._el, DATA_KEY);
ui._el = null;
$el.removeClass(`${NAME}-active`);
}
static _jQueryInterface() {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
if (!data) {
data = new FormSelect2(this);
$el.data(DATA_KEY, data);
}
});
}
}
// jQuery interface
$.fn[NAME] = FormSelect2._jQueryInterface;
$.fn[NAME].Constructor = FormSelect2;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormSelect2._jQueryInterface;
};
const init = () => {
$('form').jsFormSelect2();
};
// auto-apply
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
init();
});
return FormSelect2;
})($);
export default FormSelect2;

View File

@ -77,6 +77,8 @@ import '@a2nt/meta-lightbox/src/js/app';
// Map UI
//import MapApi from './_components/_ui.map.api';
//import FormSelect2 from './_components/_ui.form.select2';
import './_main';
import './_layout';
@ -84,12 +86,12 @@ import './_layout';
import './_components/drivers/_google.track.external.links';
function importAll(r) {
return r.keys().map(r);
return r.keys().map(r);
}
const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
);
const fontAwesome = importAll(
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/),
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/),
);

View File

@ -6,10 +6,10 @@
@import '../_animations';
.loading {
animation: fade 0.8s linear infinite;
animation: fade 0.8s linear infinite;
}
.pulse {
animation: pulse 0.8s linear infinite;
animation: pulse 0.8s linear infinite;
}
// don't let images be wider than the parent layer
@ -18,35 +18,35 @@ a,
span,
button,
i {
background-repeat: no-repeat;
background-size: contain;
background-repeat: no-repeat;
background-size: contain;
}
iframe,
img {
max-width: 100%;
max-width: 100%;
}
table,
p {
&:first-child {
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.a {
cursor: pointer;
color: $link-color;
text-decoration: $link-decoration;
&:hover,
&:focus {
text-decoration: $link-hover-decoration;
color: $link-hover-color;
}
cursor: pointer;
color: $link-color;
text-decoration: $link-decoration;
&:hover,
&:focus {
text-decoration: $link-hover-decoration;
color: $link-hover-color;
}
}
.a,
@ -54,63 +54,63 @@ a,
[data-toggle],
button,
.btn {
&:hover,
&.active,
&:focus,
&[aria-expanded='true'] {
opacity: 0.8;
&:hover,
&.active,
&:focus,
&[aria-expanded='true'] {
opacity: 0.8;
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(-180deg);
}
}
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(-180deg);
}
}
&.disabled {
opacity: 0.5;
cursor: default;
&.disabled {
opacity: 0.5;
cursor: default;
&:hover,
&.active,
&:focus,
&[aria-expanded='true'] {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
}
&:hover,
&.active,
&:focus,
&[aria-expanded='true'] {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
}
}
// exclude bootstrap-table
[data-toggle='table'] {
&:hover,
&.active,
&:focus {
opacity: 1;
}
&:hover,
&.active,
&:focus {
opacity: 1;
}
}
[data-toggle='collapse'] {
&[aria-expanded='true'] {
.accordion-icon {
&:before {
content: '\f068';
}
}
}
&[aria-expanded='true'] {
.accordion-icon {
&:before {
content: '\f068';
}
}
}
}
// transactions
@ -133,239 +133,241 @@ textarea,
.message,
[data-toggle],
[data-toggle] * {
transition: all 0.4s ease;
transition: all 0.4s ease;
}
.navbar-toggler {
transition: transform ease 0.4s;
transition: transform ease 0.4s;
}
.btn-toolbar {
margin-top: $field-gutter-height;
margin-top: $field-gutter-height;
}
/*
* Extra class definition at _ui.form.basics.scss
*/
.field {
position: relative;
display: flex;
flex-wrap: wrap;
margin: $field-gutter-height 0;
position: relative;
display: flex;
flex-wrap: wrap;
margin: $field-gutter-height 0;
}
// element col paddings
.col-block {
padding-top: $col-block-gutter-height;
padding-bottom: $col-block-gutter-height;
padding-top: $col-block-gutter-height;
padding-bottom: $col-block-gutter-height;
}
// rewrite btn opacity on hover
.btn {
&:hover,
&.active,
&:focus {
opacity: 1;
}
&:hover,
&.active,
&:focus {
opacity: 1;
}
}
// SS-messages
.alert,
.alert-info,
.alert-danger {
display: block;
display: block;
}
.alert + .alert {
border-top: 0;
border-top: 0;
}
.alert {
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@media (min-width: map-get($grid-breakpoints, 'sm')) {
flex-direction: row;
}
}
.typography {
flex: 1 1;
}
.btn-close {
position: absolute;
top: 0;
right: 0;
@media (min-width: map-get($grid-breakpoints, 'sm')) {
flex-direction: row;
}
}
.typography {
flex: 1 1;
}
.btn-close {
position: absolute;
top: 0;
right: 0;
@media (min-width: map-get($grid-breakpoints, 'sm')) {
position: static;
margin-left: 1rem;
}
}
@media (min-width: map-get($grid-breakpoints, 'sm')) {
position: static;
margin-left: 1rem;
}
}
}
.message {
@extend .alert;
@extend .alert;
@extend .alert-info;
@extend .alert-info;
display: block;
margin: 0.5rem 0;
display: block;
margin: 0.5rem 0;
}
.message.validation,
.message.required,
.message.error {
@extend .alert;
@extend .alert;
@extend .alert-danger;
@extend .alert-danger;
}
.message.required,
.message.error {
@extend .alert;
@extend .alert;
@extend .alert-danger;
@extend .alert-danger;
}
.list-group-item.active {
a,
.a {
color: $list-group-active-color;
}
a,
.a {
color: $list-group-active-color;
}
}
// dropdown icon
.navbar-toggler {
&[aria-expanded='true'] {
transform: rotate(90deg);
}
&[aria-expanded='true'] {
transform: rotate(90deg);
}
}
.dropdown-toggle {
position: relative;
padding-right: 1.5em;
position: relative;
padding-right: 1.5em;
&:after {
position: absolute;
right: 0.5em;
bottom: 1em;
}
&:after {
position: absolute;
right: 0.5em;
bottom: 1em;
}
}
.navbar-nav .dropdown-toggle.nav-link {
padding-right: 1.5em;
padding-right: 1.5em;
}
.dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after {
transform: rotate(-90deg);
transform: rotate(-90deg);
}
@keyframes expand {
from {
max-height: 0;
}
to {
max-height: 500rem;
max-height: 200vh;
}
from {
max-height: 0;
overflow: hidden;
}
to {
max-height: 500rem;
max-height: 200vh;
overflow: auto;
}
}
.dropdown-menu {
padding: 0;
border-radius: 0;
will-change: max-height, display;
overflow: hidden;
transition: none;
padding: 0;
border-radius: 0;
will-change: max-height, display;
overflow: hidden;
transition: none;
&.show {
animation: expand 2s;
animation-fill-mode: both;
overflow: visible;
}
.dropdown-list {
@extend .list-unstyled;
}
&.show {
animation: expand 2s;
animation-fill-mode: both;
overflow: visible;
}
.dropdown-list {
@extend .list-unstyled;
}
.dropdown-menu {
top: 0;
left: 100%;
}
.dropdown-menu {
top: 0;
left: 100%;
}
}
.row,
.row-xs {
> [class^='col-'] > .card {
height: 100%;
}
> [class^='col-'] > .card {
height: 100%;
}
}
.row-xs {
margin-right: -($grid-gutter-xs-width / 2);
margin-left: -($grid-gutter-xs-width / 2);
margin-right: -($grid-gutter-xs-width / 2);
margin-left: -($grid-gutter-xs-width / 2);
[class^='col-'] {
padding-left: $grid-gutter-xs-width / 2;
padding-right: $grid-gutter-xs-width / 2;
}
[class^='col-'] {
padding-left: $grid-gutter-xs-width / 2;
padding-right: $grid-gutter-xs-width / 2;
}
}
#ForgotPassword {
margin: 1rem 0;
width: 100%;
margin: 1rem 0;
width: 100%;
}
#BetterNavigator {
display: none;
@media (min-width: map-get($grid-breakpoints,'md')) {
display: block;
}
display: none;
@media (min-width: map-get($grid-breakpoints,'md')) {
display: block;
}
}
#SiteWideOffline {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
}
.alert-offline {
display: none;
display: none;
}
body.is-offline {
.alert-offline {
display: block;
}
.alert-offline {
display: block;
}
}
[aria-expanded='true'] {
.fa-bars {
&:before {
content: '\f00d';
}
}
.fa-bars {
&:before {
content: '\f00d';
}
}
}
.jsSidebarUI {
position: relative;
min-height: 100%;
position: relative;
min-height: 100%;
}
.jsSidebarUI__inner {
position: relative;
will-change: position, top;
position: relative;
will-change: position, top;
}
#BetterNavigator {
a,
button,
div,
i,
span {
background-size: auto;
}
a,
button,
div,
i,
span {
background-size: auto;
}
}