From 1a30f783071fe5803118e863e2da9c43f6325ad2 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 2 Nov 2020 01:32:56 +0100
Subject: [PATCH] bootstrap update, form elements fixes

---
 package.json                                  |  2 +-
 src/js/input-mask.js                          | 11 +++++++++++
 src/js/tabler.js                              |  1 +
 src/pages/_data/libs.json                     |  2 --
 .../_includes/cards/order-statistics.html     |  2 +-
 .../_includes/forms/form-elements-4.html      |  4 ++--
 src/pages/_includes/layout/content.html       |  7 ++++++-
 src/pages/_includes/layout/css.html           |  5 +++--
 src/pages/_includes/layout/js.html            |  7 +++++--
 .../form/selectgroup-project-manager.html     |  2 +-
 src/pages/_includes/ui/form/input-file.html   |  8 +-------
 src/pages/_includes/ui/form/input-mask.html   | 19 +------------------
 src/pages/_includes/ui/table.html             |  2 +-
 src/pages/_layouts/base.html                  |  3 ++-
 src/pages/_layouts/homepage.html              | 10 ++++++++++
 src/pages/cards.html                          |  1 -
 src/pages/form-elements.html                  |  4 ++--
 src/pages/index.html                          |  8 +-------
 src/pages/layout-rtl.html                     |  9 +++------
 src/scss/_config.scss                         |  2 ++
 src/scss/_variables.scss                      |  4 +++-
 src/scss/layout/_footer.scss                  |  2 +-
 src/scss/ui/_buttons.scss                     |  9 ++++++---
 src/scss/ui/_forms.scss                       |  4 ++--
 src/scss/ui/_type.scss                        |  6 ++++--
 src/scss/ui/forms/_form-selectgroup.scss      |  1 -
 26 files changed, 70 insertions(+), 65 deletions(-)
 create mode 100644 src/js/input-mask.js
 create mode 100644 src/pages/_layouts/homepage.html

diff --git a/package.json b/package.json
index 40cc89c13..a530c640d 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "@fullcalendar/timegrid": "^5.3.1",
     "apexcharts": "^3.22.0",
     "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#a6156ed",
+    "bootstrap": "twbs/bootstrap#e0b8fcd",
     "countup.js": "^2.0.7",
     "daterangepicker": "^3.1.0",
     "flatpickr": "^4.6.6",
diff --git a/src/js/input-mask.js b/src/js/input-mask.js
new file mode 100644
index 000000000..6698dc650
--- /dev/null
+++ b/src/js/input-mask.js
@@ -0,0 +1,11 @@
+// Input mask plugin
+
+import IMask from 'imask';
+
+var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
+maskElementList.map(function (maskEl) {
+	return new IMask(maskEl, {
+		mask: maskEl.dataset.mask,
+		lazy: maskEl.dataset['mask-visible'] === 'true'
+	})
+});
\ No newline at end of file
diff --git a/src/js/tabler.js b/src/js/tabler.js
index aff52ba3f..2aa8a0192 100644
--- a/src/js/tabler.js
+++ b/src/js/tabler.js
@@ -1,6 +1,7 @@
 //Vendor
 
 import './autosize';
