[5.x] Reverse spaces in RTL (#10184)

statamic · Jul 12, 2024 · 8e3da59 · 8e3da59
1 parent 18feb0e
commit 8e3da59
Show file tree

Hide file tree

Showing 17 changed files with 20 additions and 41 deletions.
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
@@ -23,7 +23,7 @@
 }
 
 .tabs {
-    @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
+    @apply flex space-x-2 rtl:space-x-reverse overflow-hidden relative w-full max-w-full;
     &-scrolled {
         @apply rtl:pr-0 ltr:pl-0 rtl:mr-0 ltr:ml-0;
     }

diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
@@ -292,7 +292,7 @@ td .btn-icon {
 }
 
 .super-btn {
-    @apply p-4 flex items-start hover:bg-gray-200 border border-transparent rounded-md space-x-4;
+    @apply p-4 flex items-start hover:bg-gray-200 border border-transparent rounded-md space-x-4 rtl:space-x-reverse;
     @apply dark:hover:bg-dark-575 dark:hover:border-dark-400;
 
     svg {

diff --git a/resources/css/rtl.css b/resources/css/rtl.css
@@ -1,17 +1,4 @@
 [dir='rtl'] {
-    .space-x-1>:not([hidden])~:not([hidden]) {
-        margin-left: calc(.25rem * var(--tw-space-x-reverse)) !important;
-        margin-right: calc(.25rem * calc(1 - var(--tw-space-x-reverse))) !important;
-    }
-    .space-x-2>:not([hidden])~:not([hidden]) {
-        margin-left: calc(.5rem * var(--tw-space-x-reverse)) !important;
-        margin-right: calc(.5rem * calc(1 - var(--tw-space-x-reverse))) !important;
-    }
-    .space-x-3>:not([hidden])~:not([hidden]) {
-        margin-left: calc(.75rem * var(--tw-space-x-reverse))!important;
-        margin-right: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))!important;
-    }
-
     input[name='url'] {
         direction: ltr;
     }
@@ -20,11 +7,3 @@
         transform: rotate(180deg);
     }
 }
-@media (min-width: 576px) {
-    [dir='rtl'] {
-        .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
-            margin-left: calc(.75rem * var(--tw-space-x-reverse)) !important;
-            margin-right: calc(.75rem * calc(1 - var(--tw-space-x-reverse))) !important;
-        }
-    }
-}
diff --git a/resources/js/components/DarkModeToggle.vue b/resources/js/components/DarkModeToggle.vue
@@ -5,15 +5,15 @@
                     <svg-icon :name="icon"></svg-icon>
                 </button>
             </template>
-            <dropdown-item @click="prefer('light')" class="flex items-center space-x-2">
+            <dropdown-item @click="prefer('light')" class="flex items-center space-x-2 rtl:space-x-reverse">
                 <svg-icon name="regular/light-mode" class="h-4 w-4"></svg-icon>
                 <span>{{ __('Light') }}</span>
             </dropdown-item>
-            <dropdown-item @click="prefer('dark')" class="flex items-center space-x-2">
+            <dropdown-item @click="prefer('dark')" class="flex items-center space-x-2 rtl:space-x-reverse">
                 <svg-icon name="regular/dark-mode" class="h-4 w-4"></svg-icon>
                 <span>{{ __('Dark') }}</span>
             </dropdown-item>
-            <dropdown-item @click="prefer('auto')" class="flex items-center space-x-2">
+            <dropdown-item @click="prefer('auto')" class="flex items-center space-x-2 rtl:space-x-reverse">
                 <svg-icon name="regular/system" class="h-4 w-4"></svg-icon>
                 <span>{{ __('System') }}</span>
             </dropdown-item>

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
@@ -29,7 +29,7 @@
                 <div class="editor-preview bg-gray-800 dark:bg-dark-950 rtl:md:rounded-tl-md ltr:md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
 
                     <!-- Toolbar -->
-                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white dark:text-dark-100 text-center space-x-1 sm:space-x-3" v-if="isToolbarVisible">
+                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white dark:text-dark-100 text-center space-x-1 sm:space-x-3 rtl:space-x-reverse " v-if="isToolbarVisible">
                         <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
                             <svg-icon name="focal-point" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
@@ -150,7 +150,7 @@
             </div>
 
             <div class="bg-gray-200 dark:bg-dark-550 w-full border-t dark:border-dark-200 flex items-center justify-end py-3 px-4 rounded-b">
-                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 py-1 h-full text-xs text-gray-800 dark:text-dark-150">
+                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 rtl:space-x-reverse py-1 h-full text-xs text-gray-800 dark:text-dark-150">
                     <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3" v-if="isImage">
                         <svg-icon name="image-picture" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="">{{ __('messages.width_x_height', { width: asset.width, height: asset.height }) }}</div>
@@ -164,7 +164,7 @@
                         <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
                     </div>
                 </div>
