mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
d3165fc229
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Fixed the tokens used on background and text. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> - [Ionic Custom Dialog](https://ionic-framework-git-rou-11900-ionic1.vercel.app/src/components/modal/test/custom-dialog?ionic:theme=ionic)
58 lines
1.4 KiB
SCSS
58 lines
1.4 KiB
SCSS
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
|
@use "./modal.common";
|
|
|
|
// Ionic Modal
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--background: #{globals.$ion-bg-surface-default};
|
|
--box-shadow: #{globals.$ion-elevation-3};
|
|
// Backdrop opacity is 1 because the backdrop's background color has an alpha value
|
|
--backdrop-opacity: 1;
|
|
|
|
color: globals.$ion-text-default;
|
|
}
|
|
|
|
// Shape
|
|
// -------------------------------------
|
|
:host(.modal-round) {
|
|
--border-radius: #{globals.$ion-border-radius-1000};
|
|
}
|
|
|
|
:host(.modal-soft) {
|
|
--border-radius: #{globals.$ion-border-radius-400};
|
|
}
|
|
|
|
:host(.modal-rectangular) {
|
|
--border-radius: #{globals.$ion-border-radius-0};
|
|
}
|
|
|
|
// Sheet Modal
|
|
// --------------------------------------------------
|
|
|
|
.modal-handle {
|
|
@include globals.position(globals.$ion-space-300, 0px, null, 0px);
|
|
@include globals.border-radius(globals.$ion-border-radius-100);
|
|
|
|
width: globals.$ion-scale-1100;
|
|
height: globals.$ion-scale-100;
|
|
|
|
background-color: globals.$ion-primitives-neutral-300;
|
|
|
|
&::before {
|
|
@include globals.padding(globals.$ion-space-100);
|
|
}
|
|
}
|
|
|
|
:host(.modal-sheet) .modal-wrapper {
|
|
@include globals.border-radius(var(--border-radius), var(--border-radius), 0, 0);
|
|
}
|
|
|
|
/**
|
|
* Ensure that the sheet modal does not
|
|
* completely cover the content.
|
|
*/
|
|
:host(.modal-sheet) {
|
|
--height: calc(100% - (var(--ion-safe-area-top) + #{globals.$ion-scale-250}));
|
|
}
|