Merge pull request #1482 from patternfly/US287490-reduce-padding-on-the-pfe-jump-link

fix: reduce padding on the pfe jump link

Author: zhawkins

CHANGELOG-1.x.md

@@ -1,5 +1,7 @@
 # 1.3.4 (TBD)
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-tabs padding
+
+- [5304f20](https://github.com/patternfly/patternfly-elements/commit/5304f20638db60a7c48028a39b49dfbc42f7acc7) fix: pfe-tabs padding
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: reduce padding on the pfe jump link
 
 # 1.3.3 (2021-03-18)
 

elements/pfe-accordion/src/pfe-accordion-panel.scss

@@ -19,10 +19,16 @@
 .container {
   @include pfe-clearfix;
   @include pfe-panel-container;
-  --pfe-accordion__panel-container--Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) #{pfe-local(Padding, $region: base)} calc(#{pfe-local(Padding, $region: base)} * 1.5);
-
+  padding: pfe-local(Padding, $region: panel-container, $fallback: 0 pfe-local(Padding, $region: panel, $fallback: calc(#{pfe-local(Padding, $region: base)} * 3)) pfe-local(Padding, $region: base) pfe-local(Padding, $region: panel, $fallback: calc(#{pfe-local(Padding, $region: base)} * 1.5)));
   :host([disclosure="true"]) & {
-    --pfe-accordion__panel-container--Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 1.5);
+    padding: pfe-local(Padding, $region: panel-container, $fallback: pfe-local(Padding, $region: panel, $fallback: calc(#{pfe-local(Padding, $region: base)} * 1.5)));
+  }
+  pfe-jump-links-nav & {
+    padding: pfe-local(Padding, $region: panel-container, $fallback: 0);
+    --pfe-accordion__panel-container--Padding: 0;
+    @media (max-width: pfe-breakpoint(md, $max: true)) {
+      padding: pfe-local(Padding, $region: panel-container, $fallback: 0);
+    }
   }
 }
 

elements/pfe-jump-links/demo/index.html

@@ -58,10 +58,10 @@ <h1><code>pfe-jump-links</code></h1>
   <div class="content">
 
     <h2 style="text-align: center; margin: 60px auto;" id="standard">PFE Jump Links - standard</h2>
-    <div style="margin: 0 auto 400px;max-width:1140px;" class="pfe-l-grid pfe-m-gutters">
+    <div style="margin: 0 auto 60px;max-width:1140px;" class="pfe-l-grid pfe-m-gutters">
       <div class="sticky pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
         <pfe-jump-links-nav id="jumplinks1" sr-text="Page navigation">
-          <h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>	
+          <h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>
           <ul>
             <li> <a href="#section1">Section 1</a> </li>
             <li> <a href="#section2">Section 2</a> </li>
@@ -200,7 +200,7 @@ <h1 class="pfe-jump-links-panel__section" id="section5">Section 5</h1>
     </div>
 
     <h2 style="text-align: center; margin: 60px auto;" id="subsections">PFE Jump Links - with sub sections</h2>
-    <div style="padding: 20px 20px 400px;background-color: #131313;color: white;" class="pfe-l-grid pfe-m-gutters">
+    <div style="padding: 20px 20px 40px;background-color: #131313;color: white;" class="pfe-l-grid pfe-m-gutters">
       <div class="sticky pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
         <pfe-jump-links-nav style="margin-right: 30px;" id="jumplinks2" color="darkest" sr-text="Page navigation">
           <h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>
@@ -442,7 +442,7 @@ <h1 class="pfe-jump-links-panel__section" id="section50">Section 5</h1>
     </div>
 
     <h2 style="text-align: center; margin: 60px auto;" id="autobuild">PFE Jump Links - autobuild (w/ sub sections)</h2>
-    <div style="margin-bottom: 400px;" class="pfe-l-grid pfe-m-gutters">
+    <div style="margin-bottom: 60px;" class="pfe-l-grid pfe-m-gutters">
       <div class="sticky pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
         <pfe-jump-links-nav autobuild id="jumplinks8" sr-text="Page navigation">
           <h4 slot="pfe-jump-links-nav--heading" id="pfe-jump-links-nav--heading">Jump to section</h4>
@@ -1039,12 +1039,13 @@ <h1 class="pfe-jump-links-panel__section" id="section5">Section 5</h1>
     <pfe-band aside-height="full" aside-desktop="left" id="themable">
       <h2 slot="pfe-band--header" style="text-align: center;">PFE Jump Links - with theming</h2>
 
-      <pfe-jump-links-nav id="jumplinks1000" style="  
+      <pfe-jump-links-nav id="jumplinks1000" style="
 
             --pfe-jump-links--BackgroundColor: #fff;
             --pfe-jump-links--BorderColor: #e00;
             --pfe-jump-links--FontSize: 16px;
             --pfe-jump-links__heading--FontSize: 12px;
+            --pfe-jump-links__nav--Padding: 30px;
 
           " slot="pfe-band--aside">
         <h4 slot="pfe-jump-links-nav--heading">Jump to section</h4>

elements/pfe-jump-links/demo/test_page.html

@@ -51,7 +51,7 @@ <h1><code>pfe-jump-links</code></h1>
   <div class="content">
 
     <h2 style="text-align: center; margin: 60px auto;" id="autobuild">PFE Jump Links - autobuild (w/ sub sections)</h2>
-    <div style="margin-bottom: 400px;" class="pfe-l-grid pfe-m-gutters">
+    <div style="margin-bottom: 60px;" class="pfe-l-grid pfe-m-gutters">
       <div class="sticky pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
         <pfe-jump-links-nav autobuild id="jumplinks" sr-text="Page navigation" offset="60">
           <h4 slot="pfe-jump-links-nav--heading" id="pfe-jump-links-nav--heading">Jump to section</h4>

elements/pfe-jump-links/src/pfe-jump-links-nav.scss

@@ -9,6 +9,7 @@ $LOCAL-VARIABLES: (
   BackgroundColor: pfe-var(surface--lightest),
   BorderColor: pfe-var(ui-accent),
   FontSize: pfe-var(FontSize--md),
+  Padding: 0,
   heading: (
     FontSize: pfe-var(FontSize--sm)
   ),
@@ -26,7 +27,7 @@ $LOCAL-VARIABLES: (
 
   // @TODO We can't strip a unit from a CSS variable
   // --pfe-jump-links-panel--offset: pfe-strip-unit(#{var(--pfe-jump-links-panel__section--spacer)});
-  
+
   --context: var(--pfe-jump-links--context);
 
   box-sizing: border-box;
@@ -37,11 +38,11 @@ $LOCAL-VARIABLES: (
   position: sticky;
   top:  pfe-local(offset, $region: nav);
   padding-left: 0;
-  background-color: pfe-local(BackgroundColor);
+  background-color: pfe-local(BackgroundColor, $fallback: transparent);
 
   @media(min-width: pfe-breakpoint(lg)) {
     border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;
-    padding: pfe-local(vertical-spacer) pfe-local(horizontal-spacer);
+    padding: pfe-local(Padding, $region: nav, $fallback: 0);
   }
 
   .pfe-jump-links-nav__heading > h3,
@@ -119,7 +120,7 @@ nav {
       @media(min-width: pfe-breakpoint(lg)) {
         display: none;
       }
-      
+
       &:last-child {
         padding-bottom: pfe-local(horizontal-spacer, $region: link);
       }
@@ -166,20 +167,35 @@ nav {
 
     overflow-y: hidden;
     transition: flex 1s linear;
-    
+
     li {
       border-left: none !important;
     }
   }
 }
 
+//accordion padding override
+:host {
+  --pfe-accordion__panel-container--Padding: 0;
+}
+
+// 0 -> md breakpoint
+@media (max-width: pfe-breakpoint(md, $max: true)) {
+  //accordion padding override
+  :host {
+    --pfe-accordion__panel-container--Padding: 20px;
+  }
+}
+
+
 // --------------------- //
 // Set the local variable to use the accordion namespace temporarily
 $temp: $LOCAL;
 $LOCAL: accordion;
 
 pfe-accordion {
-  
+
+
   pfe-accordion-header {
     // @TODO: When variables are available in accordion, remove theme changes from this file
     // hide accordion left border:
@@ -194,6 +210,7 @@ pfe-accordion {
   pfe-accordion-panel {
     // hide accordion left border:
     border-left-color: transparent;
+    border-right: none;
   }
 
   // 0 -> LG breakpoint
@@ -220,7 +237,7 @@ pfe-accordion {
       display: none;
       opacity: 1;
       display: block;
-      
+
       > pfe-jump-links-nav {
         width: 100%;
         display: block;
@@ -236,17 +253,11 @@ pfe-accordion {
 $LOCAL: $temp;
 
 :host([color="darkest"]) {
-  --pfe-jump-links--BackgroundColor: #{pfe-var(surface--darkest)};
   --pfe-jump-links--context: #{pfe-var(surface--darkest--context)};
 
-  border: pfe-var(surface--border-width) pfe-var(surface--border-style) pfe-var(ui-disabled--text);
-
   pfe-accordion-header,
   pfe-accordion-panel,
   button[aria-expanded="true"] {
-    --pfe-accordion--BackgroundColor: #{pfe-var(surface--darkest)};
-    --pfe-accordion--context: #{pfe-var(surface--darkest--context)};
-
     --pfe-jump-links--BackgroundColor: #{pfe-var(surface--darkest)};
     --pfe-jump-links--context: #{pfe-var(surface--darkest--context)};
   }
@@ -391,4 +402,3 @@ $LOCAL: $temp;
 :host([hidden]) {
   display: none;
 }
-

elements/pfe-sass/mixins/_components.scss

@@ -88,7 +88,7 @@
 @mixin pfe-accordion-props($variant: default) {
   margin: 0;
   width: pfe-local(Width, 100%);
-  max-width: calc(100% - #{pfe-var(surface--border-width--heavy)});
+  max-width: 100%;
   height: auto;
   position: relative;
 
@@ -245,4 +245,4 @@
       right: calc(#{pfe-var(container-spacer)} * 1.3125);
     }
   }
-}
+}