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

Full featured mobile HTML framework for building iOS & Android apps

@import url('_mixins.less');
@import url('_colors-vars.less');
/*=============
  Framework 7 RTL Additions
=============*/
html {
    direction: rtl;
}

/* === Lists === */
.list-block {
    ul ul {
        padding-left: 0;
        padding-right: 45px;
    }
    .item-content {
        padding-left: 0;
        padding-right: 15px;
    }
    .item-inner {
        padding-right: 0;
        padding-left: 15px;
    }
    .item-after {
        margin-left: 0;
        margin-right: 5px;
    }
    .item-media {
        i + i, i + img {
            margin-left: 0;
            margin-right: 5px;
        }
        & + .item-inner {
            margin-left: 0;
            margin-right: 15px;    
        }
    }
    .item-link {
        .item-inner {
            padding-right: 0;
            padding-left: 35px;
            background-position: 15px center;
            .encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='#c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
        }
    }

    &.media-list, li.media-item {
        .item-link {
            .item-inner {
                padding-right: 0;
                padding-left: 15px;
            }
            .item-title-row {
                padding-right: 0;
                padding-left: 20px;
                background-position: center left;
                .encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='#c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
            }
        }
    }
    .sortable-handler {
        right: auto;
        left: 0;
    }
    &.sortable-opened {
        .item-inner, .item-link .item-inner {
            padding-right: 0;
            padding-left: 35px;
        }
        .item-link .item-inner, .item-link .item-title-row {
            background-image: none;
        }
    }
    .swipeout-actions-left, .swipeout-actions-right {
        direction: ltr;
    }
}

/* === Toolbars === */
.navbar, .toolbar {
    a.link {
        i+span, i+i, span+i, span+span {
            margin-left: 0;
            margin-right: 7px;
        }
    }

}
.navbar {
    .left, .right {
        a+a {
            margin-left: 0;
            margin-right: 15px;
        }
    }
    .left {
        margin-right: 0px;
        margin-left: 10px;
    }
    .right {
        margin-left: 0px;
        margin-right: 10px;
    }
    .right:first-child {
        right: auto;
        left: 8px;
    }
}
/* === Forms === */
.list-block {
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
        padding-left: 0;
        padding-right: 5px;
    }
}
.buttons-row {
    .button:first-child {
        border-radius: 0 5px 5px 0;
        border-left: none;
    }
    .button:last-child {
        border-radius: 5px 0 0 5px;
        border-left-width: 1px;
        border-left-style: solid;
    }
    .button.button-round:first-child {
        border-radius: 0 27px 27px 0;
    }
    .button.button-round:last-child {
        border-radius: 27px 0 0 27px;
    }
}
.label-switch {
    input[type="checkbox"] {
        &+ .checkbox {
            &:before {
                left: auto;
                right: 2px;
            }
            &:after {
                right: 2px;
                left: auto;
                .translate3d(0,0,0);
            }
        }
        &:checked {
            &+ .checkbox {
                &:after {
                    left: auto;
                    .transform(translateX(-20px));
                }
            }
        }
    }
}
.range-slider {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    padding-right: 3px;
    padding-left: 3px;
    margin-right: -1px;
    input[type="range"]:after {
        left: auto;
        right: -5px;
    }
    input[type="range"]::-webkit-slider-thumb:after {
        left: auto;
        right: 0;
    }
    input[type="range"]::-webkit-slider-thumb:before {
        right: auto;
        left: 100%;        
    }
}
label.label-radio {
    input[type="checkbox"], input[type="radio"] {
        ~ .item-inner {
            padding-left: 35px;
            padding-right: 0;
        }
        &:checked ~ .item-inner{
            background-position: 15px center;
        }
    }
}

/* === Search Bar === */
.searchbar {
    input[type="search"] {
        background-position: right center;
        background-position: ~"-webkit-calc(100% - 8px)" center;
        background-position: ~"calc(100% - 8px)" center;
    }
    .searchbar-clear {
        right: auto;
        left: 0;
    }
    &.searchbar-active {
        .searchbar-cancel {
            margin-left: 0;
            margin-right: 8px;
        }
    }
}
/* === Message Bar === */
.messagebar {
    .link + textarea {
        margin-left: 0;
        margin-right: 8px;
    }
    textarea + .link {
        margin-left: 0;
        margin-right: 8px;
    }
}
/* === Modals === */
.modal-button {
    &:first-child {
        border-radius: 0 0 7px 0;
        border-right: none;
    }
    &:last-child {
        border-right: 1px solid #b5b5b5;
        border-radius: 0 0 0 7px;
    }
    &:first-child:last-child {
        border-radius: 0 0 7px 7px;
    }
}

/* === Content Block === */
.content-block-inner {
    margin-left: 0;
    margin-right: -15px;
}

