bootstrap update, form elements fixes

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",

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'
+	})
+});

src/js/tabler.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import './autosize';
+import './input-mask';
 
 (function() {
 	/**

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",

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 }}

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

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 }}

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 %}

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' %}

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>

src/pages/_includes/ui/form/input-file.html

@@ -1,7 +1 @@
-<div class="form-file">
+<input type="file" class="form-control" />
-	<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>

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"/>
+<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 %}

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>

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>

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 %}

src/pages/cards.html

@@ -2,7 +2,6 @@
 title: Cards
 page-header: Cards
 menu: base.cards
-libs: imask
 ---
 
 <div class="row">

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">

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 %}

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 %}

src/scss/_config.scss

@@ -1,3 +1,5 @@
+@import "~bootstrap/scss/functions";
+
 @import "variables";
 @import "utilities";
 @import "mixins";

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;

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);

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 {

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;

src/scss/ui/_type.scss

@@ -10,8 +10,10 @@ a {
 
 ul,
 ol {
-  margin: 0 0 1rem 1rem;
+  margin: 0 0 1rem 0;
-  padding: 0 0 0 1rem;
+  margin-inline-start: 1rem;
+  padding: 0;
+  padding-inline-start: 1rem;
 }
 
 h1,

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 {