1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 03:41:19 +02:00

Add toast positioning

This commit is contained in:
Martijn Cuppens
2020-11-29 15:22:15 +01:00
committed by XhmikosR
parent 321ee7a1ad
commit 1f2e600304
4 changed files with 55 additions and 43 deletions

View File

@@ -1,25 +1,17 @@
.toast {
max-width: $toast-max-width;
width: $toast-max-width;
max-width: 100%;
@include font-size($toast-font-size);
color: $toast-color;
pointer-events: auto;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
opacity: 0;
@include border-radius($toast-border-radius);
&:not(:last-child) {
margin-bottom: $toast-padding-x;
}
&.showing {
opacity: 1;
}
&.show {
display: block;
opacity: 1;
&:not(.showing):not(.show) {
opacity: 0;
}
&.hide {
@@ -27,6 +19,16 @@
}
}
.toast-container {
width: max-content;
max-width: 100%;
pointer-events: none;
> :not(:last-child) {
margin-bottom: $toast-spacing;
}
}
.toast-header {
display: flex;
align-items: center;

View File

@@ -1108,6 +1108,7 @@ $toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, .1) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;