Changeset 14238

Timestamp:

12/05/2024 01:46:57 AM (14 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";