Skip to content

Commit 1f384de

Browse files
castastrophemwcz
castastrophe
authored and
mwcz
committed
Add autoprefixer to the repo (#334)
* Adjusting sass to use variables from theme * Adding a storybook file for autocomplete * Update build task to compile sass with autoprefixer * Remove updates for autocomplete branch; add temp directory cleanup * Allow empty attribute for the cleanup of the temp dir (no temp dir if component contains no styles) * Fix style issues that remain in band and card to resolve issue #330 specific points * Revert storybook change * Fresh npm install, clean package-locks and dependencies * Add back clean-css and trim dependencies for pfelement * Remove unused merge-stream and remove diff on added linebreak * Add back dependencies for the pfelement compile tasks * Add back gulp-babel for pfe-layouts * Clean up references/duplication * Add license retention when minified, allow for unminified js and css, create dynamic fallback file * Fix the compression tool which was breaking grid-template-areas * Fix layout tasks to mesh with new build steps * Remove compiled assets from the pfe-layouts folder * run prettier * remove parallel, compile and bundle must be run in series * undo js minification changes, moving to new PR * Remove navigation from this branch * Revert CTA updates * Update browser list for prefixer; patch band, reduce complexity (shadycss is on the struggle bus because of nested vars) * Add on="dark" variation for specificity, remove !importants for shadyCSS error * Update packages * Remove docs diff * Revert package-lock updates in elements * Update the gulpfile of the layouts to be more specific * Fix issue with gulpfile not compiling the sass for children components in the same folder * Remove the background pink used for debugging * Update the lock file * Revert element name in the gulp task because autocomplete has a sass file with a different name * Remove fallbacks css and update autoprefixer browser versions * Pulling the minification into the style compile task removes the duplication and re-minification of already minified files. * Updated package-lock with the latest * Allow for copying of JS assets from source into compiled * Revert band updates * Minor clean-up from regression testing
1 parent 094575f commit 1f384de

File tree

10 files changed

+9383
-8542
lines changed

10 files changed

+9383
-8542
lines changed

‎elements/pfe-band/demo/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,26 @@
99
<noscript>
1010
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
1111
</noscript>
12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
12+
13+
<!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css"-->
14+
<!--link rel="stylesheet" href="https://www.redhat.com/profiles/rh/themes/redhatdotcom/css/editorial.css"-->
1315

1416
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
1517
<link href="../../pfe-layouts/pfe-layouts.css" rel="stylesheet">
1618

1719
<!-- uncomment the es5-adapter if you're using the umd version -->
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/custom-elements-es5-adapter.js"></script>
19-
20+
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
21+
2022
<!-- Use webcomponents-loader when you are adding support for more modern browsers -->
21-
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/webcomponents-loader.js"></script> -->
23+
<!-- <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
2224

2325
<!-- IE11 test: use bundle + require with umd files -->
2426
<!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->
2527
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/webcomponents-bundle.js"></script>
26-
<link rel="stylesheet" href="https://www.redhat.com/profiles/rh/themes/redhatdotcom/css/editorial.css">
2728

2829
<!-- Tests require pulling in the UMD version of the files -->
29-
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
30-
30+
<script src="/requirejs/require.js"></script>
31+
3132
<script>
3233
require([
3334
'../../pfe-card/pfe-card.umd.js',

‎elements/pfe-band/src/pfe-band.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ $LOCAL: band;
66
display: flex;
77
flex-flow: column nowrap;
88
align-items: flex-start;
9-
margin-bottom: #{pfe-local(gutter--vertical)};
109
}
1110

1211
%grid-layout {
@@ -275,6 +274,7 @@ $LOCAL: band;
275274
@each $section in (header, body, aside, footer) {
276275
&__#{$section} { // i.e., pfe-band__header
277276
@extend %flex-fallback; // Add the flex fallback styles
277+
margin-bottom: #{pfe-local(gutter--vertical)};
278278
// Apply the standard grid
279279
@supports (display: grid) {
280280
@extend %grid-layout;
@@ -285,4 +285,8 @@ $LOCAL: band;
285285
}
286286
}
287287
}
288+
289+
&__aside {
290+
align-self: stretch;
291+
}
288292
}

‎elements/pfe-card/src/pfe-card.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
display: flex;
1414
flex-direction: column;
1515
justify-items: flex-start;
16+
// This allows the card to fill it's container if necessary
17+
align-self: stretch;
1618

1719
padding: var(--pfe-card--padding);
1820
border: pfe-var(surface--border-width)

‎elements/pfe-cta/demo/index.html‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,31 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
6+
57
<title>PFElements: pfe-cta Demo</title>
68

9+
<noscript>
10+
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
11+
<link href="../../pfe-cta/pfe-cta-fallback.css" rel="stylesheet">
12+
</noscript>
13+
714
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
15+
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
816

917
<!-- uncomment the es5-adapter if you're using the umd version -->
1018
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
11-
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
19+
20+
<!-- Use webcomponents-loader when you are adding support for more modern browsers -->
21+
<!-- <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
22+
23+
<!-- IE11 test: use bundle + require with umd files -->
24+
<!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->
25+
<script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
26+
27+
<!-- Tests require pulling in the UMD version of the files -->
28+
<script src="/requirejs/require.js"></script>
29+
1330
<script>require([
1431
'../pfe-cta.umd.js'
1532
])</script>
@@ -37,12 +54,6 @@
3754
background: #d2d2d2;
3855
}
3956
</style>
40-
41-
<noscript>
42-
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
43-
</noscript>
44-
45-
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
4657
</head>
4758
<body unresolved>
4859
<h1>&lt;pfe-cta&gt;</h1>

