API tools faq
paste
Advertisement
grayowlbear

rtl.less

grayowlbear
Jul 3rd, 2025
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.13 KB | None | 0 0
raw download clone embed print report
  1. html[dir="rtl"] {
  2.     &:root {
  3.         --flow-direction-factor-inline: -1;
  4.     }
  5.  
  6.     .ui-widget-content.ui-dialog {
  7.         left: inherit;
  8.     }
  9.     .ty-icon-right-circle:before {
  10.         content: "\e00e";
  11.     }
  12.     .ty-icon-left-circle:before {
  13.         content: "\e00f";
  14.     }
  15.     .ty-horizontal-filters-content-to-right {
  16.         right: auto;
  17.         left: 0;
  18.     }
  19.     .ty-horizontal-product-filters-dropdown a .ty-icon-cancel-circle {
  20.         padding-right: 5px;
  21.     }
  22.     .ty-cart-items__list-item-desc p span {
  23.         float: left;
  24.     }
  25.     .ty-pagination__text-arrow:before {
  26.         content: "→";
  27.     }
  28.     .ty-pagination__next .ty-pagination__text-arrow:before {
  29.         content: "←";
  30.     }
  31.     .ty-icon-right-dir:before {
  32.         content: "\e003";
  33.     }
  34.     .ty-icon-right-open:before {
  35.         content: "\e01a";
  36.     }
  37.     .ty-pagination__right-arrow .ty-pagination__text-arrow:before {
  38.         content: "←";
  39.     }
  40.  
  41.     .ty-price-slider {
  42.         &__inputs {
  43.             display: flex;
  44.             flex-direction: row-reverse;
  45.             align-items: baseline;
  46.             justify-content: flex-end;
  47.             padding: 0;
  48.         }
  49.         &__bidi-container {
  50.             display: inline-block;
  51.             vertical-align: middle;
  52.         }
  53.         &__input-text {
  54.             float: left;
  55.         }
  56.         &__filter-prefix {
  57.             display: inline-block;
  58.             margin: 0 5px;
  59.             padding: 18px 0px;
  60.             vertical-align: middle;
  61.         }
  62.     }
  63.  
  64.     @media (max-width: 767px) {
  65.         .ty-icon-right-circle:before {
  66.             content: "\e00f";
  67.         }
  68.         .ty-icon-left-circle:before {
  69.             content: "\e00e";
  70.         }
  71.     }
  72.    
  73.     .ty-order-info__profile-field-item {
  74.         &.b-phone,
  75.         &.s-phone {
  76.             direction: rtl;
  77.         }
  78.     }
  79.  
  80.     .ty-control-group.ty-profile-field__item {
  81.         &.ty-billing-phone input,
  82.         &.ty-billing-address-line2 input,
  83.         &.ty-shipping-phone input,
  84.         &.ty-shipping-address-line2 input {
  85.             direction: rtl !important;
  86.             text-align: left !important;
  87.         }
  88.     }
  89.  
  90.     [name="payment_info[customer_phone]"] {
  91.         direction: rtl !important;
  92.         text-align: left !important;
  93.     }
  94.    
  95.     .ty-inputmask-bdi {
  96.         direction: rtl !important;
  97.         text-align: left !important;
  98.     }
  99.  
  100.     @media (max-width: 480px) {
  101.         .ui-datepicker {
  102.             left: 0 !important;
  103.             right: 0 !important;
  104.         }
  105.     }
  106.    
  107.     /** Fix old-owlcarousel non-adaptive for RTL **/
  108.  
  109.     .owl-controls > .owl-buttons {
  110.         direction: rtl;
  111.        
  112.         .owl-prev {
  113.             float: right;
  114.         }
  115.         .owl-next {
  116.             float: left;
  117.         }
  118.     }
  119.     @media screen and (max-width: 767px) {
  120.         .detail-page-products-list .grid-list {
  121.             margin: 0;
  122.             &.ty-scroller-advanced .owl-controls .owl-buttons {
  123.                 div.owl-prev {
  124.                     right: -20px;
  125.                     left: auto;
  126.                 }
  127.                 div.owl-next {
  128.                     left: -20px;
  129.                     right: auto;
  130.                 }
  131.             }
  132.         }
  133.     }
  134.     .banners.owl-carousel.owl-theme .owl-controls .owl-buttons,
  135.     .ypi-buy-together.owl-carousel.owl-theme .owl-controls .owl-buttons {
  136.         .owl-prev {
  137.             right: 0;
  138.             left: auto;
  139.             &:after {
  140.                 margin-left: 3px;
  141.             }
  142.             i {
  143.                 margin-right: -3px;
  144.                 margin-left: 0;
  145.             }
  146.         }
  147.         .owl-next {
  148.             left: 0;
  149.             right: 0;
  150.         }      
  151.     }
  152.     .ty-thumbs-wrapper {
  153.         .ty-icon-left-circle {
  154.             right: 3px;
  155.             left: auto;
  156.             left: unset;
  157.  
  158.             &::before {
  159.                 content: "\e00e";
  160.             }
  161.         }
  162.         .ty-icon-right-circle {
  163.             left: 3px;
  164.             right: auto;
  165.             right: unset;
  166.  
  167.             &::before {
  168.                 content: "\e00f";
  169.             }
  170.         }
  171.     }
  172.     /** /Fix old-owlcarousel non-adaptive for RTL **/
  173.    
  174.     // Youpi RTL
  175.  
  176.     .ypi-cr-phone {
  177.         direction: rtl;
  178.         float: left;
  179.  
  180.         @media (min-width: 768px) and (max-width: 1660px) {
  181.             width: min-content;
  182.         }
  183.  
  184.         .aditional-links {
  185.             direction: rtl;
  186.  
  187.             a {
  188.                 margin-left: unset;
  189.             }
  190.         }
  191.     }
  192.     .ypi-cr-box + a {
  193.         right: 0;
  194.         @media screen and (min-width: 768px) {
  195.             margin-top: 2px;
  196.         }
  197.     }
  198.     .ypi-cr-link {
  199.         right: 0;
  200.         top: 80px;
  201.     }
  202.     .n-phone {
  203.         direction: rtl;
  204.     }
  205.     .ypi-cr-link .visible-phone {
  206.         float: left;
  207.     }
  208.  
  209.     .m-label, .ab_dotd_product_label, .ty-value-changer__increase, .ty-value-changer__decrease {
  210.         .border-radius(8px);
  211.     }
  212.    
  213.     // Grid List
  214.     .grid-list {
  215.         .ty-grid-list__price {
  216.             flex-direction: row-reverse;
  217.             justify-content: flex-end;
  218.             text-align: left;
  219.            
  220.             .ty-price-update {
  221.                 margin-left: 0;
  222.                 margin-right: 10px;
  223.             }
  224.         }
  225.         .v-align-bottom {
  226.             flex-direction: row-reverse;
  227.         }
  228.     }
  229.    
  230.     // Menu
  231.     .top-menu-grid-vetrtical .icon-right-dir {
  232.         .rotate(180deg);
  233.     }
  234.     @media screen and (min-width: 768px) {
  235.         .tbm-menu .ty-menu__item .ty-menu__item-link .icon-down-dir {
  236.             left: -4px;
  237.             right: 0;
  238.         }
  239.     }
  240.     .ty-menu__item-link.a-first-lvl bdi {
  241.         .m-label {
  242.             top: -2px;
  243.             left: -1px;
  244.         }
  245.     }
  246.     .ty-menu__item .ty-menu__submenu bdi {
  247.         direction: ltr;
  248.     }
  249.    
  250.  
  251.     @media screen and (min-width: 768px) {
  252.         .top-menu-grid-vetrtical .ypi-menu__inbox .ty-menu__submenu-items.tree-level-dropdown .ypi-mwi-html {
  253.             right: 0;
  254.             left: auto;
  255.             border-right: 0 !important;
  256.             padding: 0;
  257.             display: inline-block;
  258.             width: 100%;
  259.             max-width: 970px !important;
  260.             overflow: hidden;
  261.         }
  262.     }
  263.  
  264.     .ty-blog-recent-posts-scroller .ty-btn__text:after {
  265.         content: " ←";
  266.     }
  267.    
  268.     .ty-social-buttons__inline {
  269.         .pinterest__wrapper a {
  270.             display: inline-block;
  271.             background-position-x: ~"calc(100% - 6px)";
  272.         }
  273.     }
  274.    
  275.     // Default product
  276.     .ty-product-detail {
  277.         .pib-title {
  278.             i.material-icons {
  279.                 top: 10px;
  280.                 left: -2px;
  281.                 float: left;
  282.             }
  283.             em {
  284.                 padding-left: 25px;
  285.             }
  286.         }
  287.     }
  288.     .ypi-buy-together h3.ty-subheader {
  289.         float: left;
  290.         padding-left: 2px;
  291.     }
  292.     .ty-scroller-list.grid-list.ty-scroller-advanced {
  293.         .owl-controls .owl-buttons div {
  294.             &.owl-next {
  295.                 left: -20px;
  296.                 right: auto;
  297.             }
  298.             &.owl-prev {
  299.                 right: -20px;
  300.                 left: auto;
  301.             }
  302.         }
  303.     }
  304.  
  305.     // Slider arrows position
  306.     .cm-image-gallery-wrapper {
  307.         .owl-controls {
  308.             .owl-buttons {
  309.                 .owl-prev {
  310.                     position: absolute;
  311.                     top: 0;
  312.                     left: auto;
  313.                     right: -35px;
  314.                 }
  315.                 .owl-next {
  316.                     position: absolute;
  317.                     top: 0;
  318.                     right: auto;
  319.                     left: -35px;
  320.                 }
  321.             }
  322.         }
  323.     }
  324. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!