-                <div class="flex items-center space-x-3">
+                <div class="flex items-center space-x-3 rtl:space-x-reverse">
                     <button type="button" class="btn" @click="close">
                         {{ __('Cancel') }}
                     </button>

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="!singleTab && tabs.length > 0" class="tabs-container relative">
-            <div ref="tabs" class="tabs flex-1 flex space-x-3 overflow-auto rtl:pl-6 ltr:pr-6" role="tablist">
+            <div ref="tabs" class="tabs flex-1 flex space-x-3 rtl:space-x-reverse overflow-auto rtl:pl-6 ltr:pr-6" role="tablist">
                 <tab
                     ref="tab"
                     v-for="tab in tabs"

diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
@@ -32,7 +32,7 @@
 
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
-                        <div class="flex space-x-2 mt-2">
+                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
@@ -112,7 +112,7 @@
 
                                 <div v-if="collectionHasRoutes" :class="{ 'hi': !shouldShowSidebar }">
 
-                                    <div class="p-3 flex items-center space-x-2" v-if="showLivePreviewButton || showVisitUrlButton">
+                                    <div class="p-3 flex items-center space-x-2 rtl:space-x-reverse" v-if="showLivePreviewButton || showVisitUrlButton">
                                         <button
                                             class="flex items-center justify-center btn w-full"
                                             v-if="showLivePreviewButton"

diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -39,7 +39,7 @@
                 </template>
 
                 <div class="asset-controls" v-if="!readOnly">
-                    <div class="h-full w-full flex items-center justify-center space-x-1">
+                    <div class="h-full w-full flex items-center justify-center space-x-1 rtl:space-x-reverse">
                         <button @click="edit" class="btn btn-icon" :alt="__('Edit')">
                             <svg-icon name="micro/sharp-pencil" class="h-4 my-2" />
                         </button>

diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
@@ -12,7 +12,7 @@
                 <img :src="src" class="block mx-auto rounded-sm" />
             </div>
 
-            <div class="@container/toolbar flex items-center border-t dark:border-dark-900 justify-center py-2 px-2 text-2xs text-white dark:text-dark-150 text-center space-x-1 sm:space-x-3">
+            <div class="@container/toolbar flex items-center border-t dark:border-dark-900 justify-center py-2 px-2 text-2xs text-white dark:text-dark-150 text-center space-x-1 sm:space-x-3 rtl:space-x-reverse">
                 <button v-if="!src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
                     <svg-icon name="folder-image" class="h-4" />
                     <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Choose Image') }}</span>

diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -117,7 +117,7 @@
                 </label>
             </div>
 
-            <footer class="bg-gray-100 dark:bg-dark-575 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
+            <footer class="bg-gray-100 dark:bg-dark-575 rounded-b-md flex items-center justify-end space-x-3 rtl:space-x-reverse font-normal p-2">
                 <button @click="$emit('canceled')" class="text-xs text-gray-600 dark:text-dark-175 hover:text-gray-800 dark:hover-text-dark-100">
                     {{ __('Cancel') }}
                 </button>

diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
@@ -31,7 +31,7 @@
 
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
-                        <div class="flex space-x-2 mt-2">
+                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />

diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
@@ -33,7 +33,7 @@
 
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
-                        <div class="flex space-x-2 mt-2">
+                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />

diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
@@ -33,7 +33,7 @@
 
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
-                        <div class="flex space-x-2 mt-2">
+                        <div class="flex space-x-2 rtl:space-x-reverse mt-2">
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
                             <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="allowFilterPresets && isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />

diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
@@ -50,7 +50,7 @@
                     <toggle-input v-model="user.super" id="super" />
                     <label class="font-bold rtl:mr-2 ltr:ml-2" for="super">{{ __('Super Admin') }}</label>
                 </div>
-                <div class="text-2xs text-gray-600 dark:text-dark-150 mt-2 flex items-center space-x-1">
+                <div class="text-2xs text-gray-600 dark:text-dark-150 mt-2 flex items-center space-x-1 rtl:space-x-reverse">
                     <svg-icon name="info-circle" class="h-4 w-4 flex items-center mb-px"></svg-icon>
                     <span>{{ __('messages.user_wizard_super_admin_instructions') }}</span>
                 </div>

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
@@ -23,7 +23,7 @@
         </global-search>
     </div>
 
-    <div class="head-link h-full px-6 space-x-3 flex items-center justify-end">
+    <div class="head-link h-full px-6 space-x-3 rtl:space-x-reverse flex items-center justify-end">
 
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector>

diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
@@ -243,7 +243,7 @@
         </div>
 
         <h6 class="my-4">Reds</h6>
-        <div class="flex text-sm text-center space-x-1">
+        <div class="flex text-sm text-center space-x-1 rtl:space-x-reverse">
             <div class="text-black bg-red-100 border border-red-200 p-6 flex-1">Red Lighter</div>
             <div class="text-black bg-red-400 p-6 flex-1">Red Light</div>
             <div class="text-black bg-red-500 p-6 flex-1">Red</div>