Changeset 14238

Timestamp:

12/05/2024 01:46:57 AM (22 months ago)

Author:

adamwood

Message:

Breathe 2024: RTL and o2 post form fixes

Fix issue with styling of o2 post form tabs.
Fix RTL display of mobile secondary fly out menu.
Fix RTL display of welcome box button.

Fixes ​https://github.com/WordPress/wordpress.org/issues/412
See ​https://github.com/WordPress/wordpress.org/issues/377

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe-2024/style.css (modified) (9 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe-2024/style.css

@@ -447 +447 @@
 #respond .o2-editor .o2-editor-wrapper {
         border-radius: 2px;
+        border-end-start-radius: 0;
         border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
         overflow: hidden;
@@ -457 +458 @@
 
 .o2-editor .o2-editor-footer .o2-editor-tabs li {
+        position: relative;
         border: 1px solid var(--wp--custom--form--border--color);
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        overflow: hidden;
+        border-end-start-radius: 2px;
+        border-end-end-radius: 2px;
 }
 
 .o2-editor .o2-editor-footer .o2-editor-tabs li:first-of-type,
 #respond .o2-editor-footer .o2-editor-tabs li:first-of-type {
-        border-left: 1px solid var(--wp--custom--form--border--color);
-        border-top: 1px solid var(--wp--custom--form--border--color);
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
+        border: 1px solid var(--wp--custom--form--border--color);
+        border-end-start-radius: 2px;
+        border-end-end-radius: 2px;
         margin-inline-end: -1px;
+}
+
+.o2-editor .o2-editor-footer .o2-editor-tabs li.selected::before,
+#respond .o2-editor-footer .o2-editor-tabs li.selected::before,
+.o2-editor .o2-editor-footer .o2-editor-tabs li.selected::after,
+#respond .o2-editor-footer .o2-editor-tabs li.selected::after {
+        display: block;
+        content: '';
+        position: absolute;
+        inset-inline-start: -1px;
+        inset-block-start: -1px;
+        width: 1px;
+        height: 1px;
+        background: var(--wp--custom--form--border--color);
+}
+
+.o2-editor .o2-editor-footer .o2-editor-tabs li.selected::after,
+#respond .o2-editor-footer .o2-editor-tabs li.selected::after {
+        inset-inline-start: unset;
+        inset-inline-end: -1px;
 }
 
@@ -481 +501 @@
         border: unset;
         font-size: var(--wp--preset--font-size--small);
-        border-radius: unset;
+        border-end-start-radius: 1px;
+        border-end-end-radius: 1px;
 }
 
@@ -874 +895 @@
         }
 
+        #secondary {
+                top: var(--wp-admin--admin-bar--height, 0px);
+                z-index: 500;
+                left: unset;
+                inset-inline-start: -100%;
+        }
+
         body.responsive-show {
                 overflow-y: hidden;
@@ -887 +915 @@
         }
 
+        body.responsive-show #secondary {
+                inset-inline-start: 0;
+        }
+
         body.responsive-show #secondary-content .navigation-main {
                 margin-top: 0;
@@ -904 +936 @@
         }
 
-        #secondary {
-                top: var(--wp-admin--admin-bar--height, 0px);
-                z-index: 500;
-        }
-
         #secondary-toggle {
-                margin-left: var(--wp--preset--spacing--edge-space);
-                margin-right: 0;
+                float: inline-start;
+                margin-right: unset;
                 margin-top: -12px;
+                text-align: end;
         }
 
         #main #secondary-toggle {
-                margin-left: 4px;
-                margin-right: var(--wp--style--block-gap);
+                margin-inline-start: 4px;
+                margin-inline-end: var(--wp--style--block-gap);
                 margin-top: 20px;
         }
@@ -1404 +1432 @@
         border-left-width: 0;
         border-top-right-radius: 2px;
-        border-bottom-right-radius: 2px;
+        border-end-end-radius: 2px;
 }
 
@@ -1808 +1836 @@
 }
 
-[dir="rtl"] .make-welcome #make-welcome-toggle::before,
 .make-welcome #make-welcome-toggle::after {
         content: "\f343";
@@ -1817 +1844 @@
 }
 
-[dir="rtl"] .make-welcome #make-welcome-toggle::after {
-        display: none;
-}
-
-[dir="rtl"] .make-welcome.collapsed #make-welcome-toggle::before,
 .make-welcome.collapsed #make-welcome-toggle::after {
         content: "\f347";