IMPR: reorganize files
This commit is contained in:
parent
6f8236ec0d
commit
642b4b7f4c
|
|
@ -0,0 +1,79 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.lazy-images';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
const API_STATIC = document.querySelector('meta[name="api_static_domain"]');
|
||||
const API_STATIC_URL = API_STATIC ?
|
||||
API_STATIC.getAttribute('content') :
|
||||
`${window.location.protocol}//${window.location.host}`;
|
||||
|
||||
console.log(`${NAME} [static url]: ${API_STATIC_URL}`);
|
||||
|
||||
const loadLazyImages = () => {
|
||||
console.log(`${NAME}: Load lazy images`);
|
||||
|
||||
D.querySelectorAll(`[data-lazy-src]`).forEach((el) => {
|
||||
el.classList.remove('empty');
|
||||
el.classList.add('loading');
|
||||
el.classList.remove('loading__network-error');
|
||||
|
||||
const attr = el.getAttribute('data-lazy-src');
|
||||
const imageUrl = attr.startsWith('http') ? attr : API_STATIC_URL + attr;
|
||||
|
||||
// offline response will be served by caching service worker
|
||||
axios
|
||||
.get(imageUrl, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
.then((response) => {
|
||||
const reader = new FileReader(); // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
|
||||
reader.readAsDataURL(response.data);
|
||||
reader.onload = () => {
|
||||
const imageDataUrl = reader.result;
|
||||
el.setAttribute('src', imageDataUrl);
|
||||
el.classList.remove('loading');
|
||||
el.classList.add('loading__success');
|
||||
};
|
||||
})
|
||||
.catch((e) => {
|
||||
//el.setAttribute('src', imageUrl);
|
||||
|
||||
if (e.response) {
|
||||
switch (e.response.status) {
|
||||
case 404:
|
||||
msg = 'Not Found.';
|
||||
break;
|
||||
case 500:
|
||||
msg = 'Server issue, please try again latter.';
|
||||
break;
|
||||
default:
|
||||
msg = 'Something went wrong.';
|
||||
break;
|
||||
}
|
||||
|
||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
||||
} else if (e.request) {
|
||||
msg = 'No response received';
|
||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
||||
} else {
|
||||
console.error(`${NAME} [${imageUrl}]: ${e.message}`);
|
||||
}
|
||||
|
||||
el.classList.remove('loading');
|
||||
el.classList.add('loading__network-error');
|
||||
el.classList.add('empty');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages);
|
||||
W.addEventListener(`${Events.AJAX}`, loadLazyImages);
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
import Page from './models/_page.jsx';
|
||||
|
||||
import {
|
||||
getParents,
|
||||
} from '../_main/_funcs';
|
||||
|
||||
import {
|
||||
Collapse,
|
||||
} from 'bootstrap';
|
||||
|
||||
import SpinnerUI from '../_main/_loading-spinner';
|
||||
|
||||
const MainUILinks = ((W) => {
|
||||
const NAME = '_main.links';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
class MainUILinks {
|
||||
window
|
||||
static init() {
|
||||
const ui = this;
|
||||
ui.GraphPage = null;
|
||||
|
||||
console.log(`${NAME}: init`);
|
||||
|
||||
ui.loaded();
|
||||
|
||||
// history state switch
|
||||
W.addEventListener('popstate', (e) => {
|
||||
ui.popState(e);
|
||||
});
|
||||
}
|
||||
|
||||
static loaded() {
|
||||
const ui = this;
|
||||
|
||||
D.querySelectorAll('.graphql-page').forEach((el, i) => {
|
||||
const el_id = el.getAttribute('href');
|
||||
el.setAttribute(`data-${ui.name}-id`, el_id);
|
||||
|
||||
el.addEventListener('click', ui.loadClick);
|
||||
});
|
||||
}
|
||||
|
||||
static setActiveLinks(link) {
|
||||
const ui = this;
|
||||
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach(
|
||||
(el) => {
|
||||
el.classList.add('active');
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
static reset() {
|
||||
// reset focus
|
||||
D.activeElement.blur();
|
||||
|
||||
// remove active and loading classes
|
||||
D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
|
||||
el2.classList.remove('active', 'loading');
|
||||
});
|
||||
}
|
||||
|
||||
static popState(e) {
|
||||
const ui = this;
|
||||
|
||||
SpinnerUI.show();
|
||||
|
||||
if (e.state && e.state.page) {
|
||||
console.log(`${NAME}: [popstate] load`);
|
||||
const state = JSON.parse(e.state.page);
|
||||
|
||||
state.current = null;
|
||||
state.popstate = true;
|
||||
|
||||
ui.reset();
|
||||
ui.setActiveLinks(e.state.link);
|
||||
|
||||
if (!ui.GraphPage) {
|
||||
console.log(
|
||||
`${NAME}: [popstate] GraphPage is missing. Have to render it first`,
|
||||
);
|
||||
|
||||
ui.GraphPage = ReactDOM.render(
|
||||
<Page />,
|
||||
document.getElementById('MainContent'),
|
||||
);
|
||||
}
|
||||
|
||||
ui.GraphPage.setState(state);
|
||||
SpinnerUI.hide();
|
||||
|
||||
window.dispatchEvent(new Event(Events.AJAX));
|
||||
} else if (e.state && e.state.landing) {
|
||||
console.log(`${NAME}: [popstate] go to landing`);
|
||||
W.location.href = e.state.landing;
|
||||
} else {
|
||||
console.warn(`${NAME}: [popstate] state is missing`);
|
||||
console.log(e);
|
||||
SpinnerUI.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// link specific event {this} = current event, not MainUILinks
|
||||
static loadClick(e) {
|
||||
console.groupCollapsed(`${NAME}: load on click`);
|
||||
e.preventDefault();
|
||||
|
||||
const ui = MainUILinks;
|
||||
const el = e.currentTarget;
|
||||
|
||||
SpinnerUI.show();
|
||||
|
||||
ui.reset();
|
||||
el.classList.add('loading');
|
||||
el.classList.remove('response-404', 'response-500', 'response-523');
|
||||
BODY.classList.add('ajax-loading');
|
||||
|
||||
// hide parent mobile nav
|
||||
const navs = getParents(el, '.collapse');
|
||||
if (navs.length) {
|
||||
navs.forEach((nav) => {
|
||||
const collapseInst = Collapse.getInstance(nav);
|
||||
if (collapseInst) {
|
||||
collapseInst.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// hide parent dropdown
|
||||
/*const dropdowns = getParents(el, '.dropdown-menu');
|
||||
if (dropdowns.length) {
|
||||
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
|
||||
DropdownInst.hide();
|
||||
}*/
|
||||
|
||||
if (!ui.GraphPage) {
|
||||
ui.GraphPage = ReactDOM.render(
|
||||
<Page />,
|
||||
document.getElementById('MainContent'),
|
||||
);
|
||||
}
|
||||
|
||||
const link = el.getAttribute('href') || el.getAttribute('data-href');
|
||||
|
||||
|
||||
ui.GraphPage.state.current = el;
|
||||
|
||||
ui.GraphPage.load(link)
|
||||
.then((response) => {
|
||||
BODY.classList.remove('ajax-loading');
|
||||
el.classList.remove('loading');
|
||||
el.classList.add('active');
|
||||
|
||||
D.loading_apollo_link = null;
|
||||
|
||||
if (ui.GraphPage.state.Link) {
|
||||
window.history.pushState({
|
||||
page: JSON.stringify(ui.GraphPage.state),
|
||||
link: el.getAttribute(`data-${ui.name}-id`),
|
||||
},
|
||||
ui.GraphPage.state.Title,
|
||||
ui.GraphPage.state.Link,
|
||||
);
|
||||
|
||||
ui.setActiveLinks(ui.GraphPage.state.Link)
|
||||
}
|
||||
|
||||
SpinnerUI.hide();
|
||||
|
||||
window.dispatchEvent(new Event(Events.AJAX));
|
||||
console.groupEnd(`${NAME}: load on click`);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(`${NAME}: loading error`);
|
||||
console.log(e);
|
||||
|
||||
/*BODY.classList.remove('ajax-loading');
|
||||
el.classList.remove('loading');*/
|
||||
el.classList.add('error', `response-${e.status}`);
|
||||
/*switch (e.status) {
|
||||
case 500:
|
||||
break;
|
||||
case 404:
|
||||
el.classList.add('not-found');
|
||||
break;
|
||||
case 523:
|
||||
el.classList.add('unreachable');
|
||||
break;
|
||||
}*/
|
||||
|
||||
//SpinnerUI.hide();
|
||||
|
||||
//window.dispatchEvent(new Event(Events.AJAX));
|
||||
console.groupEnd(`${NAME}: load on click`);
|
||||
|
||||
console.log(`${NAME}: reloading page ${link}`);
|
||||
|
||||
// fallback loading
|
||||
W.location.href = link;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
W.addEventListener(`${Events.LOADED}`, () => {
|
||||
MainUILinks.init();
|
||||
});
|
||||
|
||||
W.addEventListener(`${Events.AJAX}`, () => {
|
||||
MainUILinks.loaded();
|
||||
});
|
||||
|
||||
// fallback
|
||||
/*W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
|
||||
console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
|
||||
//W.dispatchEvent(new Event(Events.OFFLINE));
|
||||
if (D.loading_apollo_link) {
|
||||
W.location.href = D.loading_apollo_link;
|
||||
}
|
||||
});*/
|
||||
})(window);
|
||||
|
||||
export default MainUILinks;
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
// ping online/offline state switch and detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.online';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
let pingInterval;
|
||||
const PING_META = D.querySelector('meta[name="ping"]');
|
||||
|
||||
let update_online_status_lock = false;
|
||||
const UPDATE_ONLINE_STATUS = (online) => {
|
||||
if (update_online_status_lock) {
|
||||
return;
|
||||
}
|
||||
|
||||
update_online_status_lock = true;
|
||||
if (online) {
|
||||
if (BODY.classList.contains('is-offline')) {
|
||||
console.log(`${NAME}: back Online`);
|
||||
W.dispatchEvent(new Event(Events.BACKONLINE));
|
||||
} else {
|
||||
console.log(`${NAME}: Online`);
|
||||
W.dispatchEvent(new Event(Events.ONLINE));
|
||||
}
|
||||
|
||||
BODY.classList.add('is-online');
|
||||
BODY.classList.remove('is-offline');
|
||||
|
||||
if (PING_META && !pingInterval) {
|
||||
console.log(`${NAME}: SESSION_PING is active`);
|
||||
pingInterval = setInterval(SESSION_PING, 300000); // 5 min in ms
|
||||
}
|
||||
} else {
|
||||
console.log(`${NAME}: Offline`);
|
||||
|
||||
BODY.classList.add('is-offline');
|
||||
BODY.classList.remove('is-online');
|
||||
|
||||
clearInterval(pingInterval);
|
||||
pingInterval = null;
|
||||
|
||||
W.dispatchEvent(new Event(Events.OFFLINE));
|
||||
}
|
||||
|
||||
update_online_status_lock = false;
|
||||
};
|
||||
|
||||
// session ping
|
||||
let session_ping_lock = false;
|
||||
const SESSION_PING = () => {
|
||||
if (session_ping_lock || BODY.classList.contains('is-offline')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const PING_URL = PING_META.getAttribute('content');
|
||||
|
||||
console.log(`${NAME}: session ping`);
|
||||
session_ping_lock = true;
|
||||
|
||||
axios
|
||||
.post(PING_URL, {})
|
||||
.then((resp) => {
|
||||
session_ping_lock = false;
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
console.warn(`${NAME}: SESSION_PING failed`);
|
||||
|
||||
session_ping_lock = false;
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
});
|
||||
};
|
||||
|
||||
// current browser online state
|
||||
|
||||
|
||||
const navigatorStateUpdate = () => {
|
||||
if (typeof navigator.onLine !== 'undefined') {
|
||||
if (!navigator.onLine) {
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
} else {
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
W.addEventListener(`${Events.OFFLINE}`, () => {
|
||||
UPDATE_ONLINE_STATUS(false);
|
||||
});
|
||||
|
||||
W.addEventListener(`${Events.ONLINE}`, () => {
|
||||
UPDATE_ONLINE_STATUS(true);
|
||||
});
|
||||
|
||||
W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate);
|
||||
W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate);
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.css-screen-size';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
const detectCSSScreenSize = () => {
|
||||
const el = D.createElement('div');
|
||||
el.className = 'env-test';
|
||||
BODY.appendChild(el);
|
||||
|
||||
const envs = [...Consts.ENVS].reverse();
|
||||
let curEnv = envs.shift();
|
||||
BODY.classList.remove(...envs);
|
||||
|
||||
for (let i = 0; i < envs.length; ++i) {
|
||||
const env = envs[i];
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (W.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
BODY.classList.add(`${curEnv}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let landscape = true;
|
||||
if (W.innerWidth > W.innerHeight) {
|
||||
BODY.classList.add('landscape');
|
||||
BODY.classList.remove('portrait');
|
||||
} else {
|
||||
landscape = false;
|
||||
|
||||
BODY.classList.add('portrait');
|
||||
BODY.classList.remove('landscape');
|
||||
}
|
||||
|
||||
console.log(
|
||||
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`,
|
||||
);
|
||||
|
||||
BODY.removeChild(el);
|
||||
|
||||
return curEnv;
|
||||
};
|
||||
|
||||
W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize);
|
||||
|
||||
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize);
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
const funcs = {};
|
||||
|
||||
/*!
|
||||
* Get all of an element's parent elements up the DOM tree
|
||||
* (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
|
||||
* @param {Node} elem The element
|
||||
* @param {String} selector Selector to match against [optional]
|
||||
* @return {Array} The parent elements
|
||||
*/
|
||||
|
||||
funcs.getParents = (elem, selector) => {
|
||||
// Setup parents array
|
||||
const parents = [];
|
||||
let el = elem;
|
||||
// Get matching parent elements
|
||||
while (el && el !== document) {
|
||||
// If using a selector, add matching parents to array
|
||||
// Otherwise, add all parents
|
||||
if (selector) {
|
||||
if (el.matches(selector)) {
|
||||
parents.push(el);
|
||||
}
|
||||
} else {
|
||||
parents.push(el);
|
||||
}
|
||||
|
||||
// Jump to the next parent node
|
||||
el = el.parentNode;
|
||||
}
|
||||
|
||||
return parents;
|
||||
};
|
||||
|
||||
module.exports = funcs;
|
||||
module.exports.default = funcs;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
import './_visibility';
|
||||
import './_touch';
|
||||
import './_css-screen-size';
|
||||
import './_main';
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
|
||||
const NAME = '_main.loading-spinner';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
const SPINNER = D.getElementById('PageLoading');
|
||||
|
||||
class SpinnerUI {
|
||||
static show() {
|
||||
console.log(`${NAME}: show`);
|
||||
SPINNER.classList.remove('d-none');
|
||||
}
|
||||
static hide() {
|
||||
console.log(`${NAME}: hide`);
|
||||
SPINNER.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
export default SpinnerUI;
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
import SpinnerUI from './_loading-spinner';
|
||||
|
||||
const MainUI = ((W) => {
|
||||
const NAME = '_main';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
console.info(
|
||||
`%cUI Kit ${UINAME} ${UIVERSION}`,
|
||||
'color:yellow;font-size:14px',
|
||||
);
|
||||
console.info(
|
||||
`%c${UIMetaNAME} ${UIMetaVersion}`,
|
||||
'color:yellow;font-size:12px',
|
||||
);
|
||||
console.info(
|
||||
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
|
||||
'color:yellow;font-size:10px',
|
||||
);
|
||||
|
||||
console.info(`%cENV: ${process.env.NODE_ENV}`, 'color:green;font-size:10px');
|
||||
console.groupCollapsed('Events');
|
||||
Object.keys(Events).forEach((k) => {
|
||||
console.info(`${k}: ${Events[k]}`);
|
||||
});
|
||||
console.groupEnd('Events');
|
||||
|
||||
console.groupCollapsed('Consts');
|
||||
Object.keys(Consts).forEach((k) => {
|
||||
console.info(`${k}: ${Consts[k]}`);
|
||||
});
|
||||
console.groupEnd('Events');
|
||||
|
||||
console.groupCollapsed('Init');
|
||||
console.time('init');
|
||||
|
||||
class MainUI {
|
||||
// first time the website initialization
|
||||
static init() {
|
||||
const ui = this;
|
||||
|
||||
// store landing page state
|
||||
W.history.replaceState(
|
||||
{
|
||||
landing: W.location.href,
|
||||
},
|
||||
D.title,
|
||||
W.location.href,
|
||||
);
|
||||
//
|
||||
|
||||
ui.loaded();
|
||||
}
|
||||
|
||||
// init AJAX components
|
||||
static loaded() {
|
||||
const ui = this;
|
||||
console.log(`${NAME}: loaded`);
|
||||
}
|
||||
}
|
||||
|
||||
W.addEventListener(`${Events.LOADED}`, () => {
|
||||
MainUI.init();
|
||||
|
||||
BODY.classList.add('loaded');
|
||||
SpinnerUI.hide();
|
||||
|
||||
console.groupEnd('init');
|
||||
console.timeEnd('init');
|
||||
|
||||
W.dispatchEvent(new Event(Events.LODEDANDREADY));
|
||||
});
|
||||
|
||||
W.addEventListener(`${Events.AJAX}`, () => {
|
||||
MainUI.loaded();
|
||||
});
|
||||
|
||||
W.MainUI = MainUI;
|
||||
|
||||
return MainUI;
|
||||
})(window);
|
||||
|
||||
export default MainUI;
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
// touch/mouse detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.touch';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
let prev_touch_event_name;
|
||||
let touch_timeout;
|
||||
const SET_TOUCH_SCREEN = (bool, event_name) => {
|
||||
if (touch_timeout || event_name === prev_touch_event_name) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (bool) {
|
||||
console.log(`${NAME}: Touch screen enabled`);
|
||||
|
||||
BODY.classList.add('is-touch');
|
||||
BODY.classList.remove('is-mouse');
|
||||
|
||||
W.dispatchEvent(new Event(Events.TOUCHENABLE));
|
||||
} else {
|
||||
console.log(`${NAME}: Touch screen disabled`);
|
||||
|
||||
BODY.classList.add('is-mouse');
|
||||
BODY.classList.remove('is-touch');
|
||||
|
||||
W.dispatchEvent(new Event(Events.TOUCHDISABLED));
|
||||
}
|
||||
|
||||
prev_touch_event_name = event_name;
|
||||
// prevent firing touch and mouse events together
|
||||
if (!touch_timeout) {
|
||||
touch_timeout = setTimeout(() => {
|
||||
clearTimeout(touch_timeout);
|
||||
touch_timeout = null;
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
SET_TOUCH_SCREEN(
|
||||
'ontouchstart' in W ||
|
||||
navigator.MaxTouchPoints > 0 ||
|
||||
navigator.msMaxTouchPoints > 0 ||
|
||||
W.matchMedia('(hover: none)').matches,
|
||||
'init',
|
||||
);
|
||||
|
||||
D.addEventListener('touchend', (e) => {
|
||||
let touch = false;
|
||||
if (e.type !== 'click') {
|
||||
touch = true;
|
||||
}
|
||||
|
||||
SET_TOUCH_SCREEN(touch, 'click-touchend');
|
||||
});
|
||||
|
||||
// disable touch on mouse events
|
||||
D.addEventListener('click', (e) => {
|
||||
let touch = false;
|
||||
if (e.type !== 'click') {
|
||||
touch = true;
|
||||
}
|
||||
|
||||
SET_TOUCH_SCREEN(touch, 'click-touchend');
|
||||
});
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.visibility';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
// update visibility state
|
||||
// get browser window visibility preferences
|
||||
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
||||
const HiddenName = 'hidden';
|
||||
const VisibilityChangeEvent = 'visibilitychange';
|
||||
|
||||
D.addEventListener(VisibilityChangeEvent, () => {
|
||||
if (D.visibilityState === HiddenName) {
|
||||
console.log(`${NAME}: Tab: hidden`);
|
||||
|
||||
BODY.classList.add('is-hidden');
|
||||
BODY.classList.remove('is-focused');
|
||||
|
||||
W.dispatchEvent(new Event(Events.TABHIDDEN));
|
||||
} else {
|
||||
console.log(`${NAME}: Tab: focused`);
|
||||
|
||||
BODY.classList.add('is-focused');
|
||||
BODY.classList.remove('is-hidden');
|
||||
|
||||
W.dispatchEvent(new Event(Events.TABFOCUSED));
|
||||
}
|
||||
});
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import Events from '../_events';
|
||||
import Carousel from 'bootstrap/js/src/carousel';
|
||||
|
||||
const CarouselUI = ((window) => {
|
||||
const NAME = 'js-carousel';
|
||||
|
||||
const init = () => {
|
||||
console.log(`${NAME}: init`);
|
||||
|
||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||
const carousel = new Carousel(el);
|
||||
// create next/prev arrows
|
||||
if (el.dataset.bsArrows) {
|
||||
const next = document.createElement('button');
|
||||
next.classList.add('carousel-control-next');
|
||||
next.setAttribute('type', 'button');
|
||||
next.setAttribute('aria-label', 'Next Slide');
|
||||
next.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
next.setAttribute('data-bs-slide', 'next');
|
||||
next.addEventListener('click', (e) => {
|
||||
carousel.next();
|
||||
});
|
||||
next.innerHTML = '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
|
||||
el.appendChild(next);
|
||||
|
||||
const prev = document.createElement('button');
|
||||
prev.setAttribute('type', 'button');
|
||||
prev.setAttribute('aria-label', 'Previous Slide');
|
||||
prev.classList.add('carousel-control-prev');
|
||||
prev.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
prev.setAttribute('data-bs-slide', 'prev');
|
||||
prev.addEventListener('click', (e) => {
|
||||
carousel.prev();
|
||||
});
|
||||
prev.innerHTML = '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
|
||||
el.appendChild(prev);
|
||||
}
|
||||
|
||||
if (el.dataset.bsIndicators) {
|
||||
const indicators = document.createElement('div');
|
||||
indicators.classList.add('carousel-indicators');
|
||||
const items = el.querySelectorAll('.carousel-item');
|
||||
let i = 0;
|
||||
while (i < items.length) {
|
||||
const ind = document.createElement('button');
|
||||
ind.setAttribute('type', 'button');
|
||||
ind.setAttribute('aria-label', `Slide to #${ i + 1}`);
|
||||
if (i == 0) {
|
||||
ind.classList.add('active');
|
||||
}
|
||||
ind.setAttribute('data-bs-target', el.getAttribute('id'));
|
||||
ind.setAttribute('data-bs-slide-to', i);
|
||||
|
||||
ind.addEventListener('click', (e) => {
|
||||
const target = e.target;
|
||||
carousel.to(target.getAttribute('data-bs-slide-to'));
|
||||
indicators.querySelectorAll('.active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
target.classList.add('active');
|
||||
});
|
||||
|
||||
indicators.appendChild(ind);
|
||||
i++;
|
||||
}
|
||||
|
||||
el.appendChild(indicators);
|
||||
el.addEventListener('slide.bs.carousel', (e) => {
|
||||
el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => {
|
||||
ind2.classList.remove('active');
|
||||
});
|
||||
el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => {
|
||||
ind2.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
el.classList.add(`${NAME}-active`);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
||||
window.addEventListener(`${Events.AJAX}`, init);
|
||||
})(window);
|
||||
|
||||
export default CarouselUI;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// api-less instagram feed
|
||||
|
||||
// Visitor network maybe temporary banned by Instagram because of too many requests from external websites
|
||||
// so it isn't very stable implementation. You should have something for the fall-back.
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed';
|
||||
|
||||
export default ((window) => {
|
||||
const NAME = 'js-instagramfeed';
|
||||
const BODY = document.body;
|
||||
|
||||
const ig_media_preview = (base64data) => {
|
||||
const jpegtpl =
|
||||
'/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==',
|
||||
t = atob(base64data),
|
||||
p = t.slice(3).split(''),
|
||||
o = t
|
||||
.substring(0, 3)
|
||||
.split('')
|
||||
.map((e) => {
|
||||
return e.charCodeAt(0);
|
||||
}),
|
||||
c = atob(jpegtpl).split('');
|
||||
c[162] = String.fromCharCode(o[1]);
|
||||
c[160] = String.fromCharCode(o[2]);
|
||||
return base64data ?
|
||||
`data:image/jpeg;base64,${btoa(c.concat(p).join(''))}` :
|
||||
null;
|
||||
};
|
||||
|
||||
const loadFeed = () => {
|
||||
console.log(`${NAME}: loading`);
|
||||
|
||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||
const ID = `InstagramFeed${i}`;
|
||||
const dataset = el.dataset;
|
||||
|
||||
el.classList.add(`${NAME}-loading`);
|
||||
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
|
||||
|
||||
new InstagramFeed({
|
||||
username: dataset['username'],
|
||||
tag: dataset['tag'] || null,
|
||||
display_profile: dataset['display-profile'],
|
||||
display_biography: dataset['display-biography'],
|
||||
display_gallery: dataset['display-gallery'],
|
||||
display_captions: dataset['display-captions'],
|
||||
cache_time: dataset['cache_time'] || 360,
|
||||
items: dataset['items'] || 12,
|
||||
styling: false,
|
||||
lazy_load: true,
|
||||
callback: (data) => {
|
||||
console.log(`${NAME}: data response received`);
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.classList.add(`${NAME}-list`, 'row');
|
||||
el.appendChild(list);
|
||||
|
||||
data['edge_owner_to_timeline_media']['edges'].forEach(
|
||||
(el, i) => {
|
||||
const item = el['node'];
|
||||
const preview = ig_media_preview(item['media_preview']);
|
||||
|
||||
list.innerHTML +=
|
||||
`<div class="a col ${NAME}-item"` +
|
||||
` data-gallery="${NAME}-${ID}" data-href="${item['display_url']}" data-toggle="lightbox" data-force="image">` +
|
||||
`<img id="${NAME}-${ID}-${item['id']}" src="${item['display_url']}" alt="${item['accessibility_caption']}"` +
|
||||
`style="background:url(${preview})" />` +
|
||||
'</div>';
|
||||
},
|
||||
);
|
||||
|
||||
el.classList.remove(`${NAME}-loading`);
|
||||
el.classList.add(`${NAME}-loaded`);
|
||||
|
||||
window.dispatchEvent(new Event('MetaWindowindow.initLinks'));
|
||||
window.dispatchEvent(new Event(`${NAME}.loaded`));
|
||||
},
|
||||
on_error: (e) => {
|
||||
console.error(`${NAME}: ${e}`);
|
||||
|
||||
el.classList.remove(`${NAME}-loading`);
|
||||
el.classList.add(`${NAME}-error`);
|
||||
|
||||
window.dispatchEvent(new Event(`${NAME}.error`));
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed);
|
||||
window.addEventListener(`${Events.AJAX}`, loadFeed);
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
'use strict';
|
||||
|
||||
import '../scss/test-build.scss';
|
||||
import '@a2nt/meta-lightbox-js/src/js/test-build';
|
||||
|
||||
import Events from './_events';
|
||||
import MainUI from './_main/_index';
|
||||
|
||||
/*
|
||||
* AJAX functionality
|
||||
*/
|
||||
import './_ajax/_links';
|
||||
import './_ajax/_online';
|
||||
import './_ajax/_lazy-images';
|
||||
|
||||
import './_layout';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// mocking service worker
|
||||
const regeneratorRuntime = require('regenerator-runtime');
|
||||
const {
|
||||
worker,
|
||||
} = require('../mocks/browser');
|
||||
worker.start({
|
||||
serviceWorker: {
|
||||
url: '_graphql/mockServiceWorker.js',
|
||||
options: {
|
||||
scope: '/',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// caching service worker (set injectClient: false at webpack.config.serve.js)
|
||||
/*if ('serviceWorker' in navigator) {
|
||||
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||
const version = (document.querySelector('meta[name="swversion"]') || {})
|
||||
.content;
|
||||
if (baseHref) {
|
||||
navigator.serviceWorker
|
||||
.register(`${baseHref}app_sw.js?v=${version}`)
|
||||
.then(() => {
|
||||
console.log('SW: Registered');
|
||||
});
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
function importAll(r) {
|
||||
return r.keys().map(r);
|
||||
}
|
||||
|
||||
const images = importAll(
|
||||
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
|
||||
);
|
||||
const fontAwesome = importAll(
|
||||
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/),
|
||||
);
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.field {
|
||||
flex-direction: row;
|
||||
|
||||
&__label {
|
||||
padding-right: $form-spacer-x;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&+.field__content {
|
||||
padding-left: $form-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.field__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&.CompositeField {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.field.password {
|
||||
.show-password {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './_basics';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import '../_variables';
|
||||
@import '../_animations';
|
||||
|
||||
@import './_main';
|
||||
@import './_forms';
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import '../../_variables';
|
||||
|
||||
#SiteWideAlerts {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
|
||||
.btn-close {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-offline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-online {
|
||||
.alert-offline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-offline {
|
||||
.alert-offline {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
@import '../../_variables';
|
||||
@import '../../_animations';
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// sticky footer
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
--body-gutter-x: #{inspect($body-gutter-x)};
|
||||
--body-gutter-y: #{inspect($body-gutter-y)};
|
||||
--body-double-gutter-x: #{inspect($body-double-gutter-x)};
|
||||
--body-double-gutter-y: #{inspect($body-double-gutter-y)};
|
||||
--body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)};
|
||||
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
|
||||
--body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
|
||||
--body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
|
||||
|
||||
.wrapper {
|
||||
flex: 1 0 auto;
|
||||
margin-bottom: $element-spacer-y;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: $element-spacer-y;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $extra-large-screen) {
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: .9vw !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
// don't let images be wider than the parent layer
|
||||
div,
|
||||
a,
|
||||
span,
|
||||
button,
|
||||
i {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul,
|
||||
table,
|
||||
p {
|
||||
&:first-child {
|
||||
margin-top: 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;
|
||||
}
|
||||
}
|
||||
|
||||
// exclude bootstrap-table
|
||||
[data-toggle='table'] {
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle='collapse'] {
|
||||
&[aria-expanded='true'] {
|
||||
.accordion-icon {
|
||||
&:before {
|
||||
content: '\f068';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transactions
|
||||
.transition,
|
||||
a,
|
||||
a *,
|
||||
.a,
|
||||
.a *,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea,
|
||||
.btn,
|
||||
.btn *,
|
||||
.dropdown,
|
||||
.row,
|
||||
.alert,
|
||||
.alert *,
|
||||
.message,
|
||||
[data-toggle],
|
||||
[data-toggle] * {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.a,
|
||||
a,
|
||||
[data-toggle],
|
||||
button,
|
||||
.btn {
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&[aria-expanded='true'] {
|
||||
|
||||
>.fa,
|
||||
>.far,
|
||||
>.fas,
|
||||
>.fab,
|
||||
&.fa,
|
||||
&.far,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&[aria-expanded='true'] {
|
||||
|
||||
>.fa,
|
||||
>.far,
|
||||
>.fas,
|
||||
>.fab,
|
||||
&.fa,
|
||||
&.far,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import '../../_variables';
|
||||
@import '../../_animations';
|
||||
|
||||
@import './_base';
|
||||
@import './_main';
|
||||
@import './_alerts';
|
||||
|
||||
// states
|
||||
@import './_states';
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
.meta-MetaWindow {
|
||||
z-index: 1031;
|
||||
|
||||
.meta-nav {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 0.8s linear infinite;
|
||||
}
|
||||
|
||||
// navs
|
||||
.navbar-toggler {
|
||||
transition: transform ease 0.4s;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-item,
|
||||
.nav-link {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button.nav-link {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
text-transform: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
&[aria-expanded='true'] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
position: relative;
|
||||
padding-right: 1.5em;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 0.5em;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-toggle.nav-link {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-toggle::after,
|
||||
.dropdown-toggle.active-dropdown::after,
|
||||
.dropdown-toggle.active::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
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;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: $form-spacer-y 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar {
|
||||
margin-top: $form-spacer-y;
|
||||
}
|
||||
|
||||
// rewrite btn opacity on hover
|
||||
.btn {
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// SS-messages
|
||||
|
||||
.alert+.alert {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/*.message {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-info;
|
||||
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.message.validation,
|
||||
.message.required,
|
||||
.message.error {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-danger;
|
||||
}
|
||||
|
||||
.message.required,
|
||||
.message.error {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-danger;
|
||||
}*/
|
||||
|
||||
.list-group-item.active {
|
||||
|
||||
a,
|
||||
.a {
|
||||
color: $list-group-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
[aria-expanded='true'] {
|
||||
.fa-bars {
|
||||
&:before {
|
||||
content: '\f00d';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsSidebarUI {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.jsSidebarUI__inner {
|
||||
position: relative;
|
||||
will-change: position, top;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../../_variables';
|
||||
@import '../../../_animations';
|
||||
|
||||
@import './_mobile';
|
||||
@import './_network';
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
* Mobile/Desktop states
|
||||
*/
|
||||
|
||||
// display dropdown on hover + focus
|
||||
@media (min-width: $full-body-min-width) {
|
||||
.dropdown-hover {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom toggler for mobile view
|
||||
.dropdown {
|
||||
>.dropdown-toggle-sm {
|
||||
@media (min-width: $full-body-min-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
>.dropdown-toggle-fl {
|
||||
display: none;
|
||||
|
||||
@media (min-width: $full-body-min-width) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (hover: none) {
|
||||
>.dropdown-toggle-touch {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
>.dropdown-toggle-notouch {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* Network States
|
||||
*/
|
||||
|
||||
.loading {
|
||||
animation: fade 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.graphql-page {
|
||||
&.response-404 {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.is-offline {
|
||||
iframe {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graphql-page {
|
||||
&.response-523 {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.ajax-loading {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
|
||||
#Header {
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
.sidebar__col {
|
||||
position: relative;
|
||||
margin-top: $element-reduced-spacer-y;
|
||||
margin-bottom: $element-reduced-spacer-y;
|
||||
}
|
||||
.content-holder__sidebar {
|
||||
> .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#SiteWideMessage {
|
||||
text-align: center;
|
||||
.alert {
|
||||
margin-bottom: 0;
|
||||
.btn-close {
|
||||
margin-top: -0.5rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Header {
|
||||
background-color: $header-bg;
|
||||
color: $header-color;
|
||||
|
||||
a {
|
||||
color: $header-link;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.logo {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#Navigation {
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25rem;
|
||||
width: 100%;
|
||||
background: $header-bg;
|
||||
|
||||
.navbar-toggler {
|
||||
color: $main-nav-link-color;
|
||||
font-size: $main-nav-toggler-size;
|
||||
}
|
||||
|
||||
.nav-item,
|
||||
.nav-link {
|
||||
flex-direction: column;
|
||||
/*@media (min-width: $full-body-min-width) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}*/
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $main-nav-link-color;
|
||||
background: $main-nav-link-bg;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $main-nav-link-hover-bg;
|
||||
color: $main-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
> .nav-link {
|
||||
background: $main-nav-link-hover-bg;
|
||||
color: $main-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item .nav-dropdown {
|
||||
.fa-chevron-right
|
||||
//&:after
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-color: $main-nav-dropdown-bg;
|
||||
background: $main-nav-dropdown-bg;
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
min-width: 100%;
|
||||
.nav-item-link {
|
||||
color: $main-nav-dropdown-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $main-nav-dropdown-hover-bg;
|
||||
.nav-item-link {
|
||||
color: $main-nav-dropdown-hover-color;
|
||||
}
|
||||
}
|
||||
.nav-item-link {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $full-body-min-width) {
|
||||
.navbar-nav > .nav-item {
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.dropdown-item .nav-item-link {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*#MainContent {
|
||||
padding-top: 2 * $element-reduced-spacer-y;
|
||||
padding-bottom: 2 * $element-reduced-spacer-y;
|
||||
}*/
|
||||
|
||||
#PageBreadcumbs {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#Footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $footer-bg;
|
||||
color: $footer-color;
|
||||
|
||||
> .wrapper {
|
||||
padding-top: $element-reduced-spacer-y;
|
||||
padding-bottom: $element-reduced-spacer-y;
|
||||
}
|
||||
|
||||
a,
|
||||
.a {
|
||||
color: $footer-link;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: $element-reduced-spacer-y;
|
||||
padding-bottom: $element-reduced-spacer-y;
|
||||
background-color: $footer-footer-bg;
|
||||
|
||||
.copyright {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@import "~bootstrap-table/src/bootstrap-table.scss";
|
||||
|
||||
.bootstrap-table {
|
||||
.fixed-table-container {
|
||||
.table {
|
||||
thead th {
|
||||
.both, .asc, .desc {
|
||||
background-image: none;
|
||||
|
||||
&:after {
|
||||
margin-left: .5em;
|
||||
content: '';
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.asc:after {
|
||||
content: "\f0de";
|
||||
}
|
||||
|
||||
.desc:after {
|
||||
content: "\f0dd";
|
||||
}
|
||||
|
||||
.both:after {
|
||||
content: "\f0dc";
|
||||
}
|
||||
|
||||
.th-inner.sortable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
// Bootstrap
|
||||
// Configuration
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/utilities';
|
||||
|
||||
// Layout & components
|
||||
@import '~bootstrap/scss/root';
|
||||
@import '~bootstrap/scss/reboot';
|
||||
@import '~bootstrap/scss/type';
|
||||
@import '~bootstrap/scss/containers';
|
||||
@import '~bootstrap/scss/grid';
|
||||
@import '~bootstrap/scss/tables';
|
||||
@import '~bootstrap/scss/forms';
|
||||
@import '~bootstrap/scss/buttons';
|
||||
@import '~bootstrap/scss/transitions';
|
||||
|
||||
// Optional
|
||||
//@import '~bootstrap/scss/images';
|
||||
@import '~bootstrap/scss/dropdown';
|
||||
@import '~bootstrap/scss/nav';
|
||||
@import '~bootstrap/scss/navbar';
|
||||
@import '~bootstrap/scss/breadcrumb';
|
||||
@import '~bootstrap/scss/pagination';
|
||||
@import '~bootstrap/scss/alert';
|
||||
@import '~bootstrap/scss/close';
|
||||
|
||||
/*@import '~bootstrap/scss/button-group';
|
||||
@import '~bootstrap/scss/card';
|
||||
@import '~bootstrap/scss/accordion';
|
||||
@import '~bootstrap/scss/badge';
|
||||
@import '~bootstrap/scss/progress';
|
||||
@import '~bootstrap/scss/list-group';
|
||||
@import '~bootstrap/scss/toasts';
|
||||
@import '~bootstrap/scss/modal';
|
||||
@import '~bootstrap/scss/tooltip';
|
||||
@import '~bootstrap/scss/popover';
|
||||
@import '~bootstrap/scss/spinners';*/
|
||||
|
||||
// Helpers
|
||||
@import '~bootstrap/scss/helpers';
|
||||
|
||||
// Utilities
|
||||
@import '~bootstrap/scss/utilities/api';
|
||||
|
||||
@import '../_ui/carousel';
|
||||
|
||||
.navbar {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
$fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
@import "~font-awesome/scss/font-awesome";
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.message {
|
||||
@extend .alert !optional;
|
||||
|
||||
&.warning {
|
||||
@extend .alert-warning !optional;
|
||||
}
|
||||
|
||||
&.error {
|
||||
@extend .alert-danger !optional;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3,
|
||||
.embed-responsive-16by9 {
|
||||
position: relative;
|
||||
padding-top: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
#ForgotPassword {
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#BetterNavigator {
|
||||
display: none;
|
||||
top: 50% !important;
|
||||
margin-top: -41px;
|
||||
|
||||
&.open {
|
||||
top: 0 !important;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
div,
|
||||
i,
|
||||
span {
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, 'md')) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.cart-footer {
|
||||
margin-top: $grid-gutter-height / 2;
|
||||
}
|
||||
|
||||
.address-panel,
|
||||
.account-nav {
|
||||
margin-bottom: $grid-gutter-height / 2;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
@import '~bootstrap/scss/carousel';
|
||||
|
||||
/*
|
||||
* Bootstrap carousel improvement
|
||||
*/
|
||||
|
||||
/*.carousel-item {
|
||||
&.active {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}*/
|
||||
|
||||
$carousel-title-color: $white !default;
|
||||
$carousel-slide-min-height: 4rem !default;
|
||||
$carousel-text-shadow: 1px 1px $black !default;
|
||||
$carousel-controls-font-size: 3rem;
|
||||
$carousel-controls-zindex: 11 !default;
|
||||
$carousel-controls-shadow: 1px 1px $black !default;
|
||||
$carousel-controls-hover-bg: transparentize($black, 0.4) !default;
|
||||
$carousel-slide-img-loading-max-height: 25vh !default;
|
||||
|
||||
.carousel-slide {
|
||||
min-height: $carousel-slide-min-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
>.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
|
||||
iframe {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img.loading {
|
||||
max-height: $carousel-slide-img-loading-max-height;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
z-index: $carousel-controls-zindex;
|
||||
font-size: $carousel-controls-font-size;
|
||||
text-shadow: $carousel-controls-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $carousel-controls-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.carousel-title {
|
||||
color: $carousel-title-color;
|
||||
}
|
||||
|
||||
.carousel-title,
|
||||
.carousel-content {
|
||||
text-shadow: $carousel-text-shadow;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
right: 0;
|
||||
left: auto;
|
||||
width: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.slide-link__media {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
$flyout-height-padding: 1rem;
|
||||
$flyout-width-padding: 2rem;
|
||||
$flyout-padding: $flyout-height-padding $flyout-width-padding;
|
||||
$flyout-bg: #000 !default;
|
||||
$flyout-color: #fff !default;
|
||||
$flyout-title-color: #fff !default;
|
||||
$flyout-transition: right 2s;
|
||||
|
||||
.flyout-FlyoutUI {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
transform: translateY(-50%);
|
||||
transition: $flyout-transition;
|
||||
right: -100%;
|
||||
top: 50%;
|
||||
background: $flyout-bg;
|
||||
color: $flyout-color;
|
||||
padding: $flyout-padding;
|
||||
|
||||
&__active {
|
||||
display: block;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $flyout-title-color;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: $flyout-height-padding;
|
||||
right: $flyout-width-padding;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.form-stepped {
|
||||
.step {
|
||||
display: none !important;
|
||||
|
||||
&.active {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@import '../_variables';
|
||||
|
||||
/*$lightbox-breakpoint: map-get($grid-breakpoints, 'sm') !default;
|
||||
$lightbox-link-hover-color: $link-hover-color !default;
|
||||
|
||||
@import '~@a2nt/meta-lightbox/src/scss/app';
|
||||
|
||||
.lightbox-overlay-custom {
|
||||
@extend .meta-lightbox-overlay;
|
||||
@extend .meta-lightbox-theme-default;
|
||||
@extend .meta-lightbox-effect-fade;
|
||||
// meta-lightbox-open
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
#mc_embed_signup,
|
||||
.mc_embed_signup {
|
||||
padding: 2rem;
|
||||
.mc-field-group {
|
||||
@extend .form-group;
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='email'] {
|
||||
@extend .form-control;
|
||||
}
|
||||
input[type='submit'] {
|
||||
@extend .btn;
|
||||
@extend .btn-primary;
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
display: block;
|
||||
}
|
||||
.clear {
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@extend .form-check;
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
@extend .form-check-input;
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .form-check-label;
|
||||
}
|
||||
}
|
||||
|
||||
.mce_inline_error,
|
||||
#mce-success-response,
|
||||
#mce-error-response {
|
||||
margin-top: 1rem;
|
||||
@extend .alert;
|
||||
}
|
||||
|
||||
#mce-success-response {
|
||||
@extend .alert-success;
|
||||
}
|
||||
|
||||
.mce_inline_error,
|
||||
#mce-error-response {
|
||||
@extend .alert-danger;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
@import '../_variables';
|
||||
@import '../_animations';
|
||||
|
||||
//@import "~mapbox-gl/src/css/mapbox-gl.css";
|
||||
$map-height: 30rem !default;
|
||||
|
||||
$map-marker-color: $primary !default;
|
||||
$map-marker-size: 30px !default;
|
||||
|
||||
$map-popup-font-size: 0.8rem !default;
|
||||
$map-popup-width: 16rem !default;
|
||||
$map-popup-height: 7rem !default;
|
||||
$map-popup-bg: $white !default;
|
||||
$map-popup-color: $body-color !default;
|
||||
|
||||
.mapAPI-map {
|
||||
height: $map-height;
|
||||
//margin-bottom: $grid-gutter-element-height;
|
||||
}
|
||||
|
||||
.mapboxgl {
|
||||
&-popup {
|
||||
width: $map-popup-width;
|
||||
height: $map-popup-height;
|
||||
font-size: $map-popup-font-size;
|
||||
line-height: 1.2em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&-popup-anchor-bottom,
|
||||
&-popup-anchor-bottom-left,
|
||||
&-popup-anchor-bottom-right {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&-popup-content {
|
||||
min-width: $map-popup-width;
|
||||
background: $map-popup-bg;
|
||||
color: $map-popup-color;
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.25rem;
|
||||
min-height: 5rem;
|
||||
box-shadow: 0 0.1rem 0.8rem 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
&-popup-close-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 2rem;
|
||||
padding: 0.5rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
z-index: 2;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&-popup-tip {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0.8rem solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-popup-anchor-bottom &-popup-tip {
|
||||
border-top-color: $map-popup-bg;
|
||||
align-self: center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&-marker {
|
||||
width: $map-marker-size;
|
||||
height: $map-marker-size;
|
||||
font-size: $map-marker-size;
|
||||
line-height: 1em;
|
||||
color: $map-marker-color;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
.marker-icon,
|
||||
.fas,
|
||||
.fab,
|
||||
.far {
|
||||
animation: pulse 0.8s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&-cluster {
|
||||
background: $info;
|
||||
color: color-yiq($info);
|
||||
border-radius: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: pulse 0.8s linear infinite;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 140%;
|
||||
height: 140%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: $info;
|
||||
opacity: 0.2;
|
||||
border-radius: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 180%;
|
||||
height: 180%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@import '../_variables';
|
||||
$grid-gutter-element-height: 2rem !default;
|
||||
|
||||
.jsMultiSlider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: $grid-gutter-element-height/2;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 100%;
|
||||
|
||||
&-active {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: relative;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.jsMultiSlider-container {
|
||||
position: relative;
|
||||
margin-bottom: $grid-gutter-element-height/2;
|
||||
|
||||
.slider-actions {
|
||||
font-size: 2rem;
|
||||
.act {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
&-slider-prev {
|
||||
}
|
||||
&-slider-next {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsMultiSlider-slides-container {
|
||||
overflow: hidden;
|
||||
margin: 0 2rem;
|
||||
|
||||
> .slider-nav {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import 'app';
|
||||
@import '_layout/_test';
|
||||
@import '~bootstrap/scss/accordion';
|
||||
Loading…
Reference in New Issue