@snyk-mktg/brand-ui 2.3.19 → 2.3.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/scss/evo/base/decorations/_glows.scss +43 -16
- package/dist/scss/evo/base/variables/_typography.scss +6 -4
- package/dist/scss/evo/components/misc/_embed.scss +9 -0
- package/dist/scss/evo/components/molecules/cards/_card.scss +1 -0
- package/dist/scss/labs/components/molecules/_announcements.scss +2 -1
- package/package.json +1 -1
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
1
2
|
@use '../../../base/decorations/glows' as *;
|
|
3
|
+
@use '../../../base/variables/effects' as *;
|
|
4
|
+
@use '../../../base/variables/sizing' as *;
|
|
5
|
+
@use '../../../base/variables/colors' as *;
|
|
2
6
|
@use '../../../base/mixins/page-theme' as theme;
|
|
3
7
|
@use '../../../base/mixins/breakpoints' as break;
|
|
4
8
|
@use '../../../base/mixins/accessibility' as a11y;
|
|
@@ -39,26 +43,49 @@
|
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
|
|
42
|
-
.cursor-glow {
|
|
46
|
+
.cursor-glow-wrapper {
|
|
47
|
+
&:hover {
|
|
48
|
+
@include break.min-mobile {
|
|
49
|
+
.glow-container {
|
|
50
|
+
.glow-item {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
43
56
|
@include break.min-mobile {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
height: 400px;
|
|
49
|
-
border-radius: 50%;
|
|
50
|
-
/* Center the glow on the cursor's actual position */
|
|
51
|
-
transform: translate(-50%, -50%);
|
|
57
|
+
.glow-container {
|
|
58
|
+
position: relative;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
height: max-content;
|
|
52
61
|
|
|
53
|
-
|
|
54
|
-
|
|
62
|
+
.glow-item {
|
|
63
|
+
@include a11y.reduced-motion {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
position: absolute;
|
|
67
|
+
border-radius: map.get($brandui-radius, 'large');
|
|
68
|
+
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
z-index: 0;
|
|
55
74
|
|
|
56
|
-
|
|
57
|
-
|
|
75
|
+
background: radial-gradient(
|
|
76
|
+
circle at 50% 50%,
|
|
77
|
+
map.get($evoui-colors, 'blue'),
|
|
78
|
+
map.get($evoui-colors, 'blue'),
|
|
79
|
+
map.get($evoui-colors, 'pink'),
|
|
80
|
+
map.get($evoui-colors, 'red')
|
|
81
|
+
);
|
|
58
82
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
83
|
+
mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
|
|
84
|
+
-webkit-mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
|
|
85
|
+
|
|
86
|
+
opacity: 0;
|
|
87
|
+
transition: opacity 0.3s ease;
|
|
88
|
+
}
|
|
62
89
|
}
|
|
63
90
|
}
|
|
64
91
|
}
|
|
@@ -9,6 +9,8 @@ $evoui-font-family: (
|
|
|
9
9
|
$brandui-font-family: map.merge(font.$brandui-font-family, $evoui-font-family);
|
|
10
10
|
|
|
11
11
|
$evoui-font-size: (
|
|
12
|
+
page-title-large: 4.375rem,
|
|
13
|
+
page-title: 4.375rem,
|
|
12
14
|
hero-title-large: 4.375rem,
|
|
13
15
|
hero-title-small: 3.75rem,
|
|
14
16
|
section-title-small: 2.5rem,
|
|
@@ -16,6 +18,8 @@ $evoui-font-size: (
|
|
|
16
18
|
$brandui-font-size: map.merge(font.$brandui-font-size, $evoui-font-size);
|
|
17
19
|
|
|
18
20
|
$evoui-line-height: (
|
|
21
|
+
page-title-large: 5rem,
|
|
22
|
+
page-title: 5rem,
|
|
19
23
|
section-title-small: 3rem,
|
|
20
24
|
);
|
|
21
25
|
$brandui-line-height: map.merge(font.$brandui-line-height, $evoui-line-height);
|
|
@@ -192,7 +196,7 @@ $evoui-text-elements-responsive: (
|
|
|
192
196
|
'text-transform': none,
|
|
193
197
|
),
|
|
194
198
|
'page-title-large': (
|
|
195
|
-
'target': '
|
|
199
|
+
'target': 'page-title',
|
|
196
200
|
'weight': 900,
|
|
197
201
|
// 'family': map.get($brandui-font-family, poppins),
|
|
198
202
|
'family': map.get($brandui-font-family, geist),
|
|
@@ -202,7 +206,7 @@ $evoui-text-elements-responsive: (
|
|
|
202
206
|
'text-transform': none,
|
|
203
207
|
),
|
|
204
208
|
'page-title': (
|
|
205
|
-
'target': '
|
|
209
|
+
'target': 'page-title',
|
|
206
210
|
'weight': 900,
|
|
207
211
|
'family': map.get($brandui-font-family, geist),
|
|
208
212
|
'type': sans-serif,
|
|
@@ -265,7 +269,5 @@ $text-elements-responsive: font.$text-elements-responsive;
|
|
|
265
269
|
}
|
|
266
270
|
}
|
|
267
271
|
|
|
268
|
-
@debug $text-elements-responsive;
|
|
269
|
-
|
|
270
272
|
$brandui-font-size: $brandui-font-size;
|
|
271
273
|
$brandui-line-height: $brandui-line-height;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '../../../base/functions' as *;
|
|
3
|
+
@use '../../../base/mixins/breakpoints' as break;
|
|
3
4
|
@use '../../../base/mixins/color-mode' as color;
|
|
4
5
|
@use '../../../base/variables/sizing' as *;
|
|
5
6
|
@use '../../../base/variables/effects' as *;
|
|
@@ -28,6 +29,10 @@
|
|
|
28
29
|
margin: 0 map.get($brandui-padding, 'huge');
|
|
29
30
|
z-index: 0;
|
|
30
31
|
border-radius: map.get($brandui-radius, 'large');
|
|
32
|
+
|
|
33
|
+
@include break.max-mobile {
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
&:after {
|
|
@@ -42,5 +47,9 @@
|
|
|
42
47
|
margin: 0 map.get($brandui-padding, 'huge');
|
|
43
48
|
background-color: brandui-color-labels(neutral-1);
|
|
44
49
|
border-radius: map.get($brandui-radius, 'large');
|
|
50
|
+
|
|
51
|
+
@include break.max-mobile {
|
|
52
|
+
margin: 0;
|
|
53
|
+
}
|
|
45
54
|
}
|
|
46
55
|
}
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
// these colors are "backwards" on purpose
|
|
28
28
|
@include color.color-mode(color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));
|
|
29
29
|
|
|
30
|
-
&:hover
|
|
30
|
+
&:hover,
|
|
31
|
+
&:focus {
|
|
31
32
|
//unofficial underline styles
|
|
32
33
|
text-decoration: underline;
|
|
33
34
|
@include color.color-mode(color, brandui-color-labels(ui-body-dark), brandui-color-labels(ui-body));
|