diff --git a/.changeset/twelve-shirts-mix.md b/.changeset/twelve-shirts-mix.md new file mode 100644 index 000000000..b191a3290 --- /dev/null +++ b/.changeset/twelve-shirts-mix.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"preview": patch +--- + +Refactor alert component styles and markup, remove Bootstrap styles diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss index ab962ff51..fca753b95 100644 --- a/core/scss/_bootstrap-components.scss +++ b/core/scss/_bootstrap-components.scss @@ -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"; diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss index 219b1f7ec..ad1ae9962 100644 --- a/core/scss/ui/_alerts.scss +++ b/core/scss/ui/_alerts.scss @@ -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); -} diff --git a/preview/pages/_includes/ui/alert.html b/preview/pages/_includes/ui/alert.html index 47cf3c4ee..7f7d06be4 100644 --- a/preview/pages/_includes/ui/alert.html +++ b/preview/pages/_includes/ui/alert.html @@ -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 %} diff --git a/preview/pages/alerts.html b/preview/pages/alerts.html index 92ef823da..d89c4d65d 100644 --- a/preview/pages/alerts.html +++ b/preview/pages/alerts.html @@ -11,23 +11,21 @@ permalink: alerts.html

Basic alerts

-

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

- {% 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!" %}
-

Alerts with icon

-

Build on any alert by adding an optional icon.

- {% 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 %} +

Alerts with action

+ {% 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!" %}
@@ -35,11 +33,10 @@ permalink: alerts.html

Dismissible alerts

-

Build on any alert by adding an optional .alert-dismissible and close button.

- {% 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!" %}
@@ -47,11 +44,10 @@ permalink: alerts.html

Alert with a description

-

Add a description to the alert to provide additional information.

- {% 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." %}
@@ -59,10 +55,10 @@ permalink: alerts.html

Important alerts

- {% 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." %}