1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @import "../../themes/ionic.globals.md";
  2. // Material Design Toast
  3. // --------------------------------------------------
  4. /// @prop - Background of the toast wrapper
  5. $toast-md-background: #333 !default;
  6. /// @prop - Color of the toast title
  7. $toast-md-title-color: #fff !default;
  8. /// @prop - Font size of the toast title
  9. $toast-md-title-font-size: 1.5rem !default;
  10. // deprecated
  11. $toast-md-title-padding: null !default;
  12. /// @prop - Padding top of the toast title
  13. $toast-md-title-padding-top: 19px !default;
  14. /// @prop - Padding end of the toast title
  15. $toast-md-title-padding-end: 16px !default;
  16. /// @prop - Padding bottom of the toast title
  17. $toast-md-title-padding-bottom: 17px !default;
  18. /// @prop - Padding start of the toast title
  19. $toast-md-title-padding-start: $toast-md-title-padding-end !default;
  20. .toast-md .toast-wrapper {
  21. @include position-horizontal(0, 0);
  22. @include margin(auto);
  23. position: absolute;
  24. z-index: $z-index-overlay-wrapper;
  25. display: block;
  26. width: $toast-width;
  27. max-width: $toast-max-width;
  28. background: $toast-md-background;
  29. }
  30. .toast-md .toast-wrapper.toast-top {
  31. @include transform(translate3d(0, -100%, 0));
  32. top: 0;
  33. }
  34. .toast-md .toast-wrapper.toast-bottom {
  35. @include transform(translate3d(0, 100%, 0));
  36. bottom: 0;
  37. }
  38. .toast-md .toast-wrapper.toast-middle {
  39. opacity: .01;
  40. }
  41. .toast-md .toast-message {
  42. font-size: $toast-md-title-font-size;
  43. color: $toast-md-title-color;
  44. @include deprecated-variable(padding, $toast-md-title-padding) {
  45. @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
  46. }
  47. }