modals

pages/_data/menu.yml

@@ -26,6 +26,9 @@ base:
     cards:
       url: cards.html
       title: Cards
+    modals:
+      url: modals.html
+      title: Modals
     charts:
       url: charts.html
       title: Charts

pages/_includes/layout/navbar-secondary.html

@@ -3,7 +3,7 @@
 		{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
 
 		<form class="form-inline w-50 mr-4 d-none d-md-flex">
-			{% include ui/form/input-icon.html prepend=true input-class="form-control-flush" %}
+			{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w100" class="w100" %}
 		</form>
 
 		<ul class="navbar-nav ml-auto">

pages/_includes/layout/page-header-actions.html

@@ -26,7 +26,9 @@
 	<span class="d-none d-sm-inline">
 		{% include ui/button.html text="New view" color="secondary" %}
 	</span>
-	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" %}
+	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" modal-id="report" %}
-	{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" %}
+	{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" modal-id="report" %}
 	{% endif %}
+
+	{% include ui/modal.html modal-id="report" size="lg" top=true %}
 </div>

pages/_includes/parts/form/input.html

@@ -6,12 +6,6 @@
 		<div class="form-control-plaintext">{{ include.value | default: 'Input value' }}</div>
 	</div>
 
-{% elsif type == 'text' %}
-	<div class="mb-3">
-		<label class="form-label">{{ include.label | default: 'Text' }}</label>
-		<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
-	</div>
-
 {% elsif type == 'password' %}
 	<div class="mb-3">
 		<label class="form-label">{{ include.label | default: 'Password' }}</label>
@@ -24,4 +18,11 @@
 	<textarea class="form-control" name="example-textarea" placeholder="{{ include.placeholder | default: 'Textarea placeholder' }}">{{ include.value }}</textarea>
 </div>
 
+{% else %}
+
+<div class="mb-3">
+	<label class="form-label">{{ include.label | default: 'Text' }}</label>
+	<input type="text" class="form-control" name="example-text-input" placeholder="{{ include.placeholder | default: 'Input placeholder' }}">
+</div>
+
 {% endif %}

pages/_includes/parts/modals/customize.html

@@ -1,6 +1,6 @@
 {% include ui/modal/header.html title="Customize Tabler" %}
 
-<div class="modal-body pt-0">
+<div class="modal-body">
 	<p class="text-muted">Set preferences that will be saved for your live preview.</p>
 
 	<div class="mb-3">

pages/_includes/parts/modals/full-width.html

@@ -0,0 +1,5 @@
+{% include ui/modal/header.html title="Full width modal" %}
+<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>
+{% include ui/modal/footer.html %}

pages/_includes/parts/modals/large.html

@@ -0,0 +1,5 @@
+{% include ui/modal/header.html title="Large modal" %}
+<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>
+{% include ui/modal/footer.html %}

pages/_includes/parts/modals/report.html

@@ -1 +1,79 @@
-{% include ui/modal/header.html title="New report" %}
+{% include ui/modal/header.html title="New report" %}
+{% assign reports = "Simple:Provide only basic data needed for the report,Advanced:Insert charts and additional advanced analyses to be inserted in the report" | split: "," %}
+
+<div class="modal-body">
+	<div class="mb-3">
+		<label class="form-label">Name</label>
+		<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
+	</div>
+
+	<label class="form-label">Report type</label>
+	<div class="form-selectgroup-boxes row mb-3">
+		{% for report in reports %}
+		{% assign r = report | split: ':' %}
+		<div class="col-lg-6">
+			<label class="form-selectgroup-item">
+				<input type="radio" name="report-type" value="1" class="form-selectgroup-input"{% if forloop.index == 1 %} checked{% endif %}>
+				<div class="form-selectgroup-box d-flex align-items-center p-3">
+					<div class="mr-3">
+						<span class="form-selectgroup-check"></span>
+					</div>
+					<div class="form-selectgroup-box-content">
+						<div class="form-selectgroup-title strong mb-1">{{ r[0] }}</div>
+						<div class="text-muted">{{ r[1] }}</div>
+					</div>
+				</div>
+			</label>
+		</div>
+		{% endfor %}
+	</div>
+
+	<div class="row">
+		<div class="col-lg-8">
+			<div class="mb-3">
+				<label class="form-label">Report url</label>
+				{% include ui/form/input-group.html prepend="https://tabler.io/reports/" flat=true input-class="pl-0" value="report-01" %}
+			</div>
+		</div>
+		<div class="col-lg-4">
+			<div class="mb-3">
+				<label class="form-label">Visibility</label>
+				{% assign options = "Private,Public,Hidden" | split: "," %}
+				<select class="form-select">
+					{% for option in options %}
+					<option value="{{ forloop.index }}"{% if forloop.index == 1 %} selected{% endif %}>{{ option }}</option>
+					{% endfor %}
+				</select>
+			</div>
+		</div>
+	</div>
+
+</div>
+
+<div class="modal-body">
+	<div class="row">
+		<div class="col-lg-6">
+			<div class="mb-3">
+				<label class="form-label">Client name</label>
+				<input type="text" class="form-control">
+			</div>
+		</div>
+		<div class="col-lg-6">
+			<div class="mb-3">
+				<label class="form-label">Reporting period</label>
+				<input type="date" class="form-control">
+			</div>
+		</div>
+		<div class="col-lg-12">
+			<div>
+				<label class="form-label">Additional information</label>
+				<textarea class="form-control" rows="3"></textarea>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div class="modal-footer">
+	{% include ui/button.html text="Cancel" color="link" dismiss=true %}
+	{% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ml-auto" %}
+</div>

pages/_includes/parts/modals/scrollable.html

@@ -0,0 +1,40 @@
+{% include ui/modal/header.html title="Scrollable modal" %}
+<div class="modal-body">
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+	<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+		eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
+		laoreet rutrum faucibus dolor auctor.</p>
+	<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
+		consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+</div>
+{% include ui/modal/footer.html %}

pages/_includes/parts/modals/simple.html

@@ -2,7 +2,4 @@
 <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">
+{% include ui/modal/footer.html %}
-	<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>

pages/_includes/parts/modals/small.html

@@ -0,0 +1,4 @@
+<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>
+{% include ui/modal/footer.html %}

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.loading %} btn-loading{% 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" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% 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.loading %} btn-loading{% 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" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-dismiss="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/_includes/ui/modal.html

@@ -1,8 +1,9 @@
 {% assign modal-id = include.modal-id | default: 'simple' %}
+{% assign size = include['size'] %}
 
 {% capture_global modals %}
 <div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
-	<div class="modal-dialog{% unless include.top %} modal-dialog-centered{% endunless %}" role="document">
+	<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
 		<div class="modal-content">
 			{% include parts/modals/{{ modal-id }}.html %}
 		</div>

pages/_includes/ui/modal/footer.html

@@ -0,0 +1,4 @@
+<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>

pages/modals.html

@@ -0,0 +1,25 @@
+---
+title: Modals
+page-header: Modals
+---
+
+<div class="card">
+	<div class="card-body">
+		<div class="btn-list">
+			{% include ui/button.html text="Simple modal" modal-id="simple" %}
+			{% include ui/button.html text="Large modal" modal-id="large" %}
+			{% include ui/button.html text="Small modal" modal-id="small" %}
+			{% include ui/button.html text="Full width modal" modal-id="full-width" %}
+			{% include ui/button.html text="Scrollable modal" modal-id="scrollable" %}
+			{% include ui/button.html text="Modal with form" modal-id="report" %}
+		</div>
+
+	</div>
+</div>
+
+{% include ui/modal.html modal-id="simple" %}
+{% include ui/modal.html modal-id="large" size="lg" %}
+{% include ui/modal.html modal-id="small" size="sm" %}
+{% include ui/modal.html modal-id="full-width" size="full-width" %}
+{% include ui/modal.html modal-id="scrollable" scrollable=true %}
+{% include ui/modal.html modal-id="report" size="lg" %}

scss/_dark.scss

@@ -11,7 +11,8 @@ $dark-text: $light;
   .card,
   .navbar-light,
   .footer,
-  .modal-content {
+  .modal-content,
+  .modal-header {
     background: $dark;
     color: inherit;
   }
@@ -30,6 +31,7 @@ $dark-text: $light;
   .form-select,
   .form-file-text,
   .form-control,
+  .form-selectgroup-box,
   .flatpickr-input.flatpickr-input,
   .form-selectgroup-check,
   .form-imagecheck-figure:before {
@@ -37,6 +39,10 @@ $dark-text: $light;
     color: $dark-text;
   }
 
+  .form-control-plaintext {
+    color: $dark-text;
+  }
+
   .input-group-flat .input-group-text {
     background-color: $dark-darken;
   }

scss/_variables.scss

@@ -27,6 +27,7 @@ $light-white: rgba($light, .24) !default;
 $min-black: rgba($dark, .024) !default;
 $min-white: rgba(mix($light, $dark, 48%), .1) !default;
 
+$gray-50: #fbfbfb !default;
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
 $gray-300: mix($light, $dark, 94%) !default;
@@ -58,6 +59,7 @@ $body-color: $dark !default;
 $text-muted-opacity: .60 !default;
 $text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
 $border-color: rgba($text-muted, .24) !default;
+$border-color-light: rgba($text-muted, .12) !default;
 
 $hover-bg: $light !default;
 $active-bg: rgba($blue, .06) !default;
@@ -314,21 +316,27 @@ $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-color: $border-color-light !default;
+$modal-content-bg: $gray-50 !default;
 $modal-content-border-radius: $border-radius !default;
 
+$modal-header-padding: 1.5rem !default;
+$modal-header-height: 3.5rem !default;
+$modal-header-border-width: 1px !default;
+$modal-header-border-color: $border-color-light !default;
+$modal-header-bg: $white !default;
 $modal-inner-padding: 1.5rem !default;
 $modal-footer-border-width: 0 !default;
-$modal-header-border-width: 0 !default;
+$modal-footer-margin-between: .75rem !default;
 
 $modal-xl: 1140px !default;
-$modal-lg: 800px !default;
+$modal-lg: 720px !default;
 $modal-md: 540px !default;
 $modal-sm: 300px !default;
 

scss/layout/_navbar.scss

@@ -8,8 +8,7 @@ Horizontal navbar
   }
 
   .dropdown-menu {
-    margin-top: -4px;
+    margin-right: -.25rem;
-    margin-right: -7px;
   }
 }
 

scss/ui/_dropdowns.scss

@@ -64,7 +64,7 @@
 }
 
 .dropdown-menu-arrow {
-  margin-top: .75rem;
+  margin-top: .5rem;
 
   &:before {
     content: "";

scss/ui/_forms.scss

@@ -186,6 +186,7 @@ Input group
   .input-group-prepend {
     margin-right: 0;
     border-right: 0;
+    background: $form-check-input-bg;
 
     .input-group-text {
       padding-right: 0;

scss/ui/_modals.scss

@@ -1,14 +1,28 @@
-.modal-header,
 .modal-body {
-  padding-left: $modal-inner-padding;
+  @include scrollbar;
-  padding-right: $modal-inner-padding;
+
+  .modal-title {
+    margin-bottom: 1rem;
+  }
+
+  & + & {
+    border-top: 1px solid $border-color-light;
+  }
 }
 
 .modal-header {
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: $modal-header-height;
+  background: $modal-header-bg;
+
   .close {
     font-size: 1rem;
-    padding-right: $modal-inner-padding;
+    margin: 0 (- $modal-inner-padding) 0 auto;
-    margin-right: (- $modal-inner-padding);
+    padding-top: 0;
+    padding-bottom: 0;
+    height: subtract($modal-header-height, 1px);
   }
 }
 
@@ -20,14 +34,20 @@
 }
 
 .modal-footer {
-  padding-left: $modal-inner-padding - $modal-footer-margin-between / 2;
+  @if $modal-footer-border-width == 0 {
-  padding-right: $modal-inner-padding - $modal-footer-margin-between / 2;
+    padding-top: 0;
-}
+  } @else {
+    padding-top: .75rem;
+  }
 
-.modal-footer {
+  padding-bottom: .75rem;
-  background: $min-black;
 }
 
 .modal-blur {
   backdrop-filter: blur($modal-backdrop-blur);
 }
+
+.modal-full-width {
+  max-width: none;
+  margin: 0 $modal-dialog-margin;
+}

scss/ui/forms/_form-selectgroup.scss

@@ -5,6 +5,10 @@ Select group
   display: inline-flex;
   margin: 0 -.5rem -.5rem 0;
   flex-wrap: wrap;
+
+  .form-selectgroup-item {
+    margin: 0 .5rem .5rem 0;
+  }
 }
 
 .form-selectgroup-vertical {
@@ -14,7 +18,6 @@ Select group
 .form-selectgroup-item {
   display: block;
   position: relative;
-  margin: 0 .5rem .5rem 0;
 }
 
 .form-selectgroup-input {
@@ -33,6 +36,7 @@ Select group
   font-size: $input-btn-font-size;
   line-height: $input-line-height;
   color: $text-muted;
+  background: $form-check-input-bg;
   text-align: center;
   cursor: pointer;
   user-select: none;
@@ -96,6 +100,10 @@ Select group
   box-shadow: $input-btn-focus-box-shadow;
 }
 
+.form-selectgroup-box-content {
+  line-height: $line-height-sm;
+}
+
 /**
 Alternate version of form select group
  */
@@ -106,15 +114,14 @@ Alternate version of form select group
     color: inherit;
   }
 
-  .form-selectgroup-box-content {
-    opacity: .64;
-    transition: .3s opacity;
-  }
-
   .form-selectgroup-input:checked {
     + .form-selectgroup-box {
       color: inherit;
 
+      .form-selectgroup-title {
+        color: $primary;
+      }
+
       .form-selectgroup-box-content {
         opacity: 1;
       }