@axa-fr/design-system-slash-css 0.2.0-beta.282 → 0.2.0-beta.284

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.
Files changed (45) hide show
  1. package/dist/Alert/Alert.client.css.map +1 -1
  2. package/dist/Alert/Alert.client.scss +4 -4
  3. package/dist/Button/Button.client.css.map +1 -1
  4. package/dist/Button/Button.client.scss +2 -2
  5. package/dist/Card/Card.client.css.map +1 -1
  6. package/dist/Form/Checkbox/Client/Checkbox.css.map +1 -1
  7. package/dist/Form/Checkbox/Client/Checkbox.scss +6 -6
  8. package/dist/Form/FileUpload/Client/FileUpload.client.css.map +1 -1
  9. package/dist/Form/FileUpload/Client/FileUpload.client.scss +5 -5
  10. package/dist/Form/InputError/InputError.client.css.map +1 -1
  11. package/dist/Form/InputError/InputError.client.scss +3 -3
  12. package/dist/Form/Radio/Client/Radio.css.map +1 -1
  13. package/dist/Form/Radio/Client/Radio.scss +6 -6
  14. package/dist/Form/Select/Client/Select.client.css.map +1 -1
  15. package/dist/Form/Select/Client/Select.client.scss +4 -4
  16. package/dist/Form/Text/Client/Text.client.css.map +1 -1
  17. package/dist/Form/Text/Client/Text.client.scss +1 -1
  18. package/dist/Layout/Footer/Footer.client.css.map +1 -1
  19. package/dist/Layout/Header/Client/Header.client.css.map +1 -1
  20. package/dist/Layout/Header/Client/NavBar/NavBar.css.map +1 -1
  21. package/dist/Link/Link.client.css.map +1 -1
  22. package/dist/List/ClickList/ClickList.client.css.map +1 -1
  23. package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -0
  24. package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -0
  25. package/dist/List/ContentItemDuo/ContentItemDuo.scss +168 -0
  26. package/dist/List/ContentItemMono/ContentItemMono.css +1 -0
  27. package/dist/List/ContentItemMono/ContentItemMono.css.map +1 -0
  28. package/dist/List/ContentItemMono/ContentItemMono.scss +188 -0
  29. package/dist/List/ContentTabList/ContentTabList.client.css +1 -1
  30. package/dist/List/ContentTabList/ContentTabList.client.css.map +1 -1
  31. package/dist/List/ContentTabList/ContentTabList.client.scss +51 -58
  32. package/dist/List/List.css +1 -1
  33. package/dist/List/List.css.map +1 -1
  34. package/dist/List/List.scss +36 -10
  35. package/dist/Modal/Modal.client.css.map +1 -1
  36. package/dist/Stepper/Stepper.client.css.map +1 -1
  37. package/dist/Tabs/Tabs.client.css.map +1 -1
  38. package/dist/Tag/Tag.client.css.map +1 -1
  39. package/dist/Tag/Tag.client.scss +2 -2
  40. package/dist/Title/Client/Title.css.map +1 -1
  41. package/dist/client.css +1 -1
  42. package/dist/client.css.map +1 -1
  43. package/dist/client.scss +2 -0
  44. package/dist/common/common.client.scss +1 -1
  45. package/package.json +1 -1
