@snyk-mktg/brand-ui 2.3.19 → 2.4.0
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/css/base.css +2 -2
- package/dist/css/base.css.map +1 -1
- package/dist/css/bundle.css +23 -4
- package/dist/css/bundle.css.map +1 -1
- package/dist/css/components.css +21 -2
- package/dist/css/components.css.map +1 -1
- package/dist/css/evo-bundle.css +184 -26
- package/dist/css/evo-bundle.css.map +1 -1
- package/dist/css/labs-bundle.css +26 -7
- package/dist/css/labs-bundle.css.map +1 -1
- package/dist/js/types/icons.d.ts +1 -1
- package/dist/js/utilities/icons.js +1 -0
- package/dist/scss/base/_fonts.scss +4 -4
- package/dist/scss/base/variables/_icons.scss +1 -0
- 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
package/dist/css/evo-bundle.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
@font-face {
|
|
3
3
|
font-family: "brandui-icons";
|
|
4
|
-
src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.
|
|
5
|
-
src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.
|
|
4
|
+
src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot");
|
|
5
|
+
src: url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.eot#iefix") format("embedded-opentype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.ttf") format("truetype"), url("https://res.cloudinary.com/snyk/raw/upload/snyk-mktg-brandui/icons-font/v1.0.10/brandui-icons.woff") format("woff");
|
|
6
6
|
font-weight: normal;
|
|
7
7
|
font-style: normal;
|
|
8
8
|
font-display: block;
|
|
@@ -12388,24 +12388,33 @@ code:not([class]) {
|
|
|
12388
12388
|
}
|
|
12389
12389
|
|
|
12390
12390
|
@media (min-width: 769px) {
|
|
12391
|
-
.cursor-glow {
|
|
12392
|
-
|
|
12391
|
+
.cursor-glow-wrapper:hover .glow-container .glow-item {
|
|
12392
|
+
opacity: 1;
|
|
12393
|
+
}
|
|
12394
|
+
}
|
|
12395
|
+
@media (min-width: 769px) {
|
|
12396
|
+
.cursor-glow-wrapper .glow-container {
|
|
12397
|
+
position: relative;
|
|
12398
|
+
overflow: hidden;
|
|
12399
|
+
height: max-content;
|
|
12400
|
+
}
|
|
12401
|
+
.cursor-glow-wrapper .glow-container .glow-item {
|
|
12402
|
+
position: absolute;
|
|
12403
|
+
border-radius: 0.75rem;
|
|
12393
12404
|
top: 0;
|
|
12394
12405
|
left: 0;
|
|
12395
|
-
width:
|
|
12396
|
-
height:
|
|
12397
|
-
|
|
12398
|
-
|
|
12399
|
-
|
|
12400
|
-
|
|
12401
|
-
|
|
12402
|
-
|
|
12403
|
-
transition: transform 0.2s ease-out; /* Optional: smooths movement slightly */
|
|
12404
|
-
background: radial-gradient(circle, RGBA(255, 15, 243, 0.1) 0%, RGBA(255, 15, 243, 0) 50%);
|
|
12406
|
+
width: 100%;
|
|
12407
|
+
height: 100%;
|
|
12408
|
+
z-index: 0;
|
|
12409
|
+
background: radial-gradient(circle at 50% 50%, #1447e6, #1447e6, #ff0ff3, #fb2c36);
|
|
12410
|
+
mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
|
|
12411
|
+
-webkit-mask: radial-gradient(250px circle at var(--x) var(--y), black 1%, transparent 70%);
|
|
12412
|
+
opacity: 0;
|
|
12413
|
+
transition: opacity 0.3s ease;
|
|
12405
12414
|
}
|
|
12406
12415
|
}
|
|
12407
12416
|
@media (min-width: 769px) and (prefers-reduced-motion) {
|
|
12408
|
-
.cursor-glow {
|
|
12417
|
+
.cursor-glow-wrapper .glow-container .glow-item {
|
|
12409
12418
|
display: none;
|
|
12410
12419
|
}
|
|
12411
12420
|
}
|
|
@@ -12482,30 +12491,30 @@ code:not([class]) {
|
|
|
12482
12491
|
@media (max-width: 768px) {
|
|
12483
12492
|
.txt-page-title-large {
|
|
12484
12493
|
font-family: "Geist", sans-serif;
|
|
12485
|
-
font-size:
|
|
12494
|
+
font-size: 4.375rem;
|
|
12486
12495
|
font-weight: 900;
|
|
12487
12496
|
letter-spacing: -0.03em;
|
|
12488
|
-
line-height:
|
|
12497
|
+
line-height: 5rem;
|
|
12489
12498
|
text-transform: none;
|
|
12490
12499
|
}
|
|
12491
12500
|
}
|
|
12492
12501
|
|
|
12493
12502
|
.txt-page-title {
|
|
12494
12503
|
font-family: "Geist", sans-serif;
|
|
12495
|
-
font-size:
|
|
12504
|
+
font-size: 4.375rem;
|
|
12496
12505
|
font-weight: 900;
|
|
12497
12506
|
letter-spacing: -0.03em;
|
|
12498
|
-
line-height:
|
|
12507
|
+
line-height: 5rem;
|
|
12499
12508
|
padding: 0;
|
|
12500
12509
|
text-transform: none;
|
|
12501
12510
|
}
|
|
12502
12511
|
@media (max-width: 768px) {
|
|
12503
12512
|
.txt-page-title {
|
|
12504
12513
|
font-family: "Geist", sans-serif;
|
|
12505
|
-
font-size:
|
|
12514
|
+
font-size: 4.375rem;
|
|
12506
12515
|
font-weight: 900;
|
|
12507
12516
|
letter-spacing: -0.03em;
|
|
12508
|
-
line-height:
|
|
12517
|
+
line-height: 5rem;
|
|
12509
12518
|
text-transform: none;
|
|
12510
12519
|
}
|
|
12511
12520
|
}
|
|
@@ -12522,10 +12531,10 @@ code:not([class]) {
|
|
|
12522
12531
|
@media (max-width: 768px) {
|
|
12523
12532
|
.txt-section-title {
|
|
12524
12533
|
font-family: "Geist", sans-serif;
|
|
12525
|
-
font-size:
|
|
12534
|
+
font-size: 2.5rem;
|
|
12526
12535
|
font-weight: 900;
|
|
12527
12536
|
letter-spacing: -0.03em;
|
|
12528
|
-
line-height:
|
|
12537
|
+
line-height: 3rem;
|
|
12529
12538
|
text-transform: none;
|
|
12530
12539
|
}
|
|
12531
12540
|
}
|
|
@@ -13386,7 +13395,35 @@ code:not([class]) {
|
|
|
13386
13395
|
left: 0;
|
|
13387
13396
|
width: 100%;
|
|
13388
13397
|
height: 100%;
|
|
13389
|
-
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0)
|
|
13398
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
|
|
13399
|
+
z-index: -1;
|
|
13400
|
+
}
|
|
13401
|
+
.decoration-bg.evo-logo-png-footer {
|
|
13402
|
+
overflow: hidden;
|
|
13403
|
+
position: absolute;
|
|
13404
|
+
opacity: 1;
|
|
13405
|
+
transform: translateZ(-1px);
|
|
13406
|
+
width: calc(1440px / 12 * 16);
|
|
13407
|
+
background: transparent url("https://res.cloudinary.com/snyk/image/upload/snyk-mktg-brandui/decorations/evo-decoration-footer.png");
|
|
13408
|
+
background-position: center;
|
|
13409
|
+
background-repeat: no-repeat;
|
|
13410
|
+
background-size: cover;
|
|
13411
|
+
z-index: -2;
|
|
13412
|
+
}
|
|
13413
|
+
.decoration-bg.evo-logo-png-footer-center {
|
|
13414
|
+
left: 0;
|
|
13415
|
+
right: 0;
|
|
13416
|
+
top: -75%;
|
|
13417
|
+
bottom: 0;
|
|
13418
|
+
}
|
|
13419
|
+
.decoration-bg.evo-logo-png-footer:before {
|
|
13420
|
+
content: "";
|
|
13421
|
+
position: absolute;
|
|
13422
|
+
top: 0;
|
|
13423
|
+
left: 0;
|
|
13424
|
+
width: 100%;
|
|
13425
|
+
height: 100%;
|
|
13426
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
|
|
13390
13427
|
z-index: -1;
|
|
13391
13428
|
}
|
|
13392
13429
|
.decoration-bg.evo-logo-png-top-right {
|
|
@@ -21897,6 +21934,9 @@ a.chip:hover.dark-mode, .dark-mode a.chip:hover, a.chip:focus.dark-mode, .dark-m
|
|
|
21897
21934
|
.general-icon.icon-glassdoor:before {
|
|
21898
21935
|
content: "\e920";
|
|
21899
21936
|
}
|
|
21937
|
+
.general-icon.icon-glossary:before {
|
|
21938
|
+
content: "\e97e";
|
|
21939
|
+
}
|
|
21900
21940
|
.general-icon.icon-google:before {
|
|
21901
21941
|
content: "\e921";
|
|
21902
21942
|
}
|
|
@@ -28984,6 +29024,7 @@ a.tag:focus {
|
|
|
28984
29024
|
background: conic-gradient(from var(--glimmer-angle), RGBA(255, 137, 4, 1), RGBA(255, 137, 4, 0.3), RGBA(255, 15, 243, 0.3), RGBA(255, 15, 243, 1));
|
|
28985
29025
|
}
|
|
28986
29026
|
.button.tertiary, .button.glyph, .button.arrow, .button.external {
|
|
29027
|
+
font-weight: 500;
|
|
28987
29028
|
transition: all 0.2s ease-in-out;
|
|
28988
29029
|
}
|
|
28989
29030
|
.button.tertiary, .button.glyph, .button.arrow, .button.external {
|
|
@@ -29160,7 +29201,63 @@ a.tag:focus {
|
|
|
29160
29201
|
background-color: #ff0ff3;
|
|
29161
29202
|
}
|
|
29162
29203
|
|
|
29204
|
+
.embed-widget :first-child {
|
|
29205
|
+
z-index: 2;
|
|
29206
|
+
}
|
|
29207
|
+
.embed-widget:before {
|
|
29208
|
+
background: linear-gradient(90deg, #ff0ff3, #ff8904);
|
|
29209
|
+
content: "";
|
|
29210
|
+
position: absolute;
|
|
29211
|
+
top: -3px;
|
|
29212
|
+
left: -3px;
|
|
29213
|
+
right: -3px;
|
|
29214
|
+
bottom: -3px;
|
|
29215
|
+
margin: 0 5rem;
|
|
29216
|
+
z-index: 0;
|
|
29217
|
+
border-radius: 0.75rem;
|
|
29218
|
+
}
|
|
29219
|
+
@media (max-width: 768px) {
|
|
29220
|
+
.embed-widget:before {
|
|
29221
|
+
margin: 0;
|
|
29222
|
+
}
|
|
29223
|
+
}
|
|
29224
|
+
.dark-mode .embed-widget:before, .embed-widget.dark-mode .embed-widget:before {
|
|
29225
|
+
background: linear-gradient(90deg, #ff0ff3, #ff8904);
|
|
29226
|
+
content: "";
|
|
29227
|
+
position: absolute;
|
|
29228
|
+
top: -3px;
|
|
29229
|
+
left: -3px;
|
|
29230
|
+
right: -3px;
|
|
29231
|
+
bottom: -3px;
|
|
29232
|
+
margin: 0 5rem;
|
|
29233
|
+
z-index: 0;
|
|
29234
|
+
border-radius: 0.75rem;
|
|
29235
|
+
}
|
|
29236
|
+
@media (max-width: 768px) {
|
|
29237
|
+
.dark-mode .embed-widget:before, .embed-widget.dark-mode .embed-widget:before {
|
|
29238
|
+
margin: 0;
|
|
29239
|
+
}
|
|
29240
|
+
}
|
|
29241
|
+
.embed-widget:after {
|
|
29242
|
+
content: "";
|
|
29243
|
+
z-index: 0;
|
|
29244
|
+
position: absolute;
|
|
29245
|
+
top: 0;
|
|
29246
|
+
left: 0;
|
|
29247
|
+
right: 0;
|
|
29248
|
+
bottom: 0;
|
|
29249
|
+
margin: 0 5rem;
|
|
29250
|
+
background-color: #000000;
|
|
29251
|
+
border-radius: 0.75rem;
|
|
29252
|
+
}
|
|
29253
|
+
@media (max-width: 768px) {
|
|
29254
|
+
.embed-widget:after {
|
|
29255
|
+
margin: 0;
|
|
29256
|
+
}
|
|
29257
|
+
}
|
|
29258
|
+
|
|
29163
29259
|
.card {
|
|
29260
|
+
position: relative;
|
|
29164
29261
|
border-width: 0.0625rem;
|
|
29165
29262
|
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);
|
|
29166
29263
|
backdrop-filter: blur(0.625rem);
|
|
@@ -29482,6 +29579,7 @@ a.tag:focus {
|
|
|
29482
29579
|
-webkit-text-fill-color: transparent;
|
|
29483
29580
|
}
|
|
29484
29581
|
.brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
|
|
29582
|
+
background: linear-gradient(140deg, #ff8904, #ff0ff3);
|
|
29485
29583
|
position: absolute;
|
|
29486
29584
|
top: 0;
|
|
29487
29585
|
right: -10px;
|
|
@@ -29489,11 +29587,26 @@ a.tag:focus {
|
|
|
29489
29587
|
border-radius: 0.125rem;
|
|
29490
29588
|
padding: 0.125rem;
|
|
29491
29589
|
}
|
|
29492
|
-
|
|
29493
|
-
|
|
29590
|
+
@media (max-width: 1024px) {
|
|
29591
|
+
.brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
|
|
29592
|
+
right: unset;
|
|
29593
|
+
left: 30px;
|
|
29594
|
+
}
|
|
29494
29595
|
}
|
|
29495
29596
|
.brandui-navigation .navigation-item .nav-link .new-evo-feature-tag.dark-mode, .dark-mode .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
|
|
29496
29597
|
background: linear-gradient(140deg, #ff8904, #ff0ff3);
|
|
29598
|
+
position: absolute;
|
|
29599
|
+
top: 0;
|
|
29600
|
+
right: -10px;
|
|
29601
|
+
font-size: 9px;
|
|
29602
|
+
border-radius: 0.125rem;
|
|
29603
|
+
padding: 0.125rem;
|
|
29604
|
+
}
|
|
29605
|
+
@media (max-width: 1024px) {
|
|
29606
|
+
.brandui-navigation .navigation-item .nav-link .new-evo-feature-tag.dark-mode, .dark-mode .brandui-navigation .navigation-item .nav-link .new-evo-feature-tag {
|
|
29607
|
+
right: unset;
|
|
29608
|
+
left: 30px;
|
|
29609
|
+
}
|
|
29497
29610
|
}
|
|
29498
29611
|
.brandui-navigation .navigation-item .nav-link:hover .new-evo-feature-tag, .brandui-navigation .navigation-item .nav-link:focus .new-evo-feature-tag {
|
|
29499
29612
|
color: #ffffff;
|
|
@@ -30163,6 +30276,24 @@ a.tag:focus {
|
|
|
30163
30276
|
padding-top: 5rem;
|
|
30164
30277
|
}
|
|
30165
30278
|
|
|
30279
|
+
.brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
|
|
30280
|
+
color: #ff0ff3;
|
|
30281
|
+
}
|
|
30282
|
+
.brandui-navigation .navigation-item:hover .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
|
|
30283
|
+
color: #ff0ff3;
|
|
30284
|
+
}
|
|
30285
|
+
.brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
|
|
30286
|
+
background-color: RGBA(255, 15, 243, 0.1);
|
|
30287
|
+
}
|
|
30288
|
+
.brandui-navigation .navigation-item:hover .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:hover .nav-dropdown, .brandui-navigation .navigation-item:focus .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus .nav-dropdown, .brandui-navigation .navigation-item:focus-within .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-within .nav-dropdown, .brandui-navigation .navigation-item:focus-visible .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:focus-visible .nav-dropdown, .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown.dark-mode, .dark-mode .brandui-navigation .navigation-item:has(.navigation-submenu.open) .nav-dropdown {
|
|
30289
|
+
background-color: RGBA(255, 15, 243, 0.1);
|
|
30290
|
+
}
|
|
30291
|
+
.brandui-navigation .navigation-item .nav-dropdown:after {
|
|
30292
|
+
color: #ff0ff3;
|
|
30293
|
+
}
|
|
30294
|
+
.dark-mode .brandui-navigation .navigation-item .nav-dropdown:after, .brandui-navigation .navigation-item .nav-dropdown.dark-mode .brandui-navigation .navigation-item .nav-dropdown:after {
|
|
30295
|
+
color: #ff0ff3;
|
|
30296
|
+
}
|
|
30166
30297
|
.brandui-navigation .navigation-item .nav-link .new-evo-feature {
|
|
30167
30298
|
background: linear-gradient(140deg, #ff8904, #ff8904);
|
|
30168
30299
|
-webkit-background-clip: text;
|
|
@@ -30204,6 +30335,12 @@ a.tag:focus {
|
|
|
30204
30335
|
.brandui-navigation .navigation .nav-login-accordion-label {
|
|
30205
30336
|
font-family: monospace;
|
|
30206
30337
|
}
|
|
30338
|
+
.brandui-navigation .navigation .nav-login-accordion-label:after {
|
|
30339
|
+
color: #ff0ff3;
|
|
30340
|
+
}
|
|
30341
|
+
.dark-mode .brandui-navigation .navigation .nav-login-accordion-label:after, .brandui-navigation .navigation .nav-login-accordion-label.dark-mode .brandui-navigation .navigation .nav-login-accordion-label:after {
|
|
30342
|
+
color: #ff0ff3;
|
|
30343
|
+
}
|
|
30207
30344
|
.brandui-navigation .navigation .nav-login-accordion-links .login-link-label {
|
|
30208
30345
|
font-family: monospace;
|
|
30209
30346
|
}
|
|
@@ -30222,6 +30359,27 @@ a.tag:focus {
|
|
|
30222
30359
|
.brandui-navigation .navigation .nav-login-accordion-links .login-link:hover.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link:hover {
|
|
30223
30360
|
background-color: RGBA(255, 15, 243, 0.1);
|
|
30224
30361
|
}
|
|
30362
|
+
.brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after {
|
|
30363
|
+
color: #ff0ff3;
|
|
30364
|
+
}
|
|
30365
|
+
.dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after, .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external.dark-mode .brandui-navigation .navigation .nav-login-accordion-links .login-link.link-external:after {
|
|
30366
|
+
color: #ff0ff3;
|
|
30367
|
+
}
|
|
30368
|
+
.brandui-navigation .navigation .nav-login-accordion-disclaimer {
|
|
30369
|
+
font-family: monospace;
|
|
30370
|
+
}
|
|
30371
|
+
.brandui-navigation .navigation .nav-login-accordion-disclaimer a {
|
|
30372
|
+
color: #ff0ff3;
|
|
30373
|
+
}
|
|
30374
|
+
.brandui-navigation .navigation .nav-login-accordion-disclaimer a.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-disclaimer a {
|
|
30375
|
+
color: #ff0ff3;
|
|
30376
|
+
}
|
|
30377
|
+
.brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover {
|
|
30378
|
+
color: #ffffff;
|
|
30379
|
+
}
|
|
30380
|
+
.brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover.dark-mode, .dark-mode .brandui-navigation .navigation .nav-login-accordion-disclaimer a:hover {
|
|
30381
|
+
color: #ffffff;
|
|
30382
|
+
}
|
|
30225
30383
|
|
|
30226
30384
|
.sr-only {
|
|
30227
30385
|
position: absolute !important;
|