Skip to content

Commit 5304f20

Browse files
alazzaragithub-actions[bot]castastrophe[ Cassondra ]starryeyez024
authored
fix: pfe tabs padding update (#1457)
* WIP update tab padding * update padding to have local vars for each side and add fallback that does calc on container-spacer * update styles for padding * roll back to working state * update old vars to new standard and add vars for padding so webrh can hook into them * fix some vars * fix vertical wind styles * update border variables to have fallback styles * update readme file * update readme formatting * remove no longer needed media query changes to padding * cleanup some sass * other sass cleanup * add changelog * add margin-top to h2's on demo page * Pulling out context into separate snapshots * add margin to tab panel on wind * add changelog * remove accidental changelog update from another branch * merge fork into my original branch and create all-combos demo page * clumped the padding declarations together; moved demo padding to demo file headings (so devs won't get confused about where margins are coming from on tabs). Brought back CSS for the all-combos page so that it is usable * Add CSS for all combos page Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Kendall Totten <[email protected]>
1 parent 10ebfa5 commit 5304f20

File tree

15 files changed

+1948
-1296
lines changed

15 files changed

+1948
-1296
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# 1.3.4 (TBD)
2+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-tabs padding
3+
14
# 1.3.3 (2021-03-18)
25

36
- [06257ba](https://github.com/patternfly/patternfly-elements/commit/06257ba7edc3ca70ddfd0dd6c71e600540ac692b) fix: pfe-accordion accessibility issues
@@ -33,7 +36,7 @@
3336

3437
### Fixes
3538
- [03899cc](https://github.com/patternfly/patternfly-elements/commit/03899ccf7a4421186a7316926955b3a3bd1068f7) fix: Typography: mixins & extends (#1303)
36-
- [5d661cb](https://github.com/patternfly/patternfly-elements/commit/5d661cb7e85921ed72f324a0b635873c23bc69e9) fix: pfe-clipboard docs; add font-size
39+
- [5d661cb](https://github.com/patternfly/patternfly-elements/commit/5d661cb7e85921ed72f324a0b635873c23bc69e9) fix: pfe-clipboard docs; add font-size
3740
- [30c77d0](https://github.com/patternfly/patternfly-elements/commit/30c77d0225d235b68367097e8e462621266cab7b) fix: Adjust font-weight on pfe text modifier classes & define custom font-face for Red Hat Text font
3841
- [304ba26](https://github.com/patternfly/patternfly-elements/commit/304ba260891ab4be39a4019e75442a8429563e62) fix: Navigation mobile styles
3942

‎elements/pfe-tabs/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ Add the content for your tab panel here.
4343
Possible values are:
4444
- `wind`: Borders are removed, only an accent colored indicator appears under the active heading.
4545
- `earth`: Headings are encased in a block. The active heading has an accent colored border on one side.
46+
* 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.
4647

4748
```html
4849
<pfe-tabs variant="wind">
@@ -161,6 +162,10 @@ Fires when a selected tab is no longer the selected tab. The `event.detail.tab`
161162
| `--pfe-tabs__indicator--Height` | Tab indicator height | 4px |
162163
| `--pfe-tabs__indicator--Width` | Tab indicator width | 22px |
163164
| `--pfe-tabs__tab--TextTransform` | Tab text transform | none |
165+
| `--pfe-tabs__panel--PaddingTop` | Tab panel padding-top |
166+
| `--pfe-tabs__panel--PaddingRight` | Tab panel padding-right |
167+
| `--pfe-tabs__panel--PaddingBottom` | Tab panel padding-bottom |
168+
| `--pfe-tabs__panel--PaddingLeft` | Tab panel padding-left |
164169

165170
## Test
166171

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
html {
2+
scroll-behavior: smooth;
3+
4+
}
5+
6+
@media screen and (max-width: 899px) {
7+
.toc {
8+
--pfe-card--PaddingTop: 5px;
9+
--pfe-card--PaddingBottom: 5px;
10+
--pfe-card--PaddingLeft: 32px;
11+
}
12+
13+
.toc>a {
14+
display: none;
15+
}
16+
}
17+
18+
@media screen and (min-width: 900px) {
19+
.toc {
20+
position: fixed;
21+
top: 0;
22+
right: 0;
23+
z-index: 5;
24+
}
25+
26+
.scroll-up {
27+
display: none;
28+
}
29+
}
30+
31+
.scroll-up {
32+
border-radius: 3px;
33+
padding: 3px;
34+
background-color: rgba(0, 0, 0, 0.6);
35+
position: fixed;
36+
bottom: 10px;
37+
right: 10px;
38+
}
39+
40+
.scroll-up pfe-icon {
41+
--pfe-icon--Color: #fff;
42+
}
43+
44+
[class^="example"],
45+
section.pfe-l-grid {
46+
margin: 32px 0;
47+
padding: 0 0;
48+
}
49+
50+
@media screen and (min-width: 900px) {
51+
[class^="example"],
52+
section.pfe-l-grid {
53+
margin-right: 385px !important;
54+
}
55+
}
56+
57+
58+
.example>h2 {
59+
text-align: right;
60+
}
61+
section>h2 {
62+
margin-top: 2em;
63+
}
64+
65+
.subheading {
66+
margin: 40px 0 15px;
67+
font-size: 18px;
68+
}
69+
.inner {
70+
margin: 0 0 0 10px;
71+
max-width:1140px;
72+
padding: 50px 20px;
73+
}
74+
.toc {
75+
position: fixed;
76+
top: 0;
77+
right: 0;
78+
z-index: 5;
79+
width: 250px;
80+
background: white;
81+
}
82+
.toc ul {
83+
font-size: 11px;
84+
list-style: disc;
85+
}
86+
@media screen and (max-width: 1240px) {
87+
.toc {
88+
display: none;
89+
}
90+
}
91+
.light-background {
92+
background-color: rgb(252, 250, 244);
93+
--context: light;
94+
}
95+
.dark-background {
96+
background-color: #000;
97+
--context: dark;
98+
}
99+
.saturated-background {
100+
background-color: #006069;
101+
--context: saturated;
102+
}
103+
104+
105+
.floating-card {
106+
float: left;
107+
width: 48%;
108+
margin-right: 2%;
109+
border: #eee solid 1px;
110+
padding: 20px;
111+
}
112+
113+
.form-ui+.form-ui {
114+
margin-top: 5px;
115+
}
116+
117+
pfe-tabs+button {
118+
background-color: #eee;
119+
border: 1px solid #ddd;
120+
padding: 5px 10px;
121+
margin-top: 10px;
122+
}
123+
124+
pfe-tabs+button:hover {
125+
background-color: #ddd;
126+
}
127+
128+
button {
129+
font-size: 16px;
130+
border: 1px solid #ddd;
131+
padding: 5px 10px;
132+
}
133+
134+
.form {
135+
width: fit-content;
136+
margin-top: 10px;
137+
}
138+
139+
button.form-ui {
140+
background-color: #fff;
141+
float: right;
142+
margin-top: 15px;
143+
margin-right: 22px;
144+
}
145+
146+
.form-ui label {
147+
font-weight: bold;
148+
min-width: 60px;
149+
display: block;
150+
float: left;
151+
line-height: 2em;
152+
}
153+
154+
.form-ui input {
155+
height: 2em;
156+
font-size: 1em;
157+
padding: 2px 5px;
158+
}

0 commit comments

Comments
 (0)