package/dist/List/ContentItemDuo/ContentItemDuo.scss ADDED
@@ -0,0 +1,168 @@
1
+ @use "../../common/common.client.scss" as common;
2
+
3
+ .af-content-item-duo {
4
+ display: grid;
5
+ width: 100%;
6
+ grid-template:
7
+ "icon label value"
8
+ "icon label button";
9
+ grid-template-columns: auto 1fr 1fr;
10
+ row-gap: 0.5rem;
11
+
12
+ &__icon {
13
+ margin-top: 0.125rem;
14
+ margin-right: 0.75rem;
15
+ grid-area: icon;
16
+
17
+ svg {
18
+ width: 1.5rem;
19
+ height: 1.5rem;
20
+ }
21
+
22
+ &--done {
23
+ svg {
24
+ fill: common.$color-axa;
25
+ }
26
+ }
27
+
28
+ &--close {
29
+ svg {
30
+ fill: common.$color-red-700;
31
+ }
32
+ }
33
+ }
34
+
35
+ &__label,
36
+ &__value {
37
+ margin: 0;
38
+ font-family: common.$font-family-base;
39
+ font-size: 1rem;
40
+ line-height: 1.25rem;
41
+ overflow-wrap: break-word;
42
+ }
43
+
44
+ &__label {
45
+ margin-right: 1rem;
46
+ grid-area: label;
47
+ font-weight: 400;
48
+ color: common.$color-gray-700;
49
+ }
50
+
51
+ &__value {
52
+ grid-area: value;
53
+ font-weight: 600;
54
+ text-align: end;
55
+ color: common.$color-gray-900;
56
+ }
57
+
58
+ &__button {
59
+ grid-area: button;
60
+ justify-self: end;
61
+ }
62
+
63
+ &--large {
64
+ row-gap: 0.75rem;
65
+
66
+ .af-content-item-duo {
67
+ &__icon {
68
+ margin-top: 0.25rem;
69
+ }
70
+
71
+ &__label,
72
+ &__value {
73
+ font-size: 1.125rem;
74
+ line-height: 1.4rem;
75
+ }
76
+
77
+ &__label {
78
+ margin-right: 2.5rem;
79
+ }
80
+
81
+ &__value {
82
+ text-align: start;
83
+ }
84
+
85
+ &__button {
86
+ justify-self: start;
87
+ }
88
+ }
89
+ }
90
+
91
+ &--vertical {
92
+ grid-template:
93
+ "icon label button"
94
+ ". value value";
95
+ grid-template-columns: auto 1fr auto;
96
+ gap: 0.375rem 0.75rem;
97
+
98
+ .af-content-item-duo {
99
+ &__icon {
100
+ margin-top: 0.125rem;
101
+ margin-right: 0;
102
+ }
103
+
104
+ &__label,
105
+ &__value {
106
+ margin-right: 0;
107
+ font-size: 1.125rem;
108
+ line-height: 1.4rem;
109
+ text-align: start;
110
+ }
111
+
112
+ &__value {
113
+ margin: 0;
114
+ }
115
+
116
+ &__button {
117
+ margin-left: 0;
118
+ justify-self: end;
119
+ }
120
+ }
121
+ }
122
+ }
123
+
124
+ @media (width <= #{common.$breakpoint-sm}) {
125
+ .af-content-item-duo {
126
+ &--large {
127
+ row-gap: 0.5rem;
128
+
129
+ .af-content-item-duo {
130
+ &__icon {
131
+ margin-top: 0.125rem;
132
+ }
133
+
134
+ &__label,
135
+ &__value {
136
+ font-size: 1rem;
137
+ line-height: 1.25rem;
138
+ }
139
+
140
+ &__label {
141
+ margin-right: 1rem;
142
+ }
143
+
144
+ &__value {
145
+ text-align: end;
146
+ }
147
+
148
+ &__button {
149
+ margin-left: 0;
150
+ justify-self: end;
151
+ }
152
+ }
153
+ }
154
+
155
+ &--vertical {
156
+ row-gap: 0.375rem;
157
+
158
+ .af-content-item-duo {
159
+ &__label,
160
+ &__value {
161
+ font-size: 1rem;
162
+ line-height: 1.25rem;
163
+ text-align: start;
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
package/dist/List/ContentItemMono/ContentItemMono.css ADDED
@@ -0,0 +1 @@
1
+ .af-content-item-mono{display:flex;gap:.75rem}.af-content-item-mono__stick{background-color:#00008f;border-radius:.125rem;width:.25rem}.af-content-item-mono__left-container svg{height:1.5rem;width:1.5rem;fill:#00008f}.af-content-item-mono__left-container--center{align-items:center;display:flex}.af-content-item-mono--disabled .af-content-item-mono__stick{background-color:#333}.af-content-item-mono--disabled .af-content-item-mono__left-container svg{fill:#333}.af-content-item-mono__text-container{display:grid;gap:.125rem}.af-content-item-mono__text-container p{margin:0}.af-content-item-mono__text-container .af-content-item-mono__main-text{color:#333}.af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-family:Source Sans Pro,arial,sans-serif;font-weight:400}.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__main-text{font-family:Publico Headline;font-size:1.5rem;font-weight:700;line-height:1.875rem}.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__secondary-text{color:#5f5f5f;font-size:1.125rem;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__main-text{font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-size:1.125rem;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__tertiary-text{color:#5f5f5f;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25rem}.af-content-item-mono--m .af-content-item-mono__text-container:not(:has(.af-content-item-mono__tertiary-text)) .af-content-item-mono__secondary-text{color:#5f5f5f;font-size:1rem;line-height:1.25rem}.af-content-item-mono--m:has(.af-content-item-mono__stick) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1rem;line-height:1.25rem}.af-content-item-mono--m:not(:has(.af-content-item-mono__text-container .af-content-item-mono__secondary-text)):has(.af-content-item-mono__text-container .af-content-item-mono__tertiary-text) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1rem;font-weight:400;line-height:1.25rem}@media (width <= 667px){.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1.25rem;line-height:1.56rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__main-text,.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__secondary-text,.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-size:1rem;line-height:1.25rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__tertiary-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m .af-content-item-mono__text-container:not(:has(.af-content-item-mono__tertiary-text)) .af-content-item-mono__secondary-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m:has(.af-content-item-mono__stick) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m:not(:has(.af-content-item-mono__text-container .af-content-item-mono__secondary-text)):has(.af-content-item-mono__text-container .af-content-item-mono__tertiary-text) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:.875rem;font-weight:400;line-height:1.1rem}}
package/dist/List/ContentItemMono/ContentItemMono.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/List/ContentItemMono/ContentItemMono.scss%23sass","../../../src/List/ContentItemMono/ContentItemMono.scss","../../../src/common/common.client.scss"],"names":[],"mappings":"AAEA,sBACE,YAAA,CCDF,UACA,CDGE,6BAGE,wBAAA,CADA,qBAAA,CADA,YCCJ,CDKI,0CAEE,aAAA,CADA,YAAA,CAEA,YCHN,CDMI,8CAEE,kBAAA,CADA,YCHN,CDSI,6DACE,qBCPN,CDUI,0EACE,SCRN,CDYE,sCACE,YAAA,CACA,WCVJ,CDYI,wCACE,QCVN,CDaI,uEACE,UCXN,CDcI,4EACE,4CAAA,CACA,eCZN,CDiBI,iGACE,4BAAA,CACA,gBAAA,CACA,eAAA,CACA,oBCfN,CDkBI,sGAGE,aAAA,CAFA,kBAAA,CACA,kBCfN,CDsBM,gGACE,4CAAA,CACA,kBAAA,CACA,eAAA,CACA,kBCpBR,CDuBM,qGACE,kBAAA,CACA,kBCrBR,CDwBM,oGAKE,aAAA,CAJA,4CEnFiB,CFoFjB,cAAA,CACA,eAAA,CACA,mBCrBR,CD0BQ,qJAGE,aAAA,CAFA,cAAA,CACA,mBCvBV,CD8BM,kIACE,cAAA,CACA,mBC5BR,CDyCM,uQACE,cAAA,CACA,eAAA,CACA,mBCvCR,CD6CA,wBAGM,iGACE,iBAAA,CACA,mBC5CN,CD4DM,2SACE,cAAA,CACA,mBClDR,CDqDM,oGACE,iBAAA,CACA,kBCnDR,CDuDQ,qJACE,iBAAA,CACA,kBCrDV,CD2DM,kIACE,iBAAA,CACA,kBCzDR,CDsEM,uQACE,iBAAA,CACA,eAAA,CACA,kBCpER,CACF","file":"ContentItemMono.css","sourcesContent":["@use \"../../common/common.client.scss\" as common;\n\n.af-content-item-mono {\n display: flex;\n gap: 0.75rem;\n\n &__stick {\n width: 0.25rem;\n border-radius: 0.125rem;\n background-color: common.$color-axa;\n }\n\n &__left-container {\n svg {\n width: 1.5rem;\n height: 1.5rem;\n fill: common.$color-axa;\n }\n\n &--center {\n display: flex;\n align-items: center;\n }\n }\n\n &--disabled {\n .af-content-item-mono__stick {\n background-color: common.$color-gray-900;\n }\n\n .af-content-item-mono__left-container svg {\n fill: common.$color-gray-900;\n }\n }\n\n &__text-container {\n display: grid;\n gap: 0.125rem;\n\n p {\n margin: 0;\n }\n\n .af-content-item-mono__main-text {\n color: common.$color-gray-900;\n }\n\n .af-content-item-mono__secondary-text {\n font-family: common.$font-family-base;\n font-weight: 400;\n }\n }\n\n &--xl .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-family: common.$font-family-publico;\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.875rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n }\n\n &--m {\n .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-family: common.$font-family-base;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1.125rem;\n line-height: 1.4rem;\n }\n\n .af-content-item-mono__tertiary-text {\n font-family: common.$font-family-base;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &:not(:has(.af-content-item-mono__tertiary-text)) {\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n }\n }\n\n &:has(.af-content-item-mono__stick) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n\n &:not(\n :has(\n .af-content-item-mono__text-container\n .af-content-item-mono__secondary-text\n )\n ):has(\n .af-content-item-mono__text-container\n .af-content-item-mono__tertiary-text\n ) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-content-item-mono {\n &--xl .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n\n &--m {\n .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n .af-content-item-mono__tertiary-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &:not(:has(.af-content-item-mono__tertiary-text)) {\n .af-content-item-mono__secondary-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n }\n }\n\n &:has(.af-content-item-mono__stick) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n }\n\n &:not(\n :has(\n .af-content-item-mono__text-container\n .af-content-item-mono__secondary-text\n )\n ):has(\n .af-content-item-mono__text-container\n .af-content-item-mono__tertiary-text\n ) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.1rem;\n }\n }\n }\n }\n}\n","@use \"../../common/common.client.scss\" as common;\n\n.af-content-item-mono {\n display: flex;\n gap: 0.75rem;\n\n &__stick {\n width: 0.25rem;\n border-radius: 0.125rem;\n background-color: common.$color-axa;\n }\n\n &__left-container {\n svg {\n width: 1.5rem;\n height: 1.5rem;\n fill: common.$color-axa;\n }\n\n &--center {\n display: flex;\n align-items: center;\n }\n }\n\n &--disabled {\n .af-content-item-mono__stick {\n background-color: common.$color-gray-900;\n }\n\n .af-content-item-mono__left-container svg {\n fill: common.$color-gray-900;\n }\n }\n\n &__text-container {\n display: grid;\n gap: 0.125rem;\n\n p {\n margin: 0;\n }\n\n .af-content-item-mono__main-text {\n color: common.$color-gray-900;\n }\n\n .af-content-item-mono__secondary-text {\n font-family: common.$font-family-base;\n font-weight: 400;\n }\n }\n\n &--xl .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-family: common.$font-family-publico;\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.875rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1.125rem;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n }\n\n &--m {\n .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-family: common.$font-family-base;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1.125rem;\n line-height: 1.4rem;\n }\n\n .af-content-item-mono__tertiary-text {\n font-family: common.$font-family-base;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &:not(:has(.af-content-item-mono__tertiary-text)) {\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n }\n }\n\n &:has(.af-content-item-mono__stick) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n\n &:not(\n :has(\n .af-content-item-mono__text-container\n .af-content-item-mono__secondary-text\n )\n ):has(\n .af-content-item-mono__text-container\n .af-content-item-mono__tertiary-text\n ) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-content-item-mono {\n &--xl .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n\n &--m {\n .af-content-item-mono__text-container {\n .af-content-item-mono__main-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n .af-content-item-mono__secondary-text {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n .af-content-item-mono__tertiary-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &:not(:has(.af-content-item-mono__tertiary-text)) {\n .af-content-item-mono__secondary-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n }\n }\n\n &:has(.af-content-item-mono__stick) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n }\n\n &:not(\n :has(\n .af-content-item-mono__text-container\n .af-content-item-mono__secondary-text\n )\n ):has(\n .af-content-item-mono__text-container\n .af-content-item-mono__tertiary-text\n ) {\n .af-content-item-mono__text-container .af-content-item-mono__main-text {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.1rem;\n }\n }\n }\n }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$component-border-radius: 8px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}
package/dist/List/ContentItemMono/ContentItemMono.scss ADDED
@@ -0,0 +1,188 @@
1
+ @use "../../common/common.client.scss" as common;
2
+
3
+ .af-content-item-mono {
4
+ display: flex;
5
+ gap: 0.75rem;
6
+
7
+ &__stick {
8
+ width: 0.25rem;
9
+ border-radius: 0.125rem;
10
+ background-color: common.$color-axa;
11
+ }
12
+
13
+ &__left-container {
14
+ svg {
15
+ width: 1.5rem;
16
+ height: 1.5rem;
17
+ fill: common.$color-axa;
18
+ }
19
+
20
+ &--center {
21
+ display: flex;
22
+ align-items: center;
23
+ }
24
+ }
25
+
26
+ &--disabled {
27
+ .af-content-item-mono__stick {
28
+ background-color: common.$color-gray-900;
29
+ }
30
+
31
+ .af-content-item-mono__left-container svg {
32
+ fill: common.$color-gray-900;
33
+ }
34
+ }
35
+
36
+ &__text-container {
37
+ display: grid;
38
+ gap: 0.125rem;
39
+
40
+ p {
41
+ margin: 0;
42
+ }
43
+
44
+ .af-content-item-mono__main-text {
45
+ color: common.$color-gray-900;
46
+ }
47
+
48
+ .af-content-item-mono__secondary-text {
49
+ font-family: common.$font-family-base;
50
+ font-weight: 400;
51
+ }
52
+ }
53
+
54
+ &--xl .af-content-item-mono__text-container {
55
+ .af-content-item-mono__main-text {
56
+ font-family: common.$font-family-publico;
57
+ font-size: 1.5rem;
58
+ font-weight: 700;
59
+ line-height: 1.875rem;
60
+ }
61
+
62
+ .af-content-item-mono__secondary-text {
63
+ font-size: 1.125rem;
64
+ line-height: 1.4rem;
65
+ color: common.$color-gray-700;
66
+ }
67
+ }
68
+
69
+ &--m {
70
+ .af-content-item-mono__text-container {
71
+ .af-content-item-mono__main-text {
72
+ font-family: common.$font-family-base;
73
+ font-size: 1.125rem;
74
+ font-weight: 600;
75
+ line-height: 1.4rem;
76
+ }
77
+
78
+ .af-content-item-mono__secondary-text {
79
+ font-size: 1.125rem;
80
+ line-height: 1.4rem;
81
+ }
82
+
83
+ .af-content-item-mono__tertiary-text {
84
+ font-family: common.$font-family-base;
85
+ font-size: 1rem;
86
+ font-weight: 400;
87
+ line-height: 1.25rem;
88
+ color: common.$color-gray-700;
89
+ }
90
+
91
+ &:not(:has(.af-content-item-mono__tertiary-text)) {
92
+ .af-content-item-mono__secondary-text {
93
+ font-size: 1rem;
94
+ line-height: 1.25rem;
95
+ color: common.$color-gray-700;
96
+ }
97
+ }
98
+ }
99
+
100
+ &:has(.af-content-item-mono__stick) {
101
+ .af-content-item-mono__text-container .af-content-item-mono__main-text {
102
+ font-size: 1rem;
103
+ line-height: 1.25rem;
104
+ }
105
+ }
106
+
107
+ &:not(
108
+ :has(
109
+ .af-content-item-mono__text-container
110
+ .af-content-item-mono__secondary-text
111
+ )
112
+ ):has(
113
+ .af-content-item-mono__text-container
114
+ .af-content-item-mono__tertiary-text
115
+ ) {
116
+ .af-content-item-mono__text-container .af-content-item-mono__main-text {
117
+ font-size: 1rem;
118
+ font-weight: 400;
119
+ line-height: 1.25rem;
120
+ }
121
+ }
122
+ }
123
+ }
124
+
125
+ @media (width <= #{common.$breakpoint-sm}) {
126
+ .af-content-item-mono {
127
+ &--xl .af-content-item-mono__text-container {
128
+ .af-content-item-mono__main-text {
129
+ font-size: 1.25rem;
130
+ line-height: 1.56rem;
131
+ }
132
+
133
+ .af-content-item-mono__secondary-text {
134
+ font-size: 1rem;
135
+ line-height: 1.25rem;
136
+ }
137
+ }
138
+
139
+ &--m {
140
+ .af-content-item-mono__text-container {
141
+ .af-content-item-mono__main-text {
142
+ font-size: 1rem;
143
+ line-height: 1.25rem;
144
+ }
145
+
146
+ .af-content-item-mono__secondary-text {
147
+ font-size: 1rem;
148
+ line-height: 1.25rem;
149
+ }
150
+
151
+ .af-content-item-mono__tertiary-text {
152
+ font-size: 0.875rem;
153
+ line-height: 1.1rem;
154
+ }
155
+
156
+ &:not(:has(.af-content-item-mono__tertiary-text)) {
157
+ .af-content-item-mono__secondary-text {
158
+ font-size: 0.875rem;
159
+ line-height: 1.1rem;
160
+ }
161
+ }
162
+ }
163
+
164
+ &:has(.af-content-item-mono__stick) {
165
+ .af-content-item-mono__text-container .af-content-item-mono__main-text {
166
+ font-size: 0.875rem;
167
+ line-height: 1.1rem;
168
+ }
169
+ }
170
+
171
+ &:not(
172
+ :has(
173
+ .af-content-item-mono__text-container
174
+ .af-content-item-mono__secondary-text
175
+ )
176
+ ):has(
177
+ .af-content-item-mono__text-container
178
+ .af-content-item-mono__tertiary-text
179
+ ) {
180
+ .af-content-item-mono__text-container .af-content-item-mono__main-text {
181
+ font-size: 0.875rem;
182
+ font-weight: 400;
183
+ line-height: 1.1rem;
184
+ }
185
+ }
186
+ }
187
+ }
188
+ }
package/dist/List/ContentTabList/ContentTabList.client.css CHANGED
@@ -1 +1 @@
1
- .af-card--content-tab-list{padding:.5rem 1.5rem}.af-card--content-tab-list .af-list{display:flex;flex-direction:column;justify-content:center}.af-card--content-tab-list .af-list__item{align-items:center;display:flex;flex-direction:row;gap:2.5rem;justify-content:space-between}.af-card--content-tab-list .af-list__item span{display:block;margin:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container,.af-card--content-tab-list .af-list__item .af-list-item__left-container,.af-card--content-tab-list .af-list__item .af-list-item__right-container{all:inherit;padding:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{grid-area:content-tab__additional-data-container}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{grid-area:content-tab__tag}.af-card--content-tab-list .af-list__item .af-list-item__label{color:#333;grid-area:content-tab__label}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{color:#5f5f5f;font-size:1rem;font-weight:400;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__date{color:#5f5f5f;font-size:1.125rem;font-weight:600;grid-area:content-tab__date;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item__value{color:#118635;font-size:1.125rem;font-weight:600;justify-self:end;line-height:1.4rem;text-align:right}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0 .625rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container svg{height:1.25rem;width:1.25rem;fill:#00008f}.af-card--content-tab-list .af-list__item:not(:has(.af-list-item__value)) .af-tag{margin:0 1.34rem}@media (width <= 667px){.af-card--content-tab-list{padding:.25rem 1rem}.af-card--content-tab-list .af-list__item{gap:1.5rem;padding:.75rem 0}.af-card--content-tab-list .af-list__item .af-list-item__left-container{align-items:start;display:grid;gap:.25rem;grid-template:"content-tab__additional-data-container" "content-tab__label";justify-content:start}.af-card--content-tab-list .af-list__item .af-list-item__right-container{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{align-items:center;display:block}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container:has(.af-list-item__date):has(.af-tag){display:grid;gap:.75rem;grid-template:"content-tab__tag content-tab__date"}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{margin:0}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{font-size:.875rem;line-height:1.1rem}.af-card--content-tab-list .af-list__item .af-list-item__date,.af-card--content-tab-list .af-list__item .af-list-item__value{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0}.af-card--content-tab-list .af-list__item .af-list-item__button-container button{font-size:0;gap:0;padding:0}.af-card--content-tab-list .af-list__item:has(.af-list-item__value){align-items:start}}
1
+ .af-card--content-tab-list .af-list{display:flex;flex-direction:column;justify-content:center}.af-card--content-tab-list .af-list__item{align-items:center;display:flex;flex-direction:row;gap:2.5rem;justify-content:space-between}.af-card--content-tab-list .af-list__item span{display:block;margin:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container,.af-card--content-tab-list .af-list__item .af-list-item__left-container,.af-card--content-tab-list .af-list__item .af-list-item__right-container{all:inherit;padding:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{grid-area:content-tab__additional-data-container}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{grid-area:content-tab__tag}.af-card--content-tab-list .af-list__item .af-list-item__label{color:#333;grid-area:content-tab__label}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{color:#5f5f5f;font-size:1rem;font-weight:400;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__date{color:#5f5f5f;font-size:1.125rem;font-weight:600;grid-area:content-tab__date;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item__value{color:#118635;font-size:1.125rem;font-weight:600;justify-self:end;line-height:1.4rem;text-align:right}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0 .625rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container svg{height:1.25rem;width:1.25rem;fill:#00008f}.af-card--content-tab-list .af-list__item:not(:has(.af-list-item__value)) .af-tag{margin:0 1.34rem}@media (width <= 667px){.af-card--content-tab-list .af-list__item{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__left-container{align-items:start;display:grid;gap:.25rem;grid-template:"content-tab__additional-data-container" "content-tab__label";justify-content:start}.af-card--content-tab-list .af-list__item .af-list-item__right-container{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{align-items:center;display:block}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container:has(.af-list-item__date):has(.af-tag){display:grid;gap:.75rem;grid-template:"content-tab__tag content-tab__date"}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{margin:0}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{font-size:.875rem;line-height:1.1rem}.af-card--content-tab-list .af-list__item .af-list-item__date,.af-card--content-tab-list .af-list__item .af-list-item__value{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0}.af-card--content-tab-list .af-list__item .af-list-item__button-container button{font-size:0;gap:0;padding:0}.af-card--content-tab-list .af-list__item:has(.af-list-item__value){align-items:start}}
package/dist/List/ContentTabList/ContentTabList.client.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/List/ContentTabList/ContentTabList.client.scss%23sass","../../../src/List/ContentTabList/ContentTabList.client.scss","../../../src/common/common.client.scss"],"names":[],"mappings":"AAEA,2BACE,oBCDF,CDGE,oCACE,YAAA,CACA,qBAAA,CACA,sBCDJ,CDIE,0CAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,UAAA,CADA,6BCDJ,CDII,+CACE,aAAA,CACA,QCFN,CDMM,oOAGE,WAAA,CACA,SCNR,CDSM,mFACE,gDCPR,CDSQ,2FACE,0BCPV,CDWM,+DAEE,UAAA,CADA,4BCRR,CDYM,qEACE,kBAAA,CACA,eAAA,CACA,kBCVR,CDaM,wEAIE,aAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCVR,CDcM,8DAKE,aE7BS,CF0BT,kBAAA,CACA,eAAA,CAFA,2BAAA,CAGA,kBCXR,CDeM,+DAME,aAAA,CAJA,kBAAA,CACA,eAAA,CAFA,gBAAA,CAGA,kBAAA,CACA,gBCZR,CDgBM,0EACE,gBCdR,CDgBQ,8EAEE,cAAA,CADA,aAAA,CAEA,YCdV,CDoBM,kFACE,gBClBR,CDwBA,wBACE,2BACE,mBCrBF,CDuBE,0CAEE,UAAA,CADA,gBCpBJ,CDwBM,wEAKE,iBAAA,CAJA,YAAA,CAMA,UAAA,CALA,2EAAA,CAIA,qBCvBR,CD2BM,yEACE,UCzBR,CD4BM,mFCzBR,kBAAA,CADE,aAEA,CACF,yHACE,YAAA,CD6BU,UAAA,CADA,kDCzBV,CD6BQ,2FACE,QC3BV,CD+BM,qEACE,cAAA,CACA,mBC7BR,CDgCM,wEACE,iBAAA,CACA,kBC9BR,CDsCM,6HACE,cAAA,CACA,mBChCR,CDmCM,0EACE,QCjCR,CDmCQ,iFAGE,WAAA,CADA,KAAA,CADA,SC/BV,CDsCI,oEACE,iBCpCN,CACF","file":"ContentTabList.client.css","sourcesContent":["@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n padding: 0.5rem 1.5rem;\n\n .af-list {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .af-list__item {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 2.5rem;\n\n span {\n display: block;\n margin: 0;\n }\n\n .af-list-item {\n &__left-container,\n &__right-container,\n &__additional-data-container {\n all: inherit;\n padding: 0;\n }\n\n &__additional-data-container {\n grid-area: content-tab__additional-data-container;\n\n .af-tag {\n grid-area: content-tab__tag;\n }\n }\n\n &__label {\n grid-area: content-tab__label;\n color: common.$color-gray-900;\n }\n\n &-label__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n &-label__subtitle {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &__date {\n grid-area: content-tab__date;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n\n &__value {\n justify-self: end;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n text-align: right;\n color: common.$color-green-600;\n }\n\n &__button-container {\n margin: 0 0.625rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n fill: common.$color-axa;\n }\n }\n }\n\n &:not(:has(.af-list-item__value)) {\n .af-tag {\n margin: 0 1.34rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--content-tab-list {\n padding: 0.25rem 1rem;\n\n .af-list__item {\n padding: 0.75rem 0;\n gap: 1.5rem;\n\n .af-list-item {\n &__left-container {\n display: grid;\n grid-template:\n \"content-tab__additional-data-container\"\n \"content-tab__label\";\n align-items: start;\n justify-content: start;\n gap: 0.25rem;\n }\n\n &__right-container {\n gap: 1.5rem;\n }\n\n &__additional-data-container {\n display: block;\n align-items: center;\n\n &:has(.af-list-item__date):has(.af-tag) {\n display: grid;\n grid-template: \"content-tab__tag content-tab__date\";\n gap: 0.75rem;\n }\n\n .af-tag {\n margin: 0;\n }\n }\n\n &-label__title {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &-label__subtitle {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &__date {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__value {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__button-container {\n margin: 0;\n\n button {\n padding: 0;\n gap: 0;\n font-size: 0;\n }\n }\n }\n\n &:has(.af-list-item__value) {\n align-items: start;\n }\n }\n }\n}\n","@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n padding: 0.5rem 1.5rem;\n\n .af-list {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .af-list__item {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 2.5rem;\n\n span {\n display: block;\n margin: 0;\n }\n\n .af-list-item {\n &__left-container,\n &__right-container,\n &__additional-data-container {\n all: inherit;\n padding: 0;\n }\n\n &__additional-data-container {\n grid-area: content-tab__additional-data-container;\n\n .af-tag {\n grid-area: content-tab__tag;\n }\n }\n\n &__label {\n grid-area: content-tab__label;\n color: common.$color-gray-900;\n }\n\n &-label__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n &-label__subtitle {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &__date {\n grid-area: content-tab__date;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n\n &__value {\n justify-self: end;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n text-align: right;\n color: common.$color-green-600;\n }\n\n &__button-container {\n margin: 0 0.625rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n fill: common.$color-axa;\n }\n }\n }\n\n &:not(:has(.af-list-item__value)) {\n .af-tag {\n margin: 0 1.34rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--content-tab-list {\n padding: 0.25rem 1rem;\n\n .af-list__item {\n padding: 0.75rem 0;\n gap: 1.5rem;\n\n .af-list-item {\n &__left-container {\n display: grid;\n grid-template:\n \"content-tab__additional-data-container\"\n \"content-tab__label\";\n align-items: start;\n justify-content: start;\n gap: 0.25rem;\n }\n\n &__right-container {\n gap: 1.5rem;\n }\n\n &__additional-data-container {\n display: block;\n align-items: center;\n\n &:has(.af-list-item__date):has(.af-tag) {\n display: grid;\n grid-template: \"content-tab__tag content-tab__date\";\n gap: 0.75rem;\n }\n\n .af-tag {\n margin: 0;\n }\n }\n\n &-label__title {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &-label__subtitle {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &__date {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__value {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__button-container {\n margin: 0;\n\n button {\n padding: 0;\n gap: 0;\n font-size: 0;\n }\n }\n }\n\n &:has(.af-list-item__value) {\n align-items: start;\n }\n }\n }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error: #c91432 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$component-border-radius: 8px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}
1
+ {"version":3,"sources":["../../../src/List/ContentTabList/ContentTabList.client.scss%23sass","../../../src/List/ContentTabList/ContentTabList.client.scss","../../../src/common/common.client.scss"],"names":[],"mappings":"AAGE,oCACE,YAAA,CCFJ,qBAAA,CDII,sBCFJ,CDKE,0CAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,UAAA,CADA,6BCFJ,CDKI,+CACE,aAAA,CACA,QCHN,CDOM,oOAGE,WAAA,CACA,SCPR,CDUM,mFACE,gDCRR,CDUQ,2FACE,0BCRV,CDYM,+DAEE,UELS,CFIT,4BCTR,CDaM,qEACE,kBAAA,CACA,eAAA,CACA,kBCXR,CDcM,wEAIE,aAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCXR,CDeM,8DAKE,aAAA,CAHA,kBAAA,CACA,eAAA,CAFA,2BAAA,CAGA,kBCZR,CDgBM,+DAME,aElCU,CF8BV,kBAAA,CACA,eAAA,CAFA,gBAAA,CAGA,kBAAA,CACA,gBCbR,CDiBM,0EACE,gBCfR,CDiBQ,8EAEE,cAAA,CADA,aAAA,CAEA,YCfV,CDqBM,kFACE,gBCnBR,CDyBA,wBACE,0CACE,UCtBF,CDyBI,wEAKE,iBAAA,CAJA,YAAA,CAMA,UAAA,CALA,2EACE,CAGF,qBCxBN,CD4BI,yEACE,UC1BN,CD6BI,mFAEE,kBAAA,CADA,aC1BN,CD6BM,yHACE,YAAA,CC1BV,UAAA,CADE,kDAEA,CACF,2FACE,QACA,CDgCI,qEACE,cAAA,CACA,mBC9BN,CDiCI,wEACE,iBAAA,CACA,kBC/BN,CDuCI,6HACE,cAAA,CACA,mBCjCN,CDoCI,0EACE,QClCN,CDoCM,iFAGE,WAAA,CADA,KAAA,CADA,SChCR,CDuCE,oEACE,iBCrCJ,CACF","file":"ContentTabList.client.css","sourcesContent":["@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n .af-list {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .af-list__item {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 2.5rem;\n\n span {\n display: block;\n margin: 0;\n }\n\n .af-list-item {\n &__left-container,\n &__right-container,\n &__additional-data-container {\n all: inherit;\n padding: 0;\n }\n\n &__additional-data-container {\n grid-area: content-tab__additional-data-container;\n\n .af-tag {\n grid-area: content-tab__tag;\n }\n }\n\n &__label {\n grid-area: content-tab__label;\n color: common.$color-gray-900;\n }\n\n &-label__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n &-label__subtitle {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &__date {\n grid-area: content-tab__date;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n\n &__value {\n justify-self: end;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n text-align: right;\n color: common.$color-green-600;\n }\n\n &__button-container {\n margin: 0 0.625rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n fill: common.$color-axa;\n }\n }\n }\n\n &:not(:has(.af-list-item__value)) {\n .af-tag {\n margin: 0 1.34rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--content-tab-list .af-list__item {\n gap: 1.5rem;\n\n .af-list-item {\n &__left-container {\n display: grid;\n grid-template:\n \"content-tab__additional-data-container\"\n \"content-tab__label\";\n align-items: start;\n justify-content: start;\n gap: 0.25rem;\n }\n\n &__right-container {\n gap: 1.5rem;\n }\n\n &__additional-data-container {\n display: block;\n align-items: center;\n\n &:has(.af-list-item__date):has(.af-tag) {\n display: grid;\n grid-template: \"content-tab__tag content-tab__date\";\n gap: 0.75rem;\n }\n\n .af-tag {\n margin: 0;\n }\n }\n\n &-label__title {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &-label__subtitle {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &__date {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__value {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__button-container {\n margin: 0;\n\n button {\n padding: 0;\n gap: 0;\n font-size: 0;\n }\n }\n }\n\n &:has(.af-list-item__value) {\n align-items: start;\n }\n }\n}\n","@use \"../../common/common.client.scss\" as common;\n\n.af-card--content-tab-list {\n .af-list {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .af-list__item {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 2.5rem;\n\n span {\n display: block;\n margin: 0;\n }\n\n .af-list-item {\n &__left-container,\n &__right-container,\n &__additional-data-container {\n all: inherit;\n padding: 0;\n }\n\n &__additional-data-container {\n grid-area: content-tab__additional-data-container;\n\n .af-tag {\n grid-area: content-tab__tag;\n }\n }\n\n &__label {\n grid-area: content-tab__label;\n color: common.$color-gray-900;\n }\n\n &-label__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n }\n\n &-label__subtitle {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n }\n\n &__date {\n grid-area: content-tab__date;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-gray-700;\n }\n\n &__value {\n justify-self: end;\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n text-align: right;\n color: common.$color-green-600;\n }\n\n &__button-container {\n margin: 0 0.625rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n fill: common.$color-axa;\n }\n }\n }\n\n &:not(:has(.af-list-item__value)) {\n .af-tag {\n margin: 0 1.34rem;\n }\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--content-tab-list .af-list__item {\n gap: 1.5rem;\n\n .af-list-item {\n &__left-container {\n display: grid;\n grid-template:\n \"content-tab__additional-data-container\"\n \"content-tab__label\";\n align-items: start;\n justify-content: start;\n gap: 0.25rem;\n }\n\n &__right-container {\n gap: 1.5rem;\n }\n\n &__additional-data-container {\n display: block;\n align-items: center;\n\n &:has(.af-list-item__date):has(.af-tag) {\n display: grid;\n grid-template: \"content-tab__tag content-tab__date\";\n gap: 0.75rem;\n }\n\n .af-tag {\n margin: 0;\n }\n }\n\n &-label__title {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &-label__subtitle {\n font-size: 0.875rem;\n line-height: 1.1rem;\n }\n\n &__date {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__value {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n &__button-container {\n margin: 0;\n\n button {\n padding: 0;\n gap: 0;\n font-size: 0;\n }\n }\n }\n\n &:has(.af-list-item__value) {\n align-items: start;\n }\n }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$component-border-radius: 8px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}
package/dist/List/ContentTabList/ContentTabList.client.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use "../../common/common.client.scss" as common;
2
2
 
3
3
  .af-card--content-tab-list {
4
- padding: 0.5rem 1.5rem;
5
-
6
4
  .af-list {
7
5
  display: flex;
8
6
  flex-direction: column;
@@ -92,77 +90,72 @@
92
90
  }
93
91
 
94
92
  @media (width <= #{common.$breakpoint-sm}) {
95
- .af-card--content-tab-list {
96
- padding: 0.25rem 1rem;
97
-
98
- .af-list__item {
99
- padding: 0.75rem 0;
100
- gap: 1.5rem;
101
-
102
- .af-list-item {
103
- &__left-container {
104
- display: grid;
105
- grid-template:
106
- "content-tab__additional-data-container"
107
- "content-tab__label";
108
- align-items: start;
109
- justify-content: start;
110
- gap: 0.25rem;
111
- }
93
+ .af-card--content-tab-list .af-list__item {
94
+ gap: 1.5rem;
112
95
 
113
- &__right-container {
114
- gap: 1.5rem;
115
- }
96
+ .af-list-item {
97
+ &__left-container {
98
+ display: grid;
99
+ grid-template:
100
+ "content-tab__additional-data-container"
101
+ "content-tab__label";
102
+ align-items: start;
103
+ justify-content: start;
104
+ gap: 0.25rem;
105
+ }
116
106
 
117
- &__additional-data-container {
118
- display: block;
119
- align-items: center;
107
+ &__right-container {
108
+ gap: 1.5rem;
109
+ }
120
110
 
121
- &:has(.af-list-item__date):has(.af-tag) {
122
- display: grid;
123
- grid-template: "content-tab__tag content-tab__date";
124
- gap: 0.75rem;
125
- }
111
+ &__additional-data-container {
112
+ display: block;
113
+ align-items: center;
126
114
 
127
- .af-tag {
128
- margin: 0;
129
- }
115
+ &:has(.af-list-item__date):has(.af-tag) {
116
+ display: grid;
117
+ grid-template: "content-tab__tag content-tab__date";
118
+ gap: 0.75rem;
130
119
  }
131
120
 
132
- &-label__title {
133
- font-size: 1rem;
134
- line-height: 1.25rem;
121
+ .af-tag {
122
+ margin: 0;
135
123
  }
124
+ }
136
125
 
137
- &-label__subtitle {
138
- font-size: 0.875rem;
139
- line-height: 1.1rem;
140
- }
126
+ &-label__title {
127
+ font-size: 1rem;
128
+ line-height: 1.25rem;
129
+ }
141
130
 
142
- &__date {
143
- font-size: 1rem;
144
- line-height: 1.25rem;
145
- }
131
+ &-label__subtitle {
132
+ font-size: 0.875rem;
133
+ line-height: 1.1rem;
134
+ }
146
135
 
147
- &__value {
148
- font-size: 1rem;
149
- line-height: 1.25rem;
150
- }
136
+ &__date {
137
+ font-size: 1rem;
138
+ line-height: 1.25rem;
139
+ }
151
140
 
152
- &__button-container {
153
- margin: 0;
141
+ &__value {
142
+ font-size: 1rem;
143
+ line-height: 1.25rem;
144
+ }
154
145
 
155
- button {
156
- padding: 0;
157
- gap: 0;
158
- font-size: 0;
159
- }
146
+ &__button-container {
147
+ margin: 0;
148
+
149
+ button {
150
+ padding: 0;
151
+ gap: 0;
152
+ font-size: 0;
160
153
  }
161
154
  }
155
+ }
162
156
 
163
- &:has(.af-list-item__value) {
164
- align-items: start;
165
- }
157
+ &:has(.af-list-item__value) {
158
+ align-items: start;
166
159
  }
167
160
  }
168
161
  }
package/dist/List/List.css CHANGED
@@ -1 +1 @@
1
- .af-card--list{box-shadow:none;padding:0 1rem}.af-card--large{width:100%}.af-list{flex-direction:column;list-style-type:none;padding:0}.af-list__item{padding:1rem 0}.af-list__separator{border:1px solid #e9ecf2;margin:0}
1
+ .af-list{flex-direction:column;list-style-type:none;padding:0}.af-list__item{padding:1rem 0}.af-list__separator{border:1px solid #e9ecf2;margin:0}.af-card--list{box-shadow:none;padding:0 1rem}.af-card--large{width:100%}.af-card--extra-padding{padding:.5rem 1.5rem}.af-card--first-separator-full-width{padding:0}.af-card--first-separator-full-width .af-list__item{padding:1rem}.af-card--first-separator-full-width .af-list__separator~.af-list__separator{margin:0 1rem}@media (width <= 667px){.af-card--extra-padding{padding:.25rem 1rem}.af-card--extra-padding .af-list__item{padding:.75rem 0}}
package/dist/List/List.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/List/List.scss%23sass","../../src/List/List.scss"],"names":[],"mappings":"AAGE,eCDF,eAAA,CDEI,cCDJ,CDKE,gBACE,UCHJ,CDOA,SAEE,qBAAA,CCJF,oBAAA,CDGE,SCFF,CDME,eACE,cCJJ,CDOE,oBAEE,wBAAA,CADA,QCJJ","file":"List.css","sourcesContent":["@use \"../common/common.client.scss\" as common;\n\n.af-card {\n &--list {\n padding: 0 1rem;\n box-shadow: none;\n }\n\n &--large {\n width: 100%;\n }\n}\n\n.af-list {\n padding: 0;\n flex-direction: column;\n list-style-type: none;\n\n &__item {\n padding: 1rem 0;\n }\n\n &__separator {\n margin: 0;\n border: 1px solid common.$color-gray-300;\n }\n}\n","@use \"../common/common.client.scss\" as common;\n\n.af-card {\n &--list {\n padding: 0 1rem;\n box-shadow: none;\n }\n\n &--large {\n width: 100%;\n }\n}\n\n.af-list {\n padding: 0;\n flex-direction: column;\n list-style-type: none;\n\n &__item {\n padding: 1rem 0;\n }\n\n &__separator {\n margin: 0;\n border: 1px solid common.$color-gray-300;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../src/List/List.scss%23sass","../../src/List/List.scss"],"names":[],"mappings":"AAEA,SCAA,qBAAA,CDGE,oBAAA,CAFA,SCCF,CDGE,eACE,cCDJ,CDIE,oBAEE,wBAAA,CADA,QCDJ,CDOE,eCHF,eAAA,CDII,cCHJ,CDOE,gBACE,UCLJ,CDQE,wBACE,oBCNJ,CDSE,qCACE,SCPJ,CDSI,oDACE,YCPN,CDUI,6EACE,aCRN,CDaA,wBACE,wBACE,mBCVF,CDYE,uCACE,gBCVJ,CACF","file":"List.css","sourcesContent":["@use \"../common/common.client.scss\" as common;\n\n.af-list {\n padding: 0;\n flex-direction: column;\n list-style-type: none;\n\n &__item {\n padding: 1rem 0;\n }\n\n &__separator {\n margin: 0;\n border: 1px solid common.$color-gray-300;\n }\n}\n\n.af-card {\n &--list {\n padding: 0 1rem;\n box-shadow: none;\n }\n\n &--large {\n width: 100%;\n }\n\n &--extra-padding {\n padding: 0.5rem 1.5rem;\n }\n\n &--first-separator-full-width {\n padding: 0;\n\n .af-list__item {\n padding: 1rem;\n }\n\n .af-list__separator ~ .af-list__separator {\n margin: 0 1rem;\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--extra-padding {\n padding: 0.25rem 1rem;\n\n .af-list__item {\n padding: 0.75rem 0;\n }\n }\n}\n","@use \"../common/common.client.scss\" as common;\n\n.af-list {\n padding: 0;\n flex-direction: column;\n list-style-type: none;\n\n &__item {\n padding: 1rem 0;\n }\n\n &__separator {\n margin: 0;\n border: 1px solid common.$color-gray-300;\n }\n}\n\n.af-card {\n &--list {\n padding: 0 1rem;\n box-shadow: none;\n }\n\n &--large {\n width: 100%;\n }\n\n &--extra-padding {\n padding: 0.5rem 1.5rem;\n }\n\n &--first-separator-full-width {\n padding: 0;\n\n .af-list__item {\n padding: 1rem;\n }\n\n .af-list__separator ~ .af-list__separator {\n margin: 0 1rem;\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n .af-card--extra-padding {\n padding: 0.25rem 1rem;\n\n .af-list__item {\n padding: 0.75rem 0;\n }\n }\n}\n"]}