mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
85 lines
1.3 KiB
SCSS
85 lines
1.3 KiB
SCSS
@import "./action-sheet.vars";
|
|
|
|
// Action Sheet
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--width: #{$action-sheet-width};
|
|
--max-width: #{$action-sheet-max-width};
|
|
|
|
@include font-smoothing();
|
|
@include position(0, 0, 0, 0);
|
|
|
|
display: block;
|
|
position: fixed;
|
|
|
|
touch-action: none;
|
|
user-select: none;
|
|
z-index: $z-index-overlay;
|
|
}
|
|
|
|
.action-sheet-wrapper {
|
|
@include position(0, 0, 0, 0);
|
|
@include margin(auto);
|
|
@include transform(translate3d(0, 100%, 0));
|
|
|
|
display: block;
|
|
position: absolute;
|
|
|
|
width: var(--width);
|
|
max-width: var(--max-width);
|
|
|
|
z-index: $z-index-overlay-wrapper;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.action-sheet-button {
|
|
width: var(--width);
|
|
|
|
border: 0;
|
|
|
|
outline: none;
|
|
|
|
font-family: inherit;
|
|
}
|
|
|
|
.action-sheet-button-inner {
|
|
display: flex;
|
|
|
|
flex-flow: row nowrap;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.action-sheet-container {
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
justify-content: flex-end;
|
|
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.action-sheet-group {
|
|
flex-shrink: 2;
|
|
overscroll-behavior-y: contain;
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.action-sheet-group::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.action-sheet-group-cancel {
|
|
flex-shrink: 0;
|
|
|
|
overflow: hidden;
|
|
}
|