+import './input-mask';
 
 (function() {
 	/**
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index 8007ac566..df56f654d 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -9,8 +9,6 @@
   "js": {
     "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
     "jquery": "jquery/dist/jquery.slim.min.js",
-    "autosize": "autosize/dist/autosize.min.js",
-    "imask": "imask/dist/imask.min.js",
     "selectize": "selectize/dist/js/standalone/selectize.min.js",
     "apexcharts": "apexcharts/dist/apexcharts.min.js",
     "jqvmap": "jqvmap/dist/jquery.vmap.min.js",
diff --git a/src/pages/_includes/cards/order-statistics.html b/src/pages/_includes/cards/order-statistics.html
index 49de43500..6274b2f77 100644
--- a/src/pages/_includes/cards/order-statistics.html
+++ b/src/pages/_includes/cards/order-statistics.html
@@ -12,7 +12,7 @@
 
 		<ul class="list-unstyled">
 			{% for item in site.data.orders %}
-			<li class="row row-sm lh-sm align-items-center mb-2">
+			<li class="row row-sm align-items-center mb-2">
 				<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
 				<div class="col">
 					{{ item.title }}
diff --git a/src/pages/_includes/forms/form-elements-4.html b/src/pages/_includes/forms/form-elements-4.html
index d32210ae1..ece97cd7b 100644
--- a/src/pages/_includes/forms/form-elements-4.html
+++ b/src/pages/_includes/forms/form-elements-4.html
@@ -8,7 +8,7 @@
 	<label class="form-label">Buttons group</label>
 	<div class="btn-group w-100">
 		<button type="button" class="btn">1 min</button>
-		<button type="button" class="btn active">5 min</button>
+		<button type="button" class="btn btn-primary">5 min</button>
 		<button type="button" class="btn">10 min</button>
 		<button type="button" class="btn">30 min</button>
 	</div>
@@ -19,7 +19,7 @@
 	<div class="btn-group w-100">
 		<button type="button" class="btn">Option 1</button>
 		<button type="button" class="btn">Option 2</button>
-		<button type="button" class="btn active">Option 3</button>
+		<button type="button" class="btn btn-primary">Option 3</button>
 		<div class="btn-group" role="group">
 			<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				Other
diff --git a/src/pages/_includes/layout/content.html b/src/pages/_includes/layout/content.html
index 2fbfd3c98..0da1bf2c3 100644
--- a/src/pages/_includes/layout/content.html
+++ b/src/pages/_includes/layout/content.html
@@ -3,7 +3,12 @@
 <div class="content">
 	<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
 		{% if page-header %}
-		{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle class=page.page-header-class%}
+			{% assign description = page.page-header-description | default: layout.page-header-description %}
+			{% assign actions = page.page-header-actions | default: layout.page-header-actions %}
+			{% assign pretitle = page.page-header-pretitle | default: layout.page-header-pretitle %}
+			{% assign class = page.page-header-class | default: layout.page-header-class %}
+
+			{% include layout/page-header.html title=page-header description=description actions=actions pretitle=pretitle class=class %}
 		{% endif %}
 
 		{{ content }}
diff --git a/src/pages/_includes/layout/css.html b/src/pages/_includes/layout/css.html
index 42908ae08..a7a705f77 100644
--- a/src/pages/_includes/layout/css.html
+++ b/src/pages/_includes/layout/css.html
@@ -1,8 +1,9 @@
 <!-- CSS files -->
+{% assign libs = page.libs | default: layout.libs %}
 
-{% if page.libs %}
+{% if libs %}
 	{% for lib in site.data.libs.css %}
-		{% if page.libs contains lib[0] %}
+		{% if libs contains lib[0] %}
 			{% for file in lib[1] %}
 				<link href="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}" rel="stylesheet"/>
 			{% endfor %}
diff --git a/src/pages/_includes/layout/js.html b/src/pages/_includes/layout/js.html
index 9c097ca96..2a9e7af8f 100644
--- a/src/pages/_includes/layout/js.html
+++ b/src/pages/_includes/layout/js.html
@@ -1,6 +1,8 @@
 <!-- Libs JS -->
+{% assign libs = page.libs | default: layout.libs %}
+
 {% for lib in site.data.libs.js %}
-	{% if page.libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
+	{% if libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
 		{% for file in lib[1] %}
 		<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file }}{% else %}{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if site.preview %}?{{ site.time | date: '%s' }}{% endif %}{% endif %}"></script>
 		{% endfor %}
@@ -22,8 +24,9 @@
 {% endfor %}
 {% endremoveemptylines %}
 
+{% assign libs = page.libs | default: layout.libs %}
 {% for lib in site.data.libs.js-files %}
-{% if page.libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
+{% if libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
 {% for file in lib[1] %}
 
 {% assign filename = 'js/' | append: file | append: '.html' %}
diff --git a/src/pages/_includes/parts/form/selectgroup-project-manager.html b/src/pages/_includes/parts/form/selectgroup-project-manager.html
index 269fb73cb..4be437adf 100644
--- a/src/pages/_includes/parts/form/selectgroup-project-manager.html
+++ b/src/pages/_includes/parts/form/selectgroup-project-manager.html
@@ -12,7 +12,7 @@
 				</div>
 				<div class="form-selectgroup-label-content d-flex align-items-center">
 					{% include ui/avatar.html person=person class="mr-3" %}
-					<div class="lh-sm">
+					<div>
 						<div class="font-weight-medium">{{ person.full_name }}</div>
 						<div class="text-muted">{{ person.job_title }}</div>
 					</div>
diff --git a/src/pages/_includes/ui/form/input-file.html b/src/pages/_includes/ui/form/input-file.html
index 98078feae..71af9cc71 100644
--- a/src/pages/_includes/ui/form/input-file.html
+++ b/src/pages/_includes/ui/form/input-file.html
@@ -1,7 +1 @@
-<div class="form-file">
-	<input type="file" class="form-file-input" id="customFile">
-	<label class="form-file-label" for="customFile">
-		<span class="form-file-text">Choose file...</span>
-		<span class="form-file-button">Browse</span>
-	</label>
-</div>
\ No newline at end of file
+<input type="file" class="form-control" />
\ No newline at end of file
diff --git a/src/pages/_includes/ui/form/input-mask.html b/src/pages/_includes/ui/form/input-mask.html
index b6d747884..68d6b6e1a 100644
--- a/src/pages/_includes/ui/form/input-mask.html
+++ b/src/pages/_includes/ui/form/input-mask.html
@@ -1,18 +1 @@
-<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
-
-{% capture_once scripts %}
-<script>
-(function () {
-	/**
-	 * Input mask
-	 */
-	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-	maskElementList.map(function (maskEl) {
-		return new IMask(maskEl, {
-			mask: maskEl.dataset.mask,
-			lazy: maskEl.dataset['mask-visible'] === 'true'
-		})
-	});
-})();
-</script>
-{% endcapture_once %}
+<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
\ No newline at end of file
diff --git a/src/pages/_includes/ui/table.html b/src/pages/_includes/ui/table.html
index d7d86fe0a..fb7ac6440 100644
--- a/src/pages/_includes/ui/table.html
+++ b/src/pages/_includes/ui/table.html
@@ -25,7 +25,7 @@
 			<tr>
 				{% if include.avatars %}
 				<td {% if include.mobile %}data-label="Name"{% endif %}>
