diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..85ba933
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,6 @@
+{
+ "ignorePatterns": [
+ "**/gulpfile.js/*.js",
+ "dist/**/*.js"
+ ]
+}
diff --git a/dev/scss/base/_grids.scss b/.eslintrc
similarity index 100%
rename from dev/scss/base/_grids.scss
rename to .eslintrc
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9186ce7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+ "semi": true,
+ "arrowParens": "always",
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "printWidth": 120,
+ "proseWrap": "preserve",
+ "bracketSameLine": true,
+ "bracketSpacing": true,
+ "endOfLine": "lf",
+ "useTabs": false
+}
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 0000000..21ec5e8
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,216 @@
+{
+ "plugins": [
+ "stylelint-scss"
+ ],
+ "extends": [
+ "stylelint-config-standard-scss"
+ ],
+ "customSyntax": "postcss-scss",
+ "rules": {
+ "rule-empty-line-before": [
+ "always",
+ {
+ "except": [
+ "after-single-line-comment",
+ "inside-block-and-after-rule",
+ "inside-block",
+ "first-nested"
+ ],
+ "ignore": [
+ "after-comment",
+ "first-nested",
+ "inside-block"
+ ]
+ }
+ ],
+ "declaration-empty-line-before": [
+ "always",
+ {
+ "ignore": [
+ "after-comment",
+ "after-declaration",
+ "first-nested"
+ ]
+ }
+ ],
+ "import-notation": [
+ "string"
+ ],
+ "block-no-empty": true,
+ "color-no-invalid-hex": true,
+ "comment-no-empty": true,
+ "declaration-block-no-duplicate-custom-properties": true,
+ "declaration-block-no-duplicate-properties": [
+ true,
+ {
+ "ignore": [
+ "consecutive-duplicates-with-different-values"
+ ]
+ }
+ ],
+ "function-no-unknown": [
+ true,
+ {
+ "ignoreFunctions": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ "calc-interpolation",
+ "/^rem-/",
+ "append",
+ "-",
+ "/^map-/"
+ ]
+ }
+ ],
+ "annotation-no-unknown": [
+ true,
+ {
+ "ignoreAnnotations": [
+ "default"
+ ]
+ }
+ ],
+ "at-rule-no-unknown": [
+ true,
+ {
+ "ignoreAtRules": [
+ "mixin",
+ "include",
+ "extend",
+ "if",
+ "else",
+ "use",
+ "function",
+ "for",
+ "return",
+ "warn",
+ "each",
+ "debug"
+ ]
+ }
+ ],
+ "declaration-block-no-shorthand-property-overrides": true,
+ "font-family-no-duplicate-names": true,
+ "font-family-no-missing-generic-family-keyword": true,
+ "function-calc-no-unspaced-operator": true,
+ "function-linear-gradient-no-nonstandard-direction": true,
+ "keyframe-declaration-no-important": true,
+ "media-feature-name-no-unknown": true,
+ "named-grid-areas-no-invalid": true,
+ "no-descending-specificity": null,
+ "no-duplicate-at-import-rules": true,
+ "no-duplicate-selectors": true,
+ "no-empty-source": true,
+ "no-invalid-double-slash-comments": true,
+ "no-invalid-position-at-import-rule": true,
+ "no-irregular-whitespace": true,
+ "property-no-unknown": true,
+ "selector-pseudo-class-no-unknown": true,
+ "selector-pseudo-element-no-unknown": true,
+ "selector-type-no-unknown": [
+ true,
+ {
+ "ignore": [
+ "custom-elements"
+ ]
+ }
+ ],
+ "string-no-newline": true,
+ "unit-no-unknown": true,
+ "alpha-value-notation": [
+ "percentage",
+ {
+ "exceptProperties": [
+ "opacity"
+ ]
+ }
+ ],
+ "at-rule-no-vendor-prefix": true,
+ "color-function-notation": [
+ "legacy",
+ {
+ "disableFix": true
+ }
+ ],
+ "color-hex-length": "short",
+ "comment-empty-line-before": [
+ "always",
+ {
+ "except": [
+ "first-nested"
+ ],
+ "ignore": [
+ "stylelint-commands"
+ ]
+ }
+ ],
+ "comment-whitespace-inside": "always",
+ "custom-property-empty-line-before": [
+ "always",
+ {
+ "except": [
+ "after-custom-property",
+ "first-nested"
+ ],
+ "ignore": [
+ "after-comment",
+ "inside-single-line-block"
+ ]
+ }
+ ],
+ "custom-media-pattern": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ {
+ "message": "Expected custom media query name to be kebab-case"
+ }
+ ],
+ "custom-property-pattern": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ {
+ "message": "Expected custom property name to be kebab-case"
+ }
+ ],
+ "declaration-block-single-line-max-declarations": 1,
+ "font-family-name-quotes": "always-where-recommended",
+ "function-name-case": "lower",
+ "function-url-quotes": "always",
+ "hue-degree-notation": "angle",
+ "keyframes-name-pattern": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ {
+ "message": "Expected keyframe name to be kebab-case"
+ }
+ ],
+ "length-zero-no-unit": [
+ true,
+ {
+ "ignoreFunctions": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ "calc-interpolation",
+ "/^rem-/",
+ "append",
+ "-",
+ "/^map-/",
+ "var",
+ "/^--/",
+ "xs"
+ ]
+ }
+ ],
+ "media-feature-name-no-vendor-prefix": true,
+ "number-max-precision": 4,
+ "property-no-vendor-prefix": true,
+ "selector-attribute-quotes": "always",
+ "selector-id-pattern": [
+ "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+ {
+ "message": "Expected id selector to be kebab-case"
+ }
+ ],
+ "selector-no-vendor-prefix": true,
+ "selector-pseudo-element-colon-notation": "double",
+ "selector-type-case": "lower",
+ "shorthand-property-no-redundant-values": true,
+ "value-keyword-case": "lower",
+ "value-no-vendor-prefix": true
+ }
+}
diff --git a/dev/scripts/modules/app.js b/dev/scripts/modules/app.js
index 4248c37..005ecf9 100755
--- a/dev/scripts/modules/app.js
+++ b/dev/scripts/modules/app.js
@@ -1,67 +1,60 @@
import 'popper.js';
// import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/modal';
-// import 'bootstrap/js/dist/dropdown';
-// import 'bootstrap/js/dist/modal';
-// import 'bootstrap/js/dist/tab';
-// import 'bootstrap/js/dist/collapse';
-// import 'bootstrap-select';
-// import 'bootstrap/js/dist/modal';
class global {
- constructor() {
- this.myModal = document.getElementById('exampleModal')
- this.stickyHeader();
- this.megamenuPopup();
- this.toggleContent();
- this.readMore();
- }
-
- stickyHeader() {
- var elemBody = $('body');
- var pageHeader = $('.theme-header');
- if ($(elemBody).hasClass('home')) {
- $(pageHeader).addClass('theme-header--dark');
- }
-
- $(window).scroll(function () {
- if ($(this).scrollTop() > 50) {
- $('.theme-header').addClass('sticky');
- } else {
- $('.theme-header').removeClass('sticky');
- }
- });
- }
-
- megamenuPopup() {
- var toggleBar = $('.navbar-toggle');
- var popupMenu = $('.megamenu-popup');
- var closePopup = $('.close-menu');
- $(toggleBar).click(function () {
- $(popupMenu).addClass('active');
- });
- $(closePopup).click(function () {
- $(popupMenu).removeClass('active');
- });
- }
-
- toggleContent() {
- var toggleContent = $('.toggle-text');
- var viewBtn = $('.toggleRead');
- $(viewBtn).click(function () {
- $(this).toggleClass('active');
- $(toggleContent).toggleClass('active');
- });
- }
-
- readMore() {
- $('.readmore').click(function () {
- $('.collapse-text').addClass('expand');
- $(this).hide();
- });
+ constructor() {
+ this.myModal = document.getElementById('exampleModal');
+ this.stickyHeader();
+ this.megamenuPopup();
+ this.toggleContent();
+ this.readMore();
+ }
+
+ stickyHeader() {
+ var elemBody = $('body');
+ var pageHeader = $('.theme-header');
+ if ($(elemBody).hasClass('home')) {
+ $(pageHeader).addClass('theme-header--dark');
}
+ $(window).scroll(function () {
+ if ($(this).scrollTop() > 50) {
+ $('.theme-header').addClass('sticky');
+ } else {
+ $('.theme-header').removeClass('sticky');
+ }
+ });
+ }
+
+ megamenuPopup() {
+ var toggleBar = $('.navbar-toggle');
+ var popupMenu = $('.megamenu-popup');
+ var closePopup = $('.close-menu');
+ $(toggleBar).click(function () {
+ $(popupMenu).addClass('active');
+ });
+ $(closePopup).click(function () {
+ $(popupMenu).removeClass('active');
+ });
+ }
+
+ toggleContent() {
+ var toggleContent = $('.toggle-text');
+ var viewBtn = $('.toggleRead');
+ $(viewBtn).click(function () {
+ $(this).toggleClass('active');
+ $(toggleContent).toggleClass('active');
+ });
+ }
+
+ readMore() {
+ $('.readmore').click(function () {
+ $('.collapse-text').addClass('expand');
+ $(this).hide();
+ });
+ }
}
export default global;
diff --git a/dev/scripts/modules/jquery.sticky.js b/dev/scripts/modules/jquery.sticky.js
index cc7139b..82ae980 100644
--- a/dev/scripts/modules/jquery.sticky.js
+++ b/dev/scripts/modules/jquery.sticky.js
@@ -11,291 +11,278 @@
// might need to adjust the width in some cases.
(function (factory) {
- if (typeof define === 'function' && define.amd) {
- // AMD. Register as an anonymous module.
- define(['jquery'], factory);
- } else if (typeof module === 'object' && module.exports) {
- // Node/CommonJS
- module.exports = factory(require('jquery'));
- } else {
- // Browser globals
- factory(jQuery);
- }
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['jquery'], factory);
+ } else if (typeof module === 'object' && module.exports) {
+ // Node/CommonJS
+ module.exports = factory(require('jquery'));
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
})(function ($) {
- var slice = Array.prototype.slice; // save ref to original slice()
- var splice = Array.prototype.splice; // save ref to original slice()
-
- var defaults = {
- topSpacing: 0,
- bottomSpacing: 0,
- className: 'is-sticky',
- wrapperClassName: 'sticky-wrapper',
- center: false,
- getWidthFrom: '',
- widthFromWrapper: true, // works only when .getWidthFrom is empty
- responsiveWidth: false,
- zIndex: 'inherit',
- },
- $window = $(window),
- $document = $(document),
- sticked = [],
- windowHeight = $window.height(),
- scroller = function () {
- var scrollTop = $window.scrollTop(),
- documentHeight = $document.height(),
- dwh = documentHeight - windowHeight,
- extra = scrollTop > dwh ? dwh - scrollTop : 0;
-
- for (var i = 0, l = sticked.length; i < l; i++) {
- var s = sticked[i],
- elementTop = s.stickyWrapper.offset().top,
- etse = elementTop - s.topSpacing - extra;
+ var slice = Array.prototype.slice; // save ref to original slice()
+ var splice = Array.prototype.splice; // save ref to original slice()
- //update height in case of dynamic content
- s.stickyWrapper.css('height', s.stickyElement.outerHeight());
+ var defaults = {
+ topSpacing: 0,
+ bottomSpacing: 0,
+ className: 'is-sticky',
+ wrapperClassName: 'sticky-wrapper',
+ center: false,
+ getWidthFrom: '',
+ widthFromWrapper: true, // works only when .getWidthFrom is empty
+ responsiveWidth: false,
+ zIndex: 'inherit',
+ },
+ $window = $(window),
+ $document = $(document),
+ sticked = [],
+ windowHeight = $window.height(),
+ scroller = function () {
+ var scrollTop = $window.scrollTop(),
+ documentHeight = $document.height(),
+ dwh = documentHeight - windowHeight,
+ extra = scrollTop > dwh ? dwh - scrollTop : 0;
- if (scrollTop <= etse) {
- if (s.currentTop !== null) {
- s.stickyElement.css({
- width: '',
- position: '',
- top: '',
- 'z-index': '',
- });
- s.stickyElement.parent().removeClass(s.className);
- s.stickyElement.trigger('sticky-end', [s]);
- s.currentTop = null;
- }
- } else {
- var newTop =
- documentHeight -
- s.stickyElement.outerHeight() -
- s.topSpacing -
- s.bottomSpacing -
- scrollTop -
- extra;
- if (newTop < 0) {
- newTop = newTop + s.topSpacing;
- } else {
- newTop = s.topSpacing;
- }
- if (s.currentTop !== newTop) {
- var newWidth;
- if (s.getWidthFrom) {
- padding = s.stickyElement.innerWidth() - s.stickyElement.width();
- newWidth = $(s.getWidthFrom).width() - padding || null;
- } else if (s.widthFromWrapper) {
- newWidth = s.stickyWrapper.width();
- }
- if (newWidth == null) {
- newWidth = s.stickyElement.width();
- }
- s.stickyElement
- .css('width', newWidth)
- .css('position', 'fixed')
- .css('top', newTop)
- .css('z-index', s.zIndex);
+ for (var i = 0, l = sticked.length; i < l; i++) {
+ var s = sticked[i],
+ elementTop = s.stickyWrapper.offset().top,
+ etse = elementTop - s.topSpacing - extra;
- s.stickyElement.parent().addClass(s.className);
+ //update height in case of dynamic content
+ s.stickyWrapper.css('height', s.stickyElement.outerHeight());
- if (s.currentTop === null) {
- s.stickyElement.trigger('sticky-start', [s]);
- } else {
- // sticky is started but it have to be repositioned
- s.stickyElement.trigger('sticky-update', [s]);
- }
-
- if (
- (s.currentTop === s.topSpacing && s.currentTop > newTop) ||
- (s.currentTop === null && newTop < s.topSpacing)
- ) {
- // just reached bottom || just started to stick but bottom is already reached
- s.stickyElement.trigger('sticky-bottom-reached', [s]);
- } else if (s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
- // sticky is started && sticked at topSpacing && overflowing from top just finished
- s.stickyElement.trigger('sticky-bottom-unreached', [s]);
- }
-
- s.currentTop = newTop;
- }
+ if (scrollTop <= etse) {
+ if (s.currentTop !== null) {
+ s.stickyElement.css({
+ width: '',
+ position: '',
+ top: '',
+ 'z-index': '',
+ });
+ s.stickyElement.parent().removeClass(s.className);
+ s.stickyElement.trigger('sticky-end', [s]);
+ s.currentTop = null;
+ }
+ } else {
+ var newTop =
+ documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+ if (newTop < 0) {
+ newTop = newTop + s.topSpacing;
+ } else {
+ newTop = s.topSpacing;
+ }
+ if (s.currentTop !== newTop) {
+ var newWidth;
+ if (s.getWidthFrom) {
+ padding = s.stickyElement.innerWidth() - s.stickyElement.width();
+ newWidth = $(s.getWidthFrom).width() - padding || null;
+ } else if (s.widthFromWrapper) {
+ newWidth = s.stickyWrapper.width();
+ }
+ if (newWidth == null) {
+ newWidth = s.stickyElement.width();
+ }
+ s.stickyElement.css('width', newWidth).css('position', 'fixed').css('top', newTop).css('z-index', s.zIndex);
- // Check if sticky has reached end of container and stop sticking
- var stickyWrapperContainer = s.stickyWrapper.parent();
- var unstick =
- s.stickyElement.offset().top + s.stickyElement.outerHeight() >=
- stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight() &&
- s.stickyElement.offset().top <= s.topSpacing;
+ s.stickyElement.parent().addClass(s.className);
- if (unstick) {
- s.stickyElement.css('position', 'absolute').css('top', '').css('bottom', 0).css('z-index', '');
- } else {
- s.stickyElement
- .css('position', 'fixed')
- .css('top', newTop)
- .css('bottom', '')
- .css('z-index', s.zIndex);
- }
- }
+ if (s.currentTop === null) {
+ s.stickyElement.trigger('sticky-start', [s]);
+ } else {
+ // sticky is started but it have to be repositioned
+ s.stickyElement.trigger('sticky-update', [s]);
}
- },
- resizer = function () {
- windowHeight = $window.height();
- for (var i = 0, l = sticked.length; i < l; i++) {
- var s = sticked[i];
- var newWidth = null;
- if (s.getWidthFrom) {
- if (s.responsiveWidth) {
- newWidth = $(s.getWidthFrom).width();
- }
- } else if (s.widthFromWrapper) {
- newWidth = s.stickyWrapper.width();
- }
- if (newWidth != null) {
- s.stickyElement.css('width', newWidth);
- }
+ if (
+ (s.currentTop === s.topSpacing && s.currentTop > newTop) ||
+ (s.currentTop === null && newTop < s.topSpacing)
+ ) {
+ // just reached bottom || just started to stick but bottom is already reached
+ s.stickyElement.trigger('sticky-bottom-reached', [s]);
+ } else if (s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
+ // sticky is started && sticked at topSpacing && overflowing from top just finished
+ s.stickyElement.trigger('sticky-bottom-unreached', [s]);
}
- },
- methods = {
- init: function (options) {
- return this.each(function () {
- var o = $.extend({}, defaults, options);
- var stickyElement = $(this);
- var stickyId = stickyElement.attr('id');
- var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
- var wrapper = $('').attr('id', wrapperId).addClass(o.wrapperClassName);
+ s.currentTop = newTop;
+ }
- stickyElement.wrapAll(function () {
- if ($(this).parent('#' + wrapperId).length == 0) {
- return wrapper;
- }
- });
+ // Check if sticky has reached end of container and stop sticking
+ var stickyWrapperContainer = s.stickyWrapper.parent();
+ var unstick =
+ s.stickyElement.offset().top + s.stickyElement.outerHeight() >=
+ stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight() &&
+ s.stickyElement.offset().top <= s.topSpacing;
- var stickyWrapper = stickyElement.parent();
+ if (unstick) {
+ s.stickyElement.css('position', 'absolute').css('top', '').css('bottom', 0).css('z-index', '');
+ } else {
+ s.stickyElement.css('position', 'fixed').css('top', newTop).css('bottom', '').css('z-index', s.zIndex);
+ }
+ }
+ }
+ },
+ resizer = function () {
+ windowHeight = $window.height();
- if (o.center) {
- stickyWrapper.css({
- width: stickyElement.outerWidth(),
- marginLeft: 'auto',
- marginRight: 'auto',
- });
- }
+ for (var i = 0, l = sticked.length; i < l; i++) {
+ var s = sticked[i];
+ var newWidth = null;
+ if (s.getWidthFrom) {
+ if (s.responsiveWidth) {
+ newWidth = $(s.getWidthFrom).width();
+ }
+ } else if (s.widthFromWrapper) {
+ newWidth = s.stickyWrapper.width();
+ }
+ if (newWidth != null) {
+ s.stickyElement.css('width', newWidth);
+ }
+ }
+ },
+ methods = {
+ init: function (options) {
+ return this.each(function () {
+ var o = $.extend({}, defaults, options);
+ var stickyElement = $(this);
- if (stickyElement.css('float') === 'right') {
- stickyElement.css({ float: 'none' }).parent().css({ float: 'right' });
- }
+ var stickyId = stickyElement.attr('id');
+ var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
+ var wrapper = $('').attr('id', wrapperId).addClass(o.wrapperClassName);
- o.stickyElement = stickyElement;
- o.stickyWrapper = stickyWrapper;
- o.currentTop = null;
+ stickyElement.wrapAll(function () {
+ if ($(this).parent('#' + wrapperId).length == 0) {
+ return wrapper;
+ }
+ });
- sticked.push(o);
+ var stickyWrapper = stickyElement.parent();
- methods.setWrapperHeight(this);
- methods.setupChangeListeners(this);
- });
- },
+ if (o.center) {
+ stickyWrapper.css({
+ width: stickyElement.outerWidth(),
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ });
+ }
- setWrapperHeight: function (stickyElement) {
- var element = $(stickyElement);
- var stickyWrapper = element.parent();
- if (stickyWrapper) {
- stickyWrapper.css('height', element.outerHeight());
- }
- },
+ if (stickyElement.css('float') === 'right') {
+ stickyElement.css({ float: 'none' }).parent().css({ float: 'right' });
+ }
- setupChangeListeners: function (stickyElement) {
- if (window.MutationObserver) {
- var mutationObserver = new window.MutationObserver(function (mutations) {
- if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
- methods.setWrapperHeight(stickyElement);
- }
- });
- mutationObserver.observe(stickyElement, { subtree: true, childList: true });
- } else {
- if (window.addEventListener) {
- stickyElement.addEventListener(
- 'DOMNodeInserted',
- function () {
- methods.setWrapperHeight(stickyElement);
- },
- false
- );
- stickyElement.addEventListener(
- 'DOMNodeRemoved',
- function () {
- methods.setWrapperHeight(stickyElement);
- },
- false
- );
- } else if (window.attachEvent) {
- stickyElement.attachEvent('onDOMNodeInserted', function () {
- methods.setWrapperHeight(stickyElement);
- });
- stickyElement.attachEvent('onDOMNodeRemoved', function () {
- methods.setWrapperHeight(stickyElement);
- });
- }
- }
- },
- update: scroller,
- unstick: function (options) {
- return this.each(function () {
- var that = this;
- var unstickyElement = $(that);
+ o.stickyElement = stickyElement;
+ o.stickyWrapper = stickyWrapper;
+ o.currentTop = null;
- var removeIdx = -1;
- var i = sticked.length;
- while (i-- > 0) {
- if (sticked[i].stickyElement.get(0) === that) {
- splice.call(sticked, i, 1);
- removeIdx = i;
- }
- }
- if (removeIdx !== -1) {
- unstickyElement.unwrap();
- unstickyElement.css({
- width: '',
- position: '',
- top: '',
- float: '',
- 'z-index': '',
- });
- }
- });
- },
- };
+ sticked.push(o);
- // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
- if (window.addEventListener) {
- window.addEventListener('scroll', scroller, false);
- window.addEventListener('resize', resizer, false);
- } else if (window.attachEvent) {
- window.attachEvent('onscroll', scroller);
- window.attachEvent('onresize', resizer);
- }
+ methods.setWrapperHeight(this);
+ methods.setupChangeListeners(this);
+ });
+ },
- $.fn.sticky = function (method) {
- if (methods[method]) {
- return methods[method].apply(this, slice.call(arguments, 1));
- } else if (typeof method === 'object' || !method) {
- return methods.init.apply(this, arguments);
- } else {
- $.error('Method ' + method + ' does not exist on jQuery.sticky');
+ setWrapperHeight: function (stickyElement) {
+ var element = $(stickyElement);
+ var stickyWrapper = element.parent();
+ if (stickyWrapper) {
+ stickyWrapper.css('height', element.outerHeight());
}
- };
+ },
- $.fn.unstick = function (method) {
- if (methods[method]) {
- return methods[method].apply(this, slice.call(arguments, 1));
- } else if (typeof method === 'object' || !method) {
- return methods.unstick.apply(this, arguments);
+ setupChangeListeners: function (stickyElement) {
+ if (window.MutationObserver) {
+ var mutationObserver = new window.MutationObserver(function (mutations) {
+ if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
+ methods.setWrapperHeight(stickyElement);
+ }
+ });
+ mutationObserver.observe(stickyElement, { subtree: true, childList: true });
} else {
- $.error('Method ' + method + ' does not exist on jQuery.sticky');
+ if (window.addEventListener) {
+ stickyElement.addEventListener(
+ 'DOMNodeInserted',
+ function () {
+ methods.setWrapperHeight(stickyElement);
+ },
+ false
+ );
+ stickyElement.addEventListener(
+ 'DOMNodeRemoved',
+ function () {
+ methods.setWrapperHeight(stickyElement);
+ },
+ false
+ );
+ } else if (window.attachEvent) {
+ stickyElement.attachEvent('onDOMNodeInserted', function () {
+ methods.setWrapperHeight(stickyElement);
+ });
+ stickyElement.attachEvent('onDOMNodeRemoved', function () {
+ methods.setWrapperHeight(stickyElement);
+ });
+ }
}
+ },
+ update: scroller,
+ unstick: function (options) {
+ return this.each(function () {
+ var that = this;
+ var unstickyElement = $(that);
+
+ var removeIdx = -1;
+ var i = sticked.length;
+ while (i-- > 0) {
+ if (sticked[i].stickyElement.get(0) === that) {
+ splice.call(sticked, i, 1);
+ removeIdx = i;
+ }
+ }
+ if (removeIdx !== -1) {
+ unstickyElement.unwrap();
+ unstickyElement.css({
+ width: '',
+ position: '',
+ top: '',
+ float: '',
+ 'z-index': '',
+ });
+ }
+ });
+ },
};
- $(function () {
- setTimeout(scroller, 0);
- });
+
+ // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+ if (window.addEventListener) {
+ window.addEventListener('scroll', scroller, false);
+ window.addEventListener('resize', resizer, false);
+ } else if (window.attachEvent) {
+ window.attachEvent('onscroll', scroller);
+ window.attachEvent('onresize', resizer);
+ }
+
+ $.fn.sticky = function (method) {
+ if (methods[method]) {
+ return methods[method].apply(this, slice.call(arguments, 1));
+ } else if (typeof method === 'object' || !method) {
+ return methods.init.apply(this, arguments);
+ } else {
+ $.error('Method ' + method + ' does not exist on jQuery.sticky');
+ }
+ };
+
+ $.fn.unstick = function (method) {
+ if (methods[method]) {
+ return methods[method].apply(this, slice.call(arguments, 1));
+ } else if (typeof method === 'object' || !method) {
+ return methods.unstick.apply(this, arguments);
+ } else {
+ $.error('Method ' + method + ' does not exist on jQuery.sticky');
+ }
+ };
+ $(function () {
+ setTimeout(scroller, 0);
+ });
});
diff --git a/dev/scripts/modules/modal.js b/dev/scripts/modules/modal.js
index 477bffe..591984d 100755
--- a/dev/scripts/modules/modal.js
+++ b/dev/scripts/modules/modal.js
@@ -1,9 +1,7 @@
import { Modal } from 'bootstrap';
class CustomModal {
- constructor() {
-
- }
+ constructor() {}
}
export default CustomModal;
diff --git a/dev/scripts/modules/pushy.js b/dev/scripts/modules/pushy.js
index a5b5838..c8b972c 100755
--- a/dev/scripts/modules/pushy.js
+++ b/dev/scripts/modules/pushy.js
@@ -1,177 +1,174 @@
!(function (a) {
- function b() {
- g.hasClass(k) ? h.toggleClass(l) : h.toggleClass(m),
- q &&
- g.one('transitionend', function () {
- q.focus();
- });
- }
+ function b() {
+ g.hasClass(k) ? h.toggleClass(l) : h.toggleClass(m),
+ q &&
+ g.one('transitionend', function () {
+ q.focus();
+ });
+ }
- function c() {
- g.hasClass(k) ? h.removeClass(l) : h.removeClass(m);
- }
+ function c() {
+ g.hasClass(k) ? h.removeClass(l) : h.removeClass(m);
+ }
- function d() {
- g.hasClass(k)
- ? (h.addClass(l),
- g.animate(
- {
- left: '0px',
- },
- r
- ),
- i.animate(
- {
- left: s,
- },
- r
- ),
- j.animate(
- {
- left: s,
- },
- r
- ))
- : (h.addClass(m),
- g.animate(
- {
- right: '0px',
- },
- r
- ),
- i.animate(
- {
- right: s,
- },
- r
- ),
- j.animate(
- {
- right: s,
- },
- r
- )),
- q && q.focus();
- }
+ function d() {
+ g.hasClass(k)
+ ? (h.addClass(l),
+ g.animate(
+ {
+ left: '0px',
+ },
+ r
+ ),
+ i.animate(
+ {
+ left: s,
+ },
+ r
+ ),
+ j.animate(
+ {
+ left: s,
+ },
+ r
+ ))
+ : (h.addClass(m),
+ g.animate(
+ {
+ right: '0px',
+ },
+ r
+ ),
+ i.animate(
+ {
+ right: s,
+ },
+ r
+ ),
+ j.animate(
+ {
+ right: s,
+ },
+ r
+ )),
+ q && q.focus();
+ }
- function e() {
- g.hasClass(k)
- ? (h.removeClass(l),
- g.animate(
- {
- left: '-' + s,
- },
- r
- ),
- i.animate(
- {
- left: '0px',
- },
- r
- ),
- j.animate(
- {
- left: '0px',
- },
- r
- ))
- : (h.removeClass(m),
- g.animate(
- {
- right: '-' + s,
- },
- r
- ),
- i.animate(
- {
- right: '0px',
- },
- r
- ),
- j.animate(
- {
- right: '0px',
- },
- r
- ));
- }
+ function e() {
+ g.hasClass(k)
+ ? (h.removeClass(l),
+ g.animate(
+ {
+ left: '-' + s,
+ },
+ r
+ ),
+ i.animate(
+ {
+ left: '0px',
+ },
+ r
+ ),
+ j.animate(
+ {
+ left: '0px',
+ },
+ r
+ ))
+ : (h.removeClass(m),
+ g.animate(
+ {
+ right: '-' + s,
+ },
+ r
+ ),
+ i.animate(
+ {
+ right: '0px',
+ },
+ r
+ ),
+ j.animate(
+ {
+ right: '0px',
+ },
+ r
+ ));
+ }
- function f() {
- a(t).addClass(v),
- a(t).on('click', function () {
- var b = a(this);
- b.hasClass(v)
- ? (a(t).addClass(v).removeClass(u), b.removeClass(v).addClass(u))
- : b.addClass(v).removeClass(u);
- });
- }
- var g = a('.pushy'),
- h = a('body'),
- i = a('#container'),
- j = a('.push'),
- k = 'pushy-left',
- l = 'pushy-open-left',
- m = 'pushy-open-right',
- n = a('.site-overlay'),
- o = a('.btn-burger, .pushy-link'),
- p = a('.btn-burger'),
- q = a(g.data('focus')),
- r = 200,
- s = g.width() + 'px',
- t = '.pushy-submenu',
- u = 'pushy-submenu-open',
- v = 'pushy-submenu-closed';
- a(t);
- a(document).keyup(function (a) {
- 27 == a.keyCode && (h.hasClass(l) || h.hasClass(m)) && (w ? c() : (e(), (x = !1)), p && p.focus());
- });
- var w = (function () {
- var a = document.createElement('p'),
- b = !1,
- c = {
- webkitTransform: '-webkit-transform',
- OTransform: '-o-transform',
- msTransform: '-ms-transform',
- MozTransform: '-moz-transform',
- transform: 'transform',
- };
- if (null !== document.body) {
- document.body.insertBefore(a, null);
- for (var d in c)
- void 0 !== a.style[d] &&
- ((a.style[d] = 'translate3d(1px,1px,1px)'),
- (b = window.getComputedStyle(a).getPropertyValue(c[d])));
- return document.body.removeChild(a), void 0 !== b && b.length > 0 && 'none' !== b;
- }
- return !1;
- })();
- if (w)
- f(),
- o.on('click', function () {
- b();
- }),
- n.on('click', function () {
- b();
- });
- else {
- h.addClass('no-csstransforms3d'),
- g.hasClass(k)
- ? g.css({
- left: '-' + s,
- })
- : g.css({
- right: '-' + s,
- }),
- i.css({
- 'overflow-x': 'hidden',
- });
- var x = !1;
- f(),
- o.on('click', function () {
- x ? (e(), (x = !1)) : (d(), (x = !0));
- }),
- n.on('click', function () {
- x ? (e(), (x = !1)) : (d(), (x = !0));
- });
+ function f() {
+ a(t).addClass(v),
+ a(t).on('click', function () {
+ var b = a(this);
+ b.hasClass(v) ? (a(t).addClass(v).removeClass(u), b.removeClass(v).addClass(u)) : b.addClass(v).removeClass(u);
+ });
+ }
+ var g = a('.pushy'),
+ h = a('body'),
+ i = a('#container'),
+ j = a('.push'),
+ k = 'pushy-left',
+ l = 'pushy-open-left',
+ m = 'pushy-open-right',
+ n = a('.site-overlay'),
+ o = a('.btn-burger, .pushy-link'),
+ p = a('.btn-burger'),
+ q = a(g.data('focus')),
+ r = 200,
+ s = g.width() + 'px',
+ t = '.pushy-submenu',
+ u = 'pushy-submenu-open',
+ v = 'pushy-submenu-closed';
+ a(t);
+ a(document).keyup(function (a) {
+ 27 == a.keyCode && (h.hasClass(l) || h.hasClass(m)) && (w ? c() : (e(), (x = !1)), p && p.focus());
+ });
+ var w = (function () {
+ var a = document.createElement('p'),
+ b = !1,
+ c = {
+ webkitTransform: '-webkit-transform',
+ OTransform: '-o-transform',
+ msTransform: '-ms-transform',
+ MozTransform: '-moz-transform',
+ transform: 'transform',
+ };
+ if (null !== document.body) {
+ document.body.insertBefore(a, null);
+ for (var d in c)
+ void 0 !== a.style[d] &&
+ ((a.style[d] = 'translate3d(1px,1px,1px)'), (b = window.getComputedStyle(a).getPropertyValue(c[d])));
+ return document.body.removeChild(a), void 0 !== b && b.length > 0 && 'none' !== b;
}
+ return !1;
+ })();
+ if (w)
+ f(),
+ o.on('click', function () {
+ b();
+ }),
+ n.on('click', function () {
+ b();
+ });
+ else {
+ h.addClass('no-csstransforms3d'),
+ g.hasClass(k)
+ ? g.css({
+ left: '-' + s,
+ })
+ : g.css({
+ right: '-' + s,
+ }),
+ i.css({
+ 'overflow-x': 'hidden',
+ });
+ var x = !1;
+ f(),
+ o.on('click', function () {
+ x ? (e(), (x = !1)) : (d(), (x = !0));
+ }),
+ n.on('click', function () {
+ x ? (e(), (x = !1)) : (d(), (x = !0));
+ });
+ }
})(jQuery);
diff --git a/dev/scss/_common-imports.scss b/dev/scss/_common-imports.scss
deleted file mode 100644
index cdf4d0f..0000000
--- a/dev/scss/_common-imports.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import '../../node_modules/bootstrap/scss/functions';
-
-// Vendors4
-@import 'variables';
-@import '../../node_modules/bootstrap/scss/mixins';
-
-// Mixins
-@import 'mixins/mixins';
diff --git a/dev/scss/_common.scss b/dev/scss/_common.scss
new file mode 100644
index 0000000..8b5316b
--- /dev/null
+++ b/dev/scss/_common.scss
@@ -0,0 +1,10 @@
+// Configuration
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import 'bootstrap/scss/functions';
+
+// 2. Include any default variable overrides here
+@import 'settings/bootstrap-variables';
+// 3. Include remainder of required Bootstrap stylesheets
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
diff --git a/dev/scss/_components.scss b/dev/scss/_components.scss
new file mode 100644
index 0000000..79af757
--- /dev/null
+++ b/dev/scss/_components.scss
@@ -0,0 +1,5 @@
+//Add Common Components Here
+@import 'components/buttons';
+@import 'components/custom-select';
+@import 'components/forms';
+@import 'components/modal';
diff --git a/dev/scss/_custom.scss b/dev/scss/_custom.scss
new file mode 100644
index 0000000..b6725c7
--- /dev/null
+++ b/dev/scss/_custom.scss
@@ -0,0 +1,143 @@
+/* ==============================================
+ /**
+ * CONTENTS
+ *
+ * 1.SETTINGS
+ * Path............... Project-level path and variables.
+ * Global Vars................. Global variables
+ *
+ *
+ * 2.TOOLS
+ * Font-size............A mixin which guarantees baseline-friendly line-heights.
+ * Clearfix.............Micro clearfix mixin.
+ * Hidden...............Mixin for hiding elements.
+ * Sass MQ..............inuitcss’ default media query manager.
+ *
+ * 3.GENERIC
+ *
+ * Reboot........ //A level playing field using @necolas’ Normalize.css. used by bootstrap
+ * fonts................ Fonts Used on site
+ * Icons - Icon used on site
+ *
+ * 4.ELEMENTS
+ * Page.................Set up our document’s default `font-size` and
+ * `line-height`.
+ * Headings.............Very minimal (i.e. only font-size information) for
+ * headings 1 through 6.
+ * Images...............Base image styles.
+ * Tables...............Simple table styles.
+ *
+ * 5.Layout
+ * header.............. Page Global Header.
+ * Footer............... Page Global Footer.
+ * main................ Page Main Content Area
+ * offcanvas................. Offcanvas Layout used on Global Component
+ * Post ............ Default Post Layout // Wordpress
+ * Post Basic.......... Post Basic Css // Wordpress
+ * Post Restricted .................. Post Restricted. // Wordpress
+ * Block................Image-on-top-of-text object.
+ * Ratio................A container for maintaining aspect ratio of content.
+ * Crop.................Provide a cropping context for media (images, etc.).
+ * Table................Classes for manipulating `table`s.
+ * Pack.................Pack items into available horizontal space.
+ *
+ * 6.modules
+ * MODULES.............. Module to be used on Block Level
+ *
+ * 7.COMPONENTS
+ * Buttons.............. Button Component with variation
+ *
+ * 8.UTILITIES
+ * Clearfix.............Bind our clearfix onto a utility class.
+ * Widths...............Simple width helper classes.
+ * Headings.............Reassigning our heading styles to helper classes.
+ * Spacings.............Nudge bits of the DOM around with these spacing
+ * classes.
+ * Responsive-Spacings..Enhances the function of normal spacings for
+ * responsive usage.
+ * Print................Reset-like styles taken from the HTML5 Boilerplate.
+ * Hide.................Helper classes to hide content
+
+ ============================================== */
+
+// 1. Settings
+@import 'settings/path';
+@import 'settings/global-vars';
+// Custom variable Bootstrapped Only
+@import './../../node_modules/bootstrap/scss/functions';
+@import 'settings/bootstrap-variables';
+@import 'settings/token';
+
+// Bootstrap Functions
+@import './../../node_modules/bootstrap/scss/variables';
+@import './../../node_modules/bootstrap/scss/variables-dark';
+
+// Include bootstrap remainder of variables
+@import './../../node_modules/bootstrap/scss/maps';
+
+// 2. Tools : Include remainder of required parts Tools
+@import './../../node_modules/bootstrap/scss/mixins';
+@import './../../node_modules/bootstrap/scss/reboot';
+@import 'tools/mixins';
+@import 'tools/placeholders';
+// Mixins to create styles from tokens
+@import 'tools/token/breakpoints';
+@import 'tools/token/font';
+@import 'tools/token/grid';
+@import 'tools/token/typography';
+@import 'tools/token/generator';
+
+//3. generic
+// @import './../../node_modules/bootstrap/scss/root';
+// Root scss
+@import 'generic/system.scss';
+
+// Normalize Scss
+@import 'generic/icons/icons';
+
+// 4. Elements
+// @import 'elements/type';
+@import './../../node_modules/bootstrap/scss/images';
+@import 'elements/grids';
+@import 'elements/config';
+
+/** Extra layer of bootstrap Only */
+@import './../../node_modules/bootstrap/scss/containers';
+@import './../../node_modules/bootstrap/scss/grid';
+@import './../../node_modules/bootstrap/scss/helpers';
+@import './../../node_modules/bootstrap/scss/list-group';
+@import './../../node_modules/bootstrap/scss/dropdown';
+@import './../../node_modules/bootstrap/scss/transitions';
+
+// 5 . Common Layout
+@import './layout';
+
+// 6 . Common Module
+@import './module';
+
+// 6 . Common Component
+@import './components';
+
+// 7. Utilities
+@import './utilities';
+
+@import './../../node_modules/bootstrap/scss/utilities';
+
+// 8. Utitlities Override
+/* stylelint-disable */
+$utilities: map-merge(
+ $utilities,
+ (
+ 'cursor': (
+ property: cursor,
+ class: cursor,
+ responsive: true,
+ values: auto pointer grab,
+ ),
+ )
+);
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import './../../node_modules/bootstrap/scss/utilities/api';
+
+// Don't Add anything below this.
diff --git a/dev/scss/_layout.scss b/dev/scss/_layout.scss
new file mode 100644
index 0000000..adf5f81
--- /dev/null
+++ b/dev/scss/_layout.scss
@@ -0,0 +1,8 @@
+//Add Common Components Here
+@import 'layout/header';
+@import 'layout/offcanvas';
+@import 'layout/footer';
+@import 'layout/main';
+@import 'layout/post';
+@import 'layout/post-restricted';
+@import 'layout/post-basic';
diff --git a/dev/scss/_module.scss b/dev/scss/_module.scss
new file mode 100644
index 0000000..31a7bd6
--- /dev/null
+++ b/dev/scss/_module.scss
@@ -0,0 +1 @@
+//Add Common module Here
diff --git a/dev/scss/_utilities.scss b/dev/scss/_utilities.scss
new file mode 100644
index 0000000..2cde91e
--- /dev/null
+++ b/dev/scss/_utilities.scss
@@ -0,0 +1,4 @@
+//Add Common Modules/Components Here
+
+@import 'utilities/helper';
+@import 'elements/type';
diff --git a/dev/scss/_variables.scss b/dev/scss/_variables.scss
deleted file mode 100644
index e021836..0000000
--- a/dev/scss/_variables.scss
+++ /dev/null
@@ -1,1634 +0,0 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Color system
-
-// scss-docs-start gray-color-variables
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-// scss-docs-end gray-color-variables
-
-// fusv-disable
-// scss-docs-start gray-colors-map
-$grays: (
- "100": $gray-100,
- "200": $gray-200,
- "300": $gray-300,
- "400": $gray-400,
- "500": $gray-500,
- "600": $gray-600,
- "700": $gray-700,
- "800": $gray-800,
- "900": $gray-900
-) !default;
-// scss-docs-end gray-colors-map
-// fusv-enable
-
-// scss-docs-start color-variables
-$blue: #0d6efd !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #d63384 !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #198754 !default;
-$teal: #20c997 !default;
-$cyan: #0dcaf0 !default;
-// scss-docs-end color-variables
-
-// scss-docs-start colors-map
-$colors: (
- "blue": $blue,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan,
- "black": $black,
- "white": $white,
- "gray": $gray-600,
- "gray-dark": $gray-800
-) !default;
-// scss-docs-end colors-map
-
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio: 4.5 !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark: $black !default;
-$color-contrast-light: $white !default;
-
-// fusv-disable
-$blue-100: tint-color($blue, 80%) !default;
-$blue-200: tint-color($blue, 60%) !default;
-$blue-300: tint-color($blue, 40%) !default;
-$blue-400: tint-color($blue, 20%) !default;
-$blue-500: $blue !default;
-$blue-600: shade-color($blue, 20%) !default;
-$blue-700: shade-color($blue, 40%) !default;
-$blue-800: shade-color($blue, 60%) !default;
-$blue-900: shade-color($blue, 80%) !default;
-
-$indigo-100: tint-color($indigo, 80%) !default;
-$indigo-200: tint-color($indigo, 60%) !default;
-$indigo-300: tint-color($indigo, 40%) !default;
-$indigo-400: tint-color($indigo, 20%) !default;
-$indigo-500: $indigo !default;
-$indigo-600: shade-color($indigo, 20%) !default;
-$indigo-700: shade-color($indigo, 40%) !default;
-$indigo-800: shade-color($indigo, 60%) !default;
-$indigo-900: shade-color($indigo, 80%) !default;
-
-$purple-100: tint-color($purple, 80%) !default;
-$purple-200: tint-color($purple, 60%) !default;
-$purple-300: tint-color($purple, 40%) !default;
-$purple-400: tint-color($purple, 20%) !default;
-$purple-500: $purple !default;
-$purple-600: shade-color($purple, 20%) !default;
-$purple-700: shade-color($purple, 40%) !default;
-$purple-800: shade-color($purple, 60%) !default;
-$purple-900: shade-color($purple, 80%) !default;
-
-$pink-100: tint-color($pink, 80%) !default;
-$pink-200: tint-color($pink, 60%) !default;
-$pink-300: tint-color($pink, 40%) !default;
-$pink-400: tint-color($pink, 20%) !default;
-$pink-500: $pink !default;
-$pink-600: shade-color($pink, 20%) !default;
-$pink-700: shade-color($pink, 40%) !default;
-$pink-800: shade-color($pink, 60%) !default;
-$pink-900: shade-color($pink, 80%) !default;
-
-$red-100: tint-color($red, 80%) !default;
-$red-200: tint-color($red, 60%) !default;
-$red-300: tint-color($red, 40%) !default;
-$red-400: tint-color($red, 20%) !default;
-$red-500: $red !default;
-$red-600: shade-color($red, 20%) !default;
-$red-700: shade-color($red, 40%) !default;
-$red-800: shade-color($red, 60%) !default;
-$red-900: shade-color($red, 80%) !default;
-
-$orange-100: tint-color($orange, 80%) !default;
-$orange-200: tint-color($orange, 60%) !default;
-$orange-300: tint-color($orange, 40%) !default;
-$orange-400: tint-color($orange, 20%) !default;
-$orange-500: $orange !default;
-$orange-600: shade-color($orange, 20%) !default;
-$orange-700: shade-color($orange, 40%) !default;
-$orange-800: shade-color($orange, 60%) !default;
-$orange-900: shade-color($orange, 80%) !default;
-
-$yellow-100: tint-color($yellow, 80%) !default;
-$yellow-200: tint-color($yellow, 60%) !default;
-$yellow-300: tint-color($yellow, 40%) !default;
-$yellow-400: tint-color($yellow, 20%) !default;
-$yellow-500: $yellow !default;
-$yellow-600: shade-color($yellow, 20%) !default;
-$yellow-700: shade-color($yellow, 40%) !default;
-$yellow-800: shade-color($yellow, 60%) !default;
-$yellow-900: shade-color($yellow, 80%) !default;
-
-$green-100: tint-color($green, 80%) !default;
-$green-200: tint-color($green, 60%) !default;
-$green-300: tint-color($green, 40%) !default;
-$green-400: tint-color($green, 20%) !default;
-$green-500: $green !default;
-$green-600: shade-color($green, 20%) !default;
-$green-700: shade-color($green, 40%) !default;
-$green-800: shade-color($green, 60%) !default;
-$green-900: shade-color($green, 80%) !default;
-
-$teal-100: tint-color($teal, 80%) !default;
-$teal-200: tint-color($teal, 60%) !default;
-$teal-300: tint-color($teal, 40%) !default;
-$teal-400: tint-color($teal, 20%) !default;
-$teal-500: $teal !default;
-$teal-600: shade-color($teal, 20%) !default;
-$teal-700: shade-color($teal, 40%) !default;
-$teal-800: shade-color($teal, 60%) !default;
-$teal-900: shade-color($teal, 80%) !default;
-
-$cyan-100: tint-color($cyan, 80%) !default;
-$cyan-200: tint-color($cyan, 60%) !default;
-$cyan-300: tint-color($cyan, 40%) !default;
-$cyan-400: tint-color($cyan, 20%) !default;
-$cyan-500: $cyan !default;
-$cyan-600: shade-color($cyan, 20%) !default;
-$cyan-700: shade-color($cyan, 40%) !default;
-$cyan-800: shade-color($cyan, 60%) !default;
-$cyan-900: shade-color($cyan, 80%) !default;
-
-$blues: (
- "blue-100": $blue-100,
- "blue-200": $blue-200,
- "blue-300": $blue-300,
- "blue-400": $blue-400,
- "blue-500": $blue-500,
- "blue-600": $blue-600,
- "blue-700": $blue-700,
- "blue-800": $blue-800,
- "blue-900": $blue-900
-) !default;
-
-$indigos: (
- "indigo-100": $indigo-100,
- "indigo-200": $indigo-200,
- "indigo-300": $indigo-300,
- "indigo-400": $indigo-400,
- "indigo-500": $indigo-500,
- "indigo-600": $indigo-600,
- "indigo-700": $indigo-700,
- "indigo-800": $indigo-800,
- "indigo-900": $indigo-900
-) !default;
-
-$purples: (
- "purple-100": $purple-100,
- "purple-200": $purple-200,
- "purple-300": $purple-300,
- "purple-400": $purple-400,
- "purple-500": $purple-500,
- "purple-600": $purple-600,
- "purple-700": $purple-700,
- "purple-800": $purple-800,
- "purple-900": $purple-900
-) !default;
-
-$pinks: (
- "pink-100": $pink-100,
- "pink-200": $pink-200,
- "pink-300": $pink-300,
- "pink-400": $pink-400,
- "pink-500": $pink-500,
- "pink-600": $pink-600,
- "pink-700": $pink-700,
- "pink-800": $pink-800,
- "pink-900": $pink-900
-) !default;
-
-$reds: (
- "red-100": $red-100,
- "red-200": $red-200,
- "red-300": $red-300,
- "red-400": $red-400,
- "red-500": $red-500,
- "red-600": $red-600,
- "red-700": $red-700,
- "red-800": $red-800,
- "red-900": $red-900
-) !default;
-
-$oranges: (
- "orange-100": $orange-100,
- "orange-200": $orange-200,
- "orange-300": $orange-300,
- "orange-400": $orange-400,
- "orange-500": $orange-500,
- "orange-600": $orange-600,
- "orange-700": $orange-700,
- "orange-800": $orange-800,
- "orange-900": $orange-900
-) !default;
-
-$yellows: (
- "yellow-100": $yellow-100,
- "yellow-200": $yellow-200,
- "yellow-300": $yellow-300,
- "yellow-400": $yellow-400,
- "yellow-500": $yellow-500,
- "yellow-600": $yellow-600,
- "yellow-700": $yellow-700,
- "yellow-800": $yellow-800,
- "yellow-900": $yellow-900
-) !default;
-
-$greens: (
- "green-100": $green-100,
- "green-200": $green-200,
- "green-300": $green-300,
- "green-400": $green-400,
- "green-500": $green-500,
- "green-600": $green-600,
- "green-700": $green-700,
- "green-800": $green-800,
- "green-900": $green-900
-) !default;
-
-$teals: (
- "teal-100": $teal-100,
- "teal-200": $teal-200,
- "teal-300": $teal-300,
- "teal-400": $teal-400,
- "teal-500": $teal-500,
- "teal-600": $teal-600,
- "teal-700": $teal-700,
- "teal-800": $teal-800,
- "teal-900": $teal-900
-) !default;
-
-$cyans: (
- "cyan-100": $cyan-100,
- "cyan-200": $cyan-200,
- "cyan-300": $cyan-300,
- "cyan-400": $cyan-400,
- "cyan-500": $cyan-500,
- "cyan-600": $cyan-600,
- "cyan-700": $cyan-700,
- "cyan-800": $cyan-800,
- "cyan-900": $cyan-900
-) !default;
-// fusv-enable
-
-// scss-docs-start theme-color-variables
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-900 !default;
-// scss-docs-end theme-color-variables
-
-// scss-docs-start theme-colors-map
-$theme-colors: (
- "primary": $primary,
- "secondary": $secondary,
- "success": $success,
- "info": $info,
- "warning": $warning,
- "danger": $danger,
- "light": $light,
- "dark": $dark
-) !default;
-// scss-docs-end theme-colors-map
-
-// Characters which are escaped by the escape-svg function
-$escaped-characters: (
- ("<", "%3c"),
- (">", "%3e"),
- ("#", "%23"),
- ("(", "%28"),
- (")", "%29"),
-) !default;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-reduced-motion: true !default;
-$enable-smooth-scroll: true !default;
-$enable-grid-classes: true !default;
-$enable-container-classes: true !default;
-$enable-cssgrid: false !default;
-$enable-button-pointers: true !default;
-$enable-rfs: true !default;
-$enable-validation-icons: true !default;
-$enable-negative-margins: false !default;
-$enable-deprecation-messages: true !default;
-$enable-important-utilities: true !default;
-
-// Prefix for :root CSS variables
-
-$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix: $variable-prefix !default;
-
-// Gradient
-//
-// The gradient which is added to components if `$enable-gradients` is `true`
-// This gradient is also added to elements with `.bg-gradient`
-// scss-docs-start variable-gradient
-$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
-// scss-docs-end variable-gradient
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// scss-docs-start spacer-variables-maps
-$spacer: 1rem !default;
-$spacers: (
- 0: 0,
- 1: $spacer * .25,
- 2: $spacer * .5,
- 3: $spacer,
- 4: $spacer * 1.5,
- 5: $spacer * 3,
-) !default;
-// scss-docs-end spacer-variables-maps
-
-// Position
-//
-// Define the edge positioning anchors of the position utilities.
-
-// scss-docs-start position-map
-$position-values: (
- 0: 0,
- 50: 50%,
- 100: 100%
-) !default;
-// scss-docs-end position-map
-
-// Body
-//
-// Settings for the `` element.
-
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
-$body-text-align: null !default;
-
-// Links
-//
-// Style anchor elements.
-
-$link-color: $primary !default;
-$link-decoration: underline !default;
-$link-shade-percentage: 20% !default;
-$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
-$link-hover-decoration: null !default;
-
-$stretched-link-pseudo-element: after !default;
-$stretched-link-z-index: 1 !default;
-
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom: 1rem !default;
-
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-// scss-docs-start grid-breakpoints
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1400px
-) !default;
-// scss-docs-end grid-breakpoints
-
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-// scss-docs-start container-max-widths
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px,
- xxl: 1320px
-) !default;
-// scss-docs-end container-max-widths
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
-$grid-row-columns: 6 !default;
-
-// Container padding
-
-$container-padding-x: $grid-gutter-width !default;
-
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-// scss-docs-start border-variables
-$border-width: 1px !default;
-$border-widths: (
- 1: 1px,
- 2: 2px,
- 3: 3px,
- 4: 4px,
- 5: 5px
-) !default;
-
-$border-style: solid !default;
-$border-color: $gray-300 !default;
-$border-color-translucent: rgba($black, .175) !default;
-// scss-docs-end border-variables
-
-// scss-docs-start border-radius-variables
-$border-radius: .375rem !default;
-$border-radius-sm: .25rem !default;
-$border-radius-lg: .5rem !default;
-$border-radius-xl: 1rem !default;
-$border-radius-2xl: 2rem !default;
-$border-radius-pill: 50rem !default;
-// scss-docs-end border-radius-variables
-
-// scss-docs-start box-shadow-variables
-$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
-// scss-docs-end box-shadow-variables
-
-$component-active-color: $white !default;
-$component-active-bg: $primary !default;
-
-// scss-docs-start caret-variables
-$caret-width: .3em !default;
-$caret-vertical-align: $caret-width * .85 !default;
-$caret-spacing: $caret-width * .85 !default;
-// scss-docs-end caret-variables
-
-$transition-base: all .2s ease-in-out !default;
-$transition-fade: opacity .15s linear !default;
-// scss-docs-start collapse-transition
-$transition-collapse: height .35s ease !default;
-$transition-collapse-width: width .35s ease !default;
-// scss-docs-end collapse-transition
-
-// stylelint-disable function-disallowed-list
-// scss-docs-start aspect-ratios
-$aspect-ratios: (
- "1x1": 100%,
- "4x3": calc(3 / 4 * 100%),
- "16x9": calc(9 / 16 * 100%),
- "21x9": calc(9 / 21 * 100%)
-) !default;
-// scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// scss-docs-start font-variables
-// stylelint-disable value-keyword-case
-$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// stylelint-enable value-keyword-case
-$font-family-base: var(--#{$prefix}font-sans-serif) !default;
-$font-family-code: var(--#{$prefix}font-monospace) !default;
-
-// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
-// $font-size-base affects the font size of the body text
-$font-size-root: null !default;
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm: $font-size-base * .875 !default;
-$font-size-lg: $font-size-base * 1.25 !default;
-
-$font-weight-lighter: lighter !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-bolder: bolder !default;
-
-$font-weight-base: $font-weight-normal !default;
-
-$line-height-base: 1.5 !default;
-$line-height-sm: 1.25 !default;
-$line-height-lg: 2 !default;
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
-$font-sizes: (
- 1: $h1-font-size,
- 2: $h2-font-size,
- 3: $h3-font-size,
- 4: $h4-font-size,
- 5: $h5-font-size,
- 6: $h6-font-size
-) !default;
-// scss-docs-end font-sizes
-
-// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer * .5 !default;
-$headings-font-family: null !default;
-$headings-font-style: null !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
-$headings-color: null !default;
-// scss-docs-end headings-variables
-
-// scss-docs-start display-headings
-$display-font-sizes: (
- 1: 5rem,
- 2: 4.5rem,
- 3: 4rem,
- 4: 3.5rem,
- 5: 3rem,
- 6: 2.5rem
-) !default;
-
-$display-font-family: null !default;
-$display-font-style: null !default;
-$display-font-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
-// scss-docs-end display-headings
-
-// scss-docs-start type-variables
-$lead-font-size: $font-size-base * 1.25 !default;
-$lead-font-weight: 300 !default;
-
-$small-font-size: .875em !default;
-
-$sub-sup-font-size: .75em !default;
-
-$text-muted: $gray-600 !default;
-
-$initialism-font-size: $small-font-size !default;
-
-$blockquote-margin-y: $spacer !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
-$blockquote-footer-color: $gray-600 !default;
-$blockquote-footer-font-size: $small-font-size !default;
-
-$hr-margin-y: $spacer !default;
-$hr-color: inherit !default;
-
-// fusv-disable
-$hr-bg-color: null !default; // Deprecated in v5.2.0
-$hr-height: null !default; // Deprecated in v5.2.0
-// fusv-enable
-
-$hr-border-color: null !default; // Allows for inherited colors
-$hr-border-width: $border-width !default;
-$hr-opacity: .25 !default;
-
-$legend-margin-bottom: .5rem !default;
-$legend-font-size: 1.5rem !default;
-$legend-font-weight: null !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-$list-inline-padding: .5rem !default;
-
-$mark-padding: .1875em !default;
-$mark-bg: $yellow-100 !default;
-// scss-docs-end type-variables
-
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-// scss-docs-start table-variables
-$table-cell-padding-y: .5rem !default;
-$table-cell-padding-x: .5rem !default;
-$table-cell-padding-y-sm: .25rem !default;
-$table-cell-padding-x-sm: .25rem !default;
-
-$table-cell-vertical-align: top !default;
-
-$table-color: var(--#{$prefix}body-color) !default;
-$table-bg: transparent !default;
-$table-accent-bg: transparent !default;
-
-$table-th-font-weight: null !default;
-
-$table-striped-color: $table-color !default;
-$table-striped-bg-factor: .05 !default;
-$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
-
-$table-active-color: $table-color !default;
-$table-active-bg-factor: .1 !default;
-$table-active-bg: rgba($black, $table-active-bg-factor) !default;
-
-$table-hover-color: $table-color !default;
-$table-hover-bg-factor: .075 !default;
-$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
-
-$table-border-factor: .1 !default;
-$table-border-width: $border-width !default;
-$table-border-color: var(--#{$prefix}border-color) !default;
-
-$table-striped-order: odd !default;
-$table-striped-columns-order: even !default;
-
-$table-group-separator-color: currentcolor !default;
-
-$table-caption-color: $text-muted !default;
-
-$table-bg-scale: -80% !default;
-// scss-docs-end table-variables
-
-// scss-docs-start table-loop
-$table-variants: (
- "primary": shift-color($primary, $table-bg-scale),
- "secondary": shift-color($secondary, $table-bg-scale),
- "success": shift-color($success, $table-bg-scale),
- "info": shift-color($info, $table-bg-scale),
- "warning": shift-color($warning, $table-bg-scale),
- "danger": shift-color($danger, $table-bg-scale),
- "light": $light,
- "dark": $dark,
-) !default;
-// scss-docs-end table-loop
-
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-y: .375rem !default;
-$input-btn-padding-x: .75rem !default;
-$input-btn-font-family: null !default;
-$input-btn-font-size: $font-size-base !default;
-$input-btn-line-height: $line-height-base !default;
-
-$input-btn-focus-width: .25rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-blur: 0 !default;
-$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm: .25rem !default;
-$input-btn-padding-x-sm: .5rem !default;
-$input-btn-font-size-sm: $font-size-sm !default;
-
-$input-btn-padding-y-lg: .5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-font-size-lg: $font-size-lg !default;
-
-$input-btn-border-width: $border-width !default;
-// scss-docs-end input-btn-variables
-
-
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-// scss-docs-start btn-variables
-$btn-padding-y: $input-btn-padding-y !default;
-$btn-padding-x: $input-btn-padding-x !default;
-$btn-font-family: $input-btn-font-family !default;
-$btn-font-size: $input-btn-font-size !default;
-$btn-line-height: $input-btn-line-height !default;
-$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
-$btn-font-size-sm: $input-btn-font-size-sm !default;
-
-$btn-padding-y-lg: $input-btn-padding-y-lg !default;
-$btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-font-size-lg: $input-btn-font-size-lg !default;
-
-$btn-border-width: $input-btn-border-width !default;
-
-$btn-font-weight: $font-weight-normal !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width: $input-btn-focus-width !default;
-$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity: .65 !default;
-$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-color: var(--#{$prefix}link-color) !default;
-$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color: $gray-600 !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius: $border-radius !default;
-$btn-border-radius-sm: $border-radius-sm !default;
-$btn-border-radius-lg: $border-radius-lg !default;
-
-$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$btn-hover-bg-shade-amount: 15% !default;
-$btn-hover-bg-tint-amount: 15% !default;
-$btn-hover-border-shade-amount: 20% !default;
-$btn-hover-border-tint-amount: 10% !default;
-$btn-active-bg-shade-amount: 20% !default;
-$btn-active-bg-tint-amount: 20% !default;
-$btn-active-border-shade-amount: 25% !default;
-$btn-active-border-tint-amount: 10% !default;
-// scss-docs-end btn-variables
-
-
-// Forms
-
-// scss-docs-start form-text-variables
-$form-text-margin-top: .25rem !default;
-$form-text-font-size: $small-font-size !default;
-$form-text-font-style: null !default;
-$form-text-font-weight: null !default;
-$form-text-color: $text-muted !default;
-// scss-docs-end form-text-variables
-
-// scss-docs-start form-label-variables
-$form-label-margin-bottom: .5rem !default;
-$form-label-font-size: null !default;
-$form-label-font-style: null !default;
-$form-label-font-weight: null !default;
-$form-label-color: null !default;
-// scss-docs-end form-label-variables
-
-// scss-docs-start form-input-variables
-$input-padding-y: $input-btn-padding-y !default;
-$input-padding-x: $input-btn-padding-x !default;
-$input-font-family: $input-btn-font-family !default;
-$input-font-size: $input-btn-font-size !default;
-$input-font-weight: $font-weight-base !default;
-$input-line-height: $input-btn-line-height !default;
-
-$input-padding-y-sm: $input-btn-padding-y-sm !default;
-$input-padding-x-sm: $input-btn-padding-x-sm !default;
-$input-font-size-sm: $input-btn-font-size-sm !default;
-
-$input-padding-y-lg: $input-btn-padding-y-lg !default;
-$input-padding-x-lg: $input-btn-padding-x-lg !default;
-$input-font-size-lg: $input-btn-font-size-lg !default;
-
-$input-bg: $body-bg !default;
-$input-disabled-color: null !default;
-$input-disabled-bg: $gray-200 !default;
-$input-disabled-border-color: null !default;
-
-$input-color: $body-color !default;
-$input-border-color: $gray-400 !default;
-$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: $box-shadow-inset !default;
-
-$input-border-radius: $border-radius !default;
-$input-border-radius-sm: $border-radius-sm !default;
-$input-border-radius-lg: $border-radius-lg !default;
-
-$input-focus-bg: $input-bg !default;
-$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
-$input-focus-color: $input-color !default;
-$input-focus-width: $input-btn-focus-width !default;
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color: $gray-600 !default;
-$input-plaintext-color: $body-color !default;
-
-$input-height-border: $input-border-width * 2 !default;
-
-$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
-
-$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
-
-$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-color-width: 3rem !default;
-// scss-docs-end form-input-variables
-
-// scss-docs-start form-check-variables
-$form-check-input-width: 1em !default;
-$form-check-min-height: $font-size-base * $line-height-base !default;
-$form-check-padding-start: $form-check-input-width + .5em !default;
-$form-check-margin-bottom: .125rem !default;
-$form-check-label-color: null !default;
-$form-check-label-cursor: null !default;
-$form-check-transition: null !default;
-
-$form-check-input-active-filter: brightness(90%) !default;
-
-$form-check-input-bg: $input-bg !default;
-$form-check-input-border: 1px solid rgba($black, .25) !default;
-$form-check-input-border-radius: .25em !default;
-$form-check-radio-border-radius: 50% !default;
-$form-check-input-focus-border: $input-focus-border-color !default;
-$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$form-check-input-checked-color: $component-active-color !default;
-$form-check-input-checked-bg-color: $component-active-bg !default;
-$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
-$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
-
-$form-check-input-indeterminate-color: $component-active-color !default;
-$form-check-input-indeterminate-bg-color: $component-active-bg !default;
-$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
-
-$form-check-input-disabled-opacity: .5 !default;
-$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
-$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
-
-$form-check-inline-margin-end: 1rem !default;
-// scss-docs-end form-check-variables
-
-// scss-docs-start form-switch-variables
-$form-switch-color: rgba($black, .25) !default;
-$form-switch-width: 2em !default;
-$form-switch-padding-start: $form-switch-width + .5em !default;
-$form-switch-bg-image: url("data:image/svg+xml,") !default;
-$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition: background-position .15s ease-in-out !default;
-
-$form-switch-focus-color: $input-focus-border-color !default;
-$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
-
-$form-switch-checked-color: $component-active-color !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
-$form-switch-checked-bg-position: right center !default;
-// scss-docs-end form-switch-variables
-
-// scss-docs-start input-group-variables
-$input-group-addon-padding-y: $input-padding-y !default;
-$input-group-addon-padding-x: $input-padding-x !default;
-$input-group-addon-font-weight: $input-font-weight !default;
-$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: $gray-200 !default;
-$input-group-addon-border-color: $input-border-color !default;
-// scss-docs-end input-group-variables
-
-// scss-docs-start form-select-variables
-$form-select-padding-y: $input-padding-y !default;
-$form-select-padding-x: $input-padding-x !default;
-$form-select-font-family: $input-font-family !default;
-$form-select-font-size: $input-font-size !default;
-$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
-$form-select-font-weight: $input-font-weight !default;
-$form-select-line-height: $input-line-height !default;
-$form-select-color: $input-color !default;
-$form-select-bg: $input-bg !default;
-$form-select-disabled-color: null !default;
-$form-select-disabled-bg: $gray-200 !default;
-$form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position: right $form-select-padding-x center !default;
-$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
-$form-select-indicator-color: $gray-800 !default;
-$form-select-indicator: url("data:image/svg+xml,") !default;
-
-$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
-$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
-$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
-
-$form-select-border-width: $input-border-width !default;
-$form-select-border-color: $input-border-color !default;
-$form-select-border-radius: $input-border-radius !default;
-$form-select-box-shadow: $box-shadow-inset !default;
-
-$form-select-focus-border-color: $input-focus-border-color !default;
-$form-select-focus-width: $input-focus-width !default;
-$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
-
-$form-select-padding-y-sm: $input-padding-y-sm !default;
-$form-select-padding-x-sm: $input-padding-x-sm !default;
-$form-select-font-size-sm: $input-font-size-sm !default;
-$form-select-border-radius-sm: $input-border-radius-sm !default;
-
-$form-select-padding-y-lg: $input-padding-y-lg !default;
-$form-select-padding-x-lg: $input-padding-x-lg !default;
-$form-select-font-size-lg: $input-font-size-lg !default;
-$form-select-border-radius-lg: $input-border-radius-lg !default;
-
-$form-select-transition: $input-transition !default;
-// scss-docs-end form-select-variables
-
-// scss-docs-start form-range-variables
-$form-range-track-width: 100% !default;
-$form-range-track-height: .5rem !default;
-$form-range-track-cursor: pointer !default;
-$form-range-track-bg: $gray-300 !default;
-$form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: $box-shadow-inset !default;
-
-$form-range-thumb-width: 1rem !default;
-$form-range-thumb-height: $form-range-thumb-width !default;
-$form-range-thumb-bg: $component-active-bg !default;
-$form-range-thumb-border: 0 !default;
-$form-range-thumb-border-radius: 1rem !default;
-$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg: $gray-500 !default;
-$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end form-range-variables
-
-// scss-docs-start form-file-variables
-$form-file-button-color: $input-color !default;
-$form-file-button-bg: $input-group-addon-bg !default;
-$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
-// scss-docs-end form-file-variables
-
-// scss-docs-start form-floating-variables
-$form-floating-height: add(3.5rem, $input-height-border) !default;
-$form-floating-line-height: 1.25 !default;
-$form-floating-padding-x: $input-padding-x !default;
-$form-floating-padding-y: 1rem !default;
-$form-floating-input-padding-t: 1.625rem !default;
-$form-floating-input-padding-b: .625rem !default;
-$form-floating-label-opacity: .65 !default;
-$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
-// scss-docs-end form-floating-variables
-
-// Form validation
-
-// scss-docs-start form-feedback-variables
-$form-feedback-margin-top: $form-text-margin-top !default;
-$form-feedback-font-size: $form-text-font-size !default;
-$form-feedback-font-style: $form-text-font-style !default;
-$form-feedback-valid-color: $success !default;
-$form-feedback-invalid-color: $danger !default;
-
-$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
-$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
-$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
-// scss-docs-end form-feedback-variables
-
-// scss-docs-start form-validation-states
-$form-validation-states: (
- "valid": (
- "color": $form-feedback-valid-color,
- "icon": $form-feedback-icon-valid
- ),
- "invalid": (
- "color": $form-feedback-invalid-color,
- "icon": $form-feedback-icon-invalid
- )
-) !default;
-// scss-docs-end form-validation-states
-
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-// scss-docs-start zindex-stack
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-offcanvas-backdrop: 1040 !default;
-$zindex-offcanvas: 1045 !default;
-$zindex-modal-backdrop: 1050 !default;
-$zindex-modal: 1055 !default;
-$zindex-popover: 1070 !default;
-$zindex-tooltip: 1080 !default;
-$zindex-toast: 1090 !default;
-// scss-docs-end zindex-stack
-
-
-// Navs
-
-// scss-docs-start nav-variables
-$nav-link-padding-y: .5rem !default;
-$nav-link-padding-x: 1rem !default;
-$nav-link-font-size: null !default;
-$nav-link-font-weight: null !default;
-$nav-link-color: var(--#{$prefix}link-color) !default;
-$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color: $gray-600 !default;
-
-$nav-tabs-border-color: $gray-300 !default;
-$nav-tabs-border-width: $border-width !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $gray-700 !default;
-$nav-tabs-link-active-bg: $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius: $border-radius !default;
-$nav-pills-link-active-color: $component-active-color !default;
-$nav-pills-link-active-bg: $component-active-bg !default;
-// scss-docs-end nav-variables
-
-
-// Navbar
-
-// scss-docs-start navbar-variables
-$navbar-padding-y: $spacer * .5 !default;
-$navbar-padding-x: null !default;
-
-$navbar-nav-link-padding-x: .5rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-margin-end: 1rem !default;
-
-$navbar-toggler-padding-y: .25rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: $btn-border-radius !default;
-$navbar-toggler-focus-width: $btn-focus-width !default;
-$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-
-$navbar-light-color: rgba($black, .55) !default;
-$navbar-light-hover-color: rgba($black, .7) !default;
-$navbar-light-active-color: rgba($black, .9) !default;
-$navbar-light-disabled-color: rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-$navbar-light-brand-color: $navbar-light-active-color !default;
-$navbar-light-brand-hover-color: $navbar-light-active-color !default;
-// scss-docs-end navbar-variables
-
-// scss-docs-start navbar-dark-variables
-$navbar-dark-color: rgba($white, .55) !default;
-$navbar-dark-hover-color: rgba($white, .75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
-$navbar-dark-toggler-border-color: rgba($white, .1) !default;
-$navbar-dark-brand-color: $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
-// scss-docs-end navbar-dark-variables
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-// scss-docs-start dropdown-variables
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-x: 0 !default;
-$dropdown-padding-y: .5rem !default;
-$dropdown-spacer: .125rem !default;
-$dropdown-font-size: $font-size-base !default;
-$dropdown-color: $body-color !default;
-$dropdown-bg: $white !default;
-$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius: $border-radius !default;
-$dropdown-border-width: $border-width !default;
-$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: $spacer * .5 !default;
-$dropdown-box-shadow: $box-shadow !default;
-
-$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg: $gray-200 !default;
-
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: $gray-500 !default;
-
-$dropdown-item-padding-y: $spacer * .25 !default;
-$dropdown-item-padding-x: $spacer !default;
-
-$dropdown-header-color: $gray-600 !default;
-$dropdown-header-padding-x: $dropdown-item-padding-x !default;
-$dropdown-header-padding-y: $dropdown-padding-y !default;
-// fusv-disable
-$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
-// fusv-enable
-// scss-docs-end dropdown-variables
-
-// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color: $gray-300 !default;
-$dropdown-dark-bg: $gray-800 !default;
-$dropdown-dark-border-color: $dropdown-border-color !default;
-$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow: null !default;
-$dropdown-dark-link-color: $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color: $white !default;
-$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
-$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color: $gray-500 !default;
-// scss-docs-end dropdown-dark-variables
-
-
-// Pagination
-
-// scss-docs-start pagination-variables
-$pagination-padding-y: .375rem !default;
-$pagination-padding-x: .75rem !default;
-$pagination-padding-y-sm: .25rem !default;
-$pagination-padding-x-sm: .5rem !default;
-$pagination-padding-y-lg: .75rem !default;
-$pagination-padding-x-lg: 1.5rem !default;
-
-$pagination-font-size: $font-size-base !default;
-
-$pagination-color: var(--#{$prefix}link-color) !default;
-$pagination-bg: $white !default;
-$pagination-border-radius: $border-radius !default;
-$pagination-border-width: $border-width !default;
-$pagination-margin-start: ($pagination-border-width * -1) !default;
-$pagination-border-color: $gray-300 !default;
-
-$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg: $gray-200 !default;
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$pagination-focus-outline: 0 !default;
-
-$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg: $gray-200 !default;
-$pagination-hover-border-color: $gray-300 !default;
-
-$pagination-active-color: $component-active-color !default;
-$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $pagination-active-bg !default;
-
-$pagination-disabled-color: $gray-600 !default;
-$pagination-disabled-bg: $white !default;
-$pagination-disabled-border-color: $gray-300 !default;
-
-$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$pagination-border-radius-sm: $border-radius-sm !default;
-$pagination-border-radius-lg: $border-radius-lg !default;
-// scss-docs-end pagination-variables
-
-
-// Placeholders
-
-// scss-docs-start placeholders
-$placeholder-opacity-max: .5 !default;
-$placeholder-opacity-min: .2 !default;
-// scss-docs-end placeholders
-
-// Cards
-
-// scss-docs-start card-variables
-$card-spacer-y: $spacer !default;
-$card-spacer-x: $spacer !default;
-$card-title-spacer-y: $spacer * .5 !default;
-$card-border-width: $border-width !default;
-$card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: $border-radius !default;
-$card-box-shadow: null !default;
-$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y: $card-spacer-y * .5 !default;
-$card-cap-padding-x: $card-spacer-x !default;
-$card-cap-bg: rgba($black, .03) !default;
-$card-cap-color: null !default;
-$card-height: null !default;
-$card-color: null !default;
-$card-bg: $white !default;
-$card-img-overlay-padding: $spacer !default;
-$card-group-margin: $grid-gutter-width * .5 !default;
-// scss-docs-end card-variables
-
-// Accordion
-
-// scss-docs-start accordion-variables
-$accordion-padding-y: 1rem !default;
-$accordion-padding-x: 1.25rem !default;
-$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
-$accordion-bg: $body-bg !default;
-$accordion-border-width: $border-width !default;
-$accordion-border-color: var(--#{$prefix}border-color) !default;
-$accordion-border-radius: $border-radius !default;
-$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
-
-$accordion-body-padding-y: $accordion-padding-y !default;
-$accordion-body-padding-x: $accordion-padding-x !default;
-
-$accordion-button-padding-y: $accordion-padding-y !default;
-$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: $accordion-color !default;
-$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
-$accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color: shade-color($primary, 10%) !default;
-
-$accordion-button-focus-border-color: $input-focus-border-color !default;
-$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
-
-$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-button-color !default;
-$accordion-icon-active-color: $accordion-button-active-color !default;
-$accordion-icon-transition: transform .2s ease-in-out !default;
-$accordion-icon-transform: rotate(-180deg) !default;
-
-$accordion-button-icon: url("data:image/svg+xml,") !default;
-$accordion-button-active-icon: url("data:image/svg+xml,") !default;
-// scss-docs-end accordion-variables
-
-// Tooltips
-
-// scss-docs-start tooltip-variables
-$tooltip-font-size: $font-size-sm !default;
-$tooltip-max-width: 200px !default;
-$tooltip-color: $white !default;
-$tooltip-bg: $black !default;
-$tooltip-border-radius: $border-radius !default;
-$tooltip-opacity: .9 !default;
-$tooltip-padding-y: $spacer * .25 !default;
-$tooltip-padding-x: $spacer * .5 !default;
-$tooltip-margin: null !default; // TODO: remove this in v6
-
-$tooltip-arrow-width: .8rem !default;
-$tooltip-arrow-height: .4rem !default;
-// fusv-disable
-$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
-// fusv-enable
-// scss-docs-end tooltip-variables
-
-// Form tooltips must come after regular tooltips
-// scss-docs-start tooltip-feedback-variables
-$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size: $tooltip-font-size !default;
-$form-feedback-tooltip-line-height: null !default;
-$form-feedback-tooltip-opacity: $tooltip-opacity !default;
-$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-end tooltip-feedback-variables
-
-
-// Popovers
-
-// scss-docs-start popover-variables
-$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
-$popover-max-width: 276px !default;
-$popover-border-width: $border-width !default;
-$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow: $box-shadow !default;
-
-$popover-header-font-size: $font-size-base !default;
-$popover-header-bg: shade-color($popover-bg, 6%) !default;
-$popover-header-color: $headings-color !default;
-$popover-header-padding-y: .5rem !default;
-$popover-header-padding-x: $spacer !default;
-
-$popover-body-color: $body-color !default;
-$popover-body-padding-y: $spacer !default;
-$popover-body-padding-x: $spacer !default;
-
-$popover-arrow-width: 1rem !default;
-$popover-arrow-height: .5rem !default;
-// scss-docs-end popover-variables
-
-// fusv-disable
-// Deprecated in Bootstrap 5.2.0 for CSS variables
-$popover-arrow-color: $popover-bg !default;
-$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
-// fusv-enable
-
-
-// Toasts
-
-// scss-docs-start toast-variables
-$toast-max-width: 350px !default;
-$toast-padding-x: .75rem !default;
-$toast-padding-y: .5rem !default;
-$toast-font-size: .875rem !default;
-$toast-color: null !default;
-$toast-background-color: rgba($white, .85) !default;
-$toast-border-width: $border-width !default;
-$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius: $border-radius !default;
-$toast-box-shadow: $box-shadow !default;
-$toast-spacing: $container-padding-x !default;
-
-$toast-header-color: $gray-600 !default;
-$toast-header-background-color: rgba($white, .85) !default;
-$toast-header-border-color: rgba($black, .05) !default;
-// scss-docs-end toast-variables
-
-
-// Badges
-
-// scss-docs-start badge-variables
-$badge-font-size: .75em !default;
-$badge-font-weight: $font-weight-bold !default;
-$badge-color: $white !default;
-$badge-padding-y: .35em !default;
-$badge-padding-x: .65em !default;
-$badge-border-radius: $border-radius !default;
-// scss-docs-end badge-variables
-
-
-// Modals
-
-// scss-docs-start modal-variables
-$modal-inner-padding: $spacer !default;
-
-$modal-footer-margin-between: .5rem !default;
-
-$modal-dialog-margin: .5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-$modal-content-color: null !default;
-$modal-content-bg: $white !default;
-$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-border-radius: $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs: $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up: $box-shadow !default;
-
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: .5 !default;
-
-$modal-header-border-color: var(--#{$prefix}border-color) !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-header-padding-y: $modal-inner-padding !default;
-$modal-header-padding-x: $modal-inner-padding !default;
-$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-
-$modal-footer-bg: null !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-
-$modal-sm: 300px !default;
-$modal-md: 500px !default;
-$modal-lg: 800px !default;
-$modal-xl: 1140px !default;
-
-$modal-fade-transform: translate(0, -50px) !default;
-$modal-show-transform: none !default;
-$modal-transition: transform .3s ease-out !default;
-$modal-scale-transform: scale(1.02) !default;
-// scss-docs-end modal-variables
-
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-// scss-docs-start alert-variables
-$alert-padding-y: $spacer !default;
-$alert-padding-x: $spacer !default;
-$alert-margin-bottom: 1rem !default;
-$alert-border-radius: $border-radius !default;
-$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: $border-width !default;
-$alert-bg-scale: -80% !default;
-$alert-border-scale: -70% !default;
-$alert-color-scale: 40% !default;
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
-// scss-docs-end alert-variables
-
-
-// Progress bars
-
-// scss-docs-start progress-variables
-$progress-height: 1rem !default;
-$progress-font-size: $font-size-base * .75 !default;
-$progress-bg: $gray-200 !default;
-$progress-border-radius: $border-radius !default;
-$progress-box-shadow: $box-shadow-inset !default;
-$progress-bar-color: $white !default;
-$progress-bar-bg: $primary !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition: width .6s ease !default;
-// scss-docs-end progress-variables
-
-
-// List group
-
-// scss-docs-start list-group-variables
-$list-group-color: $gray-900 !default;
-$list-group-bg: $white !default;
-$list-group-border-color: rgba($black, .125) !default;
-$list-group-border-width: $border-width !default;
-$list-group-border-radius: $border-radius !default;
-
-$list-group-item-padding-y: $spacer * .5 !default;
-$list-group-item-padding-x: $spacer !default;
-$list-group-item-bg-scale: -80% !default;
-$list-group-item-color-scale: 40% !default;
-
-$list-group-hover-bg: $gray-100 !default;
-$list-group-active-color: $component-active-color !default;
-$list-group-active-bg: $component-active-bg !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: $gray-600 !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: $gray-700 !default;
-$list-group-action-hover-color: $list-group-action-color !default;
-
-$list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: $gray-200 !default;
-// scss-docs-end list-group-variables
-
-
-// Image thumbnails
-
-// scss-docs-start thumbnail-variables
-$thumbnail-padding: .25rem !default;
-$thumbnail-bg: $body-bg !default;
-$thumbnail-border-width: $border-width !default;
-$thumbnail-border-color: var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: $box-shadow-sm !default;
-// scss-docs-end thumbnail-variables
-
-
-// Figures
-
-// scss-docs-start figure-variables
-$figure-caption-font-size: $small-font-size !default;
-$figure-caption-color: $gray-600 !default;
-// scss-docs-end figure-variables
-
-
-// Breadcrumbs
-
-// scss-docs-start breadcrumb-variables
-$breadcrumb-font-size: null !default;
-$breadcrumb-padding-y: 0 !default;
-$breadcrumb-padding-x: 0 !default;
-$breadcrumb-item-padding-x: .5rem !default;
-$breadcrumb-margin-bottom: 1rem !default;
-$breadcrumb-bg: null !default;
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-active-color: $gray-600 !default;
-$breadcrumb-divider: quote("/") !default;
-$breadcrumb-divider-flipped: $breadcrumb-divider !default;
-$breadcrumb-border-radius: null !default;
-// scss-docs-end breadcrumb-variables
-
-// Carousel
-
-// scss-docs-start carousel-variables
-$carousel-control-color: $white !default;
-$carousel-control-width: 15% !default;
-$carousel-control-opacity: .5 !default;
-$carousel-control-hover-opacity: .9 !default;
-$carousel-control-transition: opacity .15s ease !default;
-
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer: 3px !default;
-$carousel-indicator-opacity: .5 !default;
-$carousel-indicator-active-bg: $white !default;
-$carousel-indicator-active-opacity: 1 !default;
-$carousel-indicator-transition: opacity .6s ease !default;
-
-$carousel-caption-width: 70% !default;
-$carousel-caption-color: $white !default;
-$carousel-caption-padding-y: 1.25rem !default;
-$carousel-caption-spacer: 1.25rem !default;
-
-$carousel-control-icon-width: 2rem !default;
-
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
-$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
-
-$carousel-transition-duration: .6s !default;
-$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-// scss-docs-end carousel-variables
-
-// scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg: $black !default;
-$carousel-dark-caption-color: $black !default;
-$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
-// scss-docs-end carousel-dark-variables
-
-
-// Spinners
-
-// scss-docs-start spinner-variables
-$spinner-width: 2rem !default;
-$spinner-height: $spinner-width !default;
-$spinner-vertical-align: -.125em !default;
-$spinner-border-width: .25em !default;
-$spinner-animation-speed: .75s !default;
-
-$spinner-width-sm: 1rem !default;
-$spinner-height-sm: $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
-// scss-docs-end spinner-variables
-
-
-// Close
-
-// scss-docs-start close-variables
-$btn-close-width: 1em !default;
-$btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: .25em !default;
-$btn-close-padding-y: $btn-close-padding-x !default;
-$btn-close-color: $black !default;
-$btn-close-bg: url("data:image/svg+xml,") !default;
-$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
-$btn-close-opacity: .5 !default;
-$btn-close-hover-opacity: .75 !default;
-$btn-close-focus-opacity: 1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
-// scss-docs-end close-variables
-
-
-// Offcanvas
-
-// scss-docs-start offcanvas-variables
-$offcanvas-padding-y: $modal-inner-padding !default;
-$offcanvas-padding-x: $modal-inner-padding !default;
-$offcanvas-horizontal-width: 400px !default;
-$offcanvas-vertical-height: 30vh !default;
-$offcanvas-transition-duration: .3s !default;
-$offcanvas-border-color: $modal-content-border-color !default;
-$offcanvas-border-width: $modal-content-border-width !default;
-$offcanvas-title-line-height: $modal-title-line-height !default;
-$offcanvas-bg-color: $modal-content-bg !default;
-$offcanvas-color: $modal-content-color !default;
-$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
-$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
-$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
-// scss-docs-end offcanvas-variables
-
-// Code
-
-$code-font-size: $small-font-size !default;
-$code-color: $pink !default;
-
-$kbd-padding-y: .1875rem !default;
-$kbd-padding-x: .375rem !default;
-$kbd-font-size: $code-font-size !default;
-$kbd-color: var(--#{$prefix}body-bg) !default;
-$kbd-bg: var(--#{$prefix}body-color) !default;
-$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
-
-$pre-color: null !default;
diff --git a/dev/scss/app.scss b/dev/scss/app.scss
index 0dac31a..f68ab10 100644
--- a/dev/scss/app.scss
+++ b/dev/scss/app.scss
@@ -1,77 +1,7 @@
-// 1. Global
-@import 'global/path';
-@import 'global/fonts';
+/* ==============================================
+ Global App SCSS
+ ============================================== */
+@import './custom';
-// 2. Configuration
-@import '../../node_modules/bootstrap/scss/functions';
-@import './variables';
-@import '../../node_modules/bootstrap/scss/variables';
-@import "../../node_modules/bootstrap/scss/maps";
-@import '../../node_modules/bootstrap/scss/mixins';
-@import '../../node_modules/bootstrap/scss/utilities';
-
-
-// 3. Layout & components
-@import '../../node_modules/bootstrap/scss/root';
-@import '../../node_modules/bootstrap/scss/reboot';
-@import '../../node_modules/bootstrap/scss/type';
-@import '../../node_modules/bootstrap/scss/images';
-@import '../../node_modules/bootstrap/scss/containers';
-@import '../../node_modules/bootstrap/scss/grid';
-@import '../../node_modules/bootstrap/scss/navbar';
-@import '../../node_modules/bootstrap/scss/nav';
-@import '../../node_modules/bootstrap/scss/forms';
-@import '../../node_modules/bootstrap/scss/dropdown';
-@import '../../node_modules/bootstrap/scss/buttons';
-@import '../../node_modules/bootstrap/scss/button-group';
-@import '../../node_modules/bootstrap/scss/modal';
-
-
-// 4. Helpers
-@import '../../node_modules/bootstrap/scss/helpers';
-
-
-// 5. Helpers
-@import '../../node_modules/bootstrap/scss/utilities/api';
-
-
-// 6.Utilities
-@import 'vendors/icons/icons.scss';
-
-
-// 7. Mixins
-@import 'mixins/mixins';
-
-
-// 8. Base
-@import 'base/global-vars';
-@import 'base/grids';
-
-
-// 8. Utilities
-@import "utilities/helper";
-@import "utilities/placeholders";
-@import "utilities/typo";
-@import "utilities/config";
-
-
-// 9. Modules
-@import 'modules/buttons';
-@import 'modules/links';
-@import 'modules/forms';
-@import 'modules/thumbnail';
-@import 'modules/swiper';
-
-
-// 10. Global Components to use
-@import "layout/header";
-@import "layout/offcanvas";
-@import "layout/footer";
-@import "layout/main";
-@import "layout/post";
-@import "layout/hero";
-
-
-// 11. Cards
-@import 'cards/card-a01';
+// Add additional custom code here
diff --git a/dev/scss/base/_global-vars.scss b/dev/scss/base/_global-vars.scss
deleted file mode 100755
index 1c35592..0000000
--- a/dev/scss/base/_global-vars.scss
+++ /dev/null
@@ -1 +0,0 @@
-$global: 'theme';
diff --git a/dev/scss/cards/card-a01.scss b/dev/scss/cards/card-a01.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/components/_buttons.scss b/dev/scss/components/_buttons.scss
new file mode 100644
index 0000000..6fa6622
--- /dev/null
+++ b/dev/scss/components/_buttons.scss
@@ -0,0 +1,5 @@
+.btn {
+ border-radius: 3.1rem;
+ padding: 1.2rem 2.5rem;
+ font-size: 2rem;
+}
diff --git a/dev/scss/components/_custom-select.scss b/dev/scss/components/_custom-select.scss
new file mode 100644
index 0000000..9a6ed5b
--- /dev/null
+++ b/dev/scss/components/_custom-select.scss
@@ -0,0 +1,78 @@
+.custom-select {
+ position: relative;
+
+ select {
+ display: none;
+ }
+}
+
+.select-selected {
+ border: 1.3px solid black;
+ border-radius: 0;
+ box-shadow: none;
+ outline: none;
+ padding: 1rem 1.6rem;
+ font-size: 1.2rem;
+ line-height: 2.4;
+ color: black;
+ cursor: pointer;
+ user-select: none;
+ background-color: $white;
+
+ &::after {
+ content: '\e92f';
+ position: absolute;
+ right: 2.1rem;
+ font-family: '#{$icomoon-font-family}';
+ font-size: 1.55rem;
+ color: black;
+ top: 50%;
+ transform: translateY(-50%);
+ transition: transform 0.2s ease;
+ }
+
+ &.select-selected--is-active {
+ box-shadow: none;
+
+ &::after {
+ transform: translateY(-50%) rotate(180deg);
+ }
+ }
+
+ &--is-active {
+ position: relative;
+ z-index: 100;
+ }
+}
+
+.select-items {
+ border: none;
+ border: 1px solid black;
+ background-color: $white;
+ position: absolute;
+ top: calc(100% + -0.3rem);
+ left: 0;
+ right: 0;
+ padding: 2rem 0 3.6rem;
+ z-index: 99;
+ border-radius: 0;
+
+ > div {
+ background-color: transparent;
+ font-size: 1.6rem;
+ line-height: 1.5;
+ color: black;
+ padding: 0.8rem 2rem;
+ cursor: pointer;
+ user-select: none;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ &--is-hide {
+ display: none;
+ }
+}
diff --git a/dev/scss/components/_forms.scss b/dev/scss/components/_forms.scss
new file mode 100755
index 0000000..e601c1a
--- /dev/null
+++ b/dev/scss/components/_forms.scss
@@ -0,0 +1,96 @@
+.form {
+ &-control {
+ border: 0.13rem solid black;
+ border-radius: 0;
+ box-shadow: none;
+ outline: none;
+ padding: 1rem 1.6rem;
+ font-size: 1.2rem;
+ line-height: 2.4;
+ color: black;
+
+ &:focus {
+ box-shadow: none;
+ outline: none;
+ }
+
+ @include placeholder {
+ color: black;
+ }
+
+ &:focus,
+ &:hover {
+ border: 0.13rem solid black;
+ }
+ }
+}
+
+.form-check {
+ margin-bottom: 0;
+ display: flex;
+ align-items: center;
+
+ .form-check-label {
+ margin-left: 0.8rem;
+ }
+}
+
+.form-check-input {
+ border: 0.15rem solid black;
+ width: 1.6rem;
+ height: 1.6rem;
+ margin-top: 0;
+
+ // &:checked[type="radio"] {
+ // background-image: url("#{$theme-imgpath}custom-checked.svg");
+ // }
+
+ &[type='checkbox'] {
+ border-radius: 0;
+ }
+
+ &:checked[type='checkbox'] {
+ border: 0.15rem solid black;
+ background-image: none;
+ background-color: transparent;
+ position: relative;
+
+ &::after {
+ content: $icon-close;
+ position: absolute;
+ top: -0.9rem;
+ left: -0.1rem;
+ @include icons-pseudo;
+
+ font-size: 1.6rem;
+ color: green;
+ }
+ }
+}
+
+.invalid {
+ .wpcf7-response-output {
+ border: none !important;
+ font-size: 1.2rem;
+ line-height: 1.5;
+ padding: 1rem !important;
+ margin: 2rem 0 0 !important;
+ }
+
+ .hasError {
+ outline: 0;
+ border: 0.13rem solid green;
+ color: green;
+ position: relative;
+
+ @include placeholder {
+ color: green;
+ }
+ }
+}
+
+.requiblack-note {
+ font-size: 1.4rem;
+ font-weight: $font-weight-bold;
+ line-height: 1.43;
+}
diff --git a/dev/scss/components/_modal.scss b/dev/scss/components/_modal.scss
new file mode 100755
index 0000000..83400d0
--- /dev/null
+++ b/dev/scss/components/_modal.scss
@@ -0,0 +1,67 @@
+.modal {
+ &-backdrop {
+ &.show {
+ opacity: 0.29;
+ }
+ }
+
+ &-dialog {
+ max-width: 100%;
+ flex-direction: column;
+ align-items: flex-start;
+
+ @include media-breakpoint-down(xl) {
+ margin-left: 3.2rem;
+ margin-right: 3.2rem;
+ }
+
+ @include media-breakpoint-down(md) {
+ margin: 0;
+ }
+
+ @include media-breakpoint-up(xl) {
+ max-width: 106.4rem;
+ }
+ }
+
+ &-content {
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ }
+
+ &-body {
+ padding: 0;
+ }
+
+ .btn-close-modal {
+ background-color: transparent;
+ border: none;
+ right: 1.2rem;
+ top: 1.6rem;
+ color: red;
+ z-index: 1;
+
+ @include media-breakpoint-up(md) {
+ right: 3.2rem;
+ top: 2.8rem;
+ }
+
+ i {
+ font-size: 2.3rem;
+ }
+ }
+
+ &-team {
+ &-content {
+ @include media-breakpoint-up(md) {
+ border-radius: 0 2.3rem 0 0;
+ position: relative;
+ }
+ }
+
+ &-wrap {
+ min-height: 42rem;
+ }
+ }
+}
diff --git a/dev/scss/design.scss b/dev/scss/design.scss
deleted file mode 100644
index 34359e3..0000000
--- a/dev/scss/design.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import './common-imports';
-
-// Leadspace
-@import './styles/leadspace';
diff --git a/dev/scss/editor.css b/dev/scss/editor.css
new file mode 100644
index 0000000..b75afb4
--- /dev/null
+++ b/dev/scss/editor.css
@@ -0,0 +1,9 @@
+body {
+ background-color: red;
+}
+
+/* stylelint-disable */
+.edit-post-visual-editor__content-area > .is-desktop-preview {
+ padding-left: 24px;
+ padding-right: 24px;
+}
diff --git a/dev/scss/elements/_config.scss b/dev/scss/elements/_config.scss
new file mode 100755
index 0000000..638a8c2
--- /dev/null
+++ b/dev/scss/elements/_config.scss
@@ -0,0 +1,97 @@
+html {
+ scroll-behavior: smooth;
+ font-family: 'FT base', sans-serif;
+}
+
+html,
+body {
+ height: 100%;
+ font-size: 16px;
+ position: relative;
+}
+
+body {
+ letter-spacing: normal;
+ /* stylelint-disable */
+ font-smoothing: antialiased;
+ /* stylelint-enable */
+ &.prevent-scrolling {
+ @extend .overflow-hidden, .position-fixed, .w-100;
+
+ top: auto;
+ }
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: inherit;
+ }
+}
+
+a,
+button,
+.btn {
+ @extend .transition-fast;
+}
+
+p {
+ margin-bottom: 3.2rem;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
+
+ul,
+ol {
+ padding-left: 2.2rem;
+
+ > li {
+ margin-bottom: 2.4rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+b,
+strong {
+ font-weight: $font-weight-bold;
+}
+
+figure {
+ margin-bottom: 0;
+}
+
+img {
+ @extend .mw-100;
+}
+
+button,
+.btn,
+.btn-link {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ outline: none;
+ }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ box-shadow: 0 0 0 13rem $white inset !important;
+}
+
+/* purgecss start ignore */
+div[id^='__lpform_'] {
+ display: none;
+}
diff --git a/dev/scss/elements/_grids.scss b/dev/scss/elements/_grids.scss
new file mode 100644
index 0000000..9de138f
--- /dev/null
+++ b/dev/scss/elements/_grids.scss
@@ -0,0 +1,11 @@
+.l-container {
+ max-width: map-get($t-grid, 'max-width');
+ padding-inline: map-get($t-grid, 'gutter');
+ margin-inline: auto;
+}
+
+.l-grid {
+ display: grid;
+ gap: map-get($t-grid, 'gutter');
+ grid-template-columns: repeat(map-get($t-grid, 'columns'), 1fr);
+}
diff --git a/dev/scss/elements/_type.scss b/dev/scss/elements/_type.scss
new file mode 100755
index 0000000..cf35bb2
--- /dev/null
+++ b/dev/scss/elements/_type.scss
@@ -0,0 +1,14 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4 {
+ //@extend %heading;
+
+ overflow-wrap: normal;
+}
diff --git a/dev/scss/generic/icons/_icons.scss b/dev/scss/generic/icons/_icons.scss
new file mode 100755
index 0000000..5db3979
--- /dev/null
+++ b/dev/scss/generic/icons/_icons.scss
@@ -0,0 +1,361 @@
+@import 'variables/variables';
+
+@font-face {
+ font-family: '#{$icomoon-font-family}';
+ src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6v390e') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: '#{$icomoon-font-family}' !important;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-add {
+ &::before {
+ content: $icon-add;
+ }
+}
+
+.icon-arrow {
+ &::before {
+ content: $icon-arrow;
+ }
+}
+
+.icon-behance {
+ &::before {
+ content: $icon-behance;
+ }
+}
+
+.icon-climate {
+ &::before {
+ content: $icon-climate;
+ }
+}
+
+.icon-close {
+ &::before {
+ content: $icon-close;
+ }
+}
+
+.icon-discuss {
+ &::before {
+ content: $icon-discuss;
+ }
+}
+
+.icon-double-forward {
+ &::before {
+ content: $icon-double-forward;
+ }
+}
+
+.icon-education {
+ &::before {
+ content: $icon-education;
+ }
+}
+
+.icon-email {
+ &::before {
+ content: $icon-email;
+ }
+}
+
+.icon-emotional-intelligence {
+ &::before {
+ content: $icon-emotional-intelligence;
+ }
+}
+
+.icon-facebook {
+ &::before {
+ content: $icon-facebook;
+ }
+}
+
+.icon-fellowships {
+ &::before {
+ content: $icon-fellowships;
+ }
+}
+
+.icon-fitler {
+ &::before {
+ content: $icon-fitler;
+ }
+}
+
+.icon-five {
+ &::before {
+ content: $icon-five;
+ }
+}
+
+.icon-four {
+ &::before {
+ content: $icon-four;
+ }
+}
+
+.icon-home {
+ &::before {
+ content: $icon-home;
+ }
+}
+
+.icon-how-work {
+ &::before {
+ content: $icon-how-work;
+ }
+}
+
+.icon-id-card {
+ &::before {
+ content: $icon-id-card;
+ }
+}
+
+.icon-image {
+ &::before {
+ content: $icon-image;
+ }
+}
+
+.icon-instagram {
+ &::before {
+ content: $icon-instagram;
+ }
+}
+
+.icon-intrapreneurship {
+ &::before {
+ content: $icon-intrapreneurship;
+ }
+}
+
+.icon-justice {
+ &::before {
+ content: $icon-justice;
+ }
+}
+
+.icon-linkedin {
+ &::before {
+ content: $icon-linkedin;
+ }
+}
+
+.icon-logo-fuse {
+ &::before {
+ content: $icon-logo-fuse;
+ }
+}
+
+.icon-map-fill {
+ &::before {
+ content: $icon-map-fill;
+ }
+}
+
+.icon-map-outline {
+ &::before {
+ content: $icon-map-outline;
+ }
+}
+
+.icon-media-kit {
+ &::before {
+ content: $icon-media-kit;
+ }
+}
+
+.icon-microphone {
+ &::before {
+ content: $icon-microphone;
+ }
+}
+
+.icon-minus {
+ &::before {
+ content: $icon-minus;
+ }
+}
+
+.icon-more {
+ &::before {
+ content: $icon-more;
+ }
+}
+
+.icon-one {
+ &::before {
+ content: $icon-one;
+ }
+}
+
+.icon-pause {
+ &::before {
+ content: $icon-pause;
+ }
+}
+
+.icon-perseverence {
+ &::before {
+ content: $icon-perseverence;
+ }
+}
+
+.icon-play {
+ &::before {
+ content: $icon-play;
+ }
+}
+
+.icon-public-health {
+ &::before {
+ content: $icon-public-health;
+ }
+}
+
+.icon-quote-left {
+ &::before {
+ content: $icon-quote-left;
+ }
+}
+
+.icon-quote-right {
+ &::before {
+ content: $icon-quote-right;
+ }
+}
+
+.icon-recruitment {
+ &::before {
+ content: $icon-recruitment;
+ }
+}
+
+.icon-results {
+ &::before {
+ content: $icon-results;
+ }
+}
+
+.icon-search {
+ &::before {
+ content: $icon-search;
+ }
+}
+
+.icon-star {
+ &::before {
+ content: $icon-star;
+ }
+}
+
+.icon-state {
+ &::before {
+ content: $icon-state;
+ }
+}
+
+.icon-team {
+ &::before {
+ content: $icon-team;
+ }
+}
+
+.icon-three {
+ &::before {
+ content: $icon-three;
+ }
+}
+
+.icon-triangle-backward {
+ &::before {
+ content: $icon-triangle-backward;
+ }
+}
+
+.icon-triangle-down {
+ &::before {
+ content: $icon-triangle-down;
+ }
+}
+
+.icon-triangle-forward {
+ &::before {
+ content: $icon-triangle-forward;
+ }
+}
+
+.icon-triangle-outline-forward {
+ &::before {
+ content: $icon-triangle-outline-forward;
+ }
+}
+
+.icon-tumblr {
+ &::before {
+ content: $icon-tumblr;
+ }
+}
+
+.icon-twitter {
+ &::before {
+ content: $icon-twitter;
+ }
+}
+
+.icon-two {
+ &::before {
+ content: $icon-two;
+ }
+}
+
+.icon-video {
+ &::before {
+ content: $icon-video;
+ }
+}
+
+.icon-vimeo {
+ &::before {
+ content: $icon-vimeo;
+ }
+}
+
+.icon-volume {
+ &::before {
+ content: $icon-volume;
+ }
+}
+
+.icon-why-works-1 {
+ &::before {
+ content: $icon-why-works-1;
+ }
+}
+
+.icon-youtube {
+ &::before {
+ content: $icon-youtube;
+ }
+}
diff --git a/dev/scss/generic/icons/variables/_variables.scss b/dev/scss/generic/icons/variables/_variables.scss
new file mode 100755
index 0000000..3d87079
--- /dev/null
+++ b/dev/scss/generic/icons/variables/_variables.scss
@@ -0,0 +1,59 @@
+$icomoon-font-family: 'icons' !default;
+$icomoon-font-path: './../../../fonts' !default;
+
+$icon-add: '\e900';
+$icon-arrow: '\e901';
+$icon-behance: '\e902';
+$icon-climate: '\e903';
+$icon-close: '\e904';
+$icon-discuss: '\e905';
+$icon-double-forward: '\e906';
+$icon-education: '\e907';
+$icon-email: '\e908';
+$icon-emotional-intelligence: '\e909';
+$icon-facebook: '\e90a';
+$icon-fellowships: '\e90b';
+$icon-fitler: '\e90c';
+$icon-five: '\e90d';
+$icon-four: '\e90e';
+$icon-home: '\e90f';
+$icon-how-work: '\e910';
+$icon-id-card: '\e911';
+$icon-image: '\e912';
+$icon-instagram: '\e913';
+$icon-intrapreneurship: '\e914';
+$icon-justice: '\e915';
+$icon-linkedin: '\e916';
+$icon-logo-fuse: '\e917';
+$icon-map-fill: '\e918';
+$icon-map-outline: '\e919';
+$icon-media-kit: '\e91a';
+$icon-microphone: '\e91b';
+$icon-minus: '\e91c';
+$icon-more: '\e91d';
+$icon-one: '\e91e';
+$icon-pause: '\e91f';
+$icon-perseverence: '\e920';
+$icon-play: '\e921';
+$icon-public-health: '\e922';
+$icon-quote-left: '\e923';
+$icon-quote-right: '\e924';
+$icon-recruitment: '\e925';
+$icon-results: '\e926';
+$icon-search: '\e927';
+$icon-star: '\e928';
+$icon-state: '\e929';
+$icon-team: '\e92a';
+$icon-three: '\e92b';
+$icon-triangle-backward: '\e92c';
+$icon-triangle-down: '\e92d';
+$icon-triangle-forward: '\e92e';
+$icon-triangle-outline-forward: '\e92f';
+$icon-tumblr: '\e930';
+$icon-twitter: '\e931';
+$icon-two: '\e932';
+$icon-video: '\e933';
+$icon-vimeo: '\e934';
+$icon-volume: '\e935';
+$icon-why-works-1: '\e936';
+$icon-youtube: '\e937';
diff --git a/dev/scss/generic/system.scss b/dev/scss/generic/system.scss
new file mode 100644
index 0000000..6413546
--- /dev/null
+++ b/dev/scss/generic/system.scss
@@ -0,0 +1,5 @@
+@include system-font($t-fonts);
+@include system-typo($t-typography);
+@include system-grid-cols($t-grid, $t-breakpoints);
+
+@include utility-builder($t-utility);
diff --git a/dev/scss/global/_fonts.scss b/dev/scss/global/_fonts.scss
deleted file mode 100644
index b1ac55a..0000000
--- a/dev/scss/global/_fonts.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @font-face {
-// font-family: 'FoundersGrotesk';
-// src: url('#{$font-path}/FoundersGroteskLight.woff2') format('woff2');
-// font-weight: 300;
-// font-style: normal;
-// font-display: swap;
-// }
diff --git a/dev/scss/global/_functions.scss b/dev/scss/global/_functions.scss
deleted file mode 100755
index d7d9d75..0000000
--- a/dev/scss/global/_functions.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// Generates zindex from 1 to 10
-$class-slug: zindex !default;
-
-// eg. .zindex-1, .zindex-10
-@for $i from 0 through 10 {
- .#{$class-slug}-#{$i} {
- z-index: $i !important;
- }
-}
-// eg. .zindex-n-1, .zindex-n-2
-@for $i from 1 through 10 {
- .#{$class-slug}-n-#{$i} {
- z-index: -$i !important;
- }
-}
-
-// Black & White Opacity [background: black(.75);]
-@function black($opacity) {
- @return rgba(0, 0, 0, $opacity);
-}
-
-@function white($opacity) {
- @return rgba(255, 255, 255, $opacity);
-}
diff --git a/dev/scss/layout/_footer.scss b/dev/scss/layout/_footer.scss
index 87dd88f..0b43444 100644
--- a/dev/scss/layout/_footer.scss
+++ b/dev/scss/layout/_footer.scss
@@ -1,5 +1,5 @@
.#{$global} {
- &-footer {
- padding: rem(30px 0);
- }
+ &-footer {
+ background-color: green;
+ }
}
diff --git a/dev/scss/layout/_header.scss b/dev/scss/layout/_header.scss
index 2793477..1f2faaa 100755
--- a/dev/scss/layout/_header.scss
+++ b/dev/scss/layout/_header.scss
@@ -1,5 +1,114 @@
.#{$global} {
- &-header {
- background: $white;
+ &-header {
+ width: 100%;
+ background-color: yellow;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ transition: transform 0.4s ease-in-out;
+ z-index: 1050 !important;
+
+ // Expandable search
+ .search {
+ font-size: 1.8rem;
+ line-height: 1.6rem;
+
+ position: relative;
+ transition: width 450ms ease;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 24px;
+
+ &-input {
+ border: 0;
+ padding: 0.2rem 0;
+ border-bottom: 0.1rem solid $gray-700;
+ flex-grow: 1;
+ outline: 0;
+ z-index: 2;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: transparent;
+ opacity: 0;
+ cursor: pointer;
+ color: black;
+ @include media-breakpoint-up(md) {
+ padding: 0.1rem 0;
+ }
+ }
+
+ &-submit {
+ font-size: 2rem;
+ margin-left: auto;
+ background: 0;
+ border: 0;
+ cursor: pointer;
+ padding: 0;
+
+ &:hover {
+ color: red;
+ }
+
+ i {
+ font-size: 1.6rem;
+ color: black;
+
+ @include media-breakpoint-up(md) {
+ font-size: 2.4rem;
+ }
+ }
+
+ span {
+ font-size: 1.2rem;
+ line-height: 2.4rem;
+ color: black;
+ }
+ }
+
+ &:focus-within {
+ width: 18.1rem;
+ @include media-breakpoint-up(md) {
+ width: 21.8rem;
+ }
+
+ .search-input {
+ opacity: 1;
+ z-index: initial;
+ cursor: initial;
+ width: calc(100% - 2.8rem);
+ font-size: 1.2rem;
+ line-height: 2.4rem;
+ //-webkit-appearance: none;
+ border-radius: 0;
+
+ &::placeholder {
+ color: $gray-600;
+ }
+ }
+
+ .search-submit {
+ color: red;
+
+ span {
+ display: none;
+ }
+
+ i {
+ color: red;
+ }
+
+ &:focus-visible,
+ &:hover,
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
}
+ }
}
diff --git a/dev/scss/layout/_hero.scss b/dev/scss/layout/_hero.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/layout/_layouts.scss b/dev/scss/layout/_layouts.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/layout/_main.scss b/dev/scss/layout/_main.scss
index 46f2665..d48d731 100644
--- a/dev/scss/layout/_main.scss
+++ b/dev/scss/layout/_main.scss
@@ -1,11 +1,19 @@
.#{$global} {
- &-app {
- min-height: 100vh;
- }
- &-wrap {
- flex: 1 0 auto;
- }
- &-main {
- background-color: $white;
+ &-app {
+ min-height: 100vh;
+ }
+
+ &-wrap {
+ flex: 1 0 auto;
+ }
+
+ &-main {
+ background-color: $white;
+ overflow-x: hidden;
+
+ @include media-breakpoint-down(md) {
+ min-height: auto;
+ height: 100%;
}
+ }
}
diff --git a/dev/scss/layout/_offcanvas.scss b/dev/scss/layout/_offcanvas.scss
index e69de29..dd86e93 100644
--- a/dev/scss/layout/_offcanvas.scss
+++ b/dev/scss/layout/_offcanvas.scss
@@ -0,0 +1,19 @@
+.offcanvas {
+ background-color: green;
+ padding-top: 8.4rem;
+
+ &-wrap {
+ overflow-x: auto;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ &-content {
+ flex: 1 0 auto;
+ }
+
+ &-footer {
+ background-color: green;
+ }
+}
diff --git a/dev/scss/layout/_post-basic.scss b/dev/scss/layout/_post-basic.scss
new file mode 100644
index 0000000..031116a
--- /dev/null
+++ b/dev/scss/layout/_post-basic.scss
@@ -0,0 +1,103 @@
+.post-basic {
+ * {
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ &:first-of-type {
+ & + * {
+ margin-top: 1.6rem;
+
+ @include media-breakpoint-up(md) {
+ margin-top: 2.4rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ margin-top: 4rem;
+ }
+ }
+ }
+ }
+
+ p {
+ margin-top: 1.6rem;
+
+ @include media-breakpoint-up(md) {
+ margin-top: 2.4rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ margin-top: 4rem;
+ }
+ }
+
+ ul,
+ ol {
+ margin: 0 0 0 0.7rem;
+
+ > li {
+ margin-bottom: 0;
+ margin-top: 1.6rem;
+ padding-left: 1rem;
+
+ @include media-breakpoint-up(md) {
+ margin-top: 1.2rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ margin-top: 0.8rem;
+ }
+
+ &::marker {
+ font-size: 1.3rem;
+ }
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p {
+ margin-bottom: 0;
+ }
+
+ p + h1,
+ p + h2,
+ p + h3,
+ p + h4,
+ p + h5,
+ p + h6,
+ ul + h1,
+ ul + h2,
+ ul + h3,
+ ul + h4,
+ ul + h5,
+ ul + h6,
+ ol + h1,
+ ol + h2,
+ ol + h3,
+ ol + h4,
+ ol + h5,
+ ol + h6 {
+ margin-top: 4rem;
+ }
+
+ p + *,
+ ul + *,
+ ol + *,
+ .wp-block-quote + *,
+ blockquote + *,
+ .wp-block-separator + * {
+ margin-top: 2.2rem;
+ }
+}
diff --git a/dev/scss/layout/_post-restricted.scss b/dev/scss/layout/_post-restricted.scss
new file mode 100644
index 0000000..d664c43
--- /dev/null
+++ b/dev/scss/layout/_post-restricted.scss
@@ -0,0 +1,102 @@
+.post-restricted {
+ * {
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+
+ a {
+ text-decoration: underline;
+ transition: all 0.3s ease;
+
+ &:hover {
+ color: $primary;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5 {
+ color: red;
+
+ &:first-of-type {
+ & + * {
+ margin-top: 3.6rem;
+
+ @include media-breakpoint-up(md) {
+ margin-top: 4.8rem;
+ }
+ }
+ }
+ }
+
+ p {
+ margin-top: 2.8rem;
+ }
+
+ ul,
+ ol {
+ margin: 0 3.5rem 0 0.7rem;
+
+ @include media-breakpoint-up(md) {
+ margin: 0 8.8rem 0 0.7rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ margin: 0 11rem 0 0.7rem;
+ }
+
+ > li {
+ margin-bottom: 0;
+ margin-top: 0.8rem;
+ padding-left: 1rem;
+
+ &::marker {
+ font-size: 1.3rem;
+ }
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p {
+ margin-bottom: 0;
+ }
+
+ p + h1,
+ p + h2,
+ p + h3,
+ p + h4,
+ p + h5,
+ p + h6,
+ ul + h1,
+ ul + h2,
+ ul + h3,
+ ul + h4,
+ ul + h5,
+ ul + h6,
+ ol + h1,
+ ol + h2,
+ ol + h3,
+ ol + h4,
+ ol + h5,
+ ol + h6 {
+ margin-top: 4rem;
+ }
+
+ p + *,
+ ul + *,
+ ol + * {
+ margin-top: 2.4rem;
+
+ @include media-breakpoint-up(xl) {
+ margin-top: 3.2rem;
+ }
+ }
+}
diff --git a/dev/scss/layout/_post.scss b/dev/scss/layout/_post.scss
index e69de29..8670eb8 100644
--- a/dev/scss/layout/_post.scss
+++ b/dev/scss/layout/_post.scss
@@ -0,0 +1,168 @@
+.post-content {
+ a {
+ text-decoration: underline;
+ transition: all 0.3s ease;
+ &:hover {
+ color: $primary;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ figure {
+ margin-bottom: 0;
+ }
+
+ > figure {
+ max-width: 100%;
+ }
+
+ .wp-block-image + *,
+ .wp-block-table + *,
+ .wp-block-embed + *,
+ .wp-block-quote + *,
+ blockquote + *,
+ p + .wp-block-image,
+ p + .wp-block-table,
+ p + .wp-block-embed,
+ p + .wp-block-quote,
+ p + blockquote,
+ p + h1,
+ p + h2,
+ p + h3,
+ p + h4,
+ p + h5,
+ p + h6,
+ ul + h1,
+ ul + h2,
+ ul + h3,
+ ul + h4,
+ ul + h5,
+ ul + h6,
+ ol + h1,
+ ol + h2,
+ ol + h3,
+ ol + h4,
+ ol + h5,
+ ol + h6,
+ .wp-block-quote + .wp-block-table,
+ .wp-block-quote + .wp-block-image,
+ .wp-block-quote + .wp-block-embed,
+ blockquote + .wp-block-embed {
+ margin-top: 2.4rem;
+
+ @include media-breakpoint-up(lg) {
+ margin-top: 3.2rem;
+ }
+ }
+
+ p + *,
+ ul + *,
+ ol + *,
+ .wp-block-quote + *,
+ blockquote + *,
+ .wp-block-separator + * {
+ margin-top: 2.4rem;
+
+ @include media-breakpoint-up(lg) {
+ margin-top: 3.2rem;
+ }
+ }
+
+ & + .post {
+ margin-top: 2.4rem;
+
+ @include media-breakpoint-up(lg) {
+ margin-top: 3.2rem;
+ }
+ }
+
+ table {
+ border: 0.1rem solid $dark;
+ width: 100%;
+ margin-bottom: 1rem;
+
+ th,
+ td {
+ border: 0.1rem solid $dark;
+ padding: 1rem;
+ vertical-align: top;
+ }
+ }
+
+ ul,
+ ol,
+ p {
+ margin-top: 2.4rem;
+ margin-bottom: 0;
+
+ @include media-breakpoint-up(lg) {
+ margin-top: 3.2rem;
+ }
+ }
+
+ img.alignleft,
+ img.alignright,
+ hr {
+ margin: 2.4rem 0;
+
+ @include media-breakpoint-up(lg) {
+ margin: 3.2rem 0;
+ }
+ }
+
+ figure,
+ img {
+ &.aligncenter {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ &.alignright {
+ @include media-breakpoint-up(md) {
+ margin-left: 2.4rem;
+ float: right;
+ }
+
+ @include media-breakpoint-up(lg) {
+ margin-left: 3.2rem;
+ }
+ }
+
+ &.alignleft {
+ @include media-breakpoint-up(md) {
+ margin-right: 2.4rem;
+ float: left;
+ }
+
+ @include media-breakpoint-up(lg) {
+ margin-right: 3.2rem;
+ }
+ }
+ }
+
+ iframe {
+ @extend .ratio;
+ @extend .ratio-16x9;
+ }
+
+ p {
+ img {
+ margin-top: 0 !important;
+ }
+ }
+
+ blockquote {
+ display: inline-block;
+ }
+
+ .pull-right {
+ @include media-breakpoint-up(md) {
+ float: right !important;
+ }
+ }
+}
diff --git a/dev/scss/mixins/_animations.scss b/dev/scss/mixins/_animations.scss
deleted file mode 100755
index c7646a3..0000000
--- a/dev/scss/mixins/_animations.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$time: 1.5s;
-
-//[@include animation (loader 3s 300ms infinite ease-out);]
-//@include animation('slide-down 5s 3');
-@mixin animation($value) {
- animation: $value;
-}
-
-@keyframes blink {
- from {
- opacity: 1;
- }
-
- 30% {
- opacity: 1;
- }
-
- 90% {
- opacity: 0;
- }
-
- to {
- opacity: 0;
- }
-}
-
-@mixin animation-delay($from, $to, $cycle-length, $name) {
- @for $i from 1 through 4 {
- &.#{$name}-#{$i} {
- animation-delay: -($cycle-length / ($from - $to)) * $i;
- }
- }
-}
diff --git a/dev/scss/mixins/_bg-opacity.scss b/dev/scss/mixins/_bg-opacity.scss
deleted file mode 100755
index 8aad06e..0000000
--- a/dev/scss/mixins/_bg-opacity.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Background Opacity mixin | Add opacity to a background color
-// eg. @include bg-opacity($color-white, .5);
-@mixin bg-opacity($color, $opacity) {
- background-color: rgba($color, $opacity);
-}
diff --git a/dev/scss/mixins/_box-shadow.scss b/dev/scss/mixins/_box-shadow.scss
deleted file mode 100755
index ead6311..0000000
--- a/dev/scss/mixins/_box-shadow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Box Shadow
-// eg. @include box-shadow(0 5px 4px black(.75)); || [@include box-shadow(0 5px 4px black(.75)); || @include box-shadow(inset 0 5px 4px black(.75));] || @include box-shadow(inset 0 0px 0px 2px $color-15);
-@mixin box-shadow($value) {
- box-shadow: $value;
-}
diff --git a/dev/scss/mixins/_box-sizing.scss b/dev/scss/mixins/_box-sizing.scss
deleted file mode 100755
index bcb55a9..0000000
--- a/dev/scss/mixins/_box-sizing.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Box Sizing
-// eg. @include box-sizing(border-box);
-@mixin box-sizing($box-model) {
- box-sizing: $box-model;
-}
diff --git a/dev/scss/mixins/_breakpoint.scss b/dev/scss/mixins/_breakpoint.scss
deleted file mode 100755
index 76258e7..0000000
--- a/dev/scss/mixins/_breakpoint.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-//
-// MEDIA QUERIES
-//––––––––––––––––––––––––––––––––––––––––––––––––––
-
-// A map of breakpoints.
-$breakpoints: (
- xs: 576px,
- sm: 768px,
- md: 992px,
- lg: 1200px,
- xl: 1440px,
-);
-
-//
-// RESPOND ABOVE
-//––––––––––––––––––––––––––––––––––––––––––––––––––
-
-// @include respond-above(sm) {}
-@mixin respond-above($breakpoint) {
- // If the breakpoint exists in the map.
- @if map-has-key($breakpoints, $breakpoint) {
- // Get the breakpoint value.
- $breakpoint-value: map-get($breakpoints, $breakpoint);
-
- // Write the media query.
- @media (min-width: $breakpoint-value) {
- @content;
- }
-
- // If the breakpoint doesn't exist in the map.
- } @else {
- // Log a warning.
- @warn 'Invalid breakpoint: #{$breakpoint}.';
- }
-}
-
-//
-// RESPOND BELOW
-//––––––––––––––––––––––––––––––––––––––––––––––––––
-
-// @include respond-below(sm) {}
-@mixin respond-below($breakpoint) {
- // If the breakpoint exists in the map.
- @if map-has-key($breakpoints, $breakpoint) {
- // Get the breakpoint value.
- $breakpoint-value: map-get($breakpoints, $breakpoint);
-
- // Write the media query.
- @media (max-width: ($breakpoint-value - 1)) {
- @content;
- }
-
- // If the breakpoint doesn't exist in the map.
- } @else {
- // Log a warning.
- @warn 'Invalid breakpoint: #{$breakpoint}.';
- }
-}
-
-//
-// RESPOND BETWEEN
-//––––––––––––––––––––––––––––––––––––––––––––––––––
-
-// @include respond-between(sm, md) {}
-@mixin respond-between($lower, $upper) {
- // If both the lower and upper breakpoints exist in the map.
- @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
- // Get the lower and upper breakpoints.
- $lower-breakpoint: map-get($breakpoints, $lower);
- $upper-breakpoint: map-get($breakpoints, $upper);
-
- // Write the media query.
- @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
- @content;
- }
-
- // If one or both of the breakpoints don't exist.
- } @else {
- // If lower breakpoint is invalid.
- @if (map-has-key($breakpoints, $lower) == false) {
- // Log a warning.
- @warn 'Your lower breakpoint was invalid: #{$lower}.';
- }
-
- // If upper breakpoint is invalid.
- @if (map-has-key($breakpoints, $upper) == false) {
- // Log a warning.
- @warn 'Your upper breakpoint was invalid: #{$upper}.';
- }
- }
-}
diff --git a/dev/scss/mixins/_centerer.scss b/dev/scss/mixins/_centerer.scss
deleted file mode 100755
index c6456b5..0000000
--- a/dev/scss/mixins/_centerer.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Vertically center with Absolute Position
-// eg. @include centerer(false, true);[Centering vertically]
-// eg. @include centerer(true, false);[Centering horizontally]
-// eg. @include centerer;[Centering Both Side]
-@mixin centerer($horizontal: true, $vertical: true) {
- position: absolute;
-
- @if ($horizontal and $vertical) {
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- } @else if ($horizontal) {
- left: 50%;
- transform: translate(-50%, 0);
- } @else if ($vertical) {
- top: 50%;
- transform: translate(0, -50%);
- }
-}
diff --git a/dev/scss/mixins/_circle.scss b/dev/scss/mixins/_circle.scss
deleted file mode 100755
index 16a405a..0000000
--- a/dev/scss/mixins/_circle.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// 100% circle
-// eg. @include circle(100px);
-@mixin circle($size) {
- width: $size;
- height: $size;
- border-radius: 100%;
-}
diff --git a/dev/scss/mixins/_ellipsis.scss b/dev/scss/mixins/_ellipsis.scss
deleted file mode 100755
index ed799d3..0000000
--- a/dev/scss/mixins/_ellipsis.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Truncating
-// eg: @include ellipsis(2em, 2);
-@mixin ellipsis($max-height, $lines: 2) {
- overflow: hidden !important;
- max-height: $max-height !important;
- display: -webkit-box !important;
- -webkit-box-orient: vertical !important;
- -webkit-line-clamp: $lines !important;
- text-overflow: -o-ellipsis-lastline !important;
-}
diff --git a/dev/scss/mixins/_first-child.scss b/dev/scss/mixins/_first-child.scss
deleted file mode 100755
index ef7268d..0000000
--- a/dev/scss/mixins/_first-child.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// @include first-child() {
-// background: red;
-// }
-// @include first-child() {
-// margin-bottom: rem(0);
-// }
-@mixin first-child() {
- &:first-of-type {
- @content;
- }
-}
diff --git a/dev/scss/mixins/_font-smoothing.scss b/dev/scss/mixins/_font-smoothing.scss
deleted file mode 100755
index c52c694..0000000
--- a/dev/scss/mixins/_font-smoothing.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Font Smoothing
-// eg: include font-smoothing(on);
-@mixin font-smoothing($value: on) {
- @if $value==on {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- @if $value==off {
- -webkit-font-smoothing: subpixel-antialiased;
- -moz-osx-font-smoothing: auto;
- }
-}
diff --git a/dev/scss/mixins/_gradient.scss b/dev/scss/mixins/_gradient.scss
deleted file mode 100755
index 0b19c72..0000000
--- a/dev/scss/mixins/_gradient.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// @include gradient(red, transparent, horizontal);
-// @include gradient(red, green, vertical);
-@mixin gradient($start-color, $end-color, $orientation) {
- background: $start-color;
- @if $orientation== 'vertical' {
- background: -webkit-linear-gradient(top, $start-color, $end-color);
- background: linear-gradient(to bottom, $start-color, $end-color);
- }
- @if $orientation== 'vertical-bottom' {
- background: -webkit-linear-gradient(bottom, $start-color, $end-color);
- background: linear-gradient(to top, $start-color, $end-color);
- } @else if $orientation== 'horizontal' {
- background: -webkit-linear-gradient(left, $start-color, $end-color);
- background: linear-gradient(to right, $start-color, $end-color);
- } @else if $orientation== 'horizontal-right' {
- background: -webkit-linear-gradient(right, $start-color, $end-color);
- background: linear-gradient(to left, $start-color, $end-color);
- } @else {
- background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
- background: radial-gradient(ellipse at center, $start-color, $end-color);
- }
-}
diff --git a/dev/scss/mixins/_ie-only.scss b/dev/scss/mixins/_ie-only.scss
deleted file mode 100644
index 08d3c4c..0000000
--- a/dev/scss/mixins/_ie-only.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Translate 3D Transition
-// eg: @include ie-only {content}
-@mixin ie-only {
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- @content;
- }
-}
diff --git a/dev/scss/mixins/_key-frames.scss b/dev/scss/mixins/_key-frames.scss
deleted file mode 100755
index daa806e..0000000
--- a/dev/scss/mixins/_key-frames.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Animations and keyframes
-//@include keyframes(slide-down) {
-// 0% { opacity: 1; }
-// 90% { opacity: 0; }
-//}
-@mixin keyframes($name) {
- @keyframes #{$name} {
- @content;
- }
-}
diff --git a/dev/scss/mixins/_last-child.scss b/dev/scss/mixins/_last-child.scss
deleted file mode 100755
index d6e48dd..0000000
--- a/dev/scss/mixins/_last-child.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// @include last-child() {
-// margin-bottom: rem(0);
-// }
-@mixin last-child() {
- &:last-of-type {
- @content;
- }
-}
diff --git a/dev/scss/mixins/_links.scss b/dev/scss/mixins/_links.scss
deleted file mode 100755
index 653e6b8..0000000
--- a/dev/scss/mixins/_links.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Links Mixin
-// eg: @include links($color-link, $color-link, $color-link-hover, $color-link);
-@mixin links($link, $visited, $hover, $active) {
- & {
- color: $link;
- &:visited {
- color: $visited;
- }
- &:hover {
- color: $hover;
- text-decoration: none;
- }
- &:active,
- &:focus {
- color: $active;
- text-decoration: none;
- }
- }
-}
diff --git a/dev/scss/mixins/_mixins.scss b/dev/scss/mixins/_mixins.scss
deleted file mode 100755
index 95ea4e4..0000000
--- a/dev/scss/mixins/_mixins.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import 'bg-opacity';
-//@import "border-radius";
-//@import "box-shadow";
-@import 'box-sizing';
-@import 'calc';
-@import 'centerer';
-@import 'circle';
-@import 'ellipsis';
-@import 'filter';
-@import 'first-child';
-@import 'font-smoothing';
-@import 'gradient';
-@import 'icon-pseudo';
-@import 'ie-only';
-@import 'key-frames';
-@import 'last-child';
-@import 'links';
-@import 'nth-child';
-@import 'opacity';
-@import 'placeholder';
-@import 'position';
-@import 'prevent-hover';
-// @import 'rem';
-@import 'rotate';
-@import 'text-shadow';
-@import 'transition';
-@import 'translate';
-// @import 'typo-calc';
-@import 'user-select';
-// @import 'animations';
diff --git a/dev/scss/mixins/_opacity.scss b/dev/scss/mixins/_opacity.scss
deleted file mode 100755
index cdf3a42..0000000
--- a/dev/scss/mixins/_opacity.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Cross browser opacity
-// eg. @include opacity(0.8);
-@mixin opacity($opacity) {
- opacity: $opacity !important;
- $opacity-ie: $opacity * 100;
- filter: alpha(opacity=$opacity-ie); //IE8
-}
diff --git a/dev/scss/mixins/_placeholder.scss b/dev/scss/mixins/_placeholder.scss
deleted file mode 100755
index abc6911..0000000
--- a/dev/scss/mixins/_placeholder.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Placeholder
-// eg: @include placeholder($color-base);
-// @include placeholder {
-// color: red;
-// }
-@mixin placeholder {
- &::-webkit-input-placeholder {
- @content;
- }
- &:-moz-placeholder {
- @content;
- }
- &::-moz-placeholder {
- @content;
- }
- &:-ms-input-placeholder {
- @content;
- }
-}
diff --git a/dev/scss/mixins/_position.scss b/dev/scss/mixins/_position.scss
deleted file mode 100755
index 5a1475d..0000000
--- a/dev/scss/mixins/_position.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Positioning
-// eg: @include position(absolute, $top: 5px, $left: 5px);
-@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
- position: $position;
- top: $top;
- left: $left;
- right: $right;
- bottom: $bottom;
-}
diff --git a/dev/scss/mixins/_rem.scss b/dev/scss/mixins/_rem.scss
deleted file mode 100755
index 62525e8..0000000
--- a/dev/scss/mixins/_rem.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-// padding: rem(20px 25px);
-// font-size: rem(15px);
-// font-size: rem(110px !important);
-
-$rem-baseline: 16px !default;
-$rem-fallback: false !default;
-$rem-px-only: false !default;
-
-@function rem-separator($list, $separator: false) {
- @if $separator== 'comma' or $separator== 'space' {
- @return append($list, null, $separator);
- }
- @if function-exists('list-separator') ==true {
- @return list-separator($list);
- }
- $test-list: ();
- @each $item in $list {
- $test-list: append($test-list, $item, space);
- }
- @return if($test-list==$list, space, comma);
-}
-
-@mixin rem-baseline($zoom: 100%) {
- font-size: $zoom / 16px * $rem-baseline;
-}
-
-@function rem-convert($to, $values...) {
- $result: ();
- $separator: rem-separator($values);
- @each $value in $values {
- @if type-of($value) == 'number' and unit($value) == 'rem' and $to== 'px' {
- $result: append($result, $value / 1rem * $rem-baseline, $separator);
- } @else if type-of($value) == 'number' and unit($value) == 'px' and $to== 'rem' {
- $result: append($result, $value / $rem-baseline * 1rem, $separator);
- } @else if type-of($value) == 'list' {
- $value-separator: rem-separator($value);
- $value: rem-convert($to, $value...);
- $value: rem-separator($value, $value-separator);
- $result: append($result, $value, $separator);
- } @else {
- $result: append($result, $value, $separator);
- }
- }
-
- @return if(length($result) ==1, nth($result, 1), $result);
-}
-
-@function rem($values...) {
- @if $rem-px-only {
- @return rem-convert(px, $values...);
- } @else {
- @return rem-convert(rem, $values...);
- }
-}
-
-@mixin rem($properties, $values...) {
- @if type-of($properties) == 'map' {
- @each $property in map-keys($properties) {
- @include rem($property, map-get($properties, $property));
- }
- } @else {
- @each $property in $properties {
- @if $rem-fallback or $rem-px-only {
- #{$property}: rem-convert(px, $values...);
- }
- @if not $rem-px-only {
- #{$property}: rem-convert(rem, $values...);
- }
- }
- }
-}
diff --git a/dev/scss/mixins/_rotate.scss b/dev/scss/mixins/_rotate.scss
deleted file mode 100755
index a976a8f..0000000
--- a/dev/scss/mixins/_rotate.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Rotate
-// eg: @include rotate(45deg);
-@mixin rotate($degrees) {
- transform: rotate($degrees);
-}
diff --git a/dev/scss/mixins/_text-shadow.scss b/dev/scss/mixins/_text-shadow.scss
deleted file mode 100755
index a519d5c..0000000
--- a/dev/scss/mixins/_text-shadow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Text Shadow
-// eg. @include text-shadow(0 0 0);
-@mixin text-shadow($value) {
- text-shadow: $value;
-}
diff --git a/dev/scss/mixins/_transition.scss b/dev/scss/mixins/_transition.scss
deleted file mode 100755
index 1484103..0000000
--- a/dev/scss/mixins/_transition.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Transition
-// eg. @include transition(all 2s ease-out);
-@mixin transition($args...) {
- transition: $args;
-}
diff --git a/dev/scss/mixins/_translate.scss b/dev/scss/mixins/_translate.scss
deleted file mode 100755
index b2ea5ad..0000000
--- a/dev/scss/mixins/_translate.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Translate 3D Transition
-// eg: @include translate3d(0,0,0);
-@mixin translate3d($x, $y, $z) {
- transform: translate3d($x, $y, $z);
-}
diff --git a/dev/scss/mixins/_typo-calc.scss b/dev/scss/mixins/_typo-calc.scss
deleted file mode 100644
index 1be9e62..0000000
--- a/dev/scss/mixins/_typo-calc.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-// Scalable Typography
-// eg: @include rotate(45deg);
-
-@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
- & {
- @each $property in $properties {
- #{$property}: $min-value;
- }
-
- @media screen and (min-width: $min-screen) {
- @each $property in $properties {
- #{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value);
- }
- }
-
- @media screen and (min-width: $max-screen) {
- @each $property in $properties {
- #{$property}: $max-value;
- }
- }
- }
-}
-
-// Requires the calc-interpolation function which can also be used independently
-@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
- $a: ($max-value - $min-value) / ($max-screen - $min-screen);
- $b: $min-value - $a * $min-screen;
-
- $sign: '+';
- @if ($b < 0) {
- $sign: '-';
- $b: abs($b);
- }
- @return calc(#{$a * 100}vw #{$sign} #{$b});
-}
diff --git a/dev/scss/mixins/_user-select.scss b/dev/scss/mixins/_user-select.scss
deleted file mode 100755
index 8aa055a..0000000
--- a/dev/scss/mixins/_user-select.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// User Select
-// The user-select property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.
-/* Examples:
- @include user-select(none);
- @include user-select(all);
-*/
-@mixin user-select($user-select) {
- user-select: ($user-select);
-}
diff --git a/dev/scss/modules/_accordion.scss b/dev/scss/modules/_accordion.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_alert.scss b/dev/scss/modules/_alert.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_aos.scss b/dev/scss/modules/_aos.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_blockquote.scss b/dev/scss/modules/_blockquote.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_bootstrap-select.scss b/dev/scss/modules/_bootstrap-select.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_breadcrumbs.scss b/dev/scss/modules/_breadcrumbs.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_btn-group.scss b/dev/scss/modules/_btn-group.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_buttons.scss b/dev/scss/modules/_buttons.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_calendar.scss b/dev/scss/modules/_calendar.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_carousel.scss b/dev/scss/modules/_carousel.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_checkbox.scss b/dev/scss/modules/_checkbox.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_content.scss b/dev/scss/modules/_content.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_dropdown.scss b/dev/scss/modules/_dropdown.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_filternav.scss b/dev/scss/modules/_filternav.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_forms.scss b/dev/scss/modules/_forms.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_hamburger.scss b/dev/scss/modules/_hamburger.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_hr.scss b/dev/scss/modules/_hr.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_label.scss b/dev/scss/modules/_label.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_links.scss b/dev/scss/modules/_links.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_list.scss b/dev/scss/modules/_list.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_loader.scss b/dev/scss/modules/_loader.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_media.scss b/dev/scss/modules/_media.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_modal.scss b/dev/scss/modules/_modal.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_nano.scss b/dev/scss/modules/_nano.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_navbar.scss b/dev/scss/modules/_navbar.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_or.scss b/dev/scss/modules/_or.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_pager.scss b/dev/scss/modules/_pager.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_pagination.scss b/dev/scss/modules/_pagination.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_panel.scss b/dev/scss/modules/_panel.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_popup.scss b/dev/scss/modules/_popup.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_pushy.scss b/dev/scss/modules/_pushy.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_search.scss b/dev/scss/modules/_search.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_social.scss b/dev/scss/modules/_social.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_stats.scss b/dev/scss/modules/_stats.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_steps.scss b/dev/scss/modules/_steps.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_subscribe.scss b/dev/scss/modules/_subscribe.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_swiper.scss b/dev/scss/modules/_swiper.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_table.scss b/dev/scss/modules/_table.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_tabpanel.scss b/dev/scss/modules/_tabpanel.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_thumbnail.scss b/dev/scss/modules/_thumbnail.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/_title.scss b/dev/scss/modules/_title.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/dev/scss/modules/_wpoverride.scss b/dev/scss/modules/_wpoverride.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/modules/banner.scss b/dev/scss/modules/banner.scss
new file mode 100644
index 0000000..1b7c1ae
--- /dev/null
+++ b/dev/scss/modules/banner.scss
@@ -0,0 +1,3 @@
+.asdasdasd {
+ background-color: green;
+}
diff --git a/dev/scss/modules/leadspace.scss b/dev/scss/modules/leadspace.scss
new file mode 100644
index 0000000..5369c67
--- /dev/null
+++ b/dev/scss/modules/leadspace.scss
@@ -0,0 +1,8 @@
+.aayus {
+ background-color: green;
+}
+
+body {
+ background-color: red;
+ color: white;
+}
diff --git a/dev/scss/modules/slider.scss b/dev/scss/modules/slider.scss
new file mode 100644
index 0000000..90439ba
--- /dev/null
+++ b/dev/scss/modules/slider.scss
@@ -0,0 +1,3 @@
+body {
+ background: green;
+}
diff --git a/dev/scss/modules/styleguide.scss b/dev/scss/modules/styleguide.scss
new file mode 100644
index 0000000..bc184d6
--- /dev/null
+++ b/dev/scss/modules/styleguide.scss
@@ -0,0 +1,163 @@
+.html {
+ font-size: 1rem;
+}
+
+.sr-only:not(:focus, :focus-within) {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
+.styleguide {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 700;
+ }
+
+ &-wrap {
+ padding: 230px 15px 0;
+
+ @media (min-width: 991px) {
+ padding: 45px 35px 0;
+ }
+ }
+
+ &-sidebar {
+ position: sticky;
+ top: 5px;
+ padding-top: 35px;
+
+ .list-group-item {
+ border: none;
+ border-bottom: 1px solid rgba(0, 0, 0, 10%);
+ margin-bottom: 15px;
+ padding: 0 0 15px;
+
+ &::before {
+ display: none;
+ }
+
+ > a {
+ color: #002b49;
+ text-decoration: none;
+ font-size: 18px;
+
+ &:hover,
+ &:focus {
+ color: #000;
+ }
+
+ &::after {
+ display: none;
+ }
+
+ &.active {
+ color: #00a6cb;
+ }
+ }
+ }
+ }
+
+ .page-header {
+ border-bottom: 1px solid rgba(0, 0, 0, 10%);
+ padding: 0 50px;
+ }
+
+ hr {
+ border-color: rgba(0, 0, 0, 10%);
+ opacity: 1;
+ }
+}
+
+.content-wrap {
+ border-bottom: 1px solid rgba(0, 0, 0, 10%);
+ padding: 35px 0;
+ margin-bottom: 25px;
+ margin-left: 32px;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ code {
+ background-color: rgba(0, 0, 0, 75%);
+ padding: 7px 8px;
+ border-radius: 10px;
+ color: #ffc107;
+ font-size: 15px;
+ }
+
+ pre {
+ background-color: transparent;
+ padding: 30px;
+ white-space: pre-wrap;
+ white-space: normal;
+ margin-bottom: 50px;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ code {
+ display: block;
+ color: #ffc107;
+ padding: 15px;
+ white-space: normal;
+ }
+ }
+}
+
+.font-size {
+ &-5 {
+ font-size: 5px;
+ }
+
+ &-20 {
+ font-size: 20px;
+ }
+
+ &-25 {
+ font-size: 25px;
+ }
+
+ &-30 {
+ font-size: 30px;
+ }
+}
+
+.contentwrapper {
+ padding-left: 50px;
+}
+
+.mb-8 {
+ margin-bottom: 32px;
+}
+
+table {
+ width: 100%;
+ caption-side: bottom;
+ border-collapse: collapse;
+}
+
+.table > :not(caption) > * > * {
+ padding: 1.5rem 0;
+ background-color: var(--bs-table-bg);
+ border-bottom-width: 1px;
+ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+
+.btn-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+}
diff --git a/dev/scss/settings/_bootstrap-variables.scss b/dev/scss/settings/_bootstrap-variables.scss
new file mode 100644
index 0000000..836b905
--- /dev/null
+++ b/dev/scss/settings/_bootstrap-variables.scss
@@ -0,0 +1,1643 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+/* stylelint-disable */
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+ '100': $gray-100,
+ '200': $gray-200,
+ '300': $gray-300,
+ '400': $gray-400,
+ '500': $gray-500,
+ '600': $gray-600,
+ '700': $gray-700,
+ '800': $gray-800,
+ '900': $gray-900,
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+ 'blue': $blue,
+ 'indigo': $indigo,
+ 'purple': $purple,
+ 'pink': $pink,
+ 'red': $red,
+ 'orange': $orange,
+ 'yellow': $yellow,
+ 'green': $green,
+ 'teal': $teal,
+ 'cyan': $cyan,
+ 'white': $white,
+ 'gray': $gray-600,
+ 'gray-dark': $gray-800,
+) !default;
+// scss-docs-end colors-map
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+ 'primary': $primary,
+ 'secondary': $secondary,
+ 'success': $success,
+ 'info': $info,
+ 'warning': $warning,
+ 'danger': $danger,
+ 'light': $light,
+ 'dark': $dark,
+) !default;
+// scss-docs-end theme-colors-map
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+// scss-docs-end theme-colors-rgb
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ 'blue-100': $blue-100,
+ 'blue-200': $blue-200,
+ 'blue-300': $blue-300,
+ 'blue-400': $blue-400,
+ 'blue-500': $blue-500,
+ 'blue-600': $blue-600,
+ 'blue-700': $blue-700,
+ 'blue-800': $blue-800,
+ 'blue-900': $blue-900,
+) !default;
+
+$indigos: (
+ 'indigo-100': $indigo-100,
+ 'indigo-200': $indigo-200,
+ 'indigo-300': $indigo-300,
+ 'indigo-400': $indigo-400,
+ 'indigo-500': $indigo-500,
+ 'indigo-600': $indigo-600,
+ 'indigo-700': $indigo-700,
+ 'indigo-800': $indigo-800,
+ 'indigo-900': $indigo-900,
+) !default;
+
+$purples: (
+ 'purple-100': $purple-200,
+ 'purple-200': $purple-100,
+ 'purple-300': $purple-300,
+ 'purple-400': $purple-400,
+ 'purple-500': $purple-500,
+ 'purple-600': $purple-600,
+ 'purple-700': $purple-700,
+ 'purple-800': $purple-800,
+ 'purple-900': $purple-900,
+) !default;
+
+$pinks: (
+ 'pink-100': $pink-100,
+ 'pink-200': $pink-200,
+ 'pink-300': $pink-300,
+ 'pink-400': $pink-400,
+ 'pink-500': $pink-500,
+ 'pink-600': $pink-600,
+ 'pink-700': $pink-700,
+ 'pink-800': $pink-800,
+ 'pink-900': $pink-900,
+) !default;
+
+$reds: (
+ 'red-100': $red-100,
+ 'red-200': $red-200,
+ 'red-300': $red-300,
+ 'red-400': $red-400,
+ 'red-500': $red-500,
+ 'red-600': $red-600,
+ 'red-700': $red-700,
+ 'red-800': $red-800,
+ 'red-900': $red-900,
+) !default;
+
+$oranges: (
+ 'orange-100': $orange-100,
+ 'orange-200': $orange-200,
+ 'orange-300': $orange-300,
+ 'orange-400': $orange-400,
+ 'orange-500': $orange-500,
+ 'orange-600': $orange-600,
+ 'orange-700': $orange-700,
+ 'orange-800': $orange-800,
+ 'orange-900': $orange-900,
+) !default;
+
+$yellows: (
+ 'yellow-100': $yellow-100,
+ 'yellow-200': $yellow-200,
+ 'yellow-300': $yellow-300,
+ 'yellow-400': $yellow-400,
+ 'yellow-500': $yellow-500,
+ 'yellow-600': $yellow-600,
+ 'yellow-700': $yellow-700,
+ 'yellow-800': $yellow-800,
+ 'yellow-900': $yellow-900,
+) !default;
+
+$greens: (
+ 'green-100': $green-100,
+ 'green-200': $green-200,
+ 'green-300': $green-300,
+ 'green-400': $green-400,
+ 'green-500': $green-500,
+ 'green-600': $green-600,
+ 'green-700': $green-700,
+ 'green-800': $green-800,
+ 'green-900': $green-900,
+) !default;
+
+$teals: (
+ 'teal-100': $teal-100,
+ 'teal-200': $teal-200,
+ 'teal-300': $teal-300,
+ 'teal-400': $teal-400,
+ 'teal-500': $teal-500,
+ 'teal-600': $teal-600,
+ 'teal-700': $teal-700,
+ 'teal-800': $teal-800,
+ 'teal-900': $teal-900,
+) !default;
+
+$cyans: (
+ 'cyan-100': $cyan-100,
+ 'cyan-200': $cyan-200,
+ 'cyan-300': $cyan-300,
+ 'cyan-400': $cyan-400,
+ 'cyan-500': $cyan-500,
+ 'cyan-600': $cyan-600,
+ 'cyan-700': $cyan-700,
+ 'cyan-800': $cyan-800,
+ 'cyan-900': $cyan-900,
+) !default;
+// fusv-enable
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
+$enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
+$enable-button-pointers: true !default;
+$enable-rfs: false !default;
+$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities: true !default;
+
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default;
+$prefix: $variable-prefix !default;
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: 4rem !default;
+$spacers: (
+ 0: 0,
+ 1: (
+ $spacer * 0.1,
+ ),
+ 2: (
+ $spacer * 0.2,
+ ),
+ 3: (
+ $spacer * 0.3,
+ ),
+ 4: (
+ $spacer * 0.4,
+ ),
+ 5: (
+ $spacer * 0.5,
+ ),
+ 6: (
+ $spacer * 0.6,
+ ),
+ 7: (
+ $spacer * 0.7,
+ ),
+ 8: (
+ $spacer * 0.8,
+ ),
+ 9: (
+ $spacer * 0.9,
+ ),
+ 10: $spacer,
+ 11: (
+ $spacer * 1.1,
+ ),
+ 12: (
+ $spacer * 1.2,
+ ),
+) !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+// scss-docs-end spacer-variables-maps
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+$position-values: (
+ 0: 0,
+ 50: 50%,
+ 100: 100%,
+) !default;
+// scss-docs-end position-map
+
+// Body
+//
+// Settings for the `` element.
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$body-text-align: null !default;
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+ $utilities-colors,
+ (
+ 'black': to-rgb($black),
+ 'white': to-rgb($white),
+ 'body': to-rgb($body-color),
+ )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+ $utilities-colors,
+ (
+ 'black': to-rgb($black),
+ 'white': to-rgb($white),
+ 'body': to-rgb($body-bg),
+ )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
+// scss-docs-end utilities-bg-colors
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration: null !default;
+
+$stretched-link-pseudo-element: after !default;
+$stretched-link-z-index: 1 !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px,
+) !default;
+// scss-docs-end grid-breakpoints
+
+@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
+@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px,
+) !default;
+// scss-docs-end container-max-widths
+
+@include _assert-ascending($container-max-widths, '$container-max-widths');
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+$gutters: $spacers !default;
+
+// Container padding
+
+$container-padding-x: $grid-gutter-width * 0.5 !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+$border-widths: (
+ 1: 1px,
+ 2: 2px,
+ 3: 3px,
+ 4: 4px,
+ 5: 5px,
+) !default;
+
+$border-color: $gray-300 !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2rem !default;
+$border-radius-lg: 0.3rem !default;
+$border-radius-pill: 50rem !default;
+// scss-docs-end border-radius-variables
+
+// scss-docs-start box-shadow-variables
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
+// scss-docs-end box-shadow-variables
+
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
+
+// scss-docs-start caret-variables
+$caret-width: 0.3em !default;
+$caret-vertical-align: $caret-width * 0.85 !default;
+$caret-spacing: $caret-width * 0.85 !default;
+// scss-docs-end caret-variables
+
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+// scss-docs-start collapse-transition
+$transition-collapse: height 0.35s ease !default;
+$transition-collapse-width: width 0.35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+ '1x1': 100%,
+ '4x3': calc(3 / 4 * 100%),
+ '16x9': calc(9 / 16 * 100%),
+ '21x9': calc(9 / 21 * 100%),
+) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// scss-docs-start font-variables
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: 'Basier Circle', sans-serif !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+// stylelint-enable value-keyword-case
+$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
+
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
+$font-size-root: null !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+// scss-docs-end font-variables
+
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size,
+) !default;
+// scss-docs-end font-sizes
+
+// scss-docs-start headings-variables
+$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
+// scss-docs-end headings-variables
+
+// scss-docs-start display-headings
+$display-font-sizes: (
+ 1: 5rem,
+ 2: 4.5rem,
+ 3: 4rem,
+ 4: 3.5rem,
+ 5: 3rem,
+ 6: 2.5rem,
+) !default;
+
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
+// scss-docs-start type-variables
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 0.875em !default;
+
+$sub-sup-font-size: 0.75em !default;
+
+$text-muted: $gray-600 !default;
+
+$initialism-font-size: $small-font-size !default;
+
+$blockquote-margin-y: $spacer !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-font-size: $small-font-size !default;
+
+$hr-margin-y: $spacer !default;
+$hr-color: inherit !default;
+$hr-height: $border-width !default;
+$hr-opacity: 0.25 !default;
+
+$legend-margin-bottom: 0.5rem !default;
+$legend-font-size: 1.5rem !default;
+$legend-font-weight: null !default;
+
+$mark-padding: 0.2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+// scss-docs-end type-variables
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+// scss-docs-start table-variables
+$table-cell-padding-y: 0.5rem !default;
+$table-cell-padding-x: 0.5rem !default;
+$table-cell-padding-y-sm: 0.25rem !default;
+$table-cell-padding-x-sm: 0.25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: $body-color !default;
+$table-bg: transparent !default;
+$table-accent-bg: transparent !default;
+
+$table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: 0.05 !default;
+$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: 0.1 !default;
+$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: 0.075 !default;
+$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+
+$table-border-factor: 0.1 !default;
+$table-border-width: $border-width !default;
+$table-border-color: $border-color !default;
+
+$table-striped-order: odd !default;
+
+$table-group-separator-color: currentColor !default;
+
+$table-caption-color: $text-muted !default;
+
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+ 'primary': shift-color($primary, $table-bg-scale),
+ 'secondary': shift-color($secondary, $table-bg-scale),
+ 'success': shift-color($success, $table-bg-scale),
+ 'info': shift-color($info, $table-bg-scale),
+ 'warning': shift-color($warning, $table-bg-scale),
+ 'danger': shift-color($danger, $table-bg-scale),
+ 'light': $light,
+ 'dark': $dark,
+) !default;
+// scss-docs-end table-loop
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: 0.375rem !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-color-opacity: 0.25 !default;
+$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
+$input-btn-focus-blur: 0 !default;
+$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: 0.25rem !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+
+$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-font-size-lg: $font-size-lg !default;
+
+$input-btn-border-width: $border-width !default;
+// scss-docs-end input-btn-variables
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: 0.65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
+
+$btn-link-color: $link-color !default;
+$btn-link-hover-color: $link-hover-color !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables
+
+// Forms
+
+// scss-docs-start form-text-variables
+$form-text-margin-top: 0.25rem !default;
+$form-text-font-size: $small-font-size !default;
+$form-text-font-style: null !default;
+$form-text-font-weight: null !default;
+$form-text-color: $text-muted !default;
+// scss-docs-end form-text-variables
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: 0.5rem !default;
+$form-label-font-size: null !default;
+$form-label-font-style: null !default;
+$form-label-font-weight: null !default;
+$form-label-color: null !default;
+// scss-docs-end form-label-variables
+
+// scss-docs-start form-input-variables
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-base !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+
+$input-bg: $body-bg !default;
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-border-color: null !default;
+
+$input-color: $body-color !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: $box-shadow-inset !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius-sm !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * 0.5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y * 0.5) !default;
+
+$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
+// scss-docs-end form-input-variables
+
+// scss-docs-start form-check-variables
+$form-check-input-width: 1em !default;
+$form-check-min-height: $font-size-base * $line-height-base !default;
+$form-check-padding-start: $form-check-input-width + 0.5em !default;
+$form-check-margin-bottom: 0.125rem !default;
+$form-check-label-color: null !default;
+$form-check-label-cursor: null !default;
+$form-check-transition: null !default;
+
+$form-check-input-active-filter: brightness(90%) !default;
+
+$form-check-input-bg: $input-bg !default;
+$form-check-input-border: 1px solid rgba($black, 0.25) !default;
+$form-check-input-border-radius: 0.25em !default;
+$form-check-radio-border-radius: 50% !default;
+$form-check-input-focus-border: $input-focus-border-color !default;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-input-checked-color: $component-active-color !default;
+$form-check-input-checked-bg-color: $component-active-bg !default;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-indeterminate-color: $component-active-color !default;
+$form-check-input-indeterminate-bg-color: $component-active-bg !default;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
+
+$form-check-input-disabled-opacity: 0.5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
+$form-check-inline-margin-end: 1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
+$form-switch-color: rgba($black, 0.25) !default;
+$form-switch-width: 2em !default;
+$form-switch-padding-start: $form-switch-width + 0.5em !default;
+$form-switch-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-border-radius: $form-switch-width !default;
+$form-switch-transition: background-position 0.15s ease-in-out !default;
+
+$form-switch-focus-color: $input-focus-border-color !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
+
+$form-switch-checked-color: $component-active-color !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
+$form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
+
+// scss-docs-start input-group-variables
+$input-group-addon-padding-y: $input-padding-y !default;
+$input-group-addon-padding-x: $input-padding-x !default;
+$input-group-addon-font-weight: $input-font-weight !default;
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+// scss-docs-end input-group-variables
+
+// scss-docs-start form-select-variables
+$form-select-padding-y: $input-padding-y !default;
+$form-select-padding-x: $input-padding-x !default;
+$form-select-font-family: $input-font-family !default;
+$form-select-font-size: $input-font-size !default;
+$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight !default;
+$form-select-line-height: $input-line-height !default;
+$form-select-color: $input-color !default;
+$form-select-bg: $input-bg !default;
+$form-select-disabled-color: null !default;
+$form-select-disabled-bg: $gray-200 !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-position: right $form-select-padding-x center !default;
+$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800 !default;
+$form-select-indicator: url("data:image/svg+xml,") !default;
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
+
+$form-select-border-width: $input-border-width !default;
+$form-select-border-color: $input-border-color !default;
+$form-select-border-radius: $input-border-radius !default;
+$form-select-box-shadow: $box-shadow-inset !default;
+
+$form-select-focus-border-color: $input-focus-border-color !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+
+$form-select-padding-y-sm: $input-padding-y-sm !default;
+$form-select-padding-x-sm: $input-padding-x-sm !default;
+$form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
+
+$form-select-padding-y-lg: $input-padding-y-lg !default;
+$form-select-padding-x-lg: $input-padding-x-lg !default;
+$form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
+// scss-docs-end form-select-variables
+
+// scss-docs-start form-range-variables
+$form-range-track-width: 100% !default;
+$form-range-track-height: 0.5rem !default;
+$form-range-track-cursor: pointer !default;
+$form-range-track-bg: $gray-300 !default;
+$form-range-track-border-radius: 1rem !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
+
+$form-range-thumb-width: 1rem !default;
+$form-range-thumb-height: $form-range-thumb-width !default;
+$form-range-thumb-bg: $component-active-bg !default;
+$form-range-thumb-border: 0 !default;
+$form-range-thumb-border-radius: 1rem !default;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-disabled-bg: $gray-500 !default;
+$form-range-thumb-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+// scss-docs-end form-range-variables
+
+// scss-docs-start form-file-variables
+$form-file-button-color: $input-color !default;
+$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+// scss-docs-end form-file-variables
+
+// scss-docs-start form-floating-variables
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: 0.625rem !default;
+$form-floating-label-opacity: 0.65 !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
+$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
+// scss-docs-end form-floating-variables
+
+// Form validation
+
+// scss-docs-start form-feedback-variables
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $form-text-font-size !default;
+$form-feedback-font-style: $form-text-font-style !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
+// scss-docs-end form-feedback-variables
+
+// scss-docs-start form-validation-states
+$form-validation-states: (
+ 'valid': (
+ 'color': $form-feedback-valid-color,
+ 'icon': $form-feedback-icon-valid,
+ ),
+ 'invalid': (
+ 'color': $form-feedback-invalid-color,
+ 'icon': $form-feedback-icon-invalid,
+ ),
+) !default;
+// scss-docs-end form-validation-states
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
+$zindex-popover: 1070 !default;
+$zindex-tooltip: 1080 !default;
+// scss-docs-end zindex-stack
+
+// Navs
+
+// scss-docs-start nav-variables
+$nav-link-padding-y: 0.5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: $link-color !default;
+$nav-link-hover-color: $link-hover-color !default;
+$nav-link-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+// scss-docs-end nav-variables
+
+// Navbar
+
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: 0.5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-theme-variables
+$navbar-dark-color: rgba($white, 0.55) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
+$navbar-light-color: rgba($black, 0.55) !default;
+$navbar-light-hover-color: rgba($black, 0.7) !default;
+$navbar-light-active-color: rgba($black, 0.9) !default;
+$navbar-light-disabled-color: rgba($black, 0.3) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
+$navbar-light-toggler-border-color: rgba($black, 0.1) !default;
+
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-theme-variables
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 0.125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, 0.15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-box-shadow: $box-shadow !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
+$dropdown-link-hover-bg: $gray-200 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-500 !default;
+
+$dropdown-item-padding-y: $spacer * 0.25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
+// Pagination
+
+// scss-docs-start pagination-variables
+$pagination-padding-y: 0.375rem !default;
+$pagination-padding-x: 0.75rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-margin-start: -$pagination-border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-color: $link-hover-color !default;
+$pagination-focus-bg: $gray-200 !default;
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+$pagination-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out !default;
+
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+// scss-docs-end pagination-variables
+
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: 0.5 !default;
+$placeholder-opacity-min: 0.2 !default;
+// scss-docs-end placeholders
+
+// Cards
+
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * 0.5 !default;
+$card-border-width: $border-width !default;
+$card-border-color: rgba($black, 0.125) !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y * 0.5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba($black, 0.03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: $white !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * 0.5 !default;
+// scss-docs-end card-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: $body-bg !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: rgba($black, 0.125) !default;
+$accordion-border-radius: $border-radius !default;
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
+$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
+$accordion-button-active-color: shade-color($primary, 10%) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $accordion-button-color !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+// scss-docs-end accordion-variables
+
+// Tooltips
+
+// scss-docs-start tooltip-variables
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: $spacer * 0.25 !default;
+$tooltip-padding-x: $spacer * 0.5 !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+// scss-docs-end tooltip-variables
+
+// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
+
+// Popovers
+
+// scss-docs-start popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow: $box-shadow !default;
+
+$popover-header-bg: shade-color($popover-bg, 6%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+// scss-docs-end popover-variables
+
+// Toasts
+
+// scss-docs-start toast-variables
+$toast-max-width: 350px !default;
+$toast-padding-x: 0.75rem !default;
+$toast-padding-y: 0.5rem !default;
+$toast-font-size: 0.875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($white, 0.85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba($black, 0.1) !default;
+$toast-border-radius: $border-radius !default;
+$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: $gray-600 !default;
+$toast-header-background-color: rgba($white, 0.85) !default;
+$toast-header-border-color: rgba($black, 0.05) !default;
+// scss-docs-end toast-variables
+
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size: 0.75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: 0.35em !default;
+$badge-padding-x: 0.65em !default;
+$badge-border-radius: $border-radius !default;
+// scss-docs-end badge-variables
+
+// Modals
+
+// scss-docs-start modal-variables
+$modal-inner-padding: $spacer !default;
+
+$modal-footer-margin-between: 0.5rem !default;
+
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-header-border-color: $border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding-y: $modal-inner-padding !default;
+$modal-header-padding-x: $modal-inner-padding !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform 0.3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+// scss-docs-end modal-variables
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+$alert-bg-scale: -80% !default;
+$alert-border-scale: -70% !default;
+$alert-color-scale: 40% !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
+
+// Progress bars
+
+// scss-docs-start progress-variables
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * 0.75 !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: $box-shadow-inset !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
+// scss-docs-end progress-variables
+
+// List group
+
+// scss-docs-start list-group-variables
+$list-group-color: $gray-900 !default;
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, 0.125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: $spacer * 0.5 !default;
+$list-group-item-padding-x: $spacer !default;
+$list-group-item-bg-scale: -80% !default;
+$list-group-item-color-scale: 40% !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+// scss-docs-end list-group-variables
+
+// Image thumbnails
+
+// scss-docs-start thumbnail-variables
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
+// scss-docs-end thumbnail-variables
+
+// Figures
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: $gray-600 !default;
+// scss-docs-end figure-variables
+
+// Breadcrumbs
+
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: 0.5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote('/') !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
+
+// Carousel
+
+// scss-docs-start carousel-variables
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+$carousel-control-hover-opacity: 0.9 !default;
+$carousel-control-transition: opacity 0.15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: 0.5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity 0.6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
+
+$carousel-transition-duration: 0.6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+$carousel-dark-indicator-active-bg: $black !default;
+$carousel-dark-caption-color: $black !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-variables
+
+// Spinners
+
+// scss-docs-start spinner-variables
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-vertical-align: -0.125em !default;
+$spinner-border-width: 0.25em !default;
+$spinner-animation-speed: 0.75s !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: 0.2em !default;
+// scss-docs-end spinner-variables
+
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: 0.25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,") !default;
+$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
+$btn-close-opacity: 0.5 !default;
+$btn-close-hover-opacity: 0.75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: 0.25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+// Offcanvas
+
+// scss-docs-start offcanvas-variables
+$offcanvas-padding-y: $modal-inner-padding !default;
+$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-horizontal-width: 400px !default;
+$offcanvas-vertical-height: 30vh !default;
+$offcanvas-transition-duration: 0.3s !default;
+$offcanvas-border-color: $modal-content-border-color !default;
+$offcanvas-border-width: $modal-content-border-width !default;
+$offcanvas-title-line-height: $modal-title-line-height !default;
+$offcanvas-bg-color: $modal-content-bg !default;
+$offcanvas-color: $modal-content-color !default;
+$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// scss-docs-end offcanvas-variables
+
+// Code
+
+$code-font-size: $small-font-size !default;
+$code-color: $pink !default;
+
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+
+$pre-color: null !default;
diff --git a/dev/scss/settings/_global-vars.scss b/dev/scss/settings/_global-vars.scss
new file mode 100755
index 0000000..41732fa
--- /dev/null
+++ b/dev/scss/settings/_global-vars.scss
@@ -0,0 +1,6 @@
+$global: 'theme';
+$layout-prefix: 'l-' !default;
+$component-prefix: 'c-' !default;
+$modules-prefix: 'm-' !default;
+$grid-prefix: 'g-' !default;
+$utility-prefix: 'u-' !default;
diff --git a/dev/scss/global/_path.scss b/dev/scss/settings/_path.scss
similarity index 56%
rename from dev/scss/global/_path.scss
rename to dev/scss/settings/_path.scss
index 0f531e8..77888e6 100755
--- a/dev/scss/global/_path.scss
+++ b/dev/scss/settings/_path.scss
@@ -1,4 +1,4 @@
// #{$theme-imgpath}/...
// background-image: url('#{$font-path}/#{$theme-imgpath}/bg-hero.svg');
-$theme-imgpath: '../images' !default;
-$font-path: '../fonts' !default;
+$theme-imgpath: '../../images' !default;
+$font-path: '../../fonts' !default;
diff --git a/dev/scss/settings/_token.scss b/dev/scss/settings/_token.scss
new file mode 100644
index 0000000..b9cd366
--- /dev/null
+++ b/dev/scss/settings/_token.scss
@@ -0,0 +1,313 @@
+@use 'sass:math';
+/* Breakpoints */
+$t-breakpoints: (
+ 'xs': 0,
+ 'sm': 481px,
+ 'md': 768px,
+ 'lg': 1024px,
+ 'xl': 1280px,
+ 'xxl': 1440px,
+);
+
+/* Opacity */
+$t-opacity: (
+ '0': 0,
+ '10': 10,
+ '23': 23,
+ '100': 100,
+);
+
+/* Colors */
+$t-colors: (
+ 'black': #000,
+ 'white': #fff,
+ 'red': red,
+ 'primary': red,
+ 'secondary': blue,
+ 'tertiary': green,
+);
+
+/* Typo sizes */
+$t-typography-size: (
+ 'p2-sm': clamp(0.69rem, calc(0.59rem + 0.44vw), 1.12rem),
+ 'p2': clamp(0.69rem, calc(0.59rem + 0.44vw), 1.12rem),
+ 'p1': clamp(0.83rem, calc(0.7rem + 0.59vw), 1.4rem),
+ 'p': clamp(1rem, calc(0.82rem + 0.78vw), 1.75rem),
+ 'h5': clamp(1.2rem, calc(0.96rem + 1.02vw), 2.19rem),
+ 'h4': clamp(1.44rem, calc(1.13rem + 1.34vw), 2.73rem),
+ 'h3': clamp(1.73rem, calc(1.32rem + 1.75vw), 3.42rem),
+ 'h2': clamp(2.07rem, calc(1.54rem + 2.28vw), 4.27rem),
+ 'h1': clamp(2.49rem, calc(1.8rem + 2.95vw), 5.34rem),
+ 'h1-lg': 100px,
+) !default;
+
+/* Typo leadings */
+$t-typography-leading: (
+ 'none': 1,
+ 'tight': 1.35,
+ 'normal': 1.5,
+ 'loose': 1.7,
+) !default;
+
+/* Typo trackings */
+$t-typography-tracking: (
+ 'tight': -0.01em,
+ 'normal': 0,
+ 'wide': 0.01em,
+ 'extra-wide': 0.075em,
+) !default;
+
+/* Typo weight */
+$t-typography-weight: (
+ 'light': 300,
+ 'normal': 400,
+ 'medium': 600,
+ 'bold': 700,
+) !default;
+
+/* Font face */
+$t-fonts: (
+ '1': (
+ // style-name: value
+ 'font-family': 'FT base',
+ 'src': url('../../fonts/FTBase-Book.woff2') format('woff2'),
+ 'font-weight': 300,
+ ),
+ '2': (
+ // style-name: value
+ 'font-family': 'FT base',
+ 'src': url('../../fonts/FTBase-Regular.woff2') format('woff2'),
+ 'font-weight': 400,
+ ),
+);
+
+/* Default fonts */
+$t-typography--default-font: 'Helvetica Neue, Helvetica, Arial, sans-serif' !default;
+
+$multiplier: 4px;
+
+/* Spacings */
+$t-spacing: (
+ '0': 0,
+ '4': $multiplier * 1,
+ '8': $multiplier * 2,
+ '12': $multiplier * 3,
+ '16': $multiplier * 4,
+ '20': $multiplier * 5,
+);
+
+/* Ratios */
+$t-ratio: (
+ '1x1': math.div(1, 1),
+ '3x4': math.div(4, 3),
+ '4x3': math.div(3, 4),
+ '16x9': math.div(9, 16),
+);
+
+/* Grid */
+$t-grid: (
+ 'max-width': 108.5rem,
+ 'gutter': map-get($t-spacing, sm),
+ 'columns': 12,
+);
+
+// UTILITY BUILDER
+
+/* Typo styles */
+$t-typography: (
+ 'xs': (
+ 'h1': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: h1,
+ ),
+ ),
+ 'h2': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: h2,
+ ),
+ ),
+ 'h3': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: h3,
+ ),
+ ),
+ 'h4': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: h4,
+ ),
+ ),
+ 'h5': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: h5,
+ ),
+ ),
+ 'p1': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: p1,
+ ),
+ ),
+ 'p2': (
+ 'font-size':
+ map-get(
+ $map: $t-typography-size,
+ $key: p2,
+ ),
+ ),
+ ),
+);
+
+/* Utility classes */
+$t-utility: (
+ 'Breakpoints': (
+ 'prefix': 'br-',
+ 'items': $t-breakpoints,
+ 'root': true,
+ ),
+ 'Colors': (
+ 'prefix': 'c-',
+ 'items': $t-colors,
+ 'root': true,
+ ),
+ 'Background color': (
+ 'prefix': 'bg-',
+ 'items': $t-colors,
+ 'property': 'background',
+ 'root': false,
+ ),
+ 'Text color': (
+ 'prefix': 'text-',
+ 'items': $t-colors,
+ 'property': 'color',
+ 'root': false,
+ ),
+ 'Display': (
+ 'prefix': 'd-',
+ 'items': (
+ 'block': 'block',
+ 'inline': 'inline',
+ 'inline-flex': 'inline-flex',
+ 'flex': 'flex',
+ ),
+ 'property': 'display',
+ 'responsive': true,
+ 'root': false,
+ ),
+ 'Opacity': (
+ 'prefix': 'op-',
+ 'items': $t-opacity,
+ 'property': 'opacity',
+ 'responsive': true,
+ 'root': true,
+ ),
+ 'Ratio': (
+ 'prefix': 'ratio-',
+ 'items': $t-ratio,
+ 'root': true,
+ ),
+ 'Aspect ratio': (
+ 'prefix': 'ratio-',
+ 'items': $t-ratio,
+ 'property': 'aspect-ratio',
+ ),
+ 'Spacing': (
+ 'prefix': 'spacing-',
+ 'items': $t-spacing,
+ 'root': true,
+ ),
+ 'Padding all': (
+ 'prefix': 'p-',
+ 'items': $t-spacing,
+ 'property': 'padding',
+ 'responsive': true,
+ ),
+ 'Padding x': (
+ 'prefix': 'px-',
+ 'items': $t-spacing,
+ 'property': 'padding-inline',
+ 'responsive': true,
+ ),
+ 'Padding y': (
+ 'prefix': 'py-',
+ 'items': $t-spacing,
+ 'property': 'padding-block',
+ 'responsive': true,
+ ),
+ 'Padding Top': (
+ 'prefix': 'pt-',
+ 'items': $t-spacing,
+ 'property': 'padding-block-start',
+ 'responsive': true,
+ ),
+ 'Padding Bottom': (
+ 'prefix': 'pb-',
+ 'items': $t-spacing,
+ 'property': 'padding-block-end',
+ 'responsive': true,
+ ),
+ 'Padding Left': (
+ 'prefix': 'ps-',
+ 'items': $t-spacing,
+ 'property': 'padding-inline-start',
+ 'responsive': true,
+ ),
+ 'Padding Right': (
+ 'prefix': 'pe-',
+ 'items': $t-spacing,
+ 'property': 'padding-inline-end',
+ 'responsive': true,
+ ),
+ 'Margin all': (
+ 'prefix': 'm-',
+ 'items': $t-spacing,
+ 'property': 'margin',
+ 'responsive': true,
+ ),
+ 'Margin x': (
+ 'prefix': 'mx-',
+ 'items': $t-spacing,
+ 'property': 'margin-inline',
+ 'responsive': true,
+ ),
+ 'Margin y': (
+ 'prefix': 'my-',
+ 'items': $t-spacing,
+ 'property': 'margin-block',
+ 'responsive': true,
+ ),
+ 'Margin Top': (
+ 'prefix': 'mt-',
+ 'items': $t-spacing,
+ 'property': 'margin-block-start',
+ 'responsive': true,
+ ),
+ 'Margin Bottom': (
+ 'prefix': 'mb-',
+ 'items': $t-spacing,
+ 'property': 'margin-block-end',
+ 'responsive': true,
+ ),
+ 'Margin Left': (
+ 'prefix': 'ms-',
+ 'items': $t-spacing,
+ 'property': 'margin-inline-start',
+ 'responsive': true,
+ ),
+ 'Margin Right': (
+ 'prefix': 'me-',
+ 'items': $t-spacing,
+ 'property': 'margin-inline-end',
+ 'responsive': true,
+ ),
+);
diff --git a/dev/scss/styleguide.scss b/dev/scss/styleguide.scss
index af56e32..d1162c7 100644
--- a/dev/scss/styleguide.scss
+++ b/dev/scss/styleguide.scss
@@ -1,101 +1,117 @@
.html {
- font-size: 1rem;
+ font-size: 1rem;
}
.styleguide {
- &-wrap {
- padding: 15px 15px 0;
- @media (min-width: 991px) {
- padding: 45px 35px 0;
- }
+ &-wrap {
+ padding: 15px 15px 0;
+ @media (min-width: 991px) {
+ padding: 45px 35px 0;
}
- &-header {
- border-bottom: 1px solid #d8d8d8;
- padding: 0 0 20px;
- h4 {
- font-size: 35px;
- }
+ }
+
+ &-header {
+ border-bottom: 1px solid #d8d8d8;
+ padding: 0 0 20px;
+
+ h4 {
+ font-size: 35px;
}
+ }
}
.sidebar {
- position: -webkit-sticky;
- position: sticky;
- top: 5px;
- padding-top: 35px;
- .list-group-item {
- border: none;
- border-bottom: 1px solid #d8d8d8;
- margin-bottom: 15px;
- padding: 0 0 15px;
- &::before {
- display: none;
- }
- > a {
- color: #002b49;
- text-decoration: none;
- font-size: 22px;
- &:hover,
- &:focus {
- color: #000;
- }
- &::after {
- display: none;
- }
- &.active {
- color: #00a6cb;
- }
- }
+ position: -webkit-sticky;
+ position: sticky;
+ top: 5px;
+ padding-top: 35px;
+
+ .list-group-item {
+ border: none;
+ border-bottom: 1px solid #d8d8d8;
+ margin-bottom: 15px;
+ padding: 0 0 15px;
+
+ &::before {
+ display: none;
}
+
+ > a {
+ color: #002b49;
+ text-decoration: none;
+ font-size: 22px;
+
+ &:hover,
+ &:focus {
+ color: #000;
+ }
+
+ &::after {
+ display: none;
+ }
+
+ &.active {
+ color: #00a6cb;
+ }
+ }
+ }
}
.content-wrap {
- border-bottom: 1px solid #d8d8d8;
- padding: 35px 0 35px;
- margin-bottom: 25px;
+ border-bottom: 1px solid #d8d8d8;
+ padding: 35px 0 35px;
+ margin-bottom: 25px;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ code {
+ background-color: rgba(0, 0, 0, 0.75);
+ padding: 7px 8px;
+ border-radius: 4px;
+ color: #ffc107;
+ font-size: 15px;
+ }
+
+ pre {
+ background-color: #eff0f3;
+ padding: 30px;
+ white-space: pre-wrap;
+ white-space: normal;
+ margin-bottom: 50px;
+
&:last-of-type {
- border: none;
+ margin-bottom: 0;
}
+
code {
- background-color: rgba(0, 0, 0, 0.75);
- padding: 7px 8px;
- border-radius: 4px;
- color: #ffc107;
- font-size: 15px;
- }
- pre {
- background-color: #eff0f3;
- padding: 30px;
- white-space: pre-wrap;
- white-space: normal;
- margin-bottom: 50px;
- &:last-of-type {
- margin-bottom: 0;
- }
- code {
- display: block;
- color: #ffc107;
- padding: 15px;
- white-space: normal;
- }
+ display: block;
+ color: #ffc107;
+ padding: 15px;
+ white-space: normal;
}
+ }
}
.font-size {
- &-5 {
- font-size: 5px;
- }
- &-20 {
- font-size: 20px;
- }
- &-25 {
- font-size: 25px;
- }
- &-30 {
- font-size: 30px;
- }
+ &-5 {
+ font-size: 5px;
+ }
+
+ &-20 {
+ font-size: 20px;
+ }
+
+ &-25 {
+ font-size: 25px;
+ }
+
+ &-30 {
+ font-size: 30px;
+ }
}
.contentwrapper {
- padding-left: 50px;
+ padding-left: 50px;
}
diff --git a/dev/scss/styles/home.scss b/dev/scss/styles/home.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/dev/scss/styles/leadspace.scss b/dev/scss/styles/leadspace.scss
deleted file mode 100644
index 6d15260..0000000
--- a/dev/scss/styles/leadspace.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../common-imports';
diff --git a/dev/scss/mixins/_border-radius.scss b/dev/scss/tools/_border-radius.scss
similarity index 81%
rename from dev/scss/mixins/_border-radius.scss
rename to dev/scss/tools/_border-radius.scss
index da6b9ac..dc224b1 100755
--- a/dev/scss/mixins/_border-radius.scss
+++ b/dev/scss/tools/_border-radius.scss
@@ -1,5 +1,5 @@
// Border Radius
// eg: @include border-radius(3px); | @include border-radius(5px 5px 0 0);
@mixin border-radius($radius) {
- border-radius: $radius;
+ border-radius: $radius;
}
diff --git a/dev/scss/tools/_box-shadow.scss b/dev/scss/tools/_box-shadow.scss
new file mode 100755
index 0000000..74c2ab2
--- /dev/null
+++ b/dev/scss/tools/_box-shadow.scss
@@ -0,0 +1,10 @@
+// Box Shadow
+// eg. @include box-shadow(0 5px 4px black(.75));
+//|| [@include box-shadow(0 5px 4px black(.75));
+//|| @include box-shadow(inset 0 5px 4px black(.75));]
+//|| @include box-shadow(inset 0 0px 0px 2px $color-15);
+/* stylelint-disable */
+
+@mixin box-shadow($value) {
+ box-shadow: $value;
+}
diff --git a/dev/scss/mixins/_calc.scss b/dev/scss/tools/_calc.scss
similarity index 69%
rename from dev/scss/mixins/_calc.scss
rename to dev/scss/tools/_calc.scss
index 74a7cb2..9cfacc1 100755
--- a/dev/scss/mixins/_calc.scss
+++ b/dev/scss/tools/_calc.scss
@@ -1,5 +1,5 @@
// Calc
// eg. @include calc(width, "100% - 50px");
@mixin calc($property, $expression) {
- #{$property}: calc(#{$expression});
+ #{$property}: calc(#{$expression});
}
diff --git a/dev/scss/tools/_ellipsis.scss b/dev/scss/tools/_ellipsis.scss
new file mode 100755
index 0000000..81505a5
--- /dev/null
+++ b/dev/scss/tools/_ellipsis.scss
@@ -0,0 +1,12 @@
+// Truncating
+// eg: @include ellipsis(2em, 2);
+/* stylelint-disable */
+
+@mixin ellipsis($max-height, $lines: 2) {
+ overflow: hidden !important;
+ max-height: $max-height !important;
+ display: -webkit-box !important;
+ -webkit-box-orient: vertical !important;
+ -webkit-line-clamp: $lines !important;
+ text-overflow: -o-ellipsis-lastline !important;
+}
diff --git a/dev/scss/mixins/_filter.scss b/dev/scss/tools/_filter.scss
similarity index 88%
rename from dev/scss/mixins/_filter.scss
rename to dev/scss/tools/_filter.scss
index ed526f0..6e45bdb 100755
--- a/dev/scss/mixins/_filter.scss
+++ b/dev/scss/tools/_filter.scss
@@ -8,5 +8,5 @@
// contrast ex: filter: contrast(200%);
// blur ex: filter: blur(2px);
@mixin filter($filter-type, $filter-amount) {
- filter: $filter-type + unquote('(#{$filter-amount})');
+ filter: $filter-type + unquote('(#{$filter-amount})');
}
diff --git a/dev/scss/tools/_gradient.scss b/dev/scss/tools/_gradient.scss
new file mode 100755
index 0000000..eb5fb2f
--- /dev/null
+++ b/dev/scss/tools/_gradient.scss
@@ -0,0 +1,24 @@
+// @include gradient(red, transparent, horizontal);
+// @include gradient(red, green, vertical);
+/* stylelint-disable */
+
+@mixin gradient($start-color, $end-color, $orientation) {
+ background: $start-color;
+ @if $orientation== 'vertical' {
+ background: -webkit-linear-gradient(top, $start-color, $end-color);
+ background: linear-gradient(to bottom, $start-color, $end-color);
+ }
+ @if $orientation== 'vertical-bottom' {
+ background: -webkit-linear-gradient(bottom, $start-color, $end-color);
+ background: linear-gradient(to top, $start-color, $end-color);
+ } @else if $orientation== 'horizontal' {
+ background: -webkit-linear-gradient(left, $start-color, $end-color);
+ background: linear-gradient(to right, $start-color, $end-color);
+ } @else if $orientation== 'horizontal-right' {
+ background: -webkit-linear-gradient(right, $start-color, $end-color);
+ background: linear-gradient(to left, $start-color, $end-color);
+ } @else {
+ background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
+ background: radial-gradient(ellipse at center, $start-color, $end-color);
+ }
+}
diff --git a/dev/scss/mixins/_icon-pseudo.scss b/dev/scss/tools/_icon-pseudo.scss
similarity index 65%
rename from dev/scss/mixins/_icon-pseudo.scss
rename to dev/scss/tools/_icon-pseudo.scss
index 1ce11a5..dac0fbd 100755
--- a/dev/scss/mixins/_icon-pseudo.scss
+++ b/dev/scss/tools/_icon-pseudo.scss
@@ -1,12 +1,15 @@
// Icons Pseudo
// eg: @include icons-pseudo; [within the pseudo class]
-/*
- &:before {
+
+/*
+&:before {
content: '\e900';
@include icons-pseudo;
- }
+}
*/
+/* stylelint-disable */
+
@mixin icons-pseudo {
- font-family: $icomoon-font-family;
+ font-family: $icomoon-font-family;
}
diff --git a/dev/scss/tools/_links.scss b/dev/scss/tools/_links.scss
new file mode 100755
index 0000000..d4212ad
--- /dev/null
+++ b/dev/scss/tools/_links.scss
@@ -0,0 +1,19 @@
+// Links Mixin
+// eg: @include links($color-link, $color-link, $color-link-hover, $color-link);
+@mixin links($link, $visited, $hover, $active) {
+ & {
+ color: $link;
+ &:visited {
+ color: $visited;
+ }
+ &:hover {
+ color: $hover;
+ text-decoration: none;
+ }
+ &:active,
+ &:focus {
+ color: $active;
+ text-decoration: none;
+ }
+ }
+}
diff --git a/dev/scss/tools/_mixins.scss b/dev/scss/tools/_mixins.scss
new file mode 100755
index 0000000..7e6378a
--- /dev/null
+++ b/dev/scss/tools/_mixins.scss
@@ -0,0 +1,9 @@
+@import 'calc';
+@import 'ellipsis';
+@import 'filter';
+@import 'gradient';
+@import 'icon-pseudo';
+@import 'links';
+@import 'nth-child';
+@import 'placeholder';
+@import 'prevent-hover';
diff --git a/dev/scss/mixins/_nth-child.scss b/dev/scss/tools/_nth-child.scss
similarity index 61%
rename from dev/scss/mixins/_nth-child.scss
rename to dev/scss/tools/_nth-child.scss
index 11982b0..9098312 100755
--- a/dev/scss/mixins/_nth-child.scss
+++ b/dev/scss/tools/_nth-child.scss
@@ -3,9 +3,9 @@
// background: red;
// }
@mixin even() {
- &:nth-child(even) {
- @content;
- }
+ &:nth-child(even) {
+ @content;
+ }
}
// Odds
@@ -13,7 +13,7 @@
// background: red;
// }
@mixin odd() {
- &:nth-child(odd) {
- @content;
- }
+ &:nth-child(odd) {
+ @content;
+ }
}
diff --git a/dev/scss/tools/_placeholder.scss b/dev/scss/tools/_placeholder.scss
new file mode 100755
index 0000000..692f42a
--- /dev/null
+++ b/dev/scss/tools/_placeholder.scss
@@ -0,0 +1,25 @@
+// Placeholder
+// eg: @include placeholder($color-base);
+// @include placeholder {
+// color: red;
+// }
+
+/* stylelint-disable */
+
+@mixin placeholder {
+ &::-webkit-input-placeholder {
+ @content;
+ }
+
+ &:-moz-placeholder {
+ @content;
+ }
+
+ &::-moz-placeholder {
+ @content;
+ }
+
+ &:-ms-input-placeholder {
+ @content;
+ }
+}
diff --git a/dev/scss/tools/_placeholders.scss b/dev/scss/tools/_placeholders.scss
new file mode 100755
index 0000000..d5839ff
--- /dev/null
+++ b/dev/scss/tools/_placeholders.scss
@@ -0,0 +1,27 @@
+// Clear Padding and Margin
+%clear-gutter {
+ margin: 0;
+ padding: 0;
+}
+// Removes the list style
+%list-none {
+ list-style-type: none;
+}
+
+// Transparent BG for Background Images
+%bg-transparent {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+
+// Header Text
+%heading {
+ // font-family: $font-family-heading;
+ color: inherit;
+ margin-top: 0;
+}
diff --git a/dev/scss/mixins/_prevent-hover.scss b/dev/scss/tools/_prevent-hover.scss
similarity index 51%
rename from dev/scss/mixins/_prevent-hover.scss
rename to dev/scss/tools/_prevent-hover.scss
index ee1a675..55a1384 100755
--- a/dev/scss/mixins/_prevent-hover.scss
+++ b/dev/scss/tools/_prevent-hover.scss
@@ -1,18 +1,18 @@
-// Using reversed logic, a media query can be constructed that prevents a mobile browser from triggering hover effects at all.
-/*
+/* Using reversed logic, a media query can be
+constructed that prevents a mobile browser from triggering hover effects at all.
@include hover-supported() {
background-color: white;
}
*/
@mixin hover-supported {
- /*
- * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
+ /*
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
* coarse: The primary input mechanism includes a pointing device of limited accuracy.
*/
- @media not all and (pointer: coarse) {
- &:hover,
- &:focus {
- @content;
- }
+ @media not all and (pointer: coarse) {
+ &:hover,
+ &:focus {
+ @content;
}
+ }
}
diff --git a/dev/scss/tools/_rem.scss b/dev/scss/tools/_rem.scss
new file mode 100755
index 0000000..ea8ef12
--- /dev/null
+++ b/dev/scss/tools/_rem.scss
@@ -0,0 +1,71 @@
+// padding: rem(20px 25px);
+// font-size: rem(15px);
+// font-size: rem(110px !important);
+
+$rem-baseline: 16px !default;
+$rem-fallback: false !default;
+$rem-px-only: false !default;
+
+@function rem-separator($list, $separator: false) {
+ @if $separator== 'comma' or $separator== 'space' {
+ @return append($list, null, $separator);
+ }
+ @if function-exists('list-separator') ==true {
+ @return list-separator($list);
+ }
+ $test-list: ();
+ @each $item in $list {
+ $test-list: append($test-list, $item, space);
+ }
+ @return if($test-list==$list, space, comma);
+}
+
+@mixin rem-baseline($zoom: 100%) {
+ font-size: $zoom / 16px * $rem-baseline;
+}
+
+@function rem-convert($to, $values...) {
+ $result: ();
+ $separator: rem-separator($values);
+ @each $value in $values {
+ @if type-of($value) == 'number' and unit($value) == 'rem' and $to== 'px' {
+ $result: append($result, $value / 1rem * $rem-baseline, $separator);
+ } @else if type-of($value) == 'number' and unit($value) == 'px' and $to== 'rem' {
+ $result: append($result, $value / $rem-baseline * 1rem, $separator);
+ } @else if type-of($value) == 'list' {
+ $value-separator: rem-separator($value);
+ $value: rem-convert($to, $value...);
+ $value: rem-separator($value, $value-separator);
+ $result: append($result, $value, $separator);
+ } @else {
+ $result: append($result, $value, $separator);
+ }
+ }
+
+ @return if(length($result) ==1, nth($result, 1), $result);
+}
+
+@function rem($values...) {
+ @if $rem-px-only {
+ @return rem-convert(px, $values...);
+ } @else {
+ @return rem-convert(rem, $values...);
+ }
+}
+
+@mixin rem($properties, $values...) {
+ @if type-of($properties) == 'map' {
+ @each $property in map-keys($properties) {
+ @include rem($property, map-get($properties, $property));
+ }
+ } @else {
+ @each $property in $properties {
+ @if $rem-fallback or $rem-px-only {
+ #{$property}: rem-convert(px, $values...);
+ }
+ @if not $rem-px-only {
+ #{$property}: rem-convert(rem, $values...);
+ }
+ }
+ }
+}
diff --git a/dev/scss/tools/_typo-calc.scss b/dev/scss/tools/_typo-calc.scss
new file mode 100644
index 0000000..471be03
--- /dev/null
+++ b/dev/scss/tools/_typo-calc.scss
@@ -0,0 +1,35 @@
+// Scalable Typography
+// eg: @include rotate(45deg);
+
+@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
+ & {
+ @each $property in $properties {
+ #{$property}: $min-value;
+ }
+
+ @media screen and (min-width: $min-screen) {
+ @each $property in $properties {
+ #{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value);
+ }
+ }
+
+ @media screen and (min-width: $max-screen) {
+ @each $property in $properties {
+ #{$property}: $max-value;
+ }
+ }
+ }
+}
+
+// Requires the calc-interpolation function which can also be used independently
+@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
+ $a: ($max-value - $min-value) / ($max-screen - $min-screen);
+ $b: $min-value - $a * $min-screen;
+
+ $sign: '+';
+ @if ($b < 0) {
+ $sign: '-';
+ $b: abs($b);
+ }
+ @return calc(#{$a * 100}vw #{$sign} #{$b});
+}
diff --git a/dev/scss/tools/token/_breakpoints.scss b/dev/scss/tools/token/_breakpoints.scss
new file mode 100644
index 0000000..863cc97
--- /dev/null
+++ b/dev/scss/tools/token/_breakpoints.scss
@@ -0,0 +1,19 @@
+// NOTE: Import these mixins wherever necessary.
+
+@mixin breakpoint-up($size) {
+ @media screen and (min-width: #{map-get($t-breakpoints, $size)}) {
+ @content;
+ }
+}
+
+@mixin breakpoint-down($size) {
+ @media screen and (max-width: #{map-get($t-breakpoints, $size)}) {
+ @content;
+ }
+}
+
+@mixin breakpoint-between($minSize, $maxSize) {
+ @media screen and (min-width: #{map-get($t-breakpoints, $minSize)}) and (max-width: #{map-get($t-breakpoints, $maxSize)}) {
+ @content;
+ }
+}
diff --git a/dev/scss/tools/token/_font.scss b/dev/scss/tools/token/_font.scss
new file mode 100644
index 0000000..de69ba2
--- /dev/null
+++ b/dev/scss/tools/token/_font.scss
@@ -0,0 +1,12 @@
+@mixin system-font($fonts-list) {
+ @each $name, $font in $fonts-list {
+ @font-face {
+ @each $style, $val in $font {
+ #{$style}: $val;
+ }
+
+ font-style: normal;
+ font-display: swap;
+ }
+ }
+}
diff --git a/dev/scss/tools/token/_generator.scss b/dev/scss/tools/token/_generator.scss
new file mode 100644
index 0000000..29ae03f
--- /dev/null
+++ b/dev/scss/tools/token/_generator.scss
@@ -0,0 +1,57 @@
+@mixin utility-builder($utility) {
+ @each $name, $utility-data in $utility {
+ // Destructuring map
+ $prefix: map-get(
+ $map: $utility-data,
+ $key: 'prefix',
+ );
+ $items: map-get(
+ $map: $utility-data,
+ $key: 'items',
+ );
+ $property: map-get(
+ $map: $utility-data,
+ $key: 'property',
+ );
+ $responsive: map-get(
+ $map: $utility-data,
+ $key: 'responsive',
+ );
+ $root: map-get(
+ $map: $utility-data,
+ $key: 'root',
+ );
+
+ @if $property {
+ @each $item-name, $item-value in $items {
+ $class-name: #{$utility-prefix}#{$prefix}#{$item-name};
+ // @error $class-name;
+ .#{$class-name} {
+ #{$property}: #{$item-value};
+ }
+ }
+
+ @if $responsive {
+ @each $size, $value in $t-breakpoints {
+ @each $item-name, $item-value in $items {
+ @include breakpoint-up($size) {
+ $class-name: #{$utility-prefix}#{$prefix}#{$size}-#{$item-name};
+ // @error $class-name;
+ .#{$class-name} {
+ #{$property}: #{$item-value};
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @if $root {
+ :root {
+ @each $item-name, $item-value in $items {
+ --#{$prefix}#{$item-name}: #{$item-value};
+ }
+ }
+ }
+ }
+}
diff --git a/dev/scss/tools/token/_grid.scss b/dev/scss/tools/token/_grid.scss
new file mode 100644
index 0000000..42f40ac
--- /dev/null
+++ b/dev/scss/tools/token/_grid.scss
@@ -0,0 +1,37 @@
+@mixin system-grid-cols($grid-map: (), $breakpoints, $rootVal: false) {
+ .l-grid > * {
+ grid-column: var(--col-start, auto) / span var(--col-span, 1);
+ }
+
+ @for $span from 1 through map-get($grid-map, 'columns') {
+ .col-span-#{$span} {
+ --col-span: #{$span};
+ }
+ .col-start-#{$span} {
+ --col-start: #{$span};
+ }
+ }
+
+ @each $size, $val in $breakpoints {
+ @for $span from 1 through map-get($grid-map, 'columns') {
+ .col-span-#{$size}-#{$span} {
+ @include breakpoint-up($size) {
+ --col-span: #{$span};
+ }
+ }
+ .col-start-#{$size}-#{$span} {
+ @include breakpoint-up($size) {
+ --col-start: #{$span};
+ }
+ }
+ }
+ }
+
+ @if $rootVal {
+ :root {
+ @each $grid-map-name, $grid-map-val in $grid-map {
+ --#{$grid-map-name}: #{$grid-map-val};
+ }
+ }
+ }
+}
diff --git a/dev/scss/tools/token/_typography.scss b/dev/scss/tools/token/_typography.scss
new file mode 100644
index 0000000..5b9a838
--- /dev/null
+++ b/dev/scss/tools/token/_typography.scss
@@ -0,0 +1,14 @@
+@mixin system-typo($map) {
+ @each $size, $type-map in $map {
+ @each $type, $style-map in $type-map {
+ @each $property, $val in $style-map {
+ @include breakpoint-up($size) {
+ #{$type},
+ .#{$type} {
+ #{$property}: #{$val};
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/dev/scss/utilities/_config.scss b/dev/scss/utilities/_config.scss
deleted file mode 100755
index a011daf..0000000
--- a/dev/scss/utilities/_config.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-html {
- scroll-behavior: smooth;
-}
-
-html,
-body {
- height: auto;
- font-size: 10px;
- position: relative;
- -webkit-overflow-scrolling: touch;
- // Makes the smooth scrolling on ios devices
-}
-
-body {
- letter-spacing: normal;
- @include font-smoothing(on);
- font-size: 1.8rem;
- line-height: 2.8rem;
-
- &.prevent-scrolling {
- @extend .overflow-hidden, .position-fixed, .w-100;
- top: auto;
- }
-}
-
-a {
- color: inherit;
- text-decoration: none;
-
- &:hover,
- &:focus {
- text-decoration: none;
- color: inherit;
- text-decoration: none;
- }
-}
-
-a,
-button,
-.btn {
- @extend .transition-fast;
-}
-
-p {
- margin-bottom: 3.2rem;
-
- &:last-child {
- @extend .mb-0;
- }
-}
-
-ul,
-ol {
- padding-left: 2rem;
-
- > li {
- padding-left: .4rem;
- margin-bottom: 1rem;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &::marker {
- color: $primary;
- }
- }
-}
-
-b,
-strong {
- font-weight: $font-weight-bold;
-}
-
-figure {
- margin-bottom: 0;
-}
-
-button,
-.btn,
-.btn-link {
- text-decoration: none;
-
- &:hover {
- text-decoration: none;
- outline: none;
- }
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
- box-shadow: 0 0 0 13rem $white inset !important;
-}
diff --git a/dev/scss/utilities/_helper.scss b/dev/scss/utilities/_helper.scss
index ce3acfc..90e1d32 100755
--- a/dev/scss/utilities/_helper.scss
+++ b/dev/scss/utilities/_helper.scss
@@ -1,335 +1,244 @@
// Transitions
.transition {
- &-slow {
- @include transition(all 0.5s ease !important);
- }
+ &-slow {
+ @include transition(all 0.5s ease !important);
+ }
- &-fast {
- @include transition(all 0.3s ease !important);
- }
+ &-fast {
+ @include transition(all 0.3s ease !important);
+ }
}
// Links
.link {
- &-styled {
- position: relative !important;
- text-decoration: none !important;
- font-weight: 500 !important;
-
- &::after {
- content: '' !important;
- background-color: $primary !important;
- width: 100% !important;
- height: rem(2px) !important;
- position: absolute !important;
- bottom: rem(-7px) !important;
- left: 0 !important;
- @extend .transition-fast;
- }
-
- &:hover {
- &:hover,
- &:focus,
- &:active,
- &.disabled,
- &:disabled {
- @extend .opacity-3;
- }
- }
- }
+ &-styled {
+ position: relative !important;
+ text-decoration: none !important;
+ font-weight: 500 !important;
+
+ &::after {
+ content: '' !important;
+ background-color: $primary !important;
+ width: 100% !important;
+ height: 2px !important;
+ position: absolute !important;
+ bottom: -7px !important;
+ left: 0 !important;
+ @extend .transition-fast;
+ }
+
+ &:hover {
+ &:hover,
+ &:focus,
+ &:active,
+ &.disabled,
+ &:disabled {
+ //@extend .opacity-3;
+ }
+ }
+ }
}
// Truncating the paragraphs
.truncate {
- &--1-line {
- @include ellipsis(30px, 1);
- }
+ &--1-line {
+ @include ellipsis(30px, 1);
+ }
- &--2-line {
- @include ellipsis(58px, 2);
- }
+ &--2-line {
+ @include ellipsis(58px, 2);
+ }
- &--3-line {
- @include ellipsis(84px, 3);
- }
+ &--3-line {
+ @include ellipsis(84px, 3);
+ }
}
// Background Variations
.bg {
- &-cover {
- background-size: cover !important;
- }
+ &-cover {
+ background-size: cover !important;
+ }
- &-position {
- &-center {
- background-position: center center !important;
- }
+ &-position {
+ &-center {
+ background-position: center center !important;
}
+ }
- &-no-repeat {
- background-repeat: no-repeat !important;
- }
+ &-no-repeat {
+ background-repeat: no-repeat !important;
+ }
+
+ &-transparent {
+ background-color: transparent !important;
+ }
}
// Text Styling
.text {
- &-line-through {
- text-decoration: line-through !important;
- }
+ &-line-through {
+ text-decoration: line-through !important;
+ }
- &-underline {
- text-decoration: underline !important;
- }
+ &-underline {
+ text-decoration: underline !important;
+ }
+
+ &-indent {
+ text-indent: -9999px !important;
+ }
+
+ &-indent-0 {
+ text-indent: 0 !important;
+ }
}
// Image Full Screen
.full-screen {
- @extend .bg-cover;
- @extend .bg-no-repeat;
- @extend .bg-position-center;
+ @extend .bg-cover;
+ @extend .bg-no-repeat;
+ @extend .bg-position-center;
}
// Positions
.position {
- &-l-0 {
- left: 0 !important;
- }
+ &-l-0 {
+ left: 0 !important;
+ }
- &-r-0 {
- right: 0 !important;
- }
+ &-r-0 {
+ right: 0 !important;
+ }
- &-b-0 {
- bottom: 0 !important;
- }
+ &-b-0 {
+ bottom: 0 !important;
+ }
- &-t-0 {
- top: 0 !important;
- }
+ &-t-0 {
+ top: 0 !important;
+ }
- &-lt-0 {
- @extend .position-l-0;
- @extend .position-t-0;
- }
+ &-lt-0 {
+ @extend .position-l-0;
+ @extend .position-t-0;
+ }
- &-rt-0 {
- @extend .position-r-0;
- @extend .position-t-0;
- }
+ &-rt-0 {
+ @extend .position-r-0;
+ @extend .position-t-0;
+ }
- &-lb-0 {
- @extend .position-l-0;
- @extend .position-b-0;
- }
-}
-
-// Opacity
-.opacity {
- &-0 {
- @include opacity(0);
- }
-
- &-1 {
- @include opacity(1);
- }
-
- &-2 {
- @include opacity(0.2);
- }
-
- &-3 {
- @include opacity(0.3);
- }
-
- &-4 {
- @include opacity(0.4);
- }
-
- &-5 {
- @include opacity(0.5);
- }
-
- &-6 {
- @include opacity(0.6);
- }
-
- &-7 {
- @include opacity(0.7);
- }
-
- &-8 {
- @include opacity(0.8);
- }
-
- &-9 {
- @include opacity(0.9);
- }
+ &-lb-0 {
+ @extend .position-l-0;
+ @extend .position-b-0;
+ }
}
// Overflow Variations
.overflow {
- &-auto {
- overflow: auto !important;
- }
+ &-auto {
+ overflow: auto !important;
+ }
- &-x {
- overflow-x: hidden !important;
- }
+ &-x {
+ overflow-x: hidden !important;
+ }
- &-y {
- overflow-y: hidden !important;
- }
+ &-y {
+ overflow-y: hidden !important;
+ }
}
// Width Variations
.w {
- &-100-vw {
- width: 100vw !important;
- }
+ &-100-vw {
+ width: 100vw !important;
+ }
}
// height Variations
.h {
- &-100-vh {
- height: 100vh !important;
- }
-}
-
-// Text Indention For Hiding
-.text {
- &-indent {
- text-indent: rem(-9999px) !important;
- }
-
- &-indent-0 {
- text-indent: 0 !important;
- }
+ &-100-vh {
+ height: 100vh !important;
+ }
}
// Image Fit
.object {
- &-fit {
- object-fit: cover !important;
- }
+ &-fit {
+ object-fit: cover !important;
+ }
- &-position {
- &-center {
- object-position: center !important;
- }
+ &-position {
+ &-center {
+ object-position: center !important;
}
+ }
}
// Flex Assets
.flex {
- &-rows-break {
- flex-basis: 100% !important;
- height: 0 !important;
- margin: 0 !important;
- }
- &-bottom-push {
- flex: 1 0 auto;
- }
+ &-rows-break {
+ flex-basis: 100% !important;
+ height: 0 !important;
+ margin: 0 !important;
+ }
+
+ &-bottom-push {
+ flex: 1 0 auto;
+ }
}
// Transform
.transform {
- &-xy-center {
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
+ &-xy-center {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
// Control
.media {
- &-control {
- border: none;
- background-color: $white;
- width: rem(60px);
- height: rem(60px);
- border-radius: 50%;
- line-height: 1;
-
- @include media-breakpoint-up(md) {
- width: rem(88.43px);
- height: rem(88.43px);
- }
+ &-control {
+ border: none;
+ background-color: $white;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ line-height: 1;
+
+ @include media-breakpoint-up(md) {
+ width: 88.43px;
+ height: 88.43px;
}
+ }
}
// Section gutter
.section {
- &-gutter,
- &-gutter-md {
- padding-top: rem(64px);
- padding-bottom: rem(64px);
- @include media-breakpoint-up(sm) {
- padding-top: rem(80px);
- padding-bottom: rem(80px);
- }
+ &-gutter,
+ &-gutter-md {
+ padding-top: 64px;
+ padding-bottom: 64px;
+ @include media-breakpoint-up(sm) {
+ padding-top: 80px;
+ padding-bottom: 80px;
}
- &-gutter {
- @include media-breakpoint-up(md) {
- padding-top: rem(120px);
- padding-bottom: rem(120px);
- }
- }
- &-gutter-md {
- @include media-breakpoint-up(md) {
- padding-top: rem(104px);
- padding-bottom: rem(104px);
- }
- }
-}
+ }
-figure {
- margin: rem(0px);
-}
-
-img {
- @extend .mw-100;
-}
-
-ul {
- margin: rem(0px);
- padding: rem(0px);
- li {
- list-style-type: none;
+ &-gutter {
+ @include media-breakpoint-up(md) {
+ padding-top: 120px;
+ padding-bottom: 120px;
}
-}
+ }
-.collapse-text {
- max-height: rem(140px);
- position: relative;
- overflow-y: hidden;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- &::before {
- position: absolute;
- content: "";
- left: 0;
- bottom: 0;
- height: rem(74px);
- width: 100%;
- background-image: linear-gradient(to bottom, rgba(0, 43, 73, 0), $primary);
- @include media-breakpoint-up(md) {
- display: none;
- }
- }
- &--light {
- &::before {
- background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
- }
- }
+ &-gutter-md {
@include media-breakpoint-up(md) {
- max-height: initial;
- }
- &.expand {
- max-height: initial;
- &::before {
- display: none;
- }
+ padding-top: 104px;
+ padding-bottom: 104px;
}
+ }
}
diff --git a/dev/scss/utilities/_placeholders.scss b/dev/scss/utilities/_placeholders.scss
deleted file mode 100755
index 5ced56b..0000000
--- a/dev/scss/utilities/_placeholders.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Clear Padding and Margin
-%clear-gutter {
- margin: 0;
- padding: 0;
-}
-
-// Removes the list style
-%list-none {
- list-style-type: none;
-}
-
-// Transparent BG for Background Images
-%bg-transparent {
- content: '';
- background-color: brand(0.75);
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-// Header Text
-%heading {
- color: inherit;
- margin-top: 0;
-}
diff --git a/dev/scss/utilities/_typo.scss b/dev/scss/utilities/_typo.scss
deleted file mode 100755
index df3758e..0000000
--- a/dev/scss/utilities/_typo.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4 {
- @extend %heading;
-}
-
-h1,
-.h1,
-.display-1 {
- font-size: 4rem;
- line-height: 4rem;
-
- @include media-breakpoint-up(xl) {
- font-size: 6.4rem;
- line-height: 6.4rem;
- }
-}
-
-h2,
-.h2 {
- font-size: 2.8rem;
- line-height: 2.8rem;
- @include media-breakpoint-up(xl) {
- font-size: 4.4rem;
- line-height: 4.4rem;
- }
-}
-
-h3,
-.h3 {
- font-size: 2.6rem;
- line-height: 2.6rem;
- @include media-breakpoint-up(xl) {
- font-size: 3.6rem;
- line-height: 3.6rem;
- }
-}
-
-h4,
-.h4 {
- font-size: 2.4rem;
- line-height: 2.4rem;
- @include media-breakpoint-up(xl) {
- font-size: 3rem;
- line-height: 3rem;
- }
-}
-
-h5,
-.h5,
-.body-1,
-body {
- font-size: 2.2rem;
- line-height: 2.3rem;
- @include media-breakpoint-up(xl) {
- font-size: 2.6rem;
- line-height: 2.8rem;
- }
-}
-
-h6,
-.h6 {
- font-size: 1.6rem;
- line-height: 2rem;
- @include media-breakpoint-up(xl) {
- font-size: 2rem;
- line-height: 2.4rem;
- }
-}
-
-.eyebrow {
- font-size: 1.4rem;
- line-height: 1;
- &-1 {
- @include media-breakpoint-up(md) {
- font-size: 1.6rem;
- }
- @include media-breakpoint-up(xl) {
- font-size: 2rem;
- }
- }
-}
-
-.quote {
- &-1 {
- font-size: 2.8rem;
- line-height: 3.2rem;
- @include media-breakpoint-up(xl) {
- font-size: 3.6rem;
- line-height: 4rem;
- }
- }
-}
-
-.button,
-.btn {
- font-size: 1.8rem;
- line-height: 2rem;
- @include media-breakpoint-up(xl) {
- font-size: 2rem;
- line-height: 2rem;
- }
-}
-
-a {
- text-decoration: none;
- @extend .transition-fast;
-}
diff --git a/dev/scss/vendors/icons/icons.scss b/dev/scss/vendors/icons/icons.scss
deleted file mode 100755
index 82f9817..0000000
--- a/dev/scss/vendors/icons/icons.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-@import "variables/variables";
-
-@font-face {
- font-family: "#{$icomoon-font-family}";
- src: url("#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4r1frz");
- src: url("#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4r1frz#iefix") format("embedded-opentype"),
- url("#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?4r1frz") format("truetype"),
- url("#{$icomoon-font-path}/#{$icomoon-font-family}.woff?4r1frz") format("woff"),
- url("#{$icomoon-font-path}/#{$icomoon-font-family}.svg?4r1frz##{$icomoon-font-family}") format("svg");
- font-weight: normal;
- font-style: normal;
- font-display: block;
-}
-
-[class^="icon-"],
-[class*=" icon-"] {
- /* use !important to prevent issues with browser extensions that change fonts */
- font-family: "#{$icomoon-font-family}" !important;
- speak: never;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-chevron-down {
- &:before {
- content: $icon-chevron-down;
- }
-}
-.icon-chevron-left {
- &:before {
- content: $icon-chevron-left;
- }
-}
-.icon-chevron-right {
- &:before {
- content: $icon-chevron-right;
- }
-}
-.icon-chevron-up {
- &:before {
- content: $icon-chevron-up;
- }
-}
-.icon-down {
- &:before {
- content: $icon-down;
- }
-}
-.icon-top {
- &:before {
- content: $icon-top;
- }
-}
-.icon-left {
- &:before {
- content: $icon-left;
- }
-}
-.icon-right {
- &:before {
- content: $icon-right;
- }
-}
-.icon-external {
- &:before {
- content: $icon-external;
- }
-}
-.icon-edit {
- &:before {
- content: $icon-edit;
- }
-}
-.icon-facebook {
- &:before {
- content: $icon-facebook;
- }
-}
-.icon-youtube {
- &:before {
- content: $icon-youtube;
- }
-}
-.icon-info {
- &:before {
- content: $icon-info;
- }
-}
-.icon-instagram {
- &:before {
- content: $icon-instagram;
- }
-}
-.icon-twitter {
- &:before {
- content: $icon-twitter;
- }
-}
-.icon-linkedin {
- &:before {
- content: $icon-linkedin;
- }
-}
-.icon-localtion {
- &:before {
- content: $icon-localtion;
- }
-}
-.icon-tick {
- &:before {
- content: $icon-tick;
- }
-}
-.icon-logo {
- &:before {
- content: $icon-logo;
- }
-}
-.icon-play {
- &:before {
- content: $icon-play;
- }
-}
-.icon-camera {
- &:before {
- content: $icon-camera;
- }
-}
-.icon-plus {
- &:before {
- content: $icon-plus;
- }
-}
-.icon-burger {
- &:before {
- content: $icon-burger;
- }
-}
-.icon-search {
- &:before {
- content: $icon-search;
- }
-}
-.icon-close {
- &:before {
- content: $icon-close;
- }
-}
diff --git a/dev/scss/vendors/icons/variables/_variables.scss b/dev/scss/vendors/icons/variables/_variables.scss
deleted file mode 100755
index 4a96f54..0000000
--- a/dev/scss/vendors/icons/variables/_variables.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-$icomoon-font-family: "Icons" !default; // Name should be same as font name [Strict case sensitive]
-$icomoon-font-path: "./../fonts" !default;
-
-$icon-chevron-down: "\e902";
-$icon-chevron-left: "\e903";
-$icon-chevron-right: "\e904";
-$icon-chevron-up: "\e905";
-$icon-down: "\e907";
-$icon-top: "\e916";
-$icon-left: "\e90d";
-$icon-right: "\e913";
-$icon-external: "\e909";
-$icon-edit: "\e908";
-$icon-facebook: "\e90a";
-$icon-youtube: "\e918";
-$icon-info: "\e90b";
-$icon-instagram: "\e90c";
-$icon-twitter: "\e917";
-$icon-linkedin: "\e90e";
-$icon-localtion: "\e90f";
-$icon-tick: "\e915";
-$icon-logo: "\e910";
-$icon-play: "\e911";
-$icon-camera: "\e901";
-$icon-plus: "\e912";
-$icon-burger: "\e900";
-$icon-search: "\e914";
-$icon-close: "\e906";
diff --git a/gulpfile.js/fonts.js b/gulpfile.js/fonts.js
index a3e4cb6..5941f4c 100644
--- a/gulpfile.js/fonts.js
+++ b/gulpfile.js/fonts.js
@@ -3,21 +3,21 @@ import imagemin from 'gulp-imagemin';
import gulpIf from 'gulp-if';
const isProd = process.env.NODE_ENV === 'prod';
export function images() {
- return gulp
- .src('dev/images/**/*')
- .pipe(
- gulpIf(
- isProd,
- imagemin({
- interlaced: true,
- progressive: true,
- optimizationLevel: 5,
- svgoPlugins: [{ removeViewBox: true }],
- })
- )
- )
- .pipe(gulp.dest('dist/images'));
+ return gulp
+ .src('dev/images/**/*')
+ .pipe(
+ gulpIf(
+ isProd,
+ imagemin({
+ interlaced: true,
+ progressive: true,
+ optimizationLevel: 5,
+ svgoPlugins: [{ removeViewBox: true }],
+ })
+ )
+ )
+ .pipe(gulp.dest('dist/images'));
}
export function fonts() {
- return gulp.src(['dev/fonts/**/*']).pipe(gulp.dest('dist/fonts'));
+ return gulp.src(['dev/fonts/**/*']).pipe(gulp.dest('dist/fonts'));
}
diff --git a/gulpfile.js/html.js b/gulpfile.js/html.js
index 803269c..48ffb8a 100644
--- a/gulpfile.js/html.js
+++ b/gulpfile.js/html.js
@@ -9,30 +9,30 @@ import bs from 'browser-sync';
import version from 'gulp-version-number';
var versionConfig = {
- value: '%MDS%',
- append: {
- key: 'v',
- to: ['css', 'js'],
- },
+ value: '%MDS%',
+ append: {
+ key: 'v',
+ to: ['css', 'js'],
+ },
};
export function htmlmin2() {
- return gulp
- .src('dev/*.html')
- .pipe(plumber())
- .pipe(
- strip({
- safe: '