bootstrap alerts redesign

src/pages/_data/alerts.yml

@@ -0,0 +1,16 @@
+- color: success
+  icon: check
+  text: Wow! Everything worked!
+  description: Your account has been saved!
+- color: info
+  icon: info-circle
+  text: Did you know?
+  description: Here is something that you might like to know.
+- color: warning
+  icon: alert-triangle
+  text: Uh oh, something went wrong
+  description: Sorry! There was a problem with your request.
+- color: danger
+  icon: alert-circle
+  text: I'm so sorry…
+  description: Your account has been deleted and can't be restored.

src/pages/_docs/alerts.md

@@ -11,11 +11,8 @@ bootstrap-link: components/alerts/
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action. 
 
 {% capture code %}
-{% for variant in site.variants %}
-	{% capture variant-text %}
-		This is a {{ variant.name }} alert — check it out!
-	{% endcapture %}
-	{% include ui/alert.html type=variant.name text=variant-text %}
+{% for alert in site.data.alerts %}
+	{% include ui/alert.html type=alert.color text=alert.text description=alert.description %}
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code %}
@@ -41,11 +38,8 @@ Add a link to your alert message to redirect users to the details they need to c
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it. 
 
 {% capture code %}
-{% for variant in site.variants %}
-	{% capture variant-text %}
-		This is a {{ variant.name }} alert — check it out!
-	{% endcapture %}
-	{% include ui/alert.html type=variant.name text=variant-text close=true %}
+{% for alert in site.data.alerts %}
+{% include ui/alert.html type=alert.color icon=alert.icon text=alert.text description=alert.description close=true %}
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code %}
@@ -56,11 +50,8 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
 {% capture code %}
-{% for variant in site.variants %}
-	{% capture variant-text %}
-		This is a {{ variant.name }} alert — check it out!
-	{% endcapture %}
-	{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %}
+{% for alert in site.data.alerts %}
+{% include ui/alert.html type=alert.color icon=alert.icon text=alert.text description=alert.description %}
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code %}
@@ -87,10 +78,12 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 {% capture code %}
 {% capture variant-text %}
- 	<h3>Some Title</h3>
- 	<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
- {% endcapture %}
- {% include ui/alert.html type='success' close=true text=variant-text buttons=true %}
+	<h3 class="mb-1">Some Title</h3>
+	<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+{% endcapture %}
+{% for alert in site.data.alerts %}
+{% include ui/alert.html type=alert.color text=variant-text close=true buttons=true %}
+{% endfor %}
 {% endcapture %}
 {% include example.html code=code %}
 

src/pages/_includes/docs/plugin.html

@@ -1,3 +1,4 @@
 <div class="alert alert-primary mb-4">
-	<strong>Important!</strong> This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.
+	<h4 class="alert-title">Important!</h4>
+	<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-{{ include.plugin }}.css</code> or <code>tabler-{{ include.plugin }}.min.css</code> file to your page.</p>
 </div>

src/pages/_includes/ui/alert.html

@@ -1,17 +1,36 @@
 <div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
-	{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-left me-3" %}{% endif %}
-	{% if include.icon %}
-	{% include ui/icon.html icon=include.icon class="me-1" %}
+
+	{% if include.icon or include.person-id %}
+		<div class="d-flex">
+		<div>
+			{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-start me-3" %}{% endif %}
+
+			{% if include.icon %}
+			{% include ui/icon.html icon=include.icon class="alert-icon" %}
+			{% endif %}
+		</div>
+		<div>
 	{% endif %}
 
-	{{ include.text | default: "This is a custom alert box!" }}
+
+	{% if include.description %}
+		<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
+		<div class="text-muted">{{ include.description }}</div>
+	{% else %}
+		{{ include.text | default: "This is a custom alert box!" }}
+	{% endif %}
 
 	{% if include.buttons %}
 	<div class="btn-list">
-		<a href="#" class="btn btn-success">Save changes</a>
+		<a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
 		<a href="#" class="btn">Cancel</a>
 	</div>
 	{% endif %}
 
+	{% if include.icon or include.person-id %}
+		</div>
+		</div>
+	{% endif %}
+
 	{% if include.close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
 </div>

src/scss/_mixins-override.scss

@@ -25,7 +25,7 @@
       transform: rotate(-45deg);
     } @else if $direction == up {
       transform: rotate(135deg);
-    } @else if $direction == right {
+    } @else if $direction == end {
       transform: rotate(-135deg);
     } @else {
       transform: rotate(45deg);
@@ -39,6 +39,13 @@
   }
 }
 
+@mixin alert-variant(
+  $background: null,
+  $border: null,
+  $color: null
+) {
+  // Override bootstrap core
+}
 
 @mixin button-variant(
   $background: null,

src/scss/_variables.scss

@@ -257,13 +257,13 @@ $content-padding-y: 1.25rem !default;
 
 
 //alerts
-$alert-padding-x: .75rem !default;
-$alert-padding-y: .75rem !default;
+$alert-padding-x: 1.25rem !default;
+$alert-padding-y: 1rem !default;
 $alert-link-font-weight: $font-weight-bold !default;
 
-$alert-bg-scale: -90% !default;
-$alert-border-scale: -90% !default;
-$alert-color-scale: 40% !default;
+$alert-border-width: 1px !default;
+$alert-border-color: $border-color-transparent !default;
+$alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 
 //breadcrumb
 $breadcrumb-variants: (

src/scss/ui/_alerts.scss

@@ -1 +1,37 @@
-.alert { }
+.alert {
+  --#{$variable-prefix}alert-color: #{$text-muted};
+  border: $alert-border-width solid $alert-border-color;
+  border-left: .25rem solid var(--#{$variable-prefix}alert-color);
+  box-shadow: $alert-shadow;
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.alert-link, {
+  &,
+  &:hover {
+    color: var(--#{$variable-prefix}alert-color);
+  }
+}
+
+@each $state, $value in $theme-colors {
+  .alert-#{$state} {
+    --#{$variable-prefix}alert-color: #{$value};
+  }
+}
+
+.alert-icon {
+  color: var(--#{$variable-prefix}alert-color);
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  margin: -.125rem $alert-padding-x -.125rem 0;
+}
+
+.alert-title {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+  font-weight: $headings-font-weight;
+  margin-bottom: .25rem;
+}

src/scss/ui/_close.scss

@@ -1,4 +1,6 @@
 .btn-close {
+  cursor: pointer;
+
   &:focus {
     outline: none;
     color: $dark;