-					<div class="d-flex lh-sm py-1 align-items-center">
+					<div class="d-flex py-1 align-items-center">
 						{% include ui/avatar.html person-id=person.id class="mr-2" %}
 						<div class="flex-fill">
 							<div class="font-weight-medium">{{ person.full_name }}</div>
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index 7d76f2910..384583b03 100644
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -1,12 +1,13 @@
 <!doctype html>
 {% include layout/banner.html %}
+{% assign title = page.title | default: layout.title %}
 <html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
 <head>
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
 	<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 
-	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
+	<title>{% if title %}{{ title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
 
 	{% if jekyll.environment == 'production' %}
 	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
diff --git a/src/pages/_layouts/homepage.html b/src/pages/_layouts/homepage.html
new file mode 100644
index 000000000..adc2c633f
--- /dev/null
+++ b/src/pages/_layouts/homepage.html
@@ -0,0 +1,10 @@
+---
+title: Dashboard
+layout: default
+page-header: Dashboard
+page-header-pretitle: Overview
+page-header-actions: buttons
+libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+---
+
+{% include layout/homepage.html %}
diff --git a/src/pages/cards.html b/src/pages/cards.html
index 74072841e..4fa2ce190 100644
--- a/src/pages/cards.html
+++ b/src/pages/cards.html
@@ -2,7 +2,6 @@
 title: Cards
 page-header: Cards
 menu: base.cards
-libs: imask
 ---
 
 <div class="row">
diff --git a/src/pages/form-elements.html b/src/pages/form-elements.html
index d7e964355..dc1bc27c0 100644
--- a/src/pages/form-elements.html
+++ b/src/pages/form-elements.html
@@ -2,10 +2,10 @@
 title: Form elements
 page-header: Form elements
 menu: forms
-libs: jquery, nouislider, imask, autosize, selectize, flatpickr, tabler-flags, tabler-payments
+libs: jquery, nouislider, autosize, selectize, flatpickr, tabler-flags, tabler-payments
 ---
 
-<div class="row">
+<div class="row row-cards">
 	<div class="col-12">
 		<form action="https://httpbin.org/post" method="post" class="card">
 			<div class="card-header">
diff --git a/src/pages/index.html b/src/pages/index.html
index ecdd8d310..7973afe53 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,10 +1,4 @@
 ---
-title: Dashboard
-page-header: Dashboard
-page-header-pretitle: Overview
-page-header-actions: buttons
 menu: home
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+layout: homepage
 ---
-
-{% include layout/homepage.html %}
diff --git a/src/pages/layout-rtl.html b/src/pages/layout-rtl.html
index daf2bd577..12d5ffe20 100644
--- a/src/pages/layout-rtl.html
+++ b/src/pages/layout-rtl.html
@@ -1,11 +1,8 @@
 ---
-title: Dashboard
-page-header: Dashboard
-page-header-pretitle: Overview
-page-header-actions: buttons
-rtl: true
 menu: home
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+rtl: true
+layout: homepage
+title: RTL mode
 ---
 
 {% include layout/homepage.html %}
diff --git a/src/scss/_config.scss b/src/scss/_config.scss
index deee0d9a5..a483e2030 100644
--- a/src/scss/_config.scss
+++ b/src/scss/_config.scss
@@ -1,3 +1,5 @@
+@import "~bootstrap/scss/functions";
+
 @import "variables";
 @import "utilities";
 @import "mixins";
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 26ac367ad..4a895511b 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -503,7 +503,9 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 
 $form-check-input-checked-border-color: $border-color-transparent !default;
 
-$form-select-indicator-color: opacify($border-color, .24) !default;
+$form-check-label-disabled-opacity: $text-muted-opacity;
+
+$form-select-indicator-color: $border-color-dark !default;
 
 $form-switch-width: 1.75rem !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
index ab3fd44db..1261c085d 100644
--- a/src/scss/layout/_footer.scss
+++ b/src/scss/layout/_footer.scss
@@ -1,7 +1,7 @@
 .footer {
   border-top: 1px solid $footer-border-color;
   background-color: $footer-bg;
-  padding: 1rem 0;
+  padding: 2rem 0;
   color: $text-muted;
 
   margin-bottom: (-$content-padding-y);
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index b85a3b729..cac33f84e 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -24,7 +24,8 @@
   svg {
     width: 1.25rem;
     height: 1.25rem;
-    margin: 0 .5rem 0 -.25rem;
+    margin: 0 .5rem 0;
+    margin-inline-start: -.25rem;
     vertical-align: bottom;
   }
 
@@ -32,11 +33,13 @@
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: text-top;
-    margin: 0 .5rem 0 -.5rem;
+    margin: 0 .5rem 0;
+    margin-inline-start: -.25rem;
   }
 
   .icon-right {
-    margin: 0 -.25rem 0 .5rem;
+    margin: 0 .5rem 0;
+    margin-inline-end: -.25rem;
   }
 
   .badge {
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index d0af0e00a..e735a8f7b 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -155,13 +155,13 @@ Form switch
   user-select: none;
 
   &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
-    opacity: .64;
+    opacity: $text-muted-opacity;
   }
 }
 
 .form-check-input {
   background-size: $form-check-input-width;
-  margin-top: .25rem;
+  margin-top: .125rem;
 
   .form-switch & {
     transition: .3s background-color, .3s background-position;
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index 26e40ebee..7f50e50c5 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -10,8 +10,10 @@ a {
 
 ul,
 ol {
-  margin: 0 0 1rem 1rem;
-  padding: 0 0 0 1rem;
+  margin: 0 0 1rem 0;
+  margin-inline-start: 1rem;
+  padding: 0;
+  padding-inline-start: 1rem;
 }
 
 h1,
diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
index 48f6b85d9..651fbc6bb 100644
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/src/scss/ui/forms/_form-selectgroup.scss
@@ -91,7 +91,6 @@ Select group
   color: $primary;
   background: rgba($primary, .04);
   border-color: $input-focus-border-color;
-  box-shadow: 0 1px 1px 0 rgba($primary, .2);
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {