Replace end- & start- with native tailwindcss rtl props

Author: ashrafreda

src/assets/styles/03-elements/buttons.scss

@@ -118,11 +118,11 @@ salla-button {
   }
 
   &--close {
-    @apply hidden xs:block h-12 w-14 text-red-500 text-2xl absolute top-0 end-0 z-50;
+    @apply hidden xs:block h-12 w-14 text-red-500 text-2xl absolute top-0 rtl:left-0 ltr:right-0 z-50;
   }
 
   &--close-sm {
-    @apply opacity-0 -translate-y-full transition duration-300 h-[51px] w-[51px] bg-red-500 text-white text-xl fixed top-0 end-0 z-50;
+    @apply opacity-0 -translate-y-full transition duration-300 h-[51px] w-[51px] bg-red-500 text-white text-xl fixed top-0 rtl:left-0 ltr:right-0 z-50;
   }
 
   &--collapse {
@@ -174,7 +174,7 @@ salla-button {
 * Coupon Button
 */
 button.btn--coupon {
-  @apply absolute top-0 end-0 rounded-s-none shrink-0 h-[40px];
+  @apply absolute top-0 rtl:left-0 ltr:right-0 rounded-s-none shrink-0 h-[40px];
 
   .s-button-text {
     @apply flex #{!important};

src/assets/styles/04-components/brands.scss

@@ -14,7 +14,7 @@
   }
 
   &.is-sticky{
-    @apply flex-col flex-wrap h-full fixed z-0 top-9 start-2 space-y-0.5 pt-16 pb-10;
+    @apply flex-col flex-wrap h-full fixed z-0 top-9 rtl:right-2 ltr:left-2 space-y-0.5 pt-16 pb-10;
 
     .brands-nav__item{
       @apply bg-white;

src/assets/styles/04-components/product.scss

@@ -48,7 +48,7 @@
     }
 
     .btn--wishlist {
-      @apply absolute top-0 end-0;
+      @apply absolute top-0 rtl:left-0 ltr:right-0;
 
       .sicon-heart {
         text-shadow: 0 0 2px #999;
@@ -60,7 +60,7 @@
   &--minimal,
   &--special {
     .product-rating{
-      @apply absolute bottom-2 end-2;
+      @apply absolute bottom-2 rtl:left-2 ltr:right-2;
 
       span{
         color: #fff;
@@ -89,7 +89,7 @@
     }
 
     salla-button.btn--wishlist {
-      @apply absolute top-4 md:end-4 end-2 opacity-75 hover:opacity-100;
+      @apply absolute top-4 rtl:left-2 ltr:right-2 rtl:md:left-4 ltr:md:right-4 opacity-75 hover:opacity-100;
 
       button{
         background-color: #fff !important;
@@ -98,7 +98,7 @@
 
     @media (max-width: 480px){
       .product-rating{
-        @apply absolute start-3 -top-8;
+        @apply absolute rtl:right-3 ltr:left-3 -top-8;
 
         span{
           color: #fff;
@@ -110,7 +110,7 @@
 
   &--special {
     .product-rating{
-      @apply absolute bottom-auto -top-8 end-5;
+      @apply absolute bottom-auto -top-8 rtl:left-5 ltr:right-5;
     }
 
     &.product-entry--fit-type {
@@ -193,7 +193,7 @@
 
 // Digital Rating(SVG)---------------------------
 .pie-wrapper {
-  @apply w-[72px] h-[72px] absolute top-2.5 end-5 text-primary flex items-center justify-center;
+  @apply w-[72px] h-[72px] absolute top-2.5 rtl:left-5 ltr:right-5 text-primary flex items-center justify-center;
 
   .pie-svg {
     circle {

src/assets/styles/04-components/slider.scss

@@ -36,7 +36,7 @@ salla-slider{
 }
 
 .promotion-title{
-  @apply absolute z-10 top-4 start-0 font-bold text-sm bg-red-400 text-white rounded-e-md;
+  @apply absolute z-10 top-4 rtl:right-0 ltr:left-0 font-bold text-sm bg-red-400 text-white rounded-e-md;
   @apply w-auto m-0 px-3 py-2 #{!important};
 }
 
@@ -133,7 +133,7 @@ salla-slider.photos-slider {
     }
 
     &__icon {
-      @apply absolute end-8 sm:end-12 lg:end-8 top-4 text-4xl sm:text-5xl text-primary;
+      @apply absolute rtl:left-8 ltr:right-8 rtl:sm:left-12 ltr:sm:right-12 rtl:lg:left-8 ltr:lg:right-8 top-4 text-4xl sm:text-5xl text-primary;
     }
 
     &__text p,
@@ -219,7 +219,7 @@ salla-slider.photos-slider {
     top: 35%;
 
     &.s-slider-next {
-      @apply start-auto;
+      @apply rtl:right-auto ltr:left-auto;
       left: 17%;
     }
 

src/assets/styles/04-components/user-pages.scss

@@ -49,7 +49,7 @@
     }
 
     a{
-      @apply w-full block absolute top-0 bottom-0 start-0;
+      @apply w-full block absolute top-0 bottom-0 rtl:right-0 ltr:left-0;
     }
   }
 }

src/views/pages/blog/index.twig

@@ -35,7 +35,7 @@
               tabindex="-1">
               <div class="flex items-center p-4 border-b mb-1 lg:hidden relative">
                   <h2 class="font-bold">{{ trans('pages.blog_categories.categories') }}</h2>
-                  <button class="dropdown__close h-12 w-12 text-red-500 text-lg rounded-full absolute top-2 end-1 z-50">
+                  <button class="dropdown__close h-12 w-12 text-red-500 text-lg rounded-full absolute top-2 rtl:left-1 ltr:right-1 z-50">
                       <i class="sicon-cancel pointer-events-none"></i>
                   </button>
               </div>
@@ -82,7 +82,7 @@
                                 <div class="swiper-slide has-overlay blog-slider__slide h-[300px] md:h-[400px] relative bg-border-color flex justify-center {{ article.has_image ? '' : 'no-thumb' }}">
                                     <img class="{{ article.image.url|is_placeholder?'sm:h-full w-20 object-contain opacity-50':'object-cover h-full w-full' }}"
                                          src="{{ article.image.url }}" alt="{{ article.image.alt }}">
-                                    <div class="absolute z-10 bottom-0 start-0 p-4 pb-10 rtl:lg:pr-10 ltr:lg:pl-10 lg:pb-20">
+                                    <div class="absolute z-10 bottom-0 rtl:right-0 ltr:left-0 p-4 pb-10 rtl:lg:pr-10 ltr:lg:pl-10 lg:pb-20">
                                         <div class="blog-slider__content relative">
                                             <div class="z-20 w-full md:w-5/6 lg:w-6/12 text-white">
                                                 <div data-swiper-parallax="-500"  class="block-slide-anime">

src/views/pages/cart.twig

@@ -116,7 +116,7 @@
 
 
 
-                            <span class="absolute top-1.5 end-1.5 xs:top-5 xs:end-5">
+                            <span class="absolute top-1.5 rtl:left-1.5 ltr:right-1.5 rtl:xs:left-5 ltr:xs:right-5 xs:top-5">
                                 <salla-button type="button" shape="icon" size="small" color="danger" class="btn--delete"
                                               onclick="salla.cart.deleteItem({{ item.id }}).then(() => document.querySelector('#item-{{ item.id }}').remove())">
                                     <i class="sicon-cancel"></i>
@@ -160,7 +160,7 @@
                         <div class="mt-8 bg-border-color rounded-full {{ is_free ? ' hidden' : '' }}" id="free-shipping-bar">
                             <div class="progress-bg transition-all duration-500 h-2.5 bg-primary relative rounded-full flex justify-end"
                                  style="width:{{ cart.free_shipping_bar.percent }}%">
-                                <i class="inline-block sicon-shipping-fast absolute -top-5 -end-0 {{ theme.is_rtl ? 'flip-x':'' }}"></i>
+                                <i class="inline-block sicon-shipping-fast absolute -top-5 rtl:left-0 ltr:right-0 {{ theme.is_rtl ? 'flip-x':'' }}"></i>
                             </div>
                         </div>
                     </div>

src/views/pages/loyalty.twig

@@ -34,7 +34,7 @@
 {% extends "layouts.master" %}
 
 {% block content %}
-    <div class="h-62 -mb-52 w-full bg-primary start-0 relative -z-1 bg-cover bg-no-repeat bg-center"
+    <div class="h-62 -mb-52 w-full bg-primary rtl:right-0 ltr:left-0 relative -z-1 bg-cover bg-no-repeat bg-center"
          style="background-image:url({{ loyalty.image }})">
         <div class="overlay h-full w-full bg-black opacity-50 absolute top-0 left-0"></div>
     </div>

src/views/pages/partials/product/card-full-image.twig

@@ -8,7 +8,7 @@
 
     <!-- badage -->
     {% if product.promotion_title %}
-        <div class="absolute z-10 top-4 start-0">
+        <div class="absolute z-10 top-4 rtl:right-0 ltr:left-0">
             <div class="font-bold px-3 py-2 text-sm bg-red-400 text-white rounded-e-md">{{ product.promotion_title }}</div>
         </div>
     {% endif %}

src/views/pages/partials/product/card.twig

@@ -20,7 +20,7 @@ view options:
                  src="{{ 'images/s-empty.png' | asset }}" data-src="{{ product.image.url }}"
                  alt="{{ product.image.alt }}"/>
             {% if product.promotion_title %}
-                <div class="absolute top-4 start-0 z-1 font-bold px-2.5 py-1.5 md:py-2 text-xs bg-red-400 text-white rounded-e-md {{ is_horizontal ? '' : 'max-w-[calc(100%-60px)]' }}">{{ product.promotion_title }}</div>
+                <div class="absolute top-4 rtl:right-0 ltr:left-0 z-1 font-bold px-2.5 py-1.5 md:py-2 text-xs bg-red-400 text-white rounded-e-md {{ is_horizontal ? '' : 'max-w-[calc(100%-60px)]' }}">{{ product.promotion_title }}</div>
             {% elseif show_quantity and product.quantity  %}
                 <div class="absolute bottom-2 z-1 font-bold px-2.5 py-1.5 md:py-2 text-xs bg-red-400 text-white rounded-md left-1/2 transform -translate-x-1/2 {{ is_horizontal ? '' : 'max-w-[calc(100%-60px)]' }}">{{ trans('pages.products.remained') }} {{ product.quantity|number }}</div>  
             {% elseif show_quantity and product.is_out_of_stock %}

src/views/pages/thank-you.twig

@@ -12,7 +12,7 @@
 {% extends "layouts.master" %}
 
 {% block content %}
-    <div class="h-52 -mb-52 w-full bg-primary start-0 relative -z-1">
+    <div class="h-52 -mb-52 w-full bg-primary rtl:right-0 ltr:left-0 relative -z-1">
         <svg class="text-primary absolute top-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
             <path class="fill-current" fill-opacity="1"
                   d="M0,96L120,112C240,128,480,160,720,165.3C960,171,1200,149,1320,138.7L1440,128L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path>