mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Refactor alert component styles and markup, remove Bootstrap styles (#2141)
This commit is contained in:
Paweł Kuna
GitHub
6
.changeset/twelve-shirts-mix.md
Normal file
6
.changeset/twelve-shirts-mix.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
"preview": patch
|
||||
---
|
||||
|
||||
Refactor alert component styles and markup, remove Bootstrap styles
|
||||
@@ -17,7 +17,6 @@
|
||||
// @import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
|
||||
@@ -1,40 +1,86 @@
|
||||
.alert {
|
||||
--#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
|
||||
--#{$prefix}alert-bg: #{var(--#{$prefix}bg-surface)};
|
||||
border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
|
||||
border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
|
||||
box-shadow: $alert-shadow;
|
||||
--#{$prefix}alert-bg: transparent;
|
||||
--#{$prefix}alert-padding-x: #{$alert-padding-x};
|
||||
--#{$prefix}alert-padding-y: #{$alert-padding-y};
|
||||
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
|
||||
--#{$prefix}alert-color: inherit;
|
||||
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
|
||||
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
|
||||
--#{$prefix}alert-link-color: inherit;
|
||||
--#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
|
||||
|
||||
>:last-child {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
|
||||
margin-bottom: var(--#{$prefix}alert-margin-bottom);
|
||||
background-color: var(--#{$prefix}alert-bg);
|
||||
border-radius: var(--#{$prefix}alert-border-radius);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
color: inherit;
|
||||
margin-bottom: .25rem; // todo: use variable
|
||||
font-weight: var(--#{$prefix}alert-heading-font-weight);
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
width: 1.25rem !important; // todo: use variable
|
||||
height: 1.25rem !important;
|
||||
}
|
||||
|
||||
.alert-action {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
color: var(--#{$prefix}alert-link-color);
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 3rem; //todo: use variable
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-important {
|
||||
border-color: transparent;
|
||||
background: var(--#{$prefix}alert-color);
|
||||
color: #fff;
|
||||
border-color: var(--#{$prefix}alert-color);
|
||||
color: var(--#{$prefix}alert-color);
|
||||
|
||||
.alert-icon,
|
||||
.alert-link,
|
||||
.alert-title {
|
||||
.btn-close,
|
||||
.alert-description {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-link:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: var(--#{$prefix}btn-close-white-filter);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-link, {
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
@@ -42,18 +88,3 @@
|
||||
--#{$prefix}alert-color: var(--#{$prefix}#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
color: var(--#{$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: var(--#{$prefix}font-weight-bold);
|
||||
margin-bottom: .25rem;
|
||||
color: var(--#{$prefix}alert-color);
|
||||
}
|
||||
|
||||
@@ -2,43 +2,44 @@
|
||||
{% unless icon %}
|
||||
{% if include.type == 'success' %}
|
||||
{% assign icon = 'check' %}
|
||||
{% assign title = 'Wow! Everything worked!' %}
|
||||
{% assign description = 'Your account has been saved!' %}
|
||||
{% elsif include.type == 'warning' %}
|
||||
{% assign icon = 'alert-triangle' %}
|
||||
{% assign title = 'Uh oh, something went wrong' %}
|
||||
{% assign description = 'Sorry! There was a problem with your request.' %}
|
||||
{% elsif include.type == 'danger' %}
|
||||
{% assign icon = 'alert-circle' %}
|
||||
{% assign title = "I'm so sorry…" %}
|
||||
{% assign description = 'Something went wrong. Please try again.' %}
|
||||
{% elsif include.type == 'info' %}
|
||||
{% assign icon = 'info-circle' %}
|
||||
{% assign title = 'Did you know?' %}
|
||||
{% assign description = 'Here is something that you might like to know.' %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
|
||||
<div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
|
||||
|
||||
{% if include.show-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 %}
|
||||
<div class="alert-icon">
|
||||
{% include "ui/icon.html" icon=icon class="alert-icon" %}
|
||||
</div>
|
||||
|
||||
{% if include.show-icon %}
|
||||
{% include "ui/icon.html" icon=icon class="alert-icon" %}
|
||||
{% endif %}
|
||||
{% if include.description or include.list %}
|
||||
<div>
|
||||
<h4 class="alert-heading">{{ include.title | default: "This is a custom alert box!" }}</h4>
|
||||
<div class="alert-description">
|
||||
{{ include.description | default: description }}
|
||||
{% if include.list %}
|
||||
{% assign items = include.list | split: ',' %}
|
||||
<ul class="alert-list">
|
||||
{% for item in items %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if include.show-description or include.description %}
|
||||
<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
|
||||
<div class="text-secondary">{{ include.description | default: description }}</div>
|
||||
{% else %}
|
||||
{{ include.title | default: title }}
|
||||
{{ include.title | default: "This is a custom alert box!" }}
|
||||
|
||||
{% if include.action %}
|
||||
<a href="#" class="alert-action">
|
||||
Link
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if include.buttons %}
|
||||
@@ -48,10 +49,6 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.show-icon or include.person-id %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -11,23 +11,21 @@ permalink: alerts.html
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Basic alerts</h2>
|
||||
<p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
||||
{% include "ui/alert.html" type="success" %}
|
||||
{% include "ui/alert.html" type="warning" %}
|
||||
{% include "ui/alert.html" type="danger" %}
|
||||
{% include "ui/alert.html" type="info" %}
|
||||
{% include "ui/alert.html" type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alerts with icon</h2>
|
||||
<p class="text-secondary">Build on any alert by adding an optional icon.</p>
|
||||
{% include "ui/alert.html" type="success" show-icon=true %}
|
||||
{% include "ui/alert.html" type="warning" show-icon=true %}
|
||||
{% include "ui/alert.html" type="danger" show-icon=true %}
|
||||
{% include "ui/alert.html" type="info" show-icon=true %}
|
||||
<h2 class="card-title">Alerts with action</h2>
|
||||
{% include "ui/alert.html" show-close action="Link" type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" show-close action="Link" type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,11 +33,10 @@ permalink: alerts.html
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Dismissible alerts</h2>
|
||||
<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
|
||||
{% include "ui/alert.html" type="success" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" type="warning" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" type="danger" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" type="info" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" show-close type="danger" title="An error occurred!" %}
|
||||
{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" %}
|
||||
{% include "ui/alert.html" show-close type="success" title="Completed successfully!" %}
|
||||
{% include "ui/alert.html" show-close type="info" title="Just a quick note!" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,11 +44,10 @@ permalink: alerts.html
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alert with a description</h2>
|
||||
<p class="text-secondary">Add a description to the alert to provide additional information.</p>
|
||||
{% include "ui/alert.html" type="success" show-description=true show-icon=true %}
|
||||
{% include "ui/alert.html" type="warning" show-description=true show-icon=true %}
|
||||
{% include "ui/alert.html" type="danger" show-description=true show-icon=true %}
|
||||
{% include "ui/alert.html" type="info" show-description=true show-icon=true %}
|
||||
{% include "ui/alert.html" show-close type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
||||
{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close type="success" title="Completed successfully!" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close type="info" title="Just a quick note!" description="This is a custom alert box with a description." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,10 +55,10 @@ permalink: alerts.html
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Important alerts</h2>
|
||||
{% include "ui/alert.html" important=true type="success" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" important=true type="warning" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" important=true type="danger" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" important=true type="info" show-icon=true show-close=true %}
|
||||
{% include "ui/alert.html" show-close important=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
|
||||
{% include "ui/alert.html" show-close important=true type="success" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close important=true type="warning" description="This is a custom alert box with a description." %}
|
||||
{% include "ui/alert.html" show-close important=true type="info" description="This is a custom alert box with a description." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user