@agorapulse/ui-theme 20.1.21 → 20.1.22
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/{agorapulse-ui-theme-20.1.21.tgz → agorapulse-ui-theme-20.1.22.tgz} +0 -0
- package/assets/style/css-ui/_accordion.scss +35 -35
- package/assets/style/css-ui/_avatar.scss +12 -4
- package/assets/style/css-ui/_button.scss +8 -1
- package/assets/style/css-ui/_card.scss +12 -12
- package/assets/style/css-ui/_checkbox.scss +33 -6
- package/assets/style/css-ui/_datepicker.scss +3 -1
- package/assets/style/css-ui/_dialog.scss +48 -48
- package/assets/style/css-ui/_icon-button.scss +56 -18
- package/assets/style/css-ui/_infobox.scss +27 -10
- package/assets/style/css-ui/_input.scss +0 -1
- package/assets/style/css-ui/_list-panel.scss +48 -48
- package/assets/style/css-ui/_loader.scss +80 -25
- package/assets/style/css-ui/_radio.scss +0 -1
- package/assets/style/css-ui/_select.scss +3 -1
- package/assets/style/css-ui/_snackbar.scss +20 -0
- package/assets/style/css-ui/_status.scss +18 -6
- package/assets/style/css-ui/_table.scss +0 -2
- package/assets/style/css-ui/_tabs.scss +7 -0
- package/assets/style/css-ui/_tag.scss +18 -6
- package/assets/style/css-ui/_textarea.scss +1 -5
- package/assets/style/css-ui/_toggle.scss +0 -1
- package/assets/style/css-ui/_tooltip.scss +17 -6
- package/assets/style/css-ui/_typography.scss +24 -8
- package/package.json +1 -1
|
Binary file
|
|
@@ -1,54 +1,54 @@
|
|
|
1
1
|
.ap-accordion {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
background-color: var(--ref-color-white);
|
|
3
|
+
border: 1px solid var(--ref-color-grey-10);
|
|
4
|
+
border-radius: var(--ref-border-radius-md);
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.ap-accordion-header {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
border-bottom: 1px solid var(--ref-color-grey-10);
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--ref-spacing-xxs);
|
|
14
|
+
padding: 6px var(--ref-spacing-xs) 6px var(--ref-spacing-sm);
|
|
15
|
+
|
|
16
|
+
> i {
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.ap-accordion-title {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
flex: 1;
|
|
23
|
+
min-width: 0;
|
|
24
|
+
font-size: var(--ref-font-size-sm);
|
|
25
|
+
font-weight: var(--ref-font-weight-bold);
|
|
26
|
+
line-height: var(--ref-font-line-height-md);
|
|
27
|
+
color: var(--ref-color-grey-100);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.ap-accordion-toggle {
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
transition: transform var(--ref-animation-short);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.ap-accordion-content {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: var(--ref-spacing-sm);
|
|
39
|
+
padding: var(--ref-spacing-sm);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.ap-accordion.collapsed {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
.ap-accordion-header {
|
|
44
|
+
border-bottom: none;
|
|
45
|
+
}
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
.ap-accordion-toggle {
|
|
48
|
+
transform: rotate(180deg);
|
|
49
|
+
}
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
.ap-accordion-content {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
54
|
}
|
|
@@ -173,10 +173,18 @@
|
|
|
173
173
|
height: var(--ap-avatar-network-size);
|
|
174
174
|
|
|
175
175
|
// Monochrome icon fallback colors (when using ap-icon-{network} instead of -official)
|
|
176
|
-
&.ap-icon-facebook {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
&.ap-icon-
|
|
176
|
+
&.ap-icon-facebook {
|
|
177
|
+
color: var(--ref-color-facebook-100);
|
|
178
|
+
}
|
|
179
|
+
&.ap-icon-instagram {
|
|
180
|
+
color: var(--ref-color-instagram-100);
|
|
181
|
+
}
|
|
182
|
+
&.ap-icon-linkedin {
|
|
183
|
+
color: var(--ref-color-linkedin-100);
|
|
184
|
+
}
|
|
185
|
+
&.ap-icon-youtube {
|
|
186
|
+
color: var(--ref-color-youtube-100);
|
|
187
|
+
}
|
|
180
188
|
}
|
|
181
189
|
}
|
|
182
190
|
|
|
@@ -97,7 +97,14 @@
|
|
|
97
97
|
|
|
98
98
|
&.grey {
|
|
99
99
|
border: 1px solid var(--ref-color-grey-20);
|
|
100
|
-
@include btn.btn-stroked-color(
|
|
100
|
+
@include btn.btn-stroked-color(
|
|
101
|
+
'grey',
|
|
102
|
+
$text-color-shade: 80,
|
|
103
|
+
$border-color-shade: 20,
|
|
104
|
+
$hover-border-shade: 40,
|
|
105
|
+
$active-border-shade: 60,
|
|
106
|
+
$focus-border-shade: 20
|
|
107
|
+
);
|
|
101
108
|
}
|
|
102
109
|
|
|
103
110
|
&.blue {
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
.ap-card {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
background-color: var(--ref-color-white);
|
|
3
|
+
border: 1px solid var(--ref-color-grey-10);
|
|
4
|
+
border-radius: var(--ref-border-radius-md);
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: var(--ref-spacing-sm);
|
|
8
|
+
padding: var(--ref-spacing-sm);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.ap-card-title {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
font-size: var(--ref-font-size-md);
|
|
13
|
+
font-weight: var(--ref-font-weight-bold);
|
|
14
|
+
line-height: var(--ref-font-line-height-lg);
|
|
15
|
+
color: var(--ref-color-grey-100);
|
|
16
|
+
margin: 0;
|
|
17
17
|
}
|
|
@@ -12,12 +12,35 @@
|
|
|
12
12
|
@include m.sr-only;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
16
15
|
&.full-width {
|
|
17
16
|
justify-content: space-between;
|
|
18
17
|
width: 100%;
|
|
19
18
|
}
|
|
20
19
|
|
|
20
|
+
// No-label variant: larger hit area with background feedback
|
|
21
|
+
&:not(:has(> span:not(:empty))) {
|
|
22
|
+
padding: 10px;
|
|
23
|
+
border-radius: var(--ref-border-radius-md);
|
|
24
|
+
transition: background-color 0.15s;
|
|
25
|
+
|
|
26
|
+
// Hover: grey background
|
|
27
|
+
&:hover:not(:has(input:disabled)) {
|
|
28
|
+
background: var(--ref-color-grey-05);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Checked hover: blue background
|
|
32
|
+
&:hover:not(:has(input:disabled)):has(input:checked),
|
|
33
|
+
&:hover:not(:has(input:disabled)).indeterminate {
|
|
34
|
+
background: var(--ref-color-electric-blue-10);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Checked active: darker blue background
|
|
38
|
+
&:active:not(:has(input:disabled)):has(input:checked),
|
|
39
|
+
&:active:not(:has(input:disabled)).indeterminate {
|
|
40
|
+
background: var(--ref-color-electric-blue-20);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
21
44
|
// Disabled container
|
|
22
45
|
&:has(input:disabled) {
|
|
23
46
|
cursor: default;
|
|
@@ -34,7 +57,9 @@
|
|
|
34
57
|
background: var(--ref-color-white);
|
|
35
58
|
box-sizing: border-box;
|
|
36
59
|
flex-shrink: 0;
|
|
37
|
-
transition:
|
|
60
|
+
transition:
|
|
61
|
+
background-color 0.15s,
|
|
62
|
+
border-color 0.15s;
|
|
38
63
|
|
|
39
64
|
// Checkmark via CSS (no inline SVG needed)
|
|
40
65
|
&::after {
|
|
@@ -42,7 +67,7 @@
|
|
|
42
67
|
display: none;
|
|
43
68
|
width: 10px;
|
|
44
69
|
height: 10px;
|
|
45
|
-
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0
|
|
70
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.238 3.337a.92.92 0 0 1 .025 1.301l-7.7 8a.92.92 0 0 1-1.326 0l-3.5-3.636a.92.92 0 1 1 1.326-1.276L5.9 10.674l7.037-7.312a.92.92 0 0 1 1.301-.025' clip-rule='evenodd' fill='white'/%3E%3C/svg%3E");
|
|
46
71
|
mask-size: contain;
|
|
47
72
|
mask-repeat: no-repeat;
|
|
48
73
|
background-color: var(--ref-color-white);
|
|
@@ -125,9 +150,11 @@
|
|
|
125
150
|
border-color: var(--ref-color-grey-20);
|
|
126
151
|
}
|
|
127
152
|
|
|
128
|
-
// Focus ring (
|
|
129
|
-
|
|
130
|
-
|
|
153
|
+
// Focus ring (any focus on hover-capable devices, matching original component)
|
|
154
|
+
@media (hover: hover) {
|
|
155
|
+
&:has(input:focus:not(:disabled)) > i {
|
|
156
|
+
@include m.focus-ring-3px;
|
|
157
|
+
}
|
|
131
158
|
}
|
|
132
159
|
|
|
133
160
|
// Error state
|
|
@@ -239,7 +239,9 @@
|
|
|
239
239
|
color: var(--ref-color-grey-80);
|
|
240
240
|
text-align: left;
|
|
241
241
|
cursor: pointer;
|
|
242
|
-
transition:
|
|
242
|
+
transition:
|
|
243
|
+
background-color 0.15s ease,
|
|
244
|
+
color 0.15s ease;
|
|
243
245
|
|
|
244
246
|
&:hover:not(.active):not(:disabled) {
|
|
245
247
|
color: var(--ref-color-electric-blue-100);
|
|
@@ -1,74 +1,74 @@
|
|
|
1
1
|
.ap-dialog {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
background-color: var(--ref-color-white);
|
|
3
|
+
border-radius: var(--ref-border-radius-md);
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
position: relative;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.ap-dialog-header {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: var(--ref-spacing-xxxs);
|
|
14
|
+
padding: var(--ref-spacing-lg) var(--ref-spacing-lg) 0;
|
|
15
|
+
padding-right: 64px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.ap-dialog-title {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
font-size: var(--ref-font-size-xxl);
|
|
20
|
+
font-weight: var(--ref-font-weight-bold);
|
|
21
|
+
line-height: var(--ref-font-line-height-xl);
|
|
22
|
+
color: var(--ref-color-grey-100);
|
|
23
|
+
margin: 0;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.ap-dialog-subtitle {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
font-size: var(--ref-font-size-md);
|
|
28
|
+
line-height: var(--ref-font-line-height-lg);
|
|
29
|
+
color: var(--ref-color-grey-80);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.ap-dialog-content {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
gap: var(--ref-spacing-md);
|
|
36
|
+
padding: var(--ref-spacing-md) var(--ref-spacing-lg);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.ap-dialog-footer {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
border-top: 1px solid var(--ref-color-grey-10);
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: var(--ref-spacing-sm);
|
|
44
|
+
padding: var(--ref-spacing-sm) var(--ref-spacing-lg);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.ap-dialog-footer-left {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: var(--ref-spacing-sm);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.ap-dialog-footer-right {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: var(--ref-spacing-sm);
|
|
57
|
+
flex: 1;
|
|
58
|
+
justify-content: flex-end;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.ap-dialog-close {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 20px;
|
|
64
|
+
right: 20px;
|
|
65
|
+
padding: 10px;
|
|
66
|
+
border-radius: var(--ref-border-radius-md);
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
background: none;
|
|
69
|
+
border: none;
|
|
70
|
+
color: var(--ref-color-grey-100);
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
74
|
}
|
|
@@ -3,7 +3,12 @@
|
|
|
3
3
|
@use '../button-mixins' as btn;
|
|
4
4
|
|
|
5
5
|
.ap-icon-button {
|
|
6
|
-
|
|
6
|
+
&.ap-icon-button {
|
|
7
|
+
display: flex;
|
|
8
|
+
width: var(--comp-icon-button-width);
|
|
9
|
+
height: var(--comp-icon-button-height);
|
|
10
|
+
}
|
|
11
|
+
|
|
7
12
|
justify-content: center;
|
|
8
13
|
align-items: center;
|
|
9
14
|
@include m.fixed-size(var(--comp-icon-button-width));
|
|
@@ -13,13 +18,16 @@
|
|
|
13
18
|
padding: var(--comp-icon-button-padding);
|
|
14
19
|
position: relative;
|
|
15
20
|
cursor: pointer;
|
|
16
|
-
transition:
|
|
21
|
+
transition:
|
|
22
|
+
border-color 0.25s,
|
|
23
|
+
background-color 0.25s;
|
|
17
24
|
box-sizing: border-box;
|
|
18
25
|
|
|
19
26
|
> i {
|
|
20
27
|
color: var(--ref-color-grey-60);
|
|
21
|
-
|
|
28
|
+
font-size: calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2));
|
|
22
29
|
flex-shrink: 0;
|
|
30
|
+
line-height: 1;
|
|
23
31
|
}
|
|
24
32
|
|
|
25
33
|
// Default hover/active (flat, no color)
|
|
@@ -45,7 +53,9 @@
|
|
|
45
53
|
|
|
46
54
|
// Color variants — flat
|
|
47
55
|
&.blue {
|
|
48
|
-
> i {
|
|
56
|
+
> i {
|
|
57
|
+
color: var(--ref-color-electric-blue-100);
|
|
58
|
+
}
|
|
49
59
|
|
|
50
60
|
&:hover:not(.stroked):not(.locked):not(:disabled) {
|
|
51
61
|
background: var(--ref-color-electric-blue-05);
|
|
@@ -55,11 +65,15 @@
|
|
|
55
65
|
background: var(--ref-color-electric-blue-10);
|
|
56
66
|
}
|
|
57
67
|
|
|
58
|
-
&:disabled > i {
|
|
68
|
+
&:disabled > i {
|
|
69
|
+
color: var(--ref-color-electric-blue-20);
|
|
70
|
+
}
|
|
59
71
|
}
|
|
60
72
|
|
|
61
73
|
&.green {
|
|
62
|
-
> i {
|
|
74
|
+
> i {
|
|
75
|
+
color: var(--ref-color-green-100);
|
|
76
|
+
}
|
|
63
77
|
|
|
64
78
|
&:hover:not(.stroked):not(.locked):not(:disabled) {
|
|
65
79
|
background: var(--ref-color-green-10);
|
|
@@ -69,11 +83,15 @@
|
|
|
69
83
|
background: var(--ref-color-green-20);
|
|
70
84
|
}
|
|
71
85
|
|
|
72
|
-
&:disabled > i {
|
|
86
|
+
&:disabled > i {
|
|
87
|
+
color: var(--ref-color-green-20);
|
|
88
|
+
}
|
|
73
89
|
}
|
|
74
90
|
|
|
75
91
|
&.red {
|
|
76
|
-
> i {
|
|
92
|
+
> i {
|
|
93
|
+
color: var(--ref-color-red-100);
|
|
94
|
+
}
|
|
77
95
|
|
|
78
96
|
&:hover:not(.stroked):not(.locked):not(:disabled) {
|
|
79
97
|
background: var(--ref-color-red-10);
|
|
@@ -83,7 +101,9 @@
|
|
|
83
101
|
background: var(--ref-color-red-20);
|
|
84
102
|
}
|
|
85
103
|
|
|
86
|
-
&:disabled > i {
|
|
104
|
+
&:disabled > i {
|
|
105
|
+
color: var(--ref-color-red-20);
|
|
106
|
+
}
|
|
87
107
|
}
|
|
88
108
|
|
|
89
109
|
// Stroked variant
|
|
@@ -107,25 +127,43 @@
|
|
|
107
127
|
&.blue:not(.loading):not(.locked) {
|
|
108
128
|
border-color: var(--ref-color-electric-blue-100);
|
|
109
129
|
|
|
110
|
-
&:hover:not(:disabled) {
|
|
111
|
-
|
|
112
|
-
|
|
130
|
+
&:hover:not(:disabled) {
|
|
131
|
+
border-color: var(--ref-color-electric-blue-60);
|
|
132
|
+
}
|
|
133
|
+
&:active:not(:disabled) {
|
|
134
|
+
border-color: var(--ref-color-electric-blue-100);
|
|
135
|
+
}
|
|
136
|
+
&:disabled {
|
|
137
|
+
border-color: var(--ref-color-electric-blue-20);
|
|
138
|
+
}
|
|
113
139
|
}
|
|
114
140
|
|
|
115
141
|
&.green:not(.loading):not(.locked) {
|
|
116
142
|
border-color: var(--ref-color-green-100);
|
|
117
143
|
|
|
118
|
-
&:hover:not(:disabled) {
|
|
119
|
-
|
|
120
|
-
|
|
144
|
+
&:hover:not(:disabled) {
|
|
145
|
+
border-color: var(--ref-color-green-60);
|
|
146
|
+
}
|
|
147
|
+
&:active:not(:disabled) {
|
|
148
|
+
border-color: var(--ref-color-green-100);
|
|
149
|
+
}
|
|
150
|
+
&:disabled {
|
|
151
|
+
border-color: var(--ref-color-green-20);
|
|
152
|
+
}
|
|
121
153
|
}
|
|
122
154
|
|
|
123
155
|
&.red:not(.loading):not(.locked) {
|
|
124
156
|
border-color: var(--ref-color-red-100);
|
|
125
157
|
|
|
126
|
-
&:hover:not(:disabled) {
|
|
127
|
-
|
|
128
|
-
|
|
158
|
+
&:hover:not(:disabled) {
|
|
159
|
+
border-color: var(--ref-color-red-60);
|
|
160
|
+
}
|
|
161
|
+
&:active:not(:disabled) {
|
|
162
|
+
border-color: var(--ref-color-red-100);
|
|
163
|
+
}
|
|
164
|
+
&:disabled {
|
|
165
|
+
border-color: var(--ref-color-red-20);
|
|
166
|
+
}
|
|
129
167
|
}
|
|
130
168
|
}
|
|
131
169
|
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
line-height: var(--ref-font-line-height-sm);
|
|
11
11
|
align-items: flex-start;
|
|
12
12
|
color: var(--ref-color-grey-100);
|
|
13
|
-
padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom)
|
|
13
|
+
padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom)
|
|
14
|
+
var(--comp-infobox-padding-left);
|
|
14
15
|
border-radius: var(--comp-infobox-border-radius);
|
|
15
16
|
overflow: hidden;
|
|
16
17
|
font-family: var(--comp-infobox-text-title-font-family);
|
|
@@ -44,29 +45,45 @@
|
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
// Variants
|
|
48
|
+
// Variants — expected icons: ap-icon-info_fill, ap-icon-warning_fill, ap-icon-error_fill, ap-icon-rounded-check_fill
|
|
48
49
|
&.info {
|
|
49
50
|
background-color: var(--comp-infobox-info-background-color);
|
|
50
|
-
> i {
|
|
51
|
-
|
|
51
|
+
> i {
|
|
52
|
+
color: var(--comp-infobox-info-icon-color);
|
|
53
|
+
}
|
|
54
|
+
&::before {
|
|
55
|
+
background-color: var(--comp-infobox-info-border-left-color);
|
|
56
|
+
}
|
|
52
57
|
}
|
|
53
58
|
|
|
54
59
|
&.warning {
|
|
55
60
|
background-color: var(--comp-infobox-warning-background-color);
|
|
56
|
-
> i {
|
|
57
|
-
|
|
61
|
+
> i {
|
|
62
|
+
color: var(--comp-infobox-warning-icon-color);
|
|
63
|
+
}
|
|
64
|
+
&::before {
|
|
65
|
+
background-color: var(--comp-infobox-warning-border-left-color);
|
|
66
|
+
}
|
|
58
67
|
}
|
|
59
68
|
|
|
60
69
|
&.error {
|
|
61
70
|
background-color: var(--comp-infobox-error-background-color);
|
|
62
|
-
> i {
|
|
63
|
-
|
|
71
|
+
> i {
|
|
72
|
+
color: var(--comp-infobox-error-icon-color);
|
|
73
|
+
}
|
|
74
|
+
&::before {
|
|
75
|
+
background-color: var(--comp-infobox-error-border-left-color);
|
|
76
|
+
}
|
|
64
77
|
}
|
|
65
78
|
|
|
66
79
|
&.success {
|
|
67
80
|
background-color: var(--comp-infobox-success-background-color);
|
|
68
|
-
> i {
|
|
69
|
-
|
|
81
|
+
> i {
|
|
82
|
+
color: var(--comp-infobox-success-icon-color);
|
|
83
|
+
}
|
|
84
|
+
&::before {
|
|
85
|
+
background-color: var(--comp-infobox-success-border-left-color);
|
|
86
|
+
}
|
|
70
87
|
}
|
|
71
88
|
}
|
|
72
89
|
|
|
@@ -1,73 +1,73 @@
|
|
|
1
1
|
.ap-list-panel {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
background-color: var(--ref-color-white);
|
|
3
|
+
border-right: 1px solid var(--ref-color-grey-10);
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
height: 100%;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.ap-list-panel-header {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
border-bottom: 1px solid var(--ref-color-grey-10);
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: var(--ref-spacing-sm);
|
|
14
|
+
padding: var(--ref-spacing-sm);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.ap-list-panel-items {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
flex: 1 0 0;
|
|
21
|
+
overflow-y: auto;
|
|
22
|
+
padding: var(--ref-spacing-sm) 0;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.ap-list-panel-item {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
min-height: 40px;
|
|
29
|
+
padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
|
|
30
|
+
gap: var(--ref-spacing-xxs);
|
|
31
|
+
font-size: var(--ref-font-size-sm);
|
|
32
|
+
line-height: var(--ref-font-line-height-sm);
|
|
33
|
+
color: var(--ref-color-grey-100);
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
transition: background-color var(--ref-animation-short);
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
&:hover {
|
|
38
|
+
background-color: var(--ref-color-electric-blue-10);
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
&.selected {
|
|
42
|
+
background-color: var(--ref-color-electric-blue-20);
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
.ap-list-panel-item-name {
|
|
45
|
+
color: var(--ref-color-electric-blue-150);
|
|
46
|
+
font-weight: var(--ref-font-weight-bold);
|
|
47
|
+
}
|
|
47
48
|
}
|
|
48
|
-
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.ap-list-panel-item-text {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 2px;
|
|
55
|
+
flex: 1;
|
|
56
|
+
min-width: 0;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.ap-list-panel-item-name {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
white-space: nowrap;
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
&:has(+ .ap-list-panel-item-subtitle) {
|
|
65
|
+
font-weight: var(--ref-font-weight-bold);
|
|
66
|
+
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.ap-list-panel-item-subtitle {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
70
|
+
font-size: var(--ref-font-size-xs);
|
|
71
|
+
line-height: var(--ref-font-line-height-xs);
|
|
72
|
+
color: var(--ref-color-grey-80);
|
|
73
73
|
}
|
|
@@ -61,8 +61,12 @@
|
|
|
61
61
|
stroke-dasharray: 40;
|
|
62
62
|
stroke-dashoffset: 47;
|
|
63
63
|
}
|
|
64
|
-
circle:first-child {
|
|
65
|
-
|
|
64
|
+
circle:first-child {
|
|
65
|
+
animation: ap-loader-16 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite;
|
|
66
|
+
}
|
|
67
|
+
circle:last-child {
|
|
68
|
+
animation: ap-loader-16 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
|
|
69
|
+
}
|
|
66
70
|
}
|
|
67
71
|
|
|
68
72
|
&.size-24 {
|
|
@@ -74,8 +78,12 @@
|
|
|
74
78
|
stroke-dasharray: 62;
|
|
75
79
|
stroke-dashoffset: 69;
|
|
76
80
|
}
|
|
77
|
-
circle:first-child {
|
|
78
|
-
|
|
81
|
+
circle:first-child {
|
|
82
|
+
animation: ap-loader-24 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite;
|
|
83
|
+
}
|
|
84
|
+
circle:last-child {
|
|
85
|
+
animation: ap-loader-24 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
|
|
86
|
+
}
|
|
79
87
|
}
|
|
80
88
|
|
|
81
89
|
&.size-30 {
|
|
@@ -87,8 +95,12 @@
|
|
|
87
95
|
stroke-dasharray: 78;
|
|
88
96
|
stroke-dashoffset: 84;
|
|
89
97
|
}
|
|
90
|
-
circle:first-child {
|
|
91
|
-
|
|
98
|
+
circle:first-child {
|
|
99
|
+
animation: ap-loader-30 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite;
|
|
100
|
+
}
|
|
101
|
+
circle:last-child {
|
|
102
|
+
animation: ap-loader-30 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
|
|
103
|
+
}
|
|
92
104
|
}
|
|
93
105
|
|
|
94
106
|
&.size-48 {
|
|
@@ -100,8 +112,12 @@
|
|
|
100
112
|
stroke-dasharray: 128;
|
|
101
113
|
stroke-dashoffset: 131;
|
|
102
114
|
}
|
|
103
|
-
circle:first-child {
|
|
104
|
-
|
|
115
|
+
circle:first-child {
|
|
116
|
+
animation: ap-loader-48 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite;
|
|
117
|
+
}
|
|
118
|
+
circle:last-child {
|
|
119
|
+
animation: ap-loader-48 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
|
|
120
|
+
}
|
|
105
121
|
}
|
|
106
122
|
|
|
107
123
|
&.size-60 {
|
|
@@ -113,8 +129,12 @@
|
|
|
113
129
|
stroke-dasharray: 163;
|
|
114
130
|
stroke-dashoffset: 166;
|
|
115
131
|
}
|
|
116
|
-
circle:first-child {
|
|
117
|
-
|
|
132
|
+
circle:first-child {
|
|
133
|
+
animation: ap-loader-60 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite;
|
|
134
|
+
}
|
|
135
|
+
circle:last-child {
|
|
136
|
+
animation: ap-loader-60 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
|
|
137
|
+
}
|
|
118
138
|
}
|
|
119
139
|
}
|
|
120
140
|
|
|
@@ -122,33 +142,68 @@
|
|
|
122
142
|
// 0%: full dashoffset (invisible) → 50%: ~55% mark (arc visible) → 100%: back to full + 630deg rotation
|
|
123
143
|
|
|
124
144
|
@keyframes ap-loader-16 {
|
|
125
|
-
0%
|
|
126
|
-
|
|
127
|
-
|
|
145
|
+
0% {
|
|
146
|
+
stroke-dashoffset: 47;
|
|
147
|
+
}
|
|
148
|
+
50% {
|
|
149
|
+
stroke-dashoffset: 25;
|
|
150
|
+
}
|
|
151
|
+
100% {
|
|
152
|
+
stroke-dashoffset: 47;
|
|
153
|
+
transform: rotate(630deg);
|
|
154
|
+
}
|
|
128
155
|
}
|
|
129
156
|
|
|
130
157
|
@keyframes ap-loader-24 {
|
|
131
|
-
0%
|
|
132
|
-
|
|
133
|
-
|
|
158
|
+
0% {
|
|
159
|
+
stroke-dashoffset: 69;
|
|
160
|
+
}
|
|
161
|
+
50% {
|
|
162
|
+
stroke-dashoffset: 37;
|
|
163
|
+
}
|
|
164
|
+
100% {
|
|
165
|
+
stroke-dashoffset: 69;
|
|
166
|
+
transform: rotate(630deg);
|
|
167
|
+
}
|
|
134
168
|
}
|
|
135
169
|
|
|
136
170
|
@keyframes ap-loader-30 {
|
|
137
|
-
0%
|
|
138
|
-
|
|
139
|
-
|
|
171
|
+
0% {
|
|
172
|
+
stroke-dashoffset: 84;
|
|
173
|
+
}
|
|
174
|
+
50% {
|
|
175
|
+
stroke-dashoffset: 46;
|
|
176
|
+
}
|
|
177
|
+
100% {
|
|
178
|
+
stroke-dashoffset: 84;
|
|
179
|
+
transform: rotate(630deg);
|
|
180
|
+
}
|
|
140
181
|
}
|
|
141
182
|
|
|
142
183
|
@keyframes ap-loader-48 {
|
|
143
|
-
0%
|
|
144
|
-
|
|
145
|
-
|
|
184
|
+
0% {
|
|
185
|
+
stroke-dashoffset: 131;
|
|
186
|
+
}
|
|
187
|
+
50% {
|
|
188
|
+
stroke-dashoffset: 72;
|
|
189
|
+
}
|
|
190
|
+
100% {
|
|
191
|
+
stroke-dashoffset: 131;
|
|
192
|
+
transform: rotate(630deg);
|
|
193
|
+
}
|
|
146
194
|
}
|
|
147
195
|
|
|
148
196
|
@keyframes ap-loader-60 {
|
|
149
|
-
0%
|
|
150
|
-
|
|
151
|
-
|
|
197
|
+
0% {
|
|
198
|
+
stroke-dashoffset: 166;
|
|
199
|
+
}
|
|
200
|
+
50% {
|
|
201
|
+
stroke-dashoffset: 91;
|
|
202
|
+
}
|
|
203
|
+
100% {
|
|
204
|
+
stroke-dashoffset: 166;
|
|
205
|
+
transform: rotate(630deg);
|
|
206
|
+
}
|
|
152
207
|
}
|
|
153
208
|
|
|
154
209
|
// Loader container for centered display
|
|
@@ -48,6 +48,17 @@
|
|
|
48
48
|
justify-content: space-between;
|
|
49
49
|
gap: var(--comp-snackbar-spacing);
|
|
50
50
|
|
|
51
|
+
// Variants — icon is set automatically per variant.
|
|
52
|
+
// Allowed icons: ap-icon-info_fill, ap-icon-warning_fill, ap-icon-error_fill, ap-icon-rounded-check_fill
|
|
53
|
+
&.info {
|
|
54
|
+
background-color: var(--comp-snackbar-info-background-color);
|
|
55
|
+
|
|
56
|
+
.ap-snackbar-left > i {
|
|
57
|
+
color: var(--comp-snackbar-info-icon-color);
|
|
58
|
+
@include icons.icon('info_fill');
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
51
62
|
&.success {
|
|
52
63
|
background-color: var(--comp-snackbar-success-background-color);
|
|
53
64
|
|
|
@@ -57,6 +68,15 @@
|
|
|
57
68
|
}
|
|
58
69
|
}
|
|
59
70
|
|
|
71
|
+
&.warning {
|
|
72
|
+
background-color: var(--comp-snackbar-warning-background-color);
|
|
73
|
+
|
|
74
|
+
.ap-snackbar-left > i {
|
|
75
|
+
color: var(--comp-snackbar-warning-icon-color);
|
|
76
|
+
@include icons.icon('warning_fill');
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
60
80
|
&.error {
|
|
61
81
|
background-color: var(--comp-snackbar-error-background-color);
|
|
62
82
|
|
|
@@ -36,36 +36,48 @@
|
|
|
36
36
|
&.blue {
|
|
37
37
|
background-color: var(--comp-status-blue-background-color);
|
|
38
38
|
|
|
39
|
-
&::before {
|
|
39
|
+
&::before {
|
|
40
|
+
background-color: var(--comp-status-blue-dot-background-color);
|
|
41
|
+
}
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&.green {
|
|
43
45
|
background-color: var(--comp-status-green-background-color);
|
|
44
46
|
|
|
45
|
-
&::before {
|
|
47
|
+
&::before {
|
|
48
|
+
background-color: var(--comp-status-green-dot-background-color);
|
|
49
|
+
}
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
&.orange {
|
|
49
53
|
background-color: var(--comp-status-orange-background-color);
|
|
50
54
|
|
|
51
|
-
&::before {
|
|
55
|
+
&::before {
|
|
56
|
+
background-color: var(--comp-status-orange-dot-background-color);
|
|
57
|
+
}
|
|
52
58
|
}
|
|
53
59
|
|
|
54
60
|
&.tagOrange {
|
|
55
61
|
background-color: var(--comp-status-tag-orange-background-color);
|
|
56
62
|
|
|
57
|
-
&::before {
|
|
63
|
+
&::before {
|
|
64
|
+
background-color: var(--comp-status-tag-orange-dot-background-color);
|
|
65
|
+
}
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
&.grey {
|
|
61
69
|
background-color: var(--comp-status-grey-background-color);
|
|
62
70
|
|
|
63
|
-
&::before {
|
|
71
|
+
&::before {
|
|
72
|
+
background-color: var(--comp-status-grey-dot-background-color);
|
|
73
|
+
}
|
|
64
74
|
}
|
|
65
75
|
|
|
66
76
|
&.red {
|
|
67
77
|
background-color: var(--comp-status-red-background-color);
|
|
68
78
|
|
|
69
|
-
&::before {
|
|
79
|
+
&::before {
|
|
80
|
+
background-color: var(--comp-status-red-dot-background-color);
|
|
81
|
+
}
|
|
70
82
|
}
|
|
71
83
|
}
|
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
&.full-width .ap-tabs-tab {
|
|
10
10
|
flex: 1;
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
// Animated mode — use .ap-tabs-indicator instead of the static ::after underline.
|
|
14
|
+
// Add this class on .ap-tabs and include a <div class="ap-tabs-indicator"> inside .ap-tabs-nav.
|
|
15
|
+
// JS must set `width` and `transform: translateX(…)` on the indicator to match the active tab.
|
|
16
|
+
&.animated .ap-tabs-tab.active::after {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
12
19
|
}
|
|
13
20
|
|
|
14
21
|
// Tabs navigation bar
|
|
@@ -102,7 +102,9 @@
|
|
|
102
102
|
border-color: var(--comp-tag-blue-border-color);
|
|
103
103
|
color: var(--comp-tag-blue-text-color);
|
|
104
104
|
|
|
105
|
-
> button {
|
|
105
|
+
> button {
|
|
106
|
+
color: var(--comp-tag-blue-icon-color);
|
|
107
|
+
}
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
&.grey {
|
|
@@ -110,7 +112,9 @@
|
|
|
110
112
|
border-color: var(--comp-tag-grey-border-color);
|
|
111
113
|
color: var(--comp-tag-grey-text-color);
|
|
112
114
|
|
|
113
|
-
> button {
|
|
115
|
+
> button {
|
|
116
|
+
color: var(--comp-tag-grey-icon-color);
|
|
117
|
+
}
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
&.tagOrange {
|
|
@@ -118,7 +122,9 @@
|
|
|
118
122
|
border-color: var(--comp-tag-tag-orange-border-color);
|
|
119
123
|
color: var(--comp-tag-tag-orange-text-color);
|
|
120
124
|
|
|
121
|
-
> button {
|
|
125
|
+
> button {
|
|
126
|
+
color: var(--comp-tag-tag-orange-icon-color);
|
|
127
|
+
}
|
|
122
128
|
}
|
|
123
129
|
|
|
124
130
|
&.menthol {
|
|
@@ -126,7 +132,9 @@
|
|
|
126
132
|
border-color: var(--comp-tag-menthol-border-color);
|
|
127
133
|
color: var(--comp-tag-menthol-text-color);
|
|
128
134
|
|
|
129
|
-
> button {
|
|
135
|
+
> button {
|
|
136
|
+
color: var(--comp-tag-menthol-icon-color);
|
|
137
|
+
}
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
&.green {
|
|
@@ -134,7 +142,9 @@
|
|
|
134
142
|
border-color: var(--comp-tag-green-border-color);
|
|
135
143
|
color: var(--comp-tag-green-text-color);
|
|
136
144
|
|
|
137
|
-
> button {
|
|
145
|
+
> button {
|
|
146
|
+
color: var(--comp-tag-green-icon-color);
|
|
147
|
+
}
|
|
138
148
|
}
|
|
139
149
|
|
|
140
150
|
&.red {
|
|
@@ -142,7 +152,9 @@
|
|
|
142
152
|
border-color: var(--comp-tag-red-border-color);
|
|
143
153
|
color: var(--comp-tag-red-text-color);
|
|
144
154
|
|
|
145
|
-
> button {
|
|
155
|
+
> button {
|
|
156
|
+
color: var(--comp-tag-red-icon-color);
|
|
157
|
+
}
|
|
146
158
|
}
|
|
147
159
|
}
|
|
148
160
|
|
|
@@ -52,14 +52,10 @@
|
|
|
52
52
|
border-color: var(--comp-input-border-hover-color);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
&:
|
|
55
|
+
&:active:not(:disabled) {
|
|
56
56
|
border-color: var(--comp-input-border-focused-color);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
&:focus-visible {
|
|
60
|
-
@include m.focus-ring;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
59
|
&:disabled {
|
|
64
60
|
background-color: var(--comp-input-fill-disabled-color);
|
|
65
61
|
color: var(--comp-input-text-disabled-color);
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
// Agorapulse Tooltip Styles
|
|
2
2
|
|
|
3
3
|
@keyframes ap-tooltip-fade-in {
|
|
4
|
-
0% {
|
|
5
|
-
|
|
4
|
+
0% {
|
|
5
|
+
opacity: 0;
|
|
6
|
+
}
|
|
7
|
+
100% {
|
|
8
|
+
opacity: 1;
|
|
9
|
+
}
|
|
6
10
|
}
|
|
7
11
|
|
|
8
12
|
.ap-tooltip {
|
|
@@ -19,9 +23,14 @@
|
|
|
19
23
|
animation: ap-tooltip-fade-in var(--ref-animation-short, 0.15s) ease-in-out;
|
|
20
24
|
|
|
21
25
|
// Text styles — gated to CSS-UI position classes to avoid leaking into Angular tooltip
|
|
22
|
-
&.top,
|
|
23
|
-
&.
|
|
24
|
-
&.
|
|
26
|
+
&.top,
|
|
27
|
+
&.top-left,
|
|
28
|
+
&.top-right,
|
|
29
|
+
&.bottom,
|
|
30
|
+
&.bottom-left,
|
|
31
|
+
&.bottom-right,
|
|
32
|
+
&.left,
|
|
33
|
+
&.right {
|
|
25
34
|
padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
|
|
26
35
|
color: var(--comp-tooltip-text-default-color);
|
|
27
36
|
font-family: var(--comp-tooltip-text-style-font-family);
|
|
@@ -117,6 +126,8 @@
|
|
|
117
126
|
color: var(--ref-color-grey-100);
|
|
118
127
|
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
|
|
119
128
|
|
|
120
|
-
&::after {
|
|
129
|
+
&::after {
|
|
130
|
+
background-color: var(--ref-color-white);
|
|
131
|
+
}
|
|
121
132
|
}
|
|
122
133
|
}
|
|
@@ -44,12 +44,24 @@ p {
|
|
|
44
44
|
@include mixins.text-style(subtitle);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
.ap-h1 {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
.ap-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
.ap-h1 {
|
|
48
|
+
@include mixins.text-style(h1);
|
|
49
|
+
}
|
|
50
|
+
.ap-h2 {
|
|
51
|
+
@include mixins.text-style(h2);
|
|
52
|
+
}
|
|
53
|
+
.ap-h3 {
|
|
54
|
+
@include mixins.text-style(h3);
|
|
55
|
+
}
|
|
56
|
+
.ap-h4 {
|
|
57
|
+
@include mixins.text-style(h4);
|
|
58
|
+
}
|
|
59
|
+
.ap-body {
|
|
60
|
+
@include mixins.text-style(body);
|
|
61
|
+
}
|
|
62
|
+
.ap-body-bold {
|
|
63
|
+
@include mixins.text-style(body-bold);
|
|
64
|
+
}
|
|
53
65
|
|
|
54
66
|
p.caption,
|
|
55
67
|
span.caption,
|
|
@@ -59,8 +71,12 @@ span.caption,
|
|
|
59
71
|
line-height: var(--sys-text-style-caption-line-height);
|
|
60
72
|
}
|
|
61
73
|
|
|
62
|
-
.ap-caption-bold {
|
|
63
|
-
|
|
74
|
+
.ap-caption-bold {
|
|
75
|
+
@include mixins.text-style(caption-bold);
|
|
76
|
+
}
|
|
77
|
+
.ap-marketing {
|
|
78
|
+
@include mixins.text-style(marketing);
|
|
79
|
+
}
|
|
64
80
|
|
|
65
81
|
p.large,
|
|
66
82
|
span.large {
|