123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- //
- // Toast Message
- // --------------------------------------------------
- .toast-message-style(@color-bg, @color-border, @color-text) {
- .shadow-16dp();
- background: @color-bg;
- border: 1px solid @color-border;
- border-top: none;
- padding: @alert-padding;
- color: @color-text;
- font-size: @font-size-large;
- .fa {
- margin-right: @font-size-base / 2;
- }
- }
- .toast-message {
- position: fixed;
- top: -100%;
- width: 100%;
- z-index: @zindex-modal + 10;
- text-align: center;
- font-size: @font-size-large;
- transition: top 300ms ease;
- &.visible {
- top: 0px;
- transition: top 200ms ease;
- }
- .message-success {
- .toast-message-style(@alert-success-bg, @alert-success-border, @alert-success-text);
- }
- .message-info {
- .toast-message-style(@alert-info-bg, @alert-info-border, @alert-info-text);
- }
- .message-warning {
- .toast-message-style(@alert-warning-bg, @alert-warning-border, @alert-warning-text);
- }
- .message-danger {
- .toast-message-style(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
- }
- /* Small devices (tablets, 768px and up) */
- @media (min-width: @screen-sm-min) {
- padding: 0px @padding-large-horizontal;
- pointer-events: none;
- p {
- border-left: none;
- border-right: none;
- border-radius: 0px 0px @alert-border-radius @alert-border-radius;
- display: inline-block;
- padding: @padding-large-vertical @padding-large-horizontal;
- font-size: @font-size-base;
- }
- }
- }
|