/* === Pages === */
.page-from-right-to-center:before, .page-from-center-to-right:before, .page-fake-shadow {
    right: auto;
    left: 100%;
    background: -webkit-linear-gradient(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%);
    background: linear-gradient(to 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%);
}
.page-on-left {
    .translate3d(20%);
}
.page-on-right {
    .translate3d(-100%);
}
@-webkit-keyframes pageFromRightToCenter {
    from {
        -webkit-transform: translate3d(-100%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes pageFromCenterToRight {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(-100%,0,0);
    }
}
@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(-100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(-100%,0,0);
    }
}
@-webkit-keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        -webkit-transform: translate3d(20%,0,0);
    }
}
@-webkit-keyframes pageFromLeftToCenter {
    from {
        opacity: 0.9;
        -webkit-transform: translate3d(20%,0,0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        transform: translate3d(20%,0,0);
    }
}
@keyframes pageFromLeftToCenter {
    from {
        opacity: 0.9;
        transform: translate3d(20%,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

/* === Messages === */
.message-received {
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    .align-items(flex-end);
}
.message-sent {
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    .align-items(flex-start);
}
/* === Chips === */
.chip {

}
.chip-media {
    + .chip-label{
        margin-left: 0px;
        margin-right: 4px;
    }
}
.chip-delete {
    margin-right: 0;
    margin-left: -6px;
}
/* === Back Icons === */
i.icon {
    &.icon-back {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='@{themeColor}'/></svg>");
    }
    &.icon-forward {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='@{themeColor}'/></svg>");
    }
    &.icon-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    &.icon-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
}
.rtl-icon-color-mixin(@colorName, @color) {
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName}, .theme-@{colorName} i.icon-back {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='@{color}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName}, .theme-@{colorName} i.icon-forward {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='@{color}'/></svg>");
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName}, .theme-@{colorName} i.icon-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{color}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName}, .theme-@{colorName} i.icon-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{color}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
}
.rtl-icon-color-mixin(e('gray'), #8e8e93);
.rtl-icon-color-mixin(e('white'), #ffffff);
.rtl-icon-color-mixin(e('black'), #000000);
.rtl-icon-color-mixin(e('lightblue'), #5ac8fa);
.rtl-icon-color-mixin(e('yellow'), #ffcc00);
.rtl-icon-color-mixin(e('orange'), #ff9500);
.rtl-icon-color-mixin(e('pink'), #ff2d55);
.rtl-icon-color-mixin(e('blue'), #007aff);
.rtl-icon-color-mixin(e('green'), #4cd964);
.rtl-icon-color-mixin(e('red'), #ff3b30);

/* === Accordion === */
.list-block {
    .accordion-toggle {
        .item-inner {
            padding-right: 0;
            padding-left: 35px;
            background-position: 15px center;
            .encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='#c7c7cc' transform='translate(60,120) rotate(180)'/></svg>");
        }
    }
    &:not(.media-list) .accordion-item-expanded:not(.media-item) .accordion-item-toggle .item-inner, 
    &:not(.media-list) .accordion-item-expanded:not(.media-item) > .item-link .item-inner,
    &.media-list .accordion-item-expanded .accordion-item-toggle .item-title-row,
    &.media-list .accordion-item-expanded > .item-link .item-title-row,
    .accordion-item-expanded.media-item .accordion-item-toggle .item-title-row,
    .accordion-item-expanded.media-item > .item-link .item-title-row,
    {
        .encoded-svg-background("<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(70, 30) rotate(90)' fill='#c7c7cc'/></svg>");
        background-size: 20px 20px;
    }
    .accordion-item ul {
        padding-right: 0;
    }
}

/* === Timeline === */
.timelineItemLeft() {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-left: ~"-moz-calc(50% - (30px + 10px) / 2 - 50px)";
    margin-left: ~"-webkit-calc(50% - (30px + 10px) / 2 - 50px)";
    margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)";
    margin-right: 0;
    .timeline-item-date {
        text-align: right;
    }
}
.timelineItemRight() {
    margin-right: ~"-moz-calc(50% - (30px + 10px) / 2 - 50px)";
    margin-right: ~"-webkit-calc(50% - (30px + 10px) / 2 - 50px)";
    margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)";
    margin-left: 0;
    .timeline-item-date {
        text-align: left;
    }
}
.timeline-sides {
    .timeline-item {
        .timelineItemRight();
        &:not(.timeline-item-right):nth-child(2n) {
            .timelineItemLeft();
        }
    }
    .timeline-item-left {
        .timelineItemLeft()
    }
    .timeline-item-right {
        .timelineItemRight();
    }
}
@media (min-width:768px) {
    .tablet-sides {
        .timeline-sides;
    }
}

@toolbarBorderColor: #c4c4c4;
.timeline-horizontal .timeline-item-date {
    text-align: right;
}
.timeline-horizontal {
    .timeline-month:last-child .timeline-item:last-child {
        .hairline(right, @toolbarBorderColor);
    }
}
.timeline-year {
    &:last-child {
        .hairline(right, @toolbarBorderColor);
    }
}