‎elements/pfe-cta/src/pfe-cta.scss‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
$pfe-cta__arrow-size: 0.313em;
88

99
/// ===========================================================================
10-
/// DEFUALT CTA
10+
/// DEFAULT CTA
1111
/// ===========================================================================
1212
:host {
1313
--pfe-cta--main: #{pfe-color(ui-link)};
@@ -22,7 +22,7 @@ $pfe-cta__arrow-size: 0.313em;
2222

2323
::slotted(a) {
2424
line-height: inherit;
25-
color: var(--pfe-cta--main) !important;
25+
color: var(--pfe-cta--main);
2626
transition: all #{pfe-var(animation-timing)};
2727

2828
&::after {
@@ -41,15 +41,15 @@ $pfe-cta__arrow-size: 0.313em;
4141
// }
4242

4343
::slotted(a:hover) {
44-
color: var(--pfe-cta--main--hover) !important;
44+
color: var(--pfe-cta--main--hover);
4545

4646
&::after {
4747
@include pfe-arrow-color(var(--pfe-cta--main--hover));
4848
}
4949
}
5050

5151
::slotted(a:focus) {
52-
color: var(--pfe-cta--main--focus) !important;
52+
color: var(--pfe-cta--main--focus);
5353

5454
&::after {
5555
@include pfe-arrow-color(var(--pfe-cta--main--focus));
@@ -75,9 +75,11 @@ $pfe-cta__arrow-size: 0.313em;
7575
text-decoration: none;
7676
line-height: 1.2;
7777

78-
border-color: var(--pfe-cta--main) !important;
79-
background: var(--pfe-cta--main) !important;
80-
color: var(--pfe-cta--aux) !important;
78+
border-color: var(--pfe-cta--main);
79+
background: var(--pfe-cta--main);
80+
color: var(--pfe-cta--aux);
81+
82+
--pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);
8183

8284
&::after {
8385
display: none;
@@ -86,9 +88,11 @@ $pfe-cta__arrow-size: 0.313em;
8688

8789
::slotted(a:hover),
8890
::slotted(a:focus) { // Not sure we can lump these together
89-
border-color: var(--pfe-cta--main--hover) !important;
90-
background: var(--pfe-cta--main--hover) !important;
91-
color: var(--pfe-cta--aux--hover) !important;
91+
border-color: var(--pfe-cta--main--hover);
92+
background: var(--pfe-cta--main--hover);
93+
color: var(--pfe-cta--aux--hover);
94+
95+
--pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);
9296
}
9397

9498
// & ::slotted(a:visited), TBD
@@ -109,9 +113,11 @@ $pfe-cta__arrow-size: 0.313em;
109113
text-decoration: none;
110114
line-height: 1.2;
111115

112-
border-color: var(--pfe-cta--main) !important;
113-
background: var(--pfe-cta--aux) !important;
114-
color: var(--pfe-cta--main) !important;
116+
border-color: var(--pfe-cta--main);
117+
background: var(--pfe-cta--aux);
118+
color: var(--pfe-cta--main);
119+
120+
--pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);
115121

116122
&::after {
117123
display: none;
@@ -120,9 +126,11 @@ $pfe-cta__arrow-size: 0.313em;
120126

121127
::slotted(a:hover), // Not sure we can lump these together
122128
::slotted(a:focus) {
123-
border-color: var(--pfe-cta--main--hover) !important;
124-
background: var(--pfe-cta--main--hover) !important;
125-
color: var(--pfe-cta--aux--hover) !important;
129+
border-color: var(--pfe-cta--main--hover);
130+
background: var(--pfe-cta--main--hover);
131+
color: var(--pfe-cta--aux--hover);
132+
133+
--pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);
126134
}
127135

128136
// & ::slotted(a:visited), TBD
@@ -158,32 +166,35 @@ $pfe-cta__arrow-size: 0.313em;
158166
/// COLOR OVERRIDE: BASE
159167
/// ===========================================================================
160168

161-
:host([color="base"]) {
162-
--pfe-cta--main: #{pfe-color(ui-base)} !important;
163-
--pfe-cta--main--hover: #{pfe-color(ui-base--hover)} !important;
164-
--pfe-cta--aux: #{pfe-color(ui-base--text)} !important;
165-
--pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)} !important;
169+
:host([color="base"]),
170+
:host([color="base"][on="dark"]) {
171+
--pfe-cta--main: #{pfe-color(ui-base)};
172+
--pfe-cta--main--hover: #{pfe-color(ui-base--hover)};
173+
--pfe-cta--aux: #{pfe-color(ui-base--text)};
174+
--pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)};
166175
}
167176

