Merge branch 'master' into US287490-reduce-padding-on-the-pfe-jump-link

Author: starryeyez024

CHANGELOG-1.x.md

@@ -1,4 +1,6 @@
 # 1.3.4 (TBD)
+
+- [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-tabs/README.md

@@ -43,6 +43,7 @@ Add the content for your tab panel here.
 Possible values are:
 - `wind`: Borders are removed, only an accent colored indicator appears under the active heading.
 - `earth`: Headings are encased in a block. The active heading has an accent colored border on one side.
+* Note - when using earth with a white background you should set the padding-left, padding-right, and padding-bottom to 0, so it lines up with the wind variant.
 
 ```html
 <pfe-tabs variant="wind">
@@ -161,6 +162,10 @@ Fires when a selected tab is no longer the selected tab. The `event.detail.tab`
 | `--pfe-tabs__indicator--Height` | Tab indicator height | 4px |
 | `--pfe-tabs__indicator--Width` | Tab indicator width | 22px |
 | `--pfe-tabs__tab--TextTransform` | Tab text transform | none |
+| `--pfe-tabs__panel--PaddingTop` | Tab panel padding-top |
+| `--pfe-tabs__panel--PaddingRight` | Tab panel padding-right |
+| `--pfe-tabs__panel--PaddingBottom` | Tab panel padding-bottom |
+| `--pfe-tabs__panel--PaddingLeft` | Tab panel padding-left |
 
 ## Test
 

elements/pfe-tabs/demo/all-combos.css

@@ -0,0 +1,158 @@
+html {
+    scroll-behavior: smooth;
+    
+}
+
+@media screen and (max-width: 899px) {
+    .toc {
+        --pfe-card--PaddingTop: 5px;
+        --pfe-card--PaddingBottom: 5px;
+        --pfe-card--PaddingLeft: 32px;
+    }
+
+    .toc>a {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 900px) {
+    .toc {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 5;
+    }
+
+    .scroll-up {
+        display: none;
+    }
+}
+
+.scroll-up {
+    border-radius: 3px;
+    padding: 3px;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+}
+
+.scroll-up pfe-icon {
+    --pfe-icon--Color: #fff;
+}
+
+[class^="example"],
+section.pfe-l-grid {
+    margin: 32px 0;
+    padding: 0 0;
+}
+
+@media screen and (min-width: 900px) {
+    [class^="example"],
+    section.pfe-l-grid {
+        margin-right: 385px !important;
+    }
+}
+
+
+.example>h2 {
+    text-align: right;
+}
+section>h2 {
+    margin-top: 2em;
+}
+
+.subheading {
+  margin: 40px 0 15px;
+  font-size: 18px;
+}
+.inner {
+   margin: 0 0 0 10px;
+   max-width:1140px;
+   padding: 50px 20px;
+}
+.toc {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 5;
+    width: 250px;
+    background: white;
+}
+.toc ul {
+    font-size: 11px;
+    list-style: disc;
+}
+@media screen and (max-width: 1240px) {
+  .toc {
+      display: none;
+  }
+}
+.light-background {
+    background-color: rgb(252, 250, 244);
+    --context: light;
+}
+.dark-background {
+    background-color: #000;
+    --context: dark;
+}
+.saturated-background {
+    background-color: #006069;
+    --context: saturated;
+}
+
+
+.floating-card {
+    float: left;
+    width: 48%;
+    margin-right: 2%;
+    border: #eee solid 1px;
+    padding: 20px;
+}
+
+.form-ui+.form-ui {
+    margin-top: 5px;
+}
+
+pfe-tabs+button {
+    background-color: #eee;
+    border: 1px solid #ddd;
+    padding: 5px 10px;
+    margin-top: 10px;
+}
+
+pfe-tabs+button:hover {
+    background-color: #ddd;
+}
+
+button {
+    font-size: 16px;
+    border: 1px solid #ddd;
+    padding: 5px 10px;
+}
+
+.form {
+    width: fit-content;
+    margin-top: 10px;
+}
+
+button.form-ui {
+    background-color: #fff;
+    float: right;
+    margin-top: 15px;
+    margin-right: 22px;
+}
+
+.form-ui label {
+    font-weight: bold;
+    min-width: 60px;
+    display: block;
+    float: left;
+    line-height: 2em;
+}
+
+.form-ui input {
+    height: 2em;
+    font-size: 1em;
+    padding: 2px 5px;
+}