toast-message.less 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. //
  2. // Toast Message
  3. // --------------------------------------------------
  4. .toast-message-style(@color-bg, @color-border, @color-text) {
  5. .shadow-16dp();
  6. background: @color-bg;
  7. border: 1px solid @color-border;
  8. border-top: none;
  9. padding: @alert-padding;
  10. color: @color-text;
  11. font-size: @font-size-large;
  12. .fa {
  13. margin-right: @font-size-base / 2;
  14. }
  15. }
  16. .toast-message {
  17. position: fixed;
  18. top: -100%;
  19. width: 100%;
  20. z-index: @zindex-modal + 10;
  21. text-align: center;
  22. font-size: @font-size-large;
  23. transition: top 300ms ease;
  24. &.visible {
  25. top: 0px;
  26. transition: top 200ms ease;
  27. }
  28. .message-success {
  29. .toast-message-style(@alert-success-bg, @alert-success-border, @alert-success-text);
  30. }
  31. .message-info {
  32. .toast-message-style(@alert-info-bg, @alert-info-border, @alert-info-text);
  33. }
  34. .message-warning {
  35. .toast-message-style(@alert-warning-bg, @alert-warning-border, @alert-warning-text);
  36. }
  37. .message-danger {
  38. .toast-message-style(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
  39. }
  40. /* Small devices (tablets, 768px and up) */
  41. @media (min-width: @screen-sm-min) {
  42. padding: 0px @padding-large-horizontal;
  43. pointer-events: none;
  44. p {
  45. border-left: none;
  46. border-right: none;
  47. border-radius: 0px 0px @alert-border-radius @alert-border-radius;
  48. display: inline-block;
  49. padding: @padding-large-vertical @padding-large-horizontal;
  50. font-size: @font-size-base;
  51. }
  52. }
  53. }