simple modal init

pages/_data/menu.yml

@@ -22,6 +22,10 @@ base:
     cards:
       url: cards.html
       title: Cards
+    charts:
+      url: charts.html
+      title: Charts
+      icon: pie-chart
     datatables:
       url: datatables.html
       title: Data Tables
@@ -47,11 +51,6 @@ base:
       title: Music
       url: music.html
 
-charts:
-  url: charts.html
-  title: Charts
-  icon: pie-chart
-
 error:
   title: Error pages
   icon: file-minus

pages/_includes/parts/modals/simple.html

@@ -0,0 +1,20 @@
+{% assign id = "default" %}
+<div class="modal modal-blur fade" id="modal-{{ id }}" tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">Modal title</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					{% include ui/icon.html icon="x" %}
+				</button>
+			</div>
+			<div class="modal-body">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
+			</div>
+		</div>
+	</div>
+</div>

pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

pages/tmp.html

@@ -19,6 +19,11 @@ menu: a.b.c
 		{% include cards/user-info.html %}
 	</div>
 
+	<div class="col-4">
+		{% include ui/button.html modal="default" %}
+		{% include parts/modals/simple.html id="default" %}
+	</div>
+
 	<div class="col-4">
 		{% include cards/charts/total-sales.html %}
 	</div>

scss/_variables.scss

@@ -16,12 +16,12 @@ $theme-color-interval: 10% !default;
 $light: #f5f7fb !default;
 $dark: #354052 !default;
 
-$light-black: rgba($dark, .4) !default;
+$light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
-$light-white: rgba($light, .4) !default;
+$light-white: rgba($light, .24) !default;
 
-$min-black: rgba($dark, .024) !default;
+$min-black: rgba($dark, .032) !default;
-$min-white: rgba($light, .024) !default;
+$min-white: rgba($light, .032) !default;
 
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
@@ -276,6 +276,26 @@ $loader-size: 2.5rem !default;
 $list-group-item-padding-y: .5rem !default;
 $list-group-item-padding-x: .75rem !default;
 
+//modals
+$modal-content-border-color: $border-color !default;
+$modal-backdrop-opacity: .24 !default;
+$modal-backdrop-bg: $dark !default;
+$modal-backdrop-blur: 2px !default;
+
+$modal-fade-transform: translate(0, -1rem) !default;
+
+$modal-content-border-radius: $border-radius !default;
+
+$modal-inner-padding: .75rem !default;
+$modal-inner-padding-x: 1.25rem !default;
+$modal-footer-border-width: 0 !default;
+$modal-header-border-width: 0 !default;
+
+$modal-xl: 1140px !default;
+$modal-lg: 800px !default;
+$modal-md: 540px !default;
+$modal-sm: 300px !default;
+
 //navbar
 $navbar-bg: $white !default;
 $navbar-height: 3.5rem !default;
@@ -339,7 +359,7 @@ $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color !default;
 $input-placeholder-color: $text-muted !default;
 
-$input-group-addon-bg: $min-white !default;
+$input-group-addon-bg: $min-black !default;
 $input-group-addon-color: $text-muted !default;
 
 $dropdown-border-color: $border-color !default;

scss/layout/_core.scss

@@ -12,10 +12,6 @@ body {
   text-rendering: optimizeLegibility;
   font-feature-settings: "liga" 0;
 
-  * {
-    @include scrollbar;
-  }
-
   @media print {
     background: transparent;
   }

scss/layout/_layout.scss

@@ -128,11 +128,12 @@ Top nav
   border-color: $navbar-border-color;
   position: absolute;
   top: 0;
-  right: 0;
   left: 0;
+  width: 100vw;
   padding: 0 .5rem;
   z-index: $zindex-sticky;
   min-height: $navbar-height;
+  user-select: none;
 
   & + & {
     top: add($navbar-height, 1px);

scss/mixins/_mixins.scss

@@ -10,31 +10,31 @@
 }
 
 @mixin scrollbar($is-dark: false) {
-  &::-webkit-scrollbar {
+  //&::-webkit-scrollbar {
-    width: 6px;
+  //  width: 6px;
-    height: 6px;
+  //  height: 6px;
-    transition: .3s background;
+  //  transition: .3s background;
-  }
+  //}
-
+  //
-  &::-webkit-scrollbar-thumb {
+  //&::-webkit-scrollbar-thumb {
-    border-radius: 5px;
+  //  border-radius: 5px;
-
+  //
-    @if ($is-dark) {
+  //  @if ($is-dark) {
-      background: transparent;
+  //    background: transparent;
-    } @else {
+  //  } @else {
-      background: $gray-400;
+  //    background: $gray-400;
-    }
+  //  }
-  }
+  //}
-
+  //
-  &:hover::-webkit-scrollbar-thumb {
+  //&:hover::-webkit-scrollbar-thumb {
-    background: $gray-500;
+  //  background: $gray-500;
-
+  //
-    @if ($is-dark) {
+  //  @if ($is-dark) {
-      background: mix(#fff, $dark, 20%);
+  //    background: mix(#fff, $dark, 20%);
-    } @else {
+  //  } @else {
-      background: $gray-500;
+  //    background: $gray-500;
-    }
+  //  }
-  }
+  //}
 }
 
 @mixin dark {

scss/tabler.scss

@@ -23,6 +23,7 @@
 @import "ui/buttons";
 @import "ui/calendars";
 @import "ui/cards";
+@import "ui/close";
 @import "ui/dropdowns";
 @import "ui/empty";
 @import "ui/grid";

scss/ui/_close.scss

@@ -0,0 +1,6 @@
+.close {
+  &:focus {
+    outline: none;
+    color: $dark;
+  }
+}

scss/ui/_modals.scss

@@ -1,9 +1,33 @@
-.modal-backdrop {
+.modal-header,
-  backdrop-filter: blur(2px);
+.modal-body {
-  background: $light-black;
+  padding-left: $modal-inner-padding-x;
+  padding-right: $modal-inner-padding-x;
 }
 
-.modal-content {
+.modal-header {
-  border: 1px solid $border-color;
+  .close {
-  border-radius: $border-radius;
+    font-size: 1rem;
+    padding-right: $modal-inner-padding-x;
+    margin-right: (- $modal-inner-padding-x);
+  }
+}
+
+.modal-title {
+  font-size: $h3-font-size;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  line-height: (24/18);
+}
+
+.modal-footer {
+  padding-left: $modal-inner-padding-x - $modal-footer-margin-between / 2;
+  padding-right: $modal-inner-padding-x - $modal-footer-margin-between / 2;
+}
+
+.modal-footer {
+  background: $min-black;
+}
+
+.modal-blur {
+  backdrop-filter: blur($modal-backdrop-blur);
 }

scss/utils/_scroll.scss

@@ -7,11 +7,14 @@ Scrollable
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+
   &.hover {
     overflow-y: hidden;
+
     > * {
       margin-top: -1px;
     }
+
     &:hover,
     &:focus,
     &:active {
@@ -19,6 +22,7 @@ Scrollable
       overflow-y: auto;
     }
   }
+
   .touch & {
     overflow-y: auto !important;
   }