cryptic icon -> "Style injection order" text

+ add utility classes for flex/wrap/gap
openstyles · Aug 3, 2024 · 2ec0b03 · 2ec0b03
1 parent 8280640
commit 2ec0b03
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/css/global.css b/css/global.css
@@ -279,6 +279,15 @@ summary {
 .abs {
   position: absolute;
 }
+.flex {
+  display: flex;
+}
+.wrap {
+  flex-wrap: wrap;
+}
+.gap1 > :nth-last-child(n + 2) {
+  margin-right: .25rem;
+}
 .no-stretch {
   /* reuse the current width of the parent flexbox */
   width: 0;

diff --git a/manage.html b/manage.html
@@ -259,10 +259,11 @@ <h2 i18n="manageFilters">:
             </a>
           </label>
         </div>
-        <button id="manage-options-button" i18n="openOptions"></button>
-        <button id="injection-order-button" i18n="title:styleInjectionOrder" class="icon">
-          <i class=i-reorder></i>
-        </button>
+
+        <div class="gap1">
+          <button id="injection-order-button" i18n="styleInjectionOrder"></button>
+          <button id="manage-options-button" i18n="openOptions"></button>
+        </div>
       </details>
     </div>
 
@@ -275,7 +276,7 @@ <h2 id="backup-title" i18n="backupButtons"><!-- removing space
             </a>
           </h2>
         </summary>
-        <div id="backup-buttons">
+        <div id="backup-buttons" class="flex wrap gap1">
           <div class="split-btn">
             <button id="file-all-styles" i18n="exportLabel"></button
             ><button class="split-btn-pedal" i18n="menu-compat:exportCompatible"></button>

diff --git a/manage/manage.css b/manage/manage.css
@@ -254,15 +254,6 @@ button.icon {
   display: none;
 }
 
-/* collapsibles */
-#backup-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  > * {
-    margin: 0 .2rem .5rem 0;
-  }
-}
-
 #header {
   & details {
     &:not([open]) {