/*============= Framework 7 RTL Additions =============*/ html { direction: rtl; } /* === Lists === */ .list-block ul ul { padding-left: 0; padding-right: 45px; } .list-block .item-content { padding-left: 0; padding-right: 15px; } .list-block .item-inner { padding-right: 0; padding-left: 15px; } .list-block .item-after { margin-left: 0; margin-right: 5px; } .list-block .item-media i + i, .list-block .item-media i + img { margin-left: 0; margin-right: 5px; } .list-block .item-media + .item-inner { margin-left: 0; margin-right: 15px; } .list-block .item-link .item-inner { padding-right: 0; padding-left: 35px; background-position: 15px center; background-image: url("data:image/svg+xml;charset=utf-8,"); } .list-block.media-list .item-link .item-inner, .list-block li.media-item .item-link .item-inner { padding-right: 0; padding-left: 15px; } .list-block.media-list .item-link .item-title-row, .list-block li.media-item .item-link .item-title-row { padding-right: 0; padding-left: 20px; background-position: center left; background-image: url("data:image/svg+xml;charset=utf-8,"); } .list-block .sortable-handler { right: auto; left: 0; } .list-block.sortable-opened .item-inner, .list-block.sortable-opened .item-link .item-inner { padding-right: 0; padding-left: 35px; } .list-block.sortable-opened .item-link .item-inner, .list-block.sortable-opened .item-link .item-title-row { background-image: none; } .list-block .swipeout-actions-left, .list-block .swipeout-actions-right { direction: ltr; } /* === Toolbars === */ .navbar a.link i + span, .toolbar a.link i + span, .navbar a.link i + i, .toolbar a.link i + i, .navbar a.link span + i, .toolbar a.link span + i, .navbar a.link span + span, .toolbar a.link span + span { margin-left: 0; margin-right: 7px; } .navbar .left a + a, .navbar .right a + a { margin-left: 0; margin-right: 15px; } .navbar .left { margin-right: 0px; margin-left: 10px; } .navbar .right { margin-left: 0px; margin-right: 10px; } .navbar .right:first-child { right: auto; left: 8px; } /* === Forms === */ .list-block input[type="text"], .list-block input[type="password"], .list-block input[type="email"], .list-block input[type="tel"], .list-block input[type="url"], .list-block input[type="date"], .list-block input[type="datetime-local"], .list-block input[type="number"], .list-block select, .list-block textarea { padding-left: 0; padding-right: 5px; } .buttons-row .button:first-child { border-radius: 0 5px 5px 0; border-left: none; } .buttons-row .button:last-child { border-radius: 5px 0 0 5px; border-left-width: 1px; border-left-style: solid; } .buttons-row .button.button-round:first-child { border-radius: 0 27px 27px 0; } .buttons-row .button.button-round:last-child { border-radius: 27px 0 0 27px; } .label-switch input[type="checkbox"] + .checkbox:before { left: auto; right: 2px; } .label-switch input[type="checkbox"] + .checkbox:after { right: 2px; left: auto; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .label-switch input[type="checkbox"]:checked + .checkbox:after { left: auto; right: 22px; } .range-slider { padding-left: 0; padding-right: 0; margin-left: 0; padding-right: 3px; padding-left: 3px; margin-right: -1px; } .range-slider input[type="range"]:after { left: auto; right: -5px; } .range-slider input[type="range"]::-webkit-slider-thumb:after { left: auto; right: 0; } .range-slider input[type="range"]::-webkit-slider-thumb:before { right: auto; left: 100%; } label.label-radio input[type="checkbox"] ~ .item-inner, label.label-radio input[type="radio"] ~ .item-inner { padding-left: 35px; padding-right: 0; } label.label-radio input[type="checkbox"]:checked ~ .item-inner, label.label-radio input[type="radio"]: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 .searchbar-clear { right: auto; left: 0; } .searchbar.searchbar-active .searchbar-cancel { margin-left: 0; margin-right: 8px; } /* === Message Bar === */ .messagebar .link + textarea { margin-left: 0; margin-right: 8px; } .messagebar textarea + .link { margin-left: 0; margin-right: 8px; } /* === Modals === */ .modal-button:first-child { border-radius: 0 0 7px 0; border-right: none; } .modal-button:last-child { border-right: 1px solid #b5b5b5; border-radius: 0 0 0 7px; } .modal-button:first-child:last-child { border-radius: 0 0 7px 7px; } /* === Content Block === */ .content-block-inner { margin-left: 0; margin-right: -15px; } /* === Pages === */ .page-on-left { -webkit-transform: translate3d(20%, 0, 0); -ms-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } .page-on-right { -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } @-webkit-keyframes pageFromRightToCenter { from { -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translate3d(-100%, 0, 0); } to { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, 0, 0); } } @-webkit-keyframes pageFromCenterToRight { from { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, 0, 0); } to { -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes pageFromRightToCenter { from { -webkit-box-shadow: none; box-shadow: none; transform: translate3d(-100%, 0, 0); } to { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); transform: translate3d(0, 0, 0); } } @keyframes pageFromCenterToRight { from { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); transform: translate3d(0, 0, 0); } to { -webkit-box-shadow: none; box-shadow: none; 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); } } @-webkit-keyframes pageFromRightToCenterDegrade { from { -webkit-transform: translate3d(-100%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); } } @-webkit-keyframes pageFromCenterToRightDegrade { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes pageFromRightToCenterDegrade { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes pageFromCenterToRightDegrade { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } /* === Messages === */ .message-received { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .message-sent { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } /* === Back Icons === */ i.icon.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-gray, i.icon-back.theme-gray, .theme-gray i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-white, i.icon-back.theme-white, .theme-white i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-black, i.icon-back.theme-black, .theme-black i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-lightblue, i.icon-back.theme-lightblue, .theme-lightblue i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-yellow, i.icon-back.theme-yellow, .theme-yellow i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-orange, i.icon-back.theme-orange, .theme-orange i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-pink, i.icon-back.theme-pink, .theme-pink i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-blue, i.icon-back.theme-blue, .theme-blue i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-green, i.icon-back.theme-green, .theme-green i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } i.icon-back.color-red, i.icon-back.theme-red, .theme-red i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,"); } /* === Accordion === */ .list-block .accordion-toggle .item-inner { padding-right: 0; padding-left: 35px; background-position: 15px center; background-image: url("data:image/svg+xml;charset=utf-8,"); } .list-block .accordion-item-expanded .accordion-toggle .item-inner, .list-block .accordion-item-expanded > .item-link .item-inner { background-image: url("data:image/svg+xml;charset=utf-8,"); } .list-block .accordion-item ul { padding-right: 0; }