Files
ionic-framework/core/src/components/item-options/item-options.scss
Mike Hartington a3c85ae301 fix(): add safe area cutouts (#15750)
* fix(): add safe area cutouts

* fix(): adjust safe-area padding

* fix(): safe area improvments

* fix(): safe-area-improvments for padding

* fix(): safe-area improvements for items

* fix(): safe-area fix for core css

* fix(): safe-area fix for list header

* fix(): safe-area fix for popover

* fix(): safe-area validates

* chore(): ci updates

* fix(): safe-area revert padding changes for now

* padding is being applied twice

* safe-area-left is applied to item
2018-09-26 13:01:54 -05:00

89 lines
1.6 KiB
SCSS

@import "./item-options.vars";
// Item Options
// --------------------------------------------------
ion-item-options {
@include multi-dir() {
/* stylelint-disable property-blacklist */
top: 0;
right: 0;
/* stylelint-enable property-blacklist */
}
@include ltr() {
justify-content: flex-end;
}
@include rtl() {
justify-content: flex-start;
&:not(.item-options-end) {
/* stylelint-disable property-blacklist */
right: auto;
left: 0;
/* stylelint-enable property-blacklist */
justify-content: flex-end;
}
}
display: none;
position: absolute;
height: 100%;
font-size: 14px;
user-select: none;
z-index: $z-index-item-options;
}
.item-options-start {
@include multi-dir() {
/* stylelint-disable property-blacklist */
right: auto;
left: 0;
/* stylelint-enable property-blacklist */
}
@include ltr() {
justify-content: flex-start;
}
@include rtl() {
justify-content: flex-end;
}
}
.item-options-start ion-item-option:first-child {
@include padding-horizontal(null, var(--ion-safe-area-left));
}
.item-options-end ion-item-option:last-child {
@include padding-horizontal(null, var(--ion-safe-area-right));
}
.item-sliding-active-slide {
@include rtl() {
&.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
width: 100%;
visibility: visible;
}
}
ion-item-options {
display: flex;
}
&.item-sliding-active-options-start .item-options-start,
&.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
width: 100%;
visibility: visible;
}
}