Fixes inconsistencies

Netcentric · Dec 10, 2024 · d25be4d · d25be4d
1 parent 3d1f980
commit d25be4d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -175,6 +175,7 @@ header {
 
 /* sections */
 .nav-sections {
+  box-sizing: border-box;
   grid-area: sections;
   flex: 1 1 auto;
   display: none;
@@ -188,7 +189,7 @@ header {
 
   nav[aria-expanded='true'] & {
     --nav-sections-margin-inline: calc(var(--content-padding-inline) * -1);
-    --nav-sections-padding: var(--content-padding-inline);
+    --nav-sections-padding: 20px var(--content-padding-inline);
     --nav-sections-inset: calc(100% + var(--header-border-bottom-size)) 0 auto auto;
     --nav-sections-border-top: var(--header-border-bottom-size) solid var(--col-neutral20);
 
@@ -205,6 +206,7 @@ header {
     @media (min-width: 768px) {
       --nav-sections-margin-inline: 0;
       --nav-sections-border-top: 0;
+      --nav-sections-padding: 20px 40px;
 
       align-self: unset;
       position: absolute;
@@ -397,6 +399,8 @@ header {
     margin: 0;
 
     @media (max-width: 768px) {
+      --button-height: auto;
+
       min-height: auto;
       padding: 0;
       border: 0;
@@ -408,12 +412,22 @@ header {
     }
 
     @media (min-width: 768px) {
-      padding-block: 8px;
+      --button-horizontal-padding: 12px;
+
       font-size: var(--txt171-font-size);
       line-height: var(--txt171-line-height);
 
       &:not(.button--tertiary) {
-        min-height: 32px;
+        --button-height: 32px;
+      }
+    }
+
+    &.button--secondary {
+      &:hover,
+      &:focus {
+        @media (min-width: 768px) {
+          --button-horizontal-padding: 11px;
+        }
       }
     }
   }

diff --git a/styles/styles.css b/styles/styles.css
@@ -288,8 +288,8 @@ button {
   --button-border-width: 1px;
   --button-text-color: var(--col-white);
   --button-icon-color: var(--button-text-color);
-  --button-vertical-padding: 12px;
-  --button-horitzontal-padding: 16px;
+  --button-horizontal-padding: 16px;
+  --button-height: 48px;
 
   box-sizing: border-box;
   display: inline-flex;
@@ -328,9 +328,9 @@ a.button:any-link:not(.button--tertiary),
 button:not(.button--tertiary) {
   border-radius: 2px;
   border: var(--button-border-width) solid var(--button-border-color);
-  padding: var(--button-vertical-padding) var(--button-horitzontal-padding);
+  padding-inline: var(--button-horizontal-padding);
   background-color: var(--button-bg-color);
-  min-height: 48px;
+  height: var(--button-height);
 }
 
 button:disabled,
@@ -352,8 +352,7 @@ button.button--secondary {
   &:hover,
   &:focus {
     --button-border-width: 2px;
-    --button-vertical-padding: 11px;
-    --button-horitzontal-padding: 15px;
+    --button-horizontal-padding: 15px;
   }
 }
 
@@ -376,8 +375,7 @@ button.button--tertiary {
 
   &:hover,
   &:focus {
-    --button-vertical-padding: 11px;
-    --button-horitzontal-padding: 15px;
+    --button-horizontal-padding: 15px;
 
     border-width: 2px;
     text-decoration: underline;