/*=============
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;
}