@agorapulse/ui-theme 20.2.0-6 → 20.2.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/agorapulse-ui-theme-20.2.0.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 +11 -7
- package/assets/style/css-ui/_card.scss +12 -12
- package/assets/style/css-ui/_checkbox.scss +33 -10
- 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 -5
- package/assets/style/css-ui/_list-panel.scss +48 -47
- package/assets/style/css-ui/_loader.scss +80 -30
- package/assets/style/css-ui/_radio.scss +0 -5
- 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 -5
- package/assets/style/css-ui/_tooltip.scss +17 -6
- package/assets/style/css-ui/_typography.scss +24 -8
- package/assets/style/css-ui/index.css +5 -37
- package/assets/style/css-ui/index.css.map +1 -1
- package/package.json +34 -34
- package/agorapulse-ui-theme-1.0.0-SNAPSHOT.tgz +0 -0
- package/assets/style/theme.css +0 -6173
- package/assets/style/theme.css.map +0 -1
|
@@ -1,72 +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
|
-
|
|
44
|
+
.ap-list-panel-item-name {
|
|
45
|
+
color: var(--ref-color-electric-blue-150);
|
|
46
|
+
font-weight: var(--ref-font-weight-bold);
|
|
47
|
+
}
|
|
46
48
|
}
|
|
47
|
-
}
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
.ap-list-panel-item-text {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 2px;
|
|
55
|
+
flex: 1;
|
|
56
|
+
min-width: 0;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
.ap-list-panel-item-name {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
white-space: nowrap;
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
&:has(+ .ap-list-panel-item-subtitle) {
|
|
65
|
+
font-weight: var(--ref-font-weight-bold);
|
|
66
|
+
}
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
.ap-list-panel-item-subtitle {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
font-size: var(--ref-font-size-xs);
|
|
71
|
+
line-height: var(--ref-font-line-height-xs);
|
|
72
|
+
color: var(--ref-color-grey-80);
|
|
72
73
|
}
|
|
@@ -46,11 +46,6 @@
|
|
|
46
46
|
--_color: var(--ref-color-orange-100);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
&.white {
|
|
50
|
-
--_track: rgba(255, 255, 255, 0.4);
|
|
51
|
-
--_color: #ffffff;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
49
|
&.grey {
|
|
55
50
|
--_track: var(--ref-color-grey-20);
|
|
56
51
|
--_color: var(--ref-color-grey-80);
|
|
@@ -66,8 +61,12 @@
|
|
|
66
61
|
stroke-dasharray: 40;
|
|
67
62
|
stroke-dashoffset: 47;
|
|
68
63
|
}
|
|
69
|
-
circle:first-child {
|
|
70
|
-
|
|
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
|
+
}
|
|
71
70
|
}
|
|
72
71
|
|
|
73
72
|
&.size-24 {
|
|
@@ -79,8 +78,12 @@
|
|
|
79
78
|
stroke-dasharray: 62;
|
|
80
79
|
stroke-dashoffset: 69;
|
|
81
80
|
}
|
|
82
|
-
circle:first-child {
|
|
83
|
-
|
|
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
|
+
}
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
&.size-30 {
|
|
@@ -92,8 +95,12 @@
|
|
|
92
95
|
stroke-dasharray: 78;
|
|
93
96
|
stroke-dashoffset: 84;
|
|
94
97
|
}
|
|
95
|
-
circle:first-child {
|
|
96
|
-
|
|
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
|
+
}
|
|
97
104
|
}
|
|
98
105
|
|
|
99
106
|
&.size-48 {
|
|
@@ -105,8 +112,12 @@
|
|
|
105
112
|
stroke-dasharray: 128;
|
|
106
113
|
stroke-dashoffset: 131;
|
|
107
114
|
}
|
|
108
|
-
circle:first-child {
|
|
109
|
-
|
|
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
|
+
}
|
|
110
121
|
}
|
|
111
122
|
|
|
112
123
|
&.size-60 {
|
|
@@ -118,8 +129,12 @@
|
|
|
118
129
|
stroke-dasharray: 163;
|
|
119
130
|
stroke-dashoffset: 166;
|
|
120
131
|
}
|
|
121
|
-
circle:first-child {
|
|
122
|
-
|
|
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
|
+
}
|
|
123
138
|
}
|
|
124
139
|
}
|
|
125
140
|
|
|
@@ -127,33 +142,68 @@
|
|
|
127
142
|
// 0%: full dashoffset (invisible) → 50%: ~55% mark (arc visible) → 100%: back to full + 630deg rotation
|
|
128
143
|
|
|
129
144
|
@keyframes ap-loader-16 {
|
|
130
|
-
0%
|
|
131
|
-
|
|
132
|
-
|
|
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
|
+
}
|
|
133
155
|
}
|
|
134
156
|
|
|
135
157
|
@keyframes ap-loader-24 {
|
|
136
|
-
0%
|
|
137
|
-
|
|
138
|
-
|
|
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
|
+
}
|
|
139
168
|
}
|
|
140
169
|
|
|
141
170
|
@keyframes ap-loader-30 {
|
|
142
|
-
0%
|
|
143
|
-
|
|
144
|
-
|
|
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
|
+
}
|
|
145
181
|
}
|
|
146
182
|
|
|
147
183
|
@keyframes ap-loader-48 {
|
|
148
|
-
0%
|
|
149
|
-
|
|
150
|
-
|
|
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
|
+
}
|
|
151
194
|
}
|
|
152
195
|
|
|
153
196
|
@keyframes ap-loader-60 {
|
|
154
|
-
0%
|
|
155
|
-
|
|
156
|
-
|
|
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
|
+
}
|
|
157
207
|
}
|
|
158
208
|
|
|
159
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 {
|