@corto-ai/gds-angular 2.1.5-test.3 → 2.1.5-test.4
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.test.cortoaws.com/style/gds/2.1.5-test.
|
|
34
|
-
- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.
|
|
35
|
-
- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.
|
|
36
|
-
- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.
|
|
37
|
-
- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.
|
|
33
|
+
- All brands combined: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.4/css/all.css>
|
|
34
|
+
- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.4/css/acctivity.css>
|
|
35
|
+
- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.4/css/corto.css>
|
|
36
|
+
- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.4/css/lawy.css>
|
|
37
|
+
- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.5-test.4/css/leap.css>
|
|
38
38
|
|
|
39
39
|
## Library `@layer`s
|
|
40
40
|
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@use './mixins' as *;
|
|
2
|
+
|
|
3
|
+
// `gds-toast` pins and stacks itself with CSS anchor positioning
|
|
4
|
+
// (`anchor-name` / `position-anchor` / `position-area`, Chrome 125+).
|
|
5
|
+
//
|
|
6
|
+
// Browsers without it drop those declarations entirely, so every toast collapses
|
|
7
|
+
// into static flow at the top-left of the fixed container. This mixin replaces the
|
|
8
|
+
// anchor chain with a flex column so legacy runtimes (e.g. the embedded browser
|
|
9
|
+
// LEAP AI is hosted in) still honour the per-instance `toast-*` position classes.
|
|
10
|
+
//
|
|
11
|
+
// Opt in from an app's global stylesheet - it is intentionally not part of `all.css`.
|
|
12
|
+
//
|
|
13
|
+
// Keep in sync with `libs/gds/src/lib/toastr/toast.component.scss`.
|
|
14
|
+
@mixin toast-anchor-fallback {
|
|
15
|
+
@supports not (position-area: bottom) {
|
|
16
|
+
$vertical-flow: (
|
|
17
|
+
top: column,
|
|
18
|
+
bottom: column-reverse
|
|
19
|
+
);
|
|
20
|
+
$horizontal-alignment: (
|
|
21
|
+
left: flex-start,
|
|
22
|
+
center: center,
|
|
23
|
+
right: flex-end
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
gds-toast-container {
|
|
27
|
+
display: flex;
|
|
28
|
+
// defaults mirror `toast-bottom-right`, refined per position class below
|
|
29
|
+
flex-direction: column-reverse;
|
|
30
|
+
justify-content: flex-start;
|
|
31
|
+
// `--toast-spacing` is declared on `gds-toast`, so it is out of reach from here
|
|
32
|
+
gap: var(--gds-spacing-2xs);
|
|
33
|
+
padding: var(--gds-spacing-2xs);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
gds-toast {
|
|
37
|
+
position: static;
|
|
38
|
+
// the container fills the viewport, so toasts must never be compressed to fit
|
|
39
|
+
flex: 0 0 auto;
|
|
40
|
+
align-self: flex-end;
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@include create-responsive-classes using ($responsive-class) {
|
|
45
|
+
@each $vertical-axis, $flow in $vertical-flow {
|
|
46
|
+
@each $horizontal-axis, $alignment in $horizontal-alignment {
|
|
47
|
+
$class-name: toast-#{$responsive-class}#{$vertical-axis}-#{$horizontal-axis};
|
|
48
|
+
|
|
49
|
+
// the vertical axis is owned by the container, so it has to be derived
|
|
50
|
+
// from the classes of the toasts it is currently rendering
|
|
51
|
+
gds-toast-container:has(> .#{$class-name}) {
|
|
52
|
+
flex-direction: $flow;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
gds-toast.#{$class-name} {
|
|
56
|
+
align-self: $alignment;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|