diff options
| author | Mark Otto <[email protected]> | 2017-07-03 16:09:28 -0700 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-11-13 08:47:32 +0200 |
| commit | d0652a1be9744ac433d26c960a4253074bd40639 (patch) | |
| tree | 8b8bf5c5e717c6e68dc702f2de3a80b7af250ed4 /scss | |
| parent | 696c4078d1318ec28ddada227449a4acaf52dee7 (diff) | |
| download | bootstrap-d0652a1be9744ac433d26c960a4253074bd40639.tar.xz bootstrap-d0652a1be9744ac433d26c960a4253074bd40639.zip | |
Add new toasts component
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_toasts.scss | 29 | ||||
| -rw-r--r-- | scss/_variables.scss | 17 | ||||
| -rw-r--r-- | scss/bootstrap.scss | 1 |
3 files changed, 46 insertions, 1 deletions
diff --git a/scss/_toasts.scss b/scss/_toasts.scss new file mode 100644 index 000000000..248a21298 --- /dev/null +++ b/scss/_toasts.scss @@ -0,0 +1,29 @@ +.toast { + max-width: $toast-max-width; + overflow: hidden; // cheap rounded corners on nested items + font-size: $toast-font-size; // knock it down to 14px + background-color: $toast-background-color; + background-clip: padding-box; + border: $toast-border-width solid $toast-border-color; + border-radius: $toast-border-radius; + box-shadow: $toast-box-shadow; + backdrop-filter: blur(10px); + + + .toast { + margin-top: $toast-padding-x; + } +} + +.toast-header { + display: flex; + align-items: center; + padding: $toast-padding-y $toast-padding-x; + color: $toast-header-color; + background-color: $toast-header-background-color; + background-clip: padding-box; + border-bottom: $toast-border-width solid $toast-header-border-color; +} + +.toast-body { + padding: $toast-padding-x; // apply to both vertical and horizontal +} diff --git a/scss/_variables.scss b/scss/_variables.scss index c636860bd..ce958b3c4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -3,7 +3,6 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - // Color system $white: #fff !default; @@ -860,6 +859,22 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +// Toasts +$toast-max-width: 350px !default; +$toast-padding-x: .75rem !default; +$toast-padding-y: .25rem !default; +$toast-font-size: .875rem !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width: 1px !default; +$toast-border-color: rgba(0,0,0,.1) !default; +$toast-border-radius: .25rem !default; +$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default; + +$toast-header-color: $gray-600 !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color: rgba(0, 0, 0, .05) !default; + + // Badges $badge-font-size: 75% !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 6f7e4eef1..c9795108c 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -34,6 +34,7 @@ @import "media"; @import "list-group"; @import "close"; +@import "toasts"; @import "modal"; @import "tooltip"; @import "popover"; |