From 4deb6efa5d10fa24d6138c47fad7911b9475f192 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Fri, 15 Jan 2021 01:13:57 +0700 Subject: [PATCH] IMPR: Select2 is optional now --- dist/records.json | 152 ---------- src/js/_components/_ui.form.basics.js | 26 -- src/js/_components/_ui.form.select2.js | 97 +++++++ src/js/app.js | 8 +- src/scss/_components/_ui.main.scss | 386 +++++++++++++------------ 5 files changed, 296 insertions(+), 373 deletions(-) create mode 100644 src/js/_components/_ui.form.select2.js diff --git a/dist/records.json b/dist/records.json index 8677058..79245f2 100644 --- a/dist/records.json +++ b/dist/records.json @@ -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, diff --git a/src/js/_components/_ui.form.basics.js b/src/js/_components/_ui.form.basics.js index b88ba4f..9fa54f0 100755 --- a/src/js/_components/_ui.form.basics.js +++ b/src/js/_components/_ui.form.basics.js @@ -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`); diff --git a/src/js/_components/_ui.form.select2.js b/src/js/_components/_ui.form.select2.js new file mode 100644 index 0000000..7817917 --- /dev/null +++ b/src/js/_components/_ui.form.select2.js @@ -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; diff --git a/src/js/app.js b/src/js/app.js index 97a0609..a1858b8 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -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)$/), ); diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss index a2b1703..44d5b9d 100755 --- a/src/scss/_components/_ui.main.scss +++ b/src/scss/_components/_ui.main.scss @@ -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; + } }