action-sheet.wp.scss 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. @import "../../themes/ionic.globals.wp";
  2. // Windows Action Sheet
  3. // --------------------------------------------------
  4. /// @prop - Text align of the action sheet
  5. $action-sheet-wp-text-align: start !default;
  6. /// @prop - Background color of the action sheet
  7. $action-sheet-wp-background: #fff !default;
  8. /// @prop - Padding top of the action sheet
  9. $action-sheet-wp-padding-top: .8rem !default;
  10. /// @prop - Padding bottom of the action sheet
  11. $action-sheet-wp-padding-bottom: .8rem !default;
  12. /// @prop - Box shadow color of the action sheet
  13. $action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default;
  14. /// @prop - Box shadow of the action sheet
  15. $action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default;
  16. // deprecated
  17. $action-sheet-wp-title-padding: null !default;
  18. /// @prop - Padding top of the action sheet title
  19. $action-sheet-wp-title-padding-top: 11px !default;
  20. /// @prop - Padding end of the action sheet title
  21. $action-sheet-wp-title-padding-end: 16px !default;
  22. /// @prop - Padding bottom of the action sheet title
  23. $action-sheet-wp-title-padding-bottom: 17px !default;
  24. /// @prop - Padding start of the action sheet title
  25. $action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default;
  26. /// @prop - Font size of the action sheet title
  27. $action-sheet-wp-title-font-size: 2rem !default;
  28. /// @prop - Color of the action sheet title
  29. $action-sheet-wp-title-color: #4d4d4d !default;
  30. /// @prop - Text align of the action sheet title
  31. $action-sheet-wp-title-text-align: $action-sheet-wp-text-align !default;
  32. /// @prop - Height of the action sheet button
  33. $action-sheet-wp-button-height: 4.8rem !default;
  34. /// @prop - Text color of the action sheet button
  35. $action-sheet-wp-button-text-color: #4d4d4d !default;
  36. /// @prop - Font size of the action sheet button
  37. $action-sheet-wp-button-font-size: 1.5rem !default;
  38. // deprecated
  39. $action-sheet-wp-button-padding: null !default;
  40. /// @prop - Padding top of the action sheet button
  41. $action-sheet-wp-button-padding-top: 0 !default;
  42. /// @prop - Padding end of the action sheet button
  43. $action-sheet-wp-button-padding-end: 16px !default;
  44. /// @prop - Padding bottom of the action sheet button
  45. $action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default;
  46. /// @prop - Padding start of the action sheet button
  47. $action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default;
  48. /// @prop - Text align of the action sheet button
  49. $action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default;
  50. /// @prop - Background color of the action sheet button
  51. $action-sheet-wp-button-background: transparent !default;
  52. /// @prop - Background color of the action sheet activated button
  53. $action-sheet-wp-button-background-activated: $list-wp-activated-background-color !default;
  54. /// @prop - Font size of the icon in the action sheet button
  55. $action-sheet-wp-icon-font-size: 2.4rem !default;
  56. /// @prop - Width of the icon in the action sheet button
  57. $action-sheet-wp-icon-width: 2.3rem !default;
  58. /// @prop - Text align of the icon in the action sheet button
  59. $action-sheet-wp-icon-text-align: center !default;
  60. /// @prop - Vertical align of the icon in the action sheet button
  61. $action-sheet-wp-icon-vertical-align: middle !default;
  62. // deprecated
  63. $action-sheet-wp-icon-margin: null !default;
  64. /// @prop - Margin top of the icon in the action sheet button
  65. $action-sheet-wp-icon-margin-top: 0 !default;
  66. /// @prop - Margin end of the icon in the action sheet button
  67. $action-sheet-wp-icon-margin-end: 20px !default;
  68. /// @prop - Margin bottom of the icon in the action sheet button
  69. $action-sheet-wp-icon-margin-bottom: 0 !default;
  70. /// @prop - Margin start of the icon in the action sheet button
  71. $action-sheet-wp-icon-margin-start: 0 !default;
  72. .action-sheet-wp .action-sheet-title {
  73. @include text-align($action-sheet-wp-title-text-align);
  74. font-size: $action-sheet-wp-title-font-size;
  75. color: $action-sheet-wp-title-color;
  76. @include deprecated-variable(padding, $action-sheet-wp-title-padding) {
  77. @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
  78. }
  79. }
  80. .action-sheet-wp .action-sheet-button {
  81. @include text-align($action-sheet-wp-button-text-align);
  82. min-height: $action-sheet-wp-button-height;
  83. font-size: $action-sheet-wp-button-font-size;
  84. color: $action-sheet-wp-button-text-color;
  85. background: $action-sheet-wp-button-background;
  86. @include deprecated-variable(padding, $action-sheet-wp-button-padding) {
  87. @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
  88. }
  89. }
  90. .action-sheet-wp .action-sheet-button.activated {
  91. background: $action-sheet-wp-button-background-activated;
  92. }
  93. .action-sheet-wp .action-sheet-icon {
  94. @include padding(0);
  95. @include text-align($action-sheet-wp-icon-text-align);
  96. width: $action-sheet-wp-icon-width;
  97. font-size: $action-sheet-wp-icon-font-size;
  98. vertical-align: $action-sheet-wp-icon-vertical-align;
  99. @include deprecated-variable(margin, $action-sheet-wp-icon-margin) {
  100. @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
  101. }
  102. }
  103. .action-sheet-wp .action-sheet-group {
  104. background: $action-sheet-wp-background;
  105. }
  106. .action-sheet-wp .action-sheet-group:first-child {
  107. @include padding($action-sheet-wp-padding-top, null, null, null);
  108. box-shadow: $action-sheet-wp-box-shadow;
  109. }
  110. .action-sheet-wp .action-sheet-group:last-child {
  111. @include padding(null, null, $action-sheet-wp-padding-bottom, null);
  112. }
  113. .action-sheet-wp .action-sheet-group .button-inner {
  114. justify-content: flex-start;
  115. }
  116. .action-sheet-wp .action-sheet-selected {
  117. font-weight: bold;
  118. }
  119. .action-sheet-wp .action-sheet-cancel {
  120. background: $action-sheet-wp-button-background;
  121. }