action-sheet.ios.scss 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. @import "../../themes/ionic.globals.ios";
  2. // iOS Action Sheet
  3. // --------------------------------------------------
  4. /// @prop - Text align of the action sheet
  5. $action-sheet-ios-text-align: center !default;
  6. // deprecated
  7. $action-sheet-ios-padding: null !default;
  8. /// @prop - Padding top of the action sheet
  9. $action-sheet-ios-padding-top: 0 !default;
  10. /// @prop - Padding end of the action sheet
  11. $action-sheet-ios-padding-end: 10px !default;
  12. /// @prop - Padding bottom of the action sheet
  13. $action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
  14. /// @prop - Padding start of the action sheet
  15. $action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
  16. /// @prop - Top margin of the action sheet button group
  17. $action-sheet-ios-group-margin-top: 10px !default;
  18. /// @prop - Bottom margin of the action sheet button group
  19. $action-sheet-ios-group-margin-bottom: 10px !default;
  20. /// @prop - Background color of the action sheet
  21. $action-sheet-ios-background: #f9f9f9 !default;
  22. /// @prop - Border color of the action sheet
  23. $action-sheet-ios-border-color: #d6d6da !default;
  24. /// @prop - Border radius of the action sheet
  25. $action-sheet-ios-border-radius: 13px !default;
  26. /// @prop - Padding of the action sheet title
  27. $action-sheet-ios-title-padding: 1.5rem !default;
  28. /// @prop - Color of the action sheet title
  29. $action-sheet-ios-title-color: #8f8f8f !default;
  30. /// @prop - Font size of the action sheet title
  31. $action-sheet-ios-title-font-size: 1.3rem !default;
  32. /// @prop - Font weight of the action sheet title
  33. $action-sheet-ios-title-font-weight: 400 !default;
  34. /// @prop - Border radius of the action sheet title
  35. $action-sheet-ios-title-border-radius: 0 !default;
  36. /// @prop - Minimum height of the action sheet button
  37. $action-sheet-ios-button-min-height: 5.6rem !default;
  38. /// @prop - Padding of the action sheet button
  39. $action-sheet-ios-button-padding: 18px !default;
  40. /// @prop - Text color of the action sheet button
  41. $action-sheet-ios-button-text-color: #007aff !default;
  42. /// @prop - Font size of the action sheet button
  43. $action-sheet-ios-button-font-size: 2rem !default;
  44. /// @prop - Border width of the action sheet button
  45. $action-sheet-ios-button-border-width: $hairlines-width !default;
  46. /// @prop - Border style of the action sheet button
  47. $action-sheet-ios-button-border-style: solid !default;
  48. /// @prop - Border color of the action sheet button
  49. $action-sheet-ios-button-border-color: #d1d3d6 !default;
  50. /// @prop - Background color of the action sheet button
  51. $action-sheet-ios-button-background: transparent !default;
  52. /// @prop - Background color of the activated action sheet button
  53. $action-sheet-ios-button-background-activated: #ebebeb !default;
  54. /// @prop - Destructive text color of the action sheet button
  55. $action-sheet-ios-button-destructive-text-color: #f53d3d !default;
  56. /// @prop - Background color of the action sheet cancel button
  57. $action-sheet-ios-button-cancel-background: #fff !default;
  58. /// @prop - Font weight of the action sheet cancel button
  59. $action-sheet-ios-button-cancel-font-weight: 600 !default;
  60. .action-sheet-ios {
  61. @include text-align($action-sheet-ios-text-align);
  62. }
  63. .action-sheet-ios .action-sheet-wrapper {
  64. @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
  65. @include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto);
  66. }
  67. .action-sheet-ios .action-sheet-container {
  68. @include deprecated-variable(padding, $action-sheet-ios-padding) {
  69. @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
  70. }
  71. }
  72. .action-sheet-ios .action-sheet-group {
  73. @include border-radius($action-sheet-ios-border-radius);
  74. @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
  75. background: $action-sheet-ios-background;
  76. // scss-lint:disable VendorPrefix
  77. // TODO Removing this temporarily because it causes a flicker
  78. // when there are not enough elements to overflow
  79. // https://github.com/ionic-team/ionic/issues/13262
  80. // -webkit-overflow-scrolling: touch;
  81. // Prevents borders from going outside of the container
  82. // -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
  83. }
  84. .action-sheet-ios .action-sheet-group:first-child {
  85. @include margin($action-sheet-ios-group-margin-top, null, null, null);
  86. }
  87. .action-sheet-ios .action-sheet-group:last-child {
  88. @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
  89. }
  90. .action-sheet-ios .action-sheet-title {
  91. @include padding($action-sheet-ios-title-padding);
  92. @include text-align($action-sheet-ios-text-align);
  93. @include border-radius($action-sheet-ios-title-border-radius);
  94. border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
  95. font-size: $action-sheet-ios-title-font-size;
  96. font-weight: $action-sheet-ios-title-font-weight;
  97. color: $action-sheet-ios-title-color;
  98. }
  99. .action-sheet-ios .action-sheet-button {
  100. @include margin(0);
  101. @include padding($action-sheet-ios-button-padding);
  102. min-height: $action-sheet-ios-button-min-height;
  103. border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
  104. font-size: $action-sheet-ios-button-font-size;
  105. color: $action-sheet-ios-button-text-color;
  106. background: $action-sheet-ios-button-background;
  107. }
  108. .action-sheet-ios .action-sheet-button:last-child {
  109. border-bottom-color: transparent;
  110. }
  111. .action-sheet-ios .action-sheet-button.activated {
  112. @include margin(-$action-sheet-ios-button-border-width, null, null, null);
  113. border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
  114. border-bottom-color: $action-sheet-ios-button-background-activated;
  115. background: $action-sheet-ios-button-background-activated;
  116. }
  117. .action-sheet-ios .action-sheet-selected {
  118. font-weight: bold;
  119. background: #fff;
  120. }
  121. .action-sheet-ios .action-sheet-destructive {
  122. color: $action-sheet-ios-button-destructive-text-color;
  123. }
  124. .action-sheet-ios .action-sheet-cancel {
  125. font-weight: $action-sheet-ios-button-cancel-font-weight;
  126. background: $action-sheet-ios-button-cancel-background;
  127. }