mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
baa04cde4d
Using the :active pseudo works fine for desktop, but mobile is a completely different beast, especially with the quirks of each platform. By intentionally not using any :active selectors and manually adding/removing a .active class, it gives us a precise control on how the active state works for ALL platforms. Additionally, this places less selectors in the css, and reduces the possibility of unnecessary repaints. Currently this method of using .active instead of :active is being applied to .button and .item elements.
93 lines
1.5 KiB
SCSS
93 lines
1.5 KiB
SCSS
/**
|
|
* Action Sheets
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.action-sheet-backdrop {
|
|
@include transition(background-color 300ms ease-in-out);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $z-index-action-sheet;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0);
|
|
|
|
&.active {
|
|
background-color: rgba(0,0,0,0.5);
|
|
}
|
|
}
|
|
|
|
.action-sheet-wrapper {
|
|
@include translate3d(0, 100%, 0);
|
|
@include transition(all ease-in-out 300ms);
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.action-sheet-up {
|
|
@include translate3d(0, 0, 0);
|
|
}
|
|
|
|
.action-sheet {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
width: auto;
|
|
z-index: $z-index-action-sheet;
|
|
overflow: hidden;
|
|
|
|
.button {
|
|
display: block;
|
|
padding: 1px;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
|
|
background-color: transparent;
|
|
|
|
color: $positive;
|
|
font-size: 18px;
|
|
|
|
&.destructive {
|
|
color: $assertive;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-sheet-title {
|
|
padding: 10px;
|
|
color: lighten($base-color, 40%);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.action-sheet-group {
|
|
margin-bottom: 5px;
|
|
border-radius: $sheet-border-radius;
|
|
background-color: #fff;
|
|
.button {
|
|
border-width: 1px 0px 0px 0px;
|
|
border-radius: 0;
|
|
|
|
&.active {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
}
|
|
.button:first-child:last-child {
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
.action-sheet-open {
|
|
pointer-events: none;
|
|
|
|
&.modal-open .modal {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.action-sheet-backdrop {
|
|
pointer-events: auto;
|
|
}
|
|
}
|