123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. @import "../../themes/ionic.globals";
  2. // Alerts
  3. // --------------------------------------------------
  4. /// @prop - Minimum width of the alert
  5. $alert-min-width: 250px !default;
  6. /// @prop - Maximum height of the alert
  7. $alert-max-height: 90% !default;
  8. /// @prop - Line height of the alert button
  9. $alert-button-line-height: 20px !default;
  10. /// @prop - Font size of the alert button
  11. $alert-button-font-size: 14px !default;
  12. /// @prop - Color of the alert input placeholder
  13. $alert-input-placeholder-color: #999 !default;
  14. ion-alert {
  15. @include position(0, 0, 0, 0);
  16. position: absolute;
  17. z-index: $z-index-overlay;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. contain: strict;
  22. }
  23. ion-alert.alert-top {
  24. @include padding(50px, null, null, null);
  25. align-items: flex-start;
  26. }
  27. ion-alert input {
  28. width: 100%;
  29. }
  30. .alert-wrapper {
  31. z-index: $z-index-overlay-wrapper;
  32. display: flex;
  33. flex-direction: column;
  34. min-width: $alert-min-width;
  35. max-height: $alert-max-height;
  36. opacity: 0;
  37. contain: content;
  38. }
  39. .alert-title {
  40. @include margin(0);
  41. @include padding(0);
  42. }
  43. .alert-sub-title {
  44. @include margin(5px, 0, 0);
  45. @include padding(0);
  46. font-weight: normal;
  47. }
  48. .alert-message {
  49. overflow-y: scroll;
  50. -webkit-overflow-scrolling: touch;
  51. }
  52. .alert-input {
  53. @include placeholder($alert-input-placeholder-color);
  54. @include padding(10px, 0);
  55. border: 0;
  56. background: inherit;
  57. }
  58. .alert-button-group {
  59. display: flex;
  60. flex-direction: row;
  61. }
  62. .alert-button-group-vertical {
  63. flex-direction: column;
  64. flex-wrap: nowrap;
  65. }
  66. .alert-button {
  67. @include margin(0);
  68. z-index: 0;
  69. display: block;
  70. font-size: $alert-button-font-size;
  71. line-height: $alert-button-line-height;
  72. }
  73. .alert-tappable {
  74. @include text-align(start);
  75. @include appearance(none);
  76. @include margin(0);
  77. @include padding(0);
  78. width: 100%;
  79. font-size: inherit;
  80. line-height: initial;
  81. background: transparent;
  82. }