123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- @import "../../themes/ionic.globals.ios";
-
- // iOS Action Sheet
- // --------------------------------------------------
-
- /// @prop - Text align of the action sheet
- $action-sheet-ios-text-align: center !default;
-
- // deprecated
- $action-sheet-ios-padding: null !default;
-
- /// @prop - Padding top of the action sheet
- $action-sheet-ios-padding-top: 0 !default;
-
- /// @prop - Padding end of the action sheet
- $action-sheet-ios-padding-end: 10px !default;
-
- /// @prop - Padding bottom of the action sheet
- $action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
-
- /// @prop - Padding start of the action sheet
- $action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
-
- /// @prop - Top margin of the action sheet button group
- $action-sheet-ios-group-margin-top: 10px !default;
-
- /// @prop - Bottom margin of the action sheet button group
- $action-sheet-ios-group-margin-bottom: 10px !default;
-
- /// @prop - Background color of the action sheet
- $action-sheet-ios-background: #f9f9f9 !default;
-
- /// @prop - Border color of the action sheet
- $action-sheet-ios-border-color: #d6d6da !default;
-
- /// @prop - Border radius of the action sheet
- $action-sheet-ios-border-radius: 13px !default;
-
- /// @prop - Padding of the action sheet title
- $action-sheet-ios-title-padding: 1.5rem !default;
-
- /// @prop - Color of the action sheet title
- $action-sheet-ios-title-color: #8f8f8f !default;
-
- /// @prop - Font size of the action sheet title
- $action-sheet-ios-title-font-size: 1.3rem !default;
-
- /// @prop - Font weight of the action sheet title
- $action-sheet-ios-title-font-weight: 400 !default;
-
- /// @prop - Border radius of the action sheet title
- $action-sheet-ios-title-border-radius: 0 !default;
-
- /// @prop - Minimum height of the action sheet button
- $action-sheet-ios-button-min-height: 5.6rem !default;
-
- /// @prop - Padding of the action sheet button
- $action-sheet-ios-button-padding: 18px !default;
-
- /// @prop - Text color of the action sheet button
- $action-sheet-ios-button-text-color: #007aff !default;
-
- /// @prop - Font size of the action sheet button
- $action-sheet-ios-button-font-size: 2rem !default;
-
- /// @prop - Border width of the action sheet button
- $action-sheet-ios-button-border-width: $hairlines-width !default;
-
- /// @prop - Border style of the action sheet button
- $action-sheet-ios-button-border-style: solid !default;
-
- /// @prop - Border color of the action sheet button
- $action-sheet-ios-button-border-color: #d1d3d6 !default;
-
- /// @prop - Background color of the action sheet button
- $action-sheet-ios-button-background: transparent !default;
-
- /// @prop - Background color of the activated action sheet button
- $action-sheet-ios-button-background-activated: #ebebeb !default;
-
- /// @prop - Destructive text color of the action sheet button
- $action-sheet-ios-button-destructive-text-color: #f53d3d !default;
-
- /// @prop - Background color of the action sheet cancel button
- $action-sheet-ios-button-cancel-background: #fff !default;
-
- /// @prop - Font weight of the action sheet cancel button
- $action-sheet-ios-button-cancel-font-weight: 600 !default;
-
-
- .action-sheet-ios {
- @include text-align($action-sheet-ios-text-align);
- }
-
- .action-sheet-ios .action-sheet-wrapper {
- @include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
- @include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto);
- }
-
- .action-sheet-ios .action-sheet-container {
- @include deprecated-variable(padding, $action-sheet-ios-padding) {
- @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
- }
- }
-
- .action-sheet-ios .action-sheet-group {
- @include border-radius($action-sheet-ios-border-radius);
- @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
-
- background: $action-sheet-ios-background;
-
- // scss-lint:disable VendorPrefix
- // TODO Removing this temporarily because it causes a flicker
- // when there are not enough elements to overflow
- // https://github.com/ionic-team/ionic/issues/13262
- // -webkit-overflow-scrolling: touch;
- // Prevents borders from going outside of the container
- // -webkit-mask-image: -webkit-radial-gradient(circle, #fff, #000);
- }
-
- .action-sheet-ios .action-sheet-group:first-child {
- @include margin($action-sheet-ios-group-margin-top, null, null, null);
- }
-
- .action-sheet-ios .action-sheet-group:last-child {
- @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
- }
-
- .action-sheet-ios .action-sheet-title {
- @include padding($action-sheet-ios-title-padding);
- @include text-align($action-sheet-ios-text-align);
- @include border-radius($action-sheet-ios-title-border-radius);
-
- border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
- font-size: $action-sheet-ios-title-font-size;
- font-weight: $action-sheet-ios-title-font-weight;
- color: $action-sheet-ios-title-color;
- }
-
- .action-sheet-ios .action-sheet-button {
- @include margin(0);
- @include padding($action-sheet-ios-button-padding);
-
- min-height: $action-sheet-ios-button-min-height;
-
- border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
- font-size: $action-sheet-ios-button-font-size;
- color: $action-sheet-ios-button-text-color;
- background: $action-sheet-ios-button-background;
- }
-
- .action-sheet-ios .action-sheet-button:last-child {
- border-bottom-color: transparent;
- }
-
- .action-sheet-ios .action-sheet-button.activated {
- @include margin(-$action-sheet-ios-button-border-width, null, null, null);
-
- border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
- border-bottom-color: $action-sheet-ios-button-background-activated;
- background: $action-sheet-ios-button-background-activated;
- }
-
- .action-sheet-ios .action-sheet-selected {
- font-weight: bold;
- background: #fff;
- }
-
- .action-sheet-ios .action-sheet-destructive {
- color: $action-sheet-ios-button-destructive-text-color;
- }
-
- .action-sheet-ios .action-sheet-cancel {
- font-weight: $action-sheet-ios-button-cancel-font-weight;
- background: $action-sheet-ios-button-cancel-background;
- }
|