modals, avatar upload component

pages/_docs/modals.md

@@ -0,0 +1,39 @@
+---
+title: Modals
+description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+---
+
+## Default markup
+
+{% capture code %}
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        {% include parts/modals/simple.html %}
+    </div>
+</div>
+{% endcapture %}
+{% include example.html code=code modal=true %}
+
+
+## Prompt and alert
+
+{% capture code %}
+<div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+        {% include parts/modals/small.html %}
+    </div>
+</div>
+{% endcapture %}
+{% include example.html code=code modal=true %}
+
+
+## Modal with form
+
+{% capture code %}
+<div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+        {% include parts/modals/report.html %}
+    </div>
+</div>
+{% endcapture %}
+{% include example.html code=code modal=true %}

pages/_includes/example.html

@@ -8,6 +8,7 @@
 		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
 		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}
 		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
+		{% if include.modal %}<div class="example-modal-backdrop"></div>{% endif %}
 
 		{{ demo-code }}
 

pages/_includes/parts/form/input-color.html

@@ -4,12 +4,12 @@
 {% endfor %}
 
 <div class="mb-3">
-	<label class="form-label">Color Input</label>
+	<label class="form-label">{{ include.label | default: 'Color Input' }}</label>
 	<div class="row row-sm">
 		{% for color in colors %}
 		<div class="col-auto">
 			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
-				<input name="color" type="checkbox" value="{{ color }}" class="form-colorinput-input" {% if forloop.index >= 2 and forloop.index <= 4 %} checked{% endif %}/>
+				<input name="color" type="radio" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
 				<span class="form-colorinput-color bg-{{ color }}"></span>
 			</label>
 		</div>

pages/_includes/parts/form/input-colorpicker.html

@@ -1,4 +1,4 @@
 <div class="mb-3">
-   <label class="form-label">Color picker</label>
+   <label class="form-label">{{ include.label | default: 'Color picker' }}</label>
    <input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
 </div>

pages/_includes/parts/modals/info.html

@@ -0,0 +1,13 @@
+{% include ui/modal/close.html %}
+<div class="modal-body text-center py-5">
+
+	{% include ui/icon.html icon="check-circle" color="green" class="icon-xl icon-thin mb-4" %}
+
+	<h3>Payment succedeed</h3>
+	<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
+</div>
+
+<div class="modal-footer">
+	{% include ui/button.html color="primary" dismiss=true text="View invoice" block=true %}
+	{% include ui/button.html color="secondary" dismiss=true text="Go to dashboard" block=true %}
+</div>

pages/_includes/parts/modals/report.html

@@ -74,6 +74,6 @@
 </div>
 
 <div class="modal-footer">
-	{% include ui/button.html text="Cancel" color="link" dismiss=true %}
+	{% include ui/button.html text="Cancel" color="link link-secondary" dismiss=true %}
 	{% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ml-auto" %}
 </div>

pages/_includes/parts/modals/small.html

@@ -1,4 +1,8 @@
 <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 class="modal-title">Are you sure?</div>
+	<div>If you proceed, you will lose all your personal data.</div>
 </div>
-{% include ui/modal/footer.html %}
+<div class="modal-footer">
+	<button type="button" class="btn btn-link link-secondary mr-auto" data-dismiss="modal">Cancel</button>
+	<button type="button" class="btn btn-danger" data-dismiss="modal">Yes, delete all my data</button>
+</div>

pages/_includes/parts/modals/team.html

@@ -0,0 +1,24 @@
+{% include ui/modal/header.html title="Add a new team" %}
+<div class="modal-body">
+	<div class="row mb-3 align-items-end">
+		<div class="col-auto">
+			{% include ui/avatar-upload.html class="rounded" %}
+		</div>
+		<div class="col">
+			<label class="form-label">Name</label>
+			<input type="text" class="form-control" />
+		</div>
+	</div>
+
+	{% include parts/form/input-color.html label="Pick your team color" %}
+
+	<div>
+		<label class="form-label">Additional info</label>
+		<textarea class="form-control"></textarea>
+	</div>
+</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">Add Team</button>
+</div>

pages/_includes/ui/avatar-upload.html

@@ -0,0 +1,4 @@
+<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}">
+	{% include ui/icon.html icon="plus" %}
+	<span class="avatar-upload-text">{{ include.text | default: "Add" }}</span>
+</a>

pages/_includes/ui/avatar.html

@@ -22,5 +22,5 @@
 {% assign el = 'span' %}
 {% if link %}{% assign el = 'a' %}{% endif %}
 <{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}{% if include.dropdown %} data-toggle="dropdown"{% endif %}>{% if include.status %}
