Skip to content

Commit d3c6110

Browse files
davidornelas11davidornelas11
authored
Merge pull request #1423 from ASU/add-cookie-versions
chore(unity-bootstrap-theme): add cookie consent full screen style
2 parents a02bef1 + 03f6ba5 commit d3c6110

File tree

5 files changed

+520
-4
lines changed

5 files changed

+520
-4
lines changed

‎packages/unity-bootstrap-theme/.storybook/decorators.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useEffect } from "react";
2+
3+
export const forceReloadOfStory = (storyFn, context) => {
4+
useEffect(() => {
5+
setTimeout(() => {
6+
context.globals.shouldReload = true;
7+
}, 100);
8+
return () => {
9+
if (context.globals.shouldReload) {
10+
window.location.reload();
11+
}
12+
};
13+
}, []);
14+
15+
return storyFn();
16+
}

‎packages/unity-bootstrap-theme/src/css/cookie-consent-full-screen.css‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
/**
2+
* TODO: Should we compile this css and include it in our css bundle or just import it and add it into a script in webspark?
3+
*/
4+
/**
5+
* pre-banner styles
6+
*/
7+
.cassie-pre-banner {
8+
align-items: center;
9+
width: 100% !important;
10+
border: 2px solid #D0D0D0 !important;
11+
bottom: 0px;
12+
position: relative;
13+
display: flex;
14+
flex-wrap: wrap;
15+
}
16+
17+
.cassie-pre-banner .close-button {
18+
background-color: #FFFFFF !important;
19+
color: #191919 !important;
20+
font-size: .8rem !important;
21+
padding: 0 !important;
22+
width: 1.75rem !important;
23+
height: 1.75rem !important;
24+
border: 1px solid #D0D0D0 !important;
25+
right: 25px;
26+
color: #191919;
27+
position: absolute;
28+
aspect-ratio: 1 / 1;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
}
33+
34+
.cassie-cookie-module .cassie-bottom {
35+
margin: 0;
36+
padding: 1rem 2rem;
37+
background-color: #E8E8E8;
38+
width: 100%;
39+
display: flex;
40+
flex-wrap: wrap !important;
41+
@media only screen and (max-width: 992px) {
42+
padding: 1rem 1rem 1rem 0;
43+
}
44+
}
45+
46+
button.cassie-pre-banner--button.cassie-view-all {
47+
background-color: black !important;
48+
}
49+
50+
button.cassie-pre-banner--button.cassie-view-all svg {
51+
display: none;
52+
}
53+
54+
.cassie-bottom .cassie-pre-banner--text {
55+
flex: 1 1 300px;
56+
justify-content: center;
57+
font-size: 1rem;
58+
width: calc(40% - 40px);
59+
}
60+
61+
.cassie-pre-banner--button--container {
62+
flex-direction: row !important;
63+
flex-wrap: wrap !important;
64+
justify-content: center !important;
65+
flex: 1 1 400px;
66+
gap: 1rem;
67+
}
68+
69+
.cassie-pre-banner>.cassie-pre-banner--text {
70+
padding: 1.25rem;
71+
margin: 0;
72+
}
73+
.cassie-pre-banner .cassie-pre-banner--button--container {
74+
margin: 0;
75+
padding-left: 1.25rem;
76+
}
77+
78+
79+
/* Don't allow drilldown into cookie script descriptions or show them */
80+
81+
[id^="cassie_expand_cookies_icon"] {
82+
fill: var(--expand-cookies-icon-color);
83+
fill: var(--banner-submit-preferences-button-color);
84+
padding-left: 0px;
85+
}
86+
87+
.cassie-cookie-modal--group .cassie-cookie-children--container {
88+
display: none;
89+
}
90+
91+
div.cassie-cookie-modal.cassie-cookie-modal--center {
92+
background-color: #FFFFFF;
93+
color: #191919;
94+
max-width: 588px;
95+
}
96+
97+
98+
.cassie-cookie-modal.cassie-cookie-modal--center>*:nth-child(1) {
99+
border-bottom: 1px solid #D0D0D0 !important;
100+
}
101+
102+
103+
/* Change borders and spacing around buttons */
104+
105+
.cassie-cookie-modal .cassie-cookie-modal--main {
106+
border: 0px solid var(--banner-secondary-color);
107+
}
108+
109+
.cassie-cookie-module>.cassie-cookie-modal {
110+
border-right: unset;
111+
}
112+
113+
.cassie-cookie-modal--footer .cassie-cookie-modal--footer-extra {
114+
padding-top: 30px;
115+
}
116+
117+
.cassie-cookie-module p a {
118+
color: #8C1D40;
119+
text-decoration: underline;
120+
}
121+
122+
.cassie-cookie-modal--footer>p {
123+
font-size: .75rem !important
124+
}
125+
126+
.cassie-cookie-modal--group,
127+
.cassie-cookie-modal--select-group {
128+
border-bottom: 1px solid #D0D0D0 !important;
129+
}
130+
131+
.cassie-cookie-modal--group-head-container .cassie-cookie-group--description {
132+
width: 100%;
133+
}
134+
135+
/*Text font and remove unwanted items */
136+
.cassie-cookie-modal--header .cassie-cookie-modal--header--content {
137+
border: 0px;
138+
color: #0f0f0f;
139+
word-spacing: normal;
140+
word-break: break-word;
141+
font-size: 1.25rem;
142+
font-weight: 700;
143+
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
144+
}
145+
146+
.cassie-cookie-module *,
147+
.cassie-cookie-module button
148+
{
149+
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif !important;
150+
box-sizing: border-box;
151+
}
152+
153+
.cassie-expand-cookies--container .cassie-cookie-group--heading {
154+
font-size: 1rem;
155+
line-height: 1.6;
156+
}
157+
158+
.cassie-cookie-modal--footer-image--container {
159+
display: none !important;
160+
}
161+
162+
.cassie-cookie-modal--header .cassie-cookie-modal--accept-all {
163+
display: none;
164+
}
165+
166+
.cassie-cookie-modal--save-preferences--container .cassie-cookie-modal--save-preferences {
167+
width: 10rem;
168+
margin: 0px 15px 0px 15px;
169+
}
170+
171+
.cassie-cookie-modal--group-head-container .cassie-cookie-group--description {
172+
display: flex;
173+
}
174+
175+
.cassie-cookie-modal .cassie-cookie-modal--footer {
176+
margin-top: unset;
177+
}
178+
179+
.cassie-cookie-module>.cassie-cookie-modal--center {
180+
height: fit-content;
181+
width: 30%;
182+
margin: auto;
183+
}
184+
185+
.cassie-cookie-modal--group-head-container .cassie-cookie-group--description {
186+
display: none;
187+
}
188+
189+
.cassie-cookie-modal--group-head-container .cassie-expandable-description--show {
190+
display: flex;
191+
font-size: .75rem;
192+
}
193+
194+
.cassie-strictly-necessary--description.cassie-cookie-group--description.cassie-expand-cookies--icon--open {
195+
display: block;
196+
font-size: .75rem;
197+
}
198+
199+
.cassie-expand-cookies--container span>svg.cassie-expand-cookies--icon {
200+
width: 1.25rem;
201+
height: 1.25rem;
202+
}
203+
204+
.cassie-cookie-module button {
205+
border-radius: 400rem !important;
206+
border: none !important;
207+
background-color: #8c1d40 !important;
208+
color: #ffffff !important;
209+
font-size: .875rem !important;
210+
font-weight: 700 !important;
211+
white-space: nowrap;
212+
padding: 0.65rem 1rem !important;
213+
width: fit-content !important;
214+
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif !important;
215+
}
216+
217+
.cassie-cookie-module button:hover {
218+
transform: scale(1.05) !important;
219+
opacity: 1 !important;
220+
cursor: pointer;
221+
outline: 0px !important;
222+
}
223+
.cassie-cookie-module button:focus,
224+
.cassie-cookie-module *[role="button"]:focus,
225+
.cassie-cookie-module a:focus,
226+
.cassie-cookie-module *[role="switch"]:focus {
227+
box-shadow: 0 0 0 2px #fff,0 0 0 4px #191919 !important;
228+
outline: none !important;
229+
}
230+
231+
.cassie-pre-banner .cassie-view-all {
232+
margin-top: 10px !important;
233+
}
234+
235+
.cassie-strictly-necessary--description.cassie-cookie-group--description {
236+
display: none;
237+
}
238+
239+
.cassie-cookie-modal--center .cassie-toggle-switch--slider {
240+
left: -35px;
241+
right: 40px;
242+
background-color: #D0D0D0;
243+
}
244+
245+
.cassie-cookie-modal--center .cassie-toggle-switch--slider--active {
246+
background-color: #78BE20;
247+
;
248+
}
249+
250+
.cassie-cookie-modal--center .cassie-toggle-switch--status {
251+
right: -20px;
252+
}
253+
254+
.cassie-cookie-module>.cassie-pre-banner {
255+
border-radius: 0 !important;
256+
align-self: end;
257+
}
258+
259+
260+
/* Mobile and other devices */
261+
262+
@media only screen and (max-width: 1260px) {
263+
.cassie-pre-banner--text {
264+
width: calc(100% - 40px) !important;
265+
margin-bottom: 1rem;
266+
}
267+
268+
.cassie-bottom .cassie-pre-banner--button--container {
269+
min-width: calc(100% - 40px) !important;
270+
}
271+
.cassie-pre-banner .close-button {
272+
top: 2.25rem;
273+
}
274+
}
275+
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
276+
.cassie-cookie-module>.cassie-cookie-modal--center {
277+
width: 50%;
278+
margin-top: 1%;
279+
margin-bottom: 1%;
280+
281+
}
282+
}
283+
284+
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
285+
.cassie-cookie-module>.cassie-cookie-modal--center {
286+
height: auto;
287+
}
288+
}
289+
290+
/* Phones */
291+
@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
292+
.cassie-cookie-module>.cassie-cookie-modal--center {
293+
width: 50%;
294+
margin-top: 1%;
295+
margin-bottom: 1%;
296+
}
297+
}
298+
299+
@media only screen and (min-width: 200px) {
300+
301+
.cassie-cookie-modal .cassie-cookie-modal--footer {
302+
margin-top: inherit;
303+
}
304+
305+
306+
.cassie-cookie-modal--footer-extra .cassie-cookie-modal--save-preferences--container {
307+
display: flex;
308+
flex-direction: column;
309+
gap: 10px;
310+
width: 100%;
311+
}
312+
313+
314+
315+
.cassie-cookie-modal--save-preferences--container .cassie-cookie-modal--save-preferences {
316+
width: 90%;
317+
}
318+
319+
.cassie-cookie-modal--group-head-container .cassie-expand-cookies--container {
320+
width: 73%;
321+
}
322+
323+
324+
.cassie-cookie-module>.cassie-cookie-modal--center {
325+
width: 90%;
326+
}
327+
328+
}

0 commit comments

Comments
 (0)