@corto-ai/gds-angular 2.1.5-dev.1 → 2.1.5
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/README.md
CHANGED
|
@@ -30,11 +30,11 @@ If you plan to only use the stylesheet/fonts for this library, we recommend impl
|
|
|
30
30
|
|
|
31
31
|
## CDN Assets
|
|
32
32
|
|
|
33
|
-
- All brands combined: <https://cdn.
|
|
34
|
-
- Acctivity: <https://cdn.
|
|
35
|
-
- CORTO: <https://cdn.
|
|
36
|
-
- LawY: <https://cdn.
|
|
37
|
-
- LEAP: <https://cdn.
|
|
33
|
+
- All brands combined: <https://cdn.cortoaws.com/style/gds/2.1.5/css/all.css>
|
|
34
|
+
- Acctivity: <https://cdn.cortoaws.com/style/gds/2.1.5/css/acctivity.css>
|
|
35
|
+
- CORTO: <https://cdn.cortoaws.com/style/gds/2.1.5/css/corto.css>
|
|
36
|
+
- LawY: <https://cdn.cortoaws.com/style/gds/2.1.5/css/lawy.css>
|
|
37
|
+
- LEAP: <https://cdn.cortoaws.com/style/gds/2.1.5/css/leap.css>
|
|
38
38
|
|
|
39
39
|
## Library `@layer`s
|
|
40
40
|
|
|
@@ -4,6 +4,18 @@
|
|
|
4
4
|
// never sits behind the element's background or content. That leaves the element free to carry
|
|
5
5
|
// whatever background it likes including the translucent hover states GDS ships, which would
|
|
6
6
|
// otherwise show the gradient straight through the fill.
|
|
7
|
+
//
|
|
8
|
+
// To override any of these mixin styles (color stops, animation, etc.) include this mixin with custom styles
|
|
9
|
+
// Example:
|
|
10
|
+
// @include animatedGradientBorder() {
|
|
11
|
+
// background: linear-gradient(
|
|
12
|
+
// 42deg,
|
|
13
|
+
// var(--color) 30%,
|
|
14
|
+
// var(--another-color) 50%,
|
|
15
|
+
// var(--yet-another-color) 80%
|
|
16
|
+
// );
|
|
17
|
+
// }
|
|
18
|
+
|
|
7
19
|
@mixin animatedGradientBorder($width: 1px, $duration: 3s) {
|
|
8
20
|
position: relative;
|
|
9
21
|
border: $width solid transparent;
|
|
@@ -15,13 +27,11 @@
|
|
|
15
27
|
padding: $width;
|
|
16
28
|
border-radius: inherit;
|
|
17
29
|
pointer-events: none;
|
|
18
|
-
background: linear-gradient(
|
|
19
|
-
|
|
20
|
-
var(--gds-
|
|
21
|
-
var(--gds-accent-
|
|
22
|
-
var(--gds-brand-
|
|
23
|
-
var(--gds-brand-500) 49.52%,
|
|
24
|
-
var(--gds-palette-border-dark) 93.75%
|
|
30
|
+
background-image: linear-gradient(
|
|
31
|
+
90deg,
|
|
32
|
+
var(--gds-brand-500) 30%,
|
|
33
|
+
var(--gds-accent-400) 50%,
|
|
34
|
+
var(--gds-brand-500) 80%
|
|
25
35
|
);
|
|
26
36
|
background-size: 300% 300%;
|
|
27
37
|
animation: gdsChaseBorder $duration infinite linear;
|
|
@@ -31,6 +41,8 @@
|
|
|
31
41
|
linear-gradient(#000 0 0);
|
|
32
42
|
mask-composite: exclude;
|
|
33
43
|
|
|
44
|
+
@content;
|
|
45
|
+
|
|
34
46
|
@keyframes gdsChaseBorder {
|
|
35
47
|
0%,
|
|
36
48
|
100% {
|