framework7-without-localstorage/src/less/ios/pages.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Pages === */

// Pages animations
@pageDuration: 400ms;

.pages {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}
.page {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #efeff4;
    .translate3d(0,0,0);
    &.cached {
        display: none;
    }
}
.page-on-left {
    .translate3d(-20%);
    .swipeback-page-opacity {
        opacity: 1;
    }
    &:after {
        opacity: 1;
    }
}
.page-on-center {
    .swipeback-page-shadow {
        opacity: 1;
    }
    .swipeback-page-opacity {
        opacity: 0 !important;
    }
}
.page-on-right {
    .translate3d(100%);
    .swipeback-page-shadow {
        opacity: 0 !important;
    }
}
.page-content {
    .scrollable();
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
}

// Page Shadow
.page-fake-opacity() {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0;
    z-index: 10000;
    will-change: opacity;
    contain: strict;
}
.page-fake-shadow() {
    position: absolute;
    right: 100%;
    top: 0;
    width: 16px;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
    z-index: -1;
    content: '';
    will-change: opacity;
    contain: strict;
    html.android & {
        display: none;
        .animation(none);
    }
}
.swipeback-page-shadow {
    .page-fake-shadow();
}
.swipeback-page-opacity {
    .page-fake-opacity();
}


//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
    &, .swipeback-page-shadow, .swipeback-page-opacity {
        .transition(@pageDuration);
    }
}
.page-from-right-to-center, .page-from-center-to-right {
    &:before {
        .page-fake-shadow();
    }
}
// From/to Right To/from Center animations
.page-from-right-to-center {
    &:before {
        .animation(pageFromRightToCenterShadow @pageDuration forwards);
    }
    .animation(pageFromRightToCenter @pageDuration forwards);
}
.page-from-center-to-right {
    &:before {
        .animation(pageFromCenterToRightShadow @pageDuration forwards);
    }
    .animation(pageFromCenterToRight @pageDuration forwards);
}
@-webkit-keyframes pageFromRightToCenter {
    from {
        -webkit-transform: translate3d(100%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes pageFromCenterToRight {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(100%,0,0);
    }
}
@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(100%,0,0);
    }
}
@-webkit-keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


// From/to Center To/from Left animations
.page-from-center-to-left {
    .animation(pageFromCenterToLeft @pageDuration forwards);
    &:after {
        .page-fake-opacity();
        .animation(pageFromCenterToLeftOpacity @pageDuration forwards);
    }
}
.page-from-left-to-center {
    .animation(pageFromLeftToCenter @pageDuration forwards);
    &:after {
        .page-fake-opacity();
        .animation(pageFromLeftToCenterOpacity @pageDuration forwards);
    }
}

@-webkit-keyframes pageFromCenterToLeft {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(-20%,0,0);
    }
}
@keyframes pageFromCenterToLeft {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(-20%,0,0);
    }
}
@-webkit-keyframes pageFromLeftToCenter {
    from {
        -webkit-transform: translate3d(-20%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromLeftToCenter {
    from {
        transform: translate3d(-20%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes pageFromCenterToLeftOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pageFromCenterToLeftOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes pageFromLeftToCenterOpacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes pageFromLeftToCenterOpacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}