Merge pull request #75 from attorri/feature/icon_test

Uniform Button Styling
GSA · Jan 10, 2025 · ae67db7 · ae67db7
2 parents 0db6689 + caf79ad
commit ae67db7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/src/components/ExpandCollapseAll.svelte b/src/components/ExpandCollapseAll.svelte
@@ -42,13 +42,13 @@
   <button
     class="expand button button-secondary button-small"
     disabled={!someCollapsed}
-    on:click={expandAll}>
+    on:click={expandAll} style="text-align: center; line-height: 1; padding: 5px;">
     + Expand All Sections
   </button>
   <button
     class="collapse button button-secondary button-small"
     disabled={!someExpanded}
-    on:click={collapseAll}>
+    on:click={collapseAll} style="text-align: center; line-height: 1; padding: 5px;">
     − Collapse All Sections
   </button>
 </div>
diff --git a/src/components/YourReport.svelte b/src/components/YourReport.svelte
@@ -80,6 +80,9 @@
       top: 4em;
     }
   }
+  summary > :first-child::before{
+    align-content: center;
+  }
 
   .your-report__heading {
     font-weight: bold;

diff --git a/src/index.html b/src/index.html
@@ -53,21 +53,25 @@
       h3,
       h4 {
         color: #162e51;
+        align-content: center;
       }
       a[target="_blank"]:after {
         background: 0 0;
         background-color: currentColor;
-        -webkit-mask: url("{{{ pathPrefix }}}/images/external-link.svg")
-          no-repeat center/contain;
-        width: 1.75ex;
+        -webkit-mask: url("{{{ pathPrefix }}}/images/external-link.svg") no-repeat center/contain;
+        mask: url("{{{ pathPrefix }}}/images/external-link.svg") no-repeat center/contain;
         content: "";
         display: inline-block;
-        height: 1.75ex;
-        margin-left: 2px;
-        margin-top: 0.7ex;
+        margin-left: 0.3em;
+        width: 1.2em;
+        height: 1.2em;
+        vertical-align: text-bottom;
+        flex-shrink: 0;
       }
+
       summary > :first-child:before {
         border-color: #162e51;
+        align-content: center;
       }
       .button.button-secondary,
       button.button-secondary {

diff --git a/src/routes/About.svelte b/src/routes/About.svelte
@@ -153,8 +153,8 @@
   {#if $evaluation['catalog'] !== selectedCatalog }
     <p><em>Select Switch Catalogs to save your new selection.</em></p>
   {/if}
-  <button class="button" on:click={confirmCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog}>Switch Catalogs</button>
-  <button class="button" on:click={resetCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog}>Reset</button>
+  <button class="button" on:click={confirmCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog} style="text-align: center; line-height: 1; padding: 10px;">Switch Catalogs</button>
+  <button class="button" on:click={resetCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog} style="text-align: center; line-height: 1; padding: 10px;">Reset</button>
 </details>
 
 <details open>
@@ -431,7 +431,7 @@
     <Related id={index} count={index + 1} on:DELETE="{handleRelatedDelete}" />
   {/each}
 
-  <AddOther label="Add related OpenACR" on:ADD="{handleRelatedAdd}"></AddOther>
+  <AddOther label="Add related OpenACR" on:ADD="{handleRelatedAdd}" style="text-align: center; line-height: 1; padding: 5px;"></AddOther>
 </details>
 
 <details open>