414 lines
12 KiB
Plaintext
414 lines
12 KiB
Plaintext
@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;
|
|
}
|
|
} |