168177

169178
/// ===========================================================================
170179
/// COLOR OVERRIDE: COMPLEMENT
171180
/// ===========================================================================
172181

173-
:host([color="complement"]) {
174-
--pfe-cta--main: #{pfe-color(ui-complement)} !important;
175-
--pfe-cta--main--hover: #{pfe-color(ui-complement--hover)} !important;
176-
--pfe-cta--aux: #{pfe-color(ui-complement--text)} !important;
177-
--pfe-cta--aux--hover: #{pfe-color(ui-complement--text--hover)} !important;
182+
:host([color="complement"]),
183+
:host([color="complement"][on="dark"]) {
184+
--pfe-cta--main: #{pfe-color(ui-complement)};
185+
--pfe-cta--main--hover: #{pfe-color(ui-complement--hover)};
186+
--pfe-cta--aux: #{pfe-color(ui-complement--text)};
187+
--pfe-cta--aux--hover: #{pfe-color(ui-complement--text--hover)};
178188
}
179189

180190

181191
/// ===========================================================================
182192
/// COLOR OVERRIDE: ACCENT
183193
/// ===========================================================================
184-
:host([color="accent"]) {
185-
--pfe-cta--main: #{pfe-color(ui-accent)} !important;
186-
--pfe-cta--main--hover: #{pfe-color(ui-accent--hover)} !important;
187-
--pfe-cta--aux: #{pfe-color(ui-accent--text)} !important;
188-
--pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)} !important;
194+
:host([color="accent"]),
195+
:host([color="accent"][on="dark"]) {
196+
--pfe-cta--main: #{pfe-color(ui-accent)};
197+
--pfe-cta--main--hover: #{pfe-color(ui-accent--hover)};
198+
--pfe-cta--aux: #{pfe-color(ui-accent--text)};
199+
--pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)};
189200
}

0 commit comments

Comments
 (0)