-	<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}	 {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
+	<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
 {% endremoveemptylines %}

pages/_includes/ui/modal/close.html

@@ -0,0 +1,3 @@
+<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+	{% include ui/icon.html icon="x" %}
+</button>

pages/_includes/ui/modal/header.html

@@ -1,6 +1,4 @@
 <div class="modal-header">
 	<h5 class="modal-title">{{ include.title | default: 'Modal title' }}</h5>
-	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-		{% include ui/icon.html icon="x" %}
-	</button>
+	{% include ui/modal/close.html %}
 </div>

pages/changelog.html

@@ -4,8 +4,8 @@ page-header: Changelog
 menu: changelog
 done: true
 ---
-<div class="card">
-	<div class="card-body markdown p-5">
+<div class="card card-lg">
+	<div class="card-body markdown">
 		{% for page in site.changelog reversed %}
 		<div class="mb-4">
 			<div class="mb-2">

pages/modals.html

@@ -12,6 +12,8 @@ page-header: Modals
 			{% 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" %}
+			{% include ui/button.html text="Info modal" modal-id="info" %}
+			{% include ui/button.html text="Modal with simple form" modal-id="team" %}
 		</div>
 
 	</div>
@@ -22,4 +24,6 @@ page-header: Modals
 {% 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" %}
+{% include ui/modal.html modal-id="report" size="lg" %}
+{% include ui/modal.html modal-id="info" size="sm" %}
+{% include ui/modal.html modal-id="team" %}

scss/_variables.scss

@@ -165,12 +165,11 @@ $spacers: (
   1: $spacer * .25,
   2: $spacer * .5,
   3: $spacer,
-  4: $spacer * 1.25,
-  5: $spacer * 1.5,
-  6: $spacer * 3,
-  7: $spacer * 6,
-  8: $spacer * 9,
-  9: $spacer * 12,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: $spacer * 6,
+  7: $spacer * 9,
+  8: $spacer * 12,
 ) !default;
 
 $size-spacers: (
@@ -344,7 +343,7 @@ $modal-footer-margin-between: .75rem !default;
 $modal-xl: 1140px !default;
 $modal-lg: 720px !default;
 $modal-md: 540px !default;
-$modal-sm: 300px !default;
+$modal-sm: 380px !default;
 
 //navbar
 $navbar-padding-y: .5rem !default;

scss/demo/_examples.scss

@@ -3,10 +3,12 @@
   margin: 2rem 0;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
+  position: relative;
 
   min-height: 12rem;
   display: flex;
   align-items: center;
+  overflow-x: auto;
 }
 
 .example-centered {
@@ -57,6 +59,17 @@
   max-width: 40rem;
 }
 
+.example-modal-backdrop {
+  background: $modal-backdrop-bg;
+  opacity: $modal-backdrop-opacity;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0;
+}
+
 @include dark-mode {
   .example-code {
     border: 1px solid $border-color;

scss/ui/_avatars.scss

@@ -72,3 +72,30 @@
     }
   }
 }
+
+.avatar-upload {
+  width: 4rem;
+  height: 4rem;
+  border: 1px dashed $border-color;
+  background: $form-check-input-bg;
+  flex-direction: column;
+  transition: .3s color, .3s background-color;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke-width: 1;
+  }
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+    text-decoration: none;
+  }
+}
+
+.avatar-upload-text {
+  font-size: $h6-font-size;
+  line-height: 1;
+  margin-top: .25rem;
+}

scss/ui/_icons.scss

@@ -25,6 +25,10 @@
   font-size: 2rem;
 }
 
+.icon-xl {
+  font-size: 4rem;
+}
+
 
 .icons-list {
   display: flex;

scss/ui/_modals.scss

@@ -1,3 +1,17 @@
+.modal {
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 1rem;
+    width: $modal-header-height;
+    height: $modal-header-height;
+    margin: 0;
+    padding: 0;
+    z-index: 10;
+  }
+}
+
 .modal-body {
   @include scrollbar;
 
@@ -12,18 +26,9 @@
 
 .modal-header {
   align-items: center;
-  padding-top: 0;
-  padding-bottom: 0;
   min-height: $modal-header-height;
   background: $modal-header-bg;
-
-  .close {
-    font-size: 1rem;
-    margin: 0 (- $modal-inner-padding) 0 auto;
-    padding-top: 0;
-    padding-bottom: 0;
-    height: subtract($modal-header-height, 1px);
-  }
+  padding: 0 $modal-header-height 0 $modal-inner-padding;
 }
 
 .modal-title {