@axa-fr/design-system-apollo-css 1.0.5-alpha.339 → 1.0.5-alpha.341
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/dist/Form/ItemFile/ItemFileApollo.css +1 -0
- package/dist/Form/ItemFile/ItemFileApollo.css.map +1 -0
- package/dist/Form/ItemFile/ItemFileApollo.scss +32 -0
- package/dist/Form/ItemFile/ItemFileCommon.css +1 -0
- package/dist/Form/ItemFile/ItemFileCommon.css.map +1 -0
- package/dist/Form/ItemFile/ItemFileCommon.scss +75 -0
- package/dist/Form/ItemFile/ItemFileLF.css +1 -0
- package/dist/Form/ItemFile/ItemFileLF.css.map +1 -0
- package/dist/Form/ItemFile/ItemFileLF.scss +38 -0
- package/dist/List/ContentItemDuo/ContentItemDuoApollo.css +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuoApollo.css.map +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuoCommon.css +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuoCommon.css.map +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuoCommon.scss +2 -6
- package/dist/List/ContentItemDuo/ContentItemDuoLF.css +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuoLF.css.map +1 -1
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -0
- package/dist/look-and-feel.css +2 -2
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-item-file{--af-item-file-title-font-size:calc(16/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(14/var(--font-size-base)*1rem);display:flex;flex-direction:column;gap:var(--item-file-gap)}.af-item-file__body{align-items:center;border:1px solid var(--item-file-border-color);border-radius:var(--item-file-border-radius);display:grid;font:var(--font-family-base);font-weight:400;gap:0 calc(12/var(--font-size-base)*1rem);grid-template-areas:"icon title actions" "icon subtitle actions";grid-template-columns:auto 1fr auto;justify-content:start;line-height:125%;padding:var(--item-file-body-padding-vertical) var(--item-file-body-padding-horizontal)}.af-item-file .af-icon:first-of-type,.af-item-file__spinner{grid-area:icon}.af-item-file__title{color:var(--item-file-title-color);font-size:var(--af-item-file-title-font-size);grid-area:title;margin:0;padding:0}.af-item-file__subtitle{color:var(--item-file-subtitle-color);font-size:var(--af-item-file-subtitle-font-size);grid-area:subtitle;margin:0;padding:0}.af-item-file .af-icon__error,.af-item-file .af-icon__success{fill:var(--icon-fill)}.af-item-file__spinner div{border-top:2px solid var(--item-file-spinner-color)}.af-item-file__actions{align-items:end;display:flex;gap:var(--item-file-action-buttons-gap);grid-area:actions}@media (width > 1023px){.af-item-file{--af-item-file-title-font-size:calc(18/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-file{--item-file-border-radius:var(--radius-8);--item-file-border-color:var(--axa-blue-100);--item-file-title-color:var(--neutral-100);--item-file-subtitle-color:var(--neutral-80);--icon-fill:var(--green-100);--item-file-bg-color:var(--white);--item-file-gap:calc(8/var(--font-size-base)*1rem);--item-file-body-padding-vertical:calc(16/var(--font-size-base)*1rem);--item-file-body-padding-horizontal:calc(16/var(--font-size-base)*1rem);--item-file-action-buttons-gap:calc(24/var(--font-size-base)*1rem)}.af-item-file--error{--item-file-border-color:var(--axa-red-100)}.af-item-file .af-icon__success{--icon-fill:var(--green-100)}.af-item-file .af-icon__error{--icon-fill:var(--red-alert-100)}.af-item-file__spinner div{--item-file-spinner-color:var(--neutral-100)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemFile/ItemFileCommon.scss","../../../src/Form/ItemFile/ItemFileApollo.scss","../../../src/Form/ItemFile/ItemFileApollo.scss%23sass"],"names":[],"mappings":"AAEA,cACE,kEAAA,CCDF,qEAAA,CDIE,YAAA,CACA,qBAAA,CACA,wBCFF,CDIE,oBAUE,kBAAA,CANA,8CAAA,CACA,4CAAA,CAJA,YAAA,CAYA,4BAAA,CACA,eAAA,CAFA,yCAAA,CANA,gEAAA,CAGA,mCAAA,CAEA,qBAAA,CAIA,gBAAA,CAbA,uFCQJ,CDQE,4DAEE,cCNJ,CDSE,qBAKE,kCAAA,CADA,6CAAA,CADA,eAAA,CAFA,QAAA,CACA,SCJJ,CDUE,wBAKE,qCAAA,CADA,gDAAA,CADA,kBAAA,CAFA,QAAA,CACA,SCLJ,CDgBI,8DACE,qBCXN,CDeE,2BACE,mDCbJ,CDgBE,uBAGE,eAAA,CAFA,YAAA,CAGA,uCAAA,CAFA,iBCZJ,CDiBE,wBApEF,cAqEI,kEAAA,CACA,qECdF,CACF,CCzDA,cACE,yCAAA,CACA,4CAAA,CACA,0CAAA,CACA,4CAAA,CACA,4BAAA,CACA,iCAAA,CACA,kDAAA,CACA,qEAAA,CACA,uEAAA,CACA,kED4DF,CC1DE,qBACE,2CD4DJ,CCxDI,gCACE,4BD0DN,CCvDI,8BACE,gCDyDN,CCrDE,2BACE,4CDuDJ","file":"ItemFileApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-file {\n --af-item-file-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n gap: var(--item-file-gap);\n\n &__body {\n display: grid;\n padding: var(--item-file-body-padding-vertical)\n var(--item-file-body-padding-horizontal);\n border: 1px solid var(--item-file-border-color);\n border-radius: var(--item-file-border-radius);\n grid-template-areas:\n \"icon title actions\"\n \"icon subtitle actions\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n justify-content: start;\n gap: 0 calc(12 / var(--font-size-base) * 1rem);\n font: var(--font-family-base);\n font-weight: 400;\n line-height: 125%;\n }\n\n &__spinner,\n .af-icon:first-of-type {\n grid-area: icon;\n }\n\n &__title {\n margin: 0;\n padding: 0;\n grid-area: title;\n font-size: var(--af-item-file-title-font-size);\n color: var(--item-file-title-color);\n }\n\n &__subtitle {\n margin: 0;\n padding: 0;\n grid-area: subtitle;\n font-size: var(--af-item-file-subtitle-font-size);\n color: var(--item-file-subtitle-color);\n }\n\n .af-icon {\n &__success {\n fill: var(--icon-fill);\n }\n\n &__error {\n fill: var(--icon-fill);\n }\n }\n\n &__spinner div {\n border-top: var(--item-file-spinner-color) 2px solid;\n }\n\n &__actions {\n display: flex;\n grid-area: actions;\n align-items: end;\n gap: var(--item-file-action-buttons-gap);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --af-item-file-title-font-size: calc(18 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"./ItemFileCommon\";\n\n.af-item-file {\n --item-file-border-radius: var(--radius-8);\n --item-file-border-color: var(--axa-blue-100);\n --item-file-title-color: var(--neutral-100);\n --item-file-subtitle-color: var(--neutral-80);\n --icon-fill: var(--green-100);\n --item-file-bg-color: var(--white);\n --item-file-gap: calc(8 / var(--font-size-base) * 1rem);\n --item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);\n --item-file-action-buttons-gap: calc(24 / var(--font-size-base) * 1rem);\n\n &--error {\n --item-file-border-color: var(--axa-red-100);\n }\n\n .af-icon {\n &__success {\n --icon-fill: var(--green-100);\n }\n\n &__error {\n --icon-fill: var(--red-alert-100);\n }\n }\n\n &__spinner div {\n --item-file-spinner-color: var(--neutral-100);\n }\n}\n","@use \"./ItemFileCommon\";\n\n.af-item-file {\n --item-file-border-radius: var(--radius-8);\n --item-file-border-color: var(--axa-blue-100);\n --item-file-title-color: var(--neutral-100);\n --item-file-subtitle-color: var(--neutral-80);\n --icon-fill: var(--green-100);\n --item-file-bg-color: var(--white);\n --item-file-gap: calc(8 / var(--font-size-base) * 1rem);\n --item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);\n --item-file-action-buttons-gap: calc(24 / var(--font-size-base) * 1rem);\n\n &--error {\n --item-file-border-color: var(--axa-red-100);\n }\n\n .af-icon {\n &__success {\n --icon-fill: var(--green-100);\n }\n\n &__error {\n --icon-fill: var(--red-alert-100);\n }\n }\n\n &__spinner div {\n --item-file-spinner-color: var(--neutral-100);\n }\n}\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
@use "./ItemFileCommon";
|
|
2
|
+
|
|
3
|
+
.af-item-file {
|
|
4
|
+
--item-file-border-radius: var(--radius-8);
|
|
5
|
+
--item-file-border-color: var(--axa-blue-100);
|
|
6
|
+
--item-file-title-color: var(--neutral-100);
|
|
7
|
+
--item-file-subtitle-color: var(--neutral-80);
|
|
8
|
+
--icon-fill: var(--green-100);
|
|
9
|
+
--item-file-bg-color: var(--white);
|
|
10
|
+
--item-file-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
11
|
+
--item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);
|
|
12
|
+
--item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);
|
|
13
|
+
--item-file-action-buttons-gap: calc(24 / var(--font-size-base) * 1rem);
|
|
14
|
+
|
|
15
|
+
&--error {
|
|
16
|
+
--item-file-border-color: var(--axa-red-100);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.af-icon {
|
|
20
|
+
&__success {
|
|
21
|
+
--icon-fill: var(--green-100);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__error {
|
|
25
|
+
--icon-fill: var(--red-alert-100);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&__spinner div {
|
|
30
|
+
--item-file-spinner-color: var(--neutral-100);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-item-file{--af-item-file-title-font-size:calc(16/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(14/var(--font-size-base)*1rem);display:flex;flex-direction:column;gap:var(--item-file-gap)}.af-item-file__body{align-items:center;border:1px solid var(--item-file-border-color);border-radius:var(--item-file-border-radius);display:grid;font:var(--font-family-base);font-weight:400;gap:0 calc(12/var(--font-size-base)*1rem);grid-template-areas:"icon title actions" "icon subtitle actions";grid-template-columns:auto 1fr auto;justify-content:start;line-height:125%;padding:var(--item-file-body-padding-vertical) var(--item-file-body-padding-horizontal)}.af-item-file .af-icon:first-of-type,.af-item-file__spinner{grid-area:icon}.af-item-file__title{color:var(--item-file-title-color);font-size:var(--af-item-file-title-font-size);grid-area:title;margin:0;padding:0}.af-item-file__subtitle{color:var(--item-file-subtitle-color);font-size:var(--af-item-file-subtitle-font-size);grid-area:subtitle;margin:0;padding:0}.af-item-file .af-icon__error,.af-item-file .af-icon__success{fill:var(--icon-fill)}.af-item-file__spinner div{border-top:2px solid var(--item-file-spinner-color)}.af-item-file__actions{align-items:end;display:flex;gap:var(--item-file-action-buttons-gap);grid-area:actions}@media (width > 1023px){.af-item-file{--af-item-file-title-font-size:calc(18/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(16/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemFile/ItemFileCommon.scss%23sass","../../../src/Form/ItemFile/ItemFileCommon.scss"],"names":[],"mappings":"AAEA,cACE,kEAAA,CCDF,qEAAA,CDIE,YAAA,CACA,qBAAA,CACA,wBCFF,CDIE,oBAUE,kBAAA,CANA,8CAAA,CACA,4CAAA,CAJA,YAAA,CAYA,4BAAA,CACA,eAAA,CAFA,yCAAA,CANA,gEAAA,CAGA,mCAAA,CAEA,qBAAA,CAIA,gBAAA,CAbA,uFCQJ,CDQE,4DAEE,cCNJ,CDSE,qBAKE,kCAAA,CADA,6CAAA,CADA,eAAA,CAFA,QAAA,CACA,SCJJ,CDUE,wBAKE,qCAAA,CADA,gDAAA,CADA,kBAAA,CAFA,QAAA,CACA,SCLJ,CDgBI,8DACE,qBCXN,CDeE,2BACE,mDCbJ,CDgBE,uBAGE,eAAA,CAFA,YAAA,CAGA,uCAAA,CAFA,iBCZJ,CDiBE,wBApEF,cAqEI,kEAAA,CCdF,qEACA,CACF","file":"ItemFileCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-file {\n --af-item-file-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n gap: var(--item-file-gap);\n\n &__body {\n display: grid;\n padding: var(--item-file-body-padding-vertical)\n var(--item-file-body-padding-horizontal);\n border: 1px solid var(--item-file-border-color);\n border-radius: var(--item-file-border-radius);\n grid-template-areas:\n \"icon title actions\"\n \"icon subtitle actions\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n justify-content: start;\n gap: 0 calc(12 / var(--font-size-base) * 1rem);\n font: var(--font-family-base);\n font-weight: 400;\n line-height: 125%;\n }\n\n &__spinner,\n .af-icon:first-of-type {\n grid-area: icon;\n }\n\n &__title {\n margin: 0;\n padding: 0;\n grid-area: title;\n font-size: var(--af-item-file-title-font-size);\n color: var(--item-file-title-color);\n }\n\n &__subtitle {\n margin: 0;\n padding: 0;\n grid-area: subtitle;\n font-size: var(--af-item-file-subtitle-font-size);\n color: var(--item-file-subtitle-color);\n }\n\n .af-icon {\n &__success {\n fill: var(--icon-fill);\n }\n\n &__error {\n fill: var(--icon-fill);\n }\n }\n\n &__spinner div {\n border-top: var(--item-file-spinner-color) 2px solid;\n }\n\n &__actions {\n display: flex;\n grid-area: actions;\n align-items: end;\n gap: var(--item-file-action-buttons-gap);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --af-item-file-title-font-size: calc(18 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-file {\n --af-item-file-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n gap: var(--item-file-gap);\n\n &__body {\n display: grid;\n padding: var(--item-file-body-padding-vertical)\n var(--item-file-body-padding-horizontal);\n border: 1px solid var(--item-file-border-color);\n border-radius: var(--item-file-border-radius);\n grid-template-areas:\n \"icon title actions\"\n \"icon subtitle actions\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n justify-content: start;\n gap: 0 calc(12 / var(--font-size-base) * 1rem);\n font: var(--font-family-base);\n font-weight: 400;\n line-height: 125%;\n }\n\n &__spinner,\n .af-icon:first-of-type {\n grid-area: icon;\n }\n\n &__title {\n margin: 0;\n padding: 0;\n grid-area: title;\n font-size: var(--af-item-file-title-font-size);\n color: var(--item-file-title-color);\n }\n\n &__subtitle {\n margin: 0;\n padding: 0;\n grid-area: subtitle;\n font-size: var(--af-item-file-subtitle-font-size);\n color: var(--item-file-subtitle-color);\n }\n\n .af-icon {\n &__success {\n fill: var(--icon-fill);\n }\n\n &__error {\n fill: var(--icon-fill);\n }\n }\n\n &__spinner div {\n border-top: var(--item-file-spinner-color) 2px solid;\n }\n\n &__actions {\n display: flex;\n grid-area: actions;\n align-items: end;\n gap: var(--item-file-action-buttons-gap);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --af-item-file-title-font-size: calc(18 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n"]}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
2
|
+
|
|
3
|
+
.af-item-file {
|
|
4
|
+
--af-item-file-title-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
5
|
+
--af-item-file-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);
|
|
6
|
+
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
gap: var(--item-file-gap);
|
|
10
|
+
|
|
11
|
+
&__body {
|
|
12
|
+
display: grid;
|
|
13
|
+
padding: var(--item-file-body-padding-vertical)
|
|
14
|
+
var(--item-file-body-padding-horizontal);
|
|
15
|
+
border: 1px solid var(--item-file-border-color);
|
|
16
|
+
border-radius: var(--item-file-border-radius);
|
|
17
|
+
grid-template-areas:
|
|
18
|
+
"icon title actions"
|
|
19
|
+
"icon subtitle actions";
|
|
20
|
+
grid-template-columns: auto 1fr auto;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: start;
|
|
23
|
+
gap: 0 calc(12 / var(--font-size-base) * 1rem);
|
|
24
|
+
font: var(--font-family-base);
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
line-height: 125%;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&__spinner,
|
|
30
|
+
.af-icon:first-of-type {
|
|
31
|
+
grid-area: icon;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__title {
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
grid-area: title;
|
|
38
|
+
font-size: var(--af-item-file-title-font-size);
|
|
39
|
+
color: var(--item-file-title-color);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__subtitle {
|
|
43
|
+
margin: 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
grid-area: subtitle;
|
|
46
|
+
font-size: var(--af-item-file-subtitle-font-size);
|
|
47
|
+
color: var(--item-file-subtitle-color);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.af-icon {
|
|
51
|
+
&__success {
|
|
52
|
+
fill: var(--icon-fill);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&__error {
|
|
56
|
+
fill: var(--icon-fill);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__spinner div {
|
|
61
|
+
border-top: var(--item-file-spinner-color) 2px solid;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&__actions {
|
|
65
|
+
display: flex;
|
|
66
|
+
grid-area: actions;
|
|
67
|
+
align-items: end;
|
|
68
|
+
gap: var(--item-file-action-buttons-gap);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
72
|
+
--af-item-file-title-font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
73
|
+
--af-item-file-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-item-file{--af-item-file-title-font-size:calc(16/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(14/var(--font-size-base)*1rem);display:flex;flex-direction:column;gap:var(--item-file-gap)}.af-item-file__body{align-items:center;border:1px solid var(--item-file-border-color);border-radius:var(--item-file-border-radius);display:grid;font:var(--font-family-base);font-weight:400;gap:0 calc(12/var(--font-size-base)*1rem);grid-template-areas:"icon title actions" "icon subtitle actions";grid-template-columns:auto 1fr auto;justify-content:start;line-height:125%;padding:var(--item-file-body-padding-vertical) var(--item-file-body-padding-horizontal)}.af-item-file .af-icon:first-of-type,.af-item-file__spinner{grid-area:icon}.af-item-file__title{color:var(--item-file-title-color);font-size:var(--af-item-file-title-font-size);grid-area:title;margin:0;padding:0}.af-item-file__subtitle{color:var(--item-file-subtitle-color);font-size:var(--af-item-file-subtitle-font-size);grid-area:subtitle;margin:0;padding:0}.af-item-file .af-icon__error,.af-item-file .af-icon__success{fill:var(--icon-fill)}.af-item-file__spinner div{border-top:2px solid var(--item-file-spinner-color)}.af-item-file__actions{align-items:end;display:flex;gap:var(--item-file-action-buttons-gap);grid-area:actions}@media (width > 1023px){.af-item-file{--af-item-file-title-font-size:calc(18/var(--font-size-base)*1rem);--af-item-file-subtitle-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-file{--item-file-border-radius:var(--default-border-radius);--item-file-border-color:var(--color-gray-700);--item-file-title-color:var(--color-gray-900);--item-file-subtitle-color:var(--color-gray-700);--icon-fill:var(--green-100);--item-file-gap:calc(16/var(--font-size-base)*1rem);--item-file-body-padding-vertical:calc(16/var(--font-size-base)*1rem);--item-file-body-padding-horizontal:calc(16/var(--font-size-base)*1rem);--item-file-action-buttons-gap:calc(16/var(--font-size-base)*1rem)}.af-item-file--error{--item-file-border-color:var(--color-red-700)}.af-item-file .af-icon__success{--icon-fill:var(--color-green-600)}.af-item-file .af-icon__error{--icon-fill:var(--color-red-700)}.af-item-file__spinner{--item-file-spinner-color:var(--color-gray-700)}@media (width > 1023px){.af-item-file{--item-file-body-padding-horizontal:calc(24/var(--font-size-base)*1rem)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/ItemFile/ItemFileCommon.scss","../../../src/Form/ItemFile/ItemFileLF.scss","../../../src/Form/ItemFile/ItemFileLF.scss%23sass"],"names":[],"mappings":"AAEA,cCDA,kEDEE,CACA,qEAAA,CCDF,YAAA,CDIE,qBAAA,CACA,wBCFF,CDIE,oBAUE,kBAAA,CANA,8CAAA,CACA,4CAAA,CAJA,YAAA,CAYA,4BAAA,CACA,eAAA,CAFA,yCAAA,CANA,gEAAA,CAGA,mCAAA,CAEA,qBAAA,CAIA,gBAAA,CAbA,uFCQJ,CDQE,4DAEE,cCNJ,CDSE,qBAKE,kCAAA,CADA,6CAAA,CADA,eAAA,CAFA,QAAA,CACA,SCJJ,CDUE,wBCJF,qCAAA,CDQI,gDAAA,CADA,kBAAA,CAFA,QAAA,CACA,SCLJ,CDgBI,8DACE,qBCXN,CDeE,2BACE,mDCbJ,CDgBE,uBAGE,eAAA,CAFA,YAAA,CAGA,uCAAA,CAFA,iBCZJ,CDiBE,wBApEF,cAqEI,kEAAA,CACA,qECdF,CACF,CCxDA,cACE,sDAAA,CACA,8CAAA,CACA,6CAAA,CACA,gDAAA,CACA,4BAAA,CACA,mDAAA,CACA,qEAAA,CACA,uEAAA,CACA,kED2DF,CCzDE,qBACE,6CD2DJ,CCvDI,gCACE,kCDyDN,CCtDI,8BACE,gCDwDN,CCpDE,uBACE,+CDsDJ,CCnDE,wBA7BF,cA8BI,uEDwDF,CACF","file":"ItemFileLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-file {\n --af-item-file-title-font-size: calc(16 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n gap: var(--item-file-gap);\n\n &__body {\n display: grid;\n padding: var(--item-file-body-padding-vertical)\n var(--item-file-body-padding-horizontal);\n border: 1px solid var(--item-file-border-color);\n border-radius: var(--item-file-border-radius);\n grid-template-areas:\n \"icon title actions\"\n \"icon subtitle actions\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n justify-content: start;\n gap: 0 calc(12 / var(--font-size-base) * 1rem);\n font: var(--font-family-base);\n font-weight: 400;\n line-height: 125%;\n }\n\n &__spinner,\n .af-icon:first-of-type {\n grid-area: icon;\n }\n\n &__title {\n margin: 0;\n padding: 0;\n grid-area: title;\n font-size: var(--af-item-file-title-font-size);\n color: var(--item-file-title-color);\n }\n\n &__subtitle {\n margin: 0;\n padding: 0;\n grid-area: subtitle;\n font-size: var(--af-item-file-subtitle-font-size);\n color: var(--item-file-subtitle-color);\n }\n\n .af-icon {\n &__success {\n fill: var(--icon-fill);\n }\n\n &__error {\n fill: var(--icon-fill);\n }\n }\n\n &__spinner div {\n border-top: var(--item-file-spinner-color) 2px solid;\n }\n\n &__actions {\n display: flex;\n grid-area: actions;\n align-items: end;\n gap: var(--item-file-action-buttons-gap);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --af-item-file-title-font-size: calc(18 / var(--font-size-base) * 1rem);\n --af-item-file-subtitle-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"./ItemFileCommon\";\n\n.af-item-file {\n --item-file-border-radius: var(--default-border-radius);\n --item-file-border-color: var(--color-gray-700);\n --item-file-title-color: var(--color-gray-900);\n --item-file-subtitle-color: var(--color-gray-700);\n --icon-fill: var(--green-100);\n --item-file-gap: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);\n --item-file-action-buttons-gap: calc(16 / var(--font-size-base) * 1rem);\n\n &--error {\n --item-file-border-color: var(--color-red-700);\n }\n\n .af-icon {\n &__success {\n --icon-fill: var(--color-green-600);\n }\n\n &__error {\n --icon-fill: var(--color-red-700);\n }\n }\n\n &__spinner {\n --item-file-spinner-color: var(--color-gray-700);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-file-body-padding-horizontal: calc(\n 24 / var(--font-size-base) * 1rem\n );\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"./ItemFileCommon\";\n\n.af-item-file {\n --item-file-border-radius: var(--default-border-radius);\n --item-file-border-color: var(--color-gray-700);\n --item-file-title-color: var(--color-gray-900);\n --item-file-subtitle-color: var(--color-gray-700);\n --icon-fill: var(--green-100);\n --item-file-gap: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);\n --item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);\n --item-file-action-buttons-gap: calc(16 / var(--font-size-base) * 1rem);\n\n &--error {\n --item-file-border-color: var(--color-red-700);\n }\n\n .af-icon {\n &__success {\n --icon-fill: var(--color-green-600);\n }\n\n &__error {\n --icon-fill: var(--color-red-700);\n }\n }\n\n &__spinner {\n --item-file-spinner-color: var(--color-gray-700);\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --item-file-body-padding-horizontal: calc(\n 24 / var(--font-size-base) * 1rem\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@use "../../common/breakpoints" as breakpoints;
|
|
2
|
+
@use "./ItemFileCommon";
|
|
3
|
+
|
|
4
|
+
.af-item-file {
|
|
5
|
+
--item-file-border-radius: var(--default-border-radius);
|
|
6
|
+
--item-file-border-color: var(--color-gray-700);
|
|
7
|
+
--item-file-title-color: var(--color-gray-900);
|
|
8
|
+
--item-file-subtitle-color: var(--color-gray-700);
|
|
9
|
+
--icon-fill: var(--green-100);
|
|
10
|
+
--item-file-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
11
|
+
--item-file-body-padding-vertical: calc(16 / var(--font-size-base) * 1rem);
|
|
12
|
+
--item-file-body-padding-horizontal: calc(16 / var(--font-size-base) * 1rem);
|
|
13
|
+
--item-file-action-buttons-gap: calc(16 / var(--font-size-base) * 1rem);
|
|
14
|
+
|
|
15
|
+
&--error {
|
|
16
|
+
--item-file-border-color: var(--color-red-700);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.af-icon {
|
|
20
|
+
&__success {
|
|
21
|
+
--icon-fill: var(--color-green-600);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__error {
|
|
25
|
+
--icon-fill: var(--color-red-700);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&__spinner {
|
|
30
|
+
--item-file-spinner-color: var(--color-gray-700);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (width > #{breakpoints.$breakpoint-md}) {
|
|
34
|
+
--item-file-body-padding-horizontal: calc(
|
|
35
|
+
24 / var(--font-size-base) * 1rem
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large
|
|
1
|
+
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large :not(:has(.af-content-item-duo__button)){row-gap:0}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:calc(4/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(40/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:calc(8/var(--font-size-base)*1rem) calc(12/var(--font-size-base)*1rem);grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:calc(2/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(1/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:calc(6/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;text-align:start}}@media (width >= 1279px){.af-content-item-duo__label{max-width:calc(3680/var(--font-size-base)*1rem)}}.af-content-item-duo__label{--content-duo-label-color:var(--neutral-80)}.af-content-item-duo__value{--content-duo-value-color:var(--neutral-100)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss","../../../src/List/ContentItemDuo/ContentItemDuoApollo.scss","../../../src/List/ContentItemDuo/ContentItemDuoApollo.scss%23sass"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CCJJ,6CAAA,CDMI,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,
|
|
1
|
+
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss","../../../src/List/ContentItemDuo/ContentItemDuoApollo.scss","../../../src/List/ContentItemDuo/ContentItemDuoApollo.scss%23sass"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CCJJ,6CAAA,CDMI,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,CDWI,qEACE,SCTN,CDaM,uDACE,6CCXR,CDcM,gHAEE,6CAAA,CACA,gBCbR,CDgBM,wDACE,gDCdR,CDiBM,wDACE,gBCfR,CDkBM,yDACE,kBChBR,CDqBE,+BAKE,0EAAA,CAJA,iDACE,CAEF,mCCpBJ,CDyBM,0DAEE,cAAA,CADA,6CCtBR,CD0BM,sHAGE,6CAAA,CACA,gBAAA,CAFA,cAAA,CAGA,gBCzBR,CD4BM,2DACE,QC1BR,CD6BM,4DAEE,gBAAA,CADA,aC1BR,CDiCA,wBAIQ,gHAEE,6CAAA,CACA,gBClCR,CDqCM,wDACE,+CCnCR,CDsCM,wDACE,cCpCR,CDuCM,yDAEE,gBAAA,CADA,aCpCR,CD0CE,+BACE,0CCxCJ,CD2CM,sHAEE,6CAAA,CACA,gBAAA,CACA,gBC1CR,CACF,CDgDA,yBACE,4BACE,+CC9CF,CACF,CCjGE,4BACE,2CDmGJ,CChGE,4BACE,4CDkGJ","file":"ContentItemDuoApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-content-item-duo {\n display: grid;\n width: 100%;\n grid-template:\n \"icon label value\"\n \"icon label button\";\n grid-template-columns: auto 1fr 1fr;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__label,\n &__value {\n margin: 0;\n font-family: var(--font-family-base);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n overflow-wrap: break-word;\n }\n\n &__label {\n margin-right: calc(16 / var(--font-size-base) * 1rem);\n grid-area: label;\n font-weight: 400;\n color: var(--content-duo-label-color);\n }\n\n &__value {\n grid-area: value;\n font-weight: 600;\n text-align: end;\n color: var(--content-duo-value-color);\n }\n\n &__button {\n grid-area: button;\n justify-self: end;\n }\n\n &--large {\n :not(:has(.af-content-item-duo__button)) {\n row-gap: 0;\n }\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label,\n &__value {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(40 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: start;\n }\n\n &__button {\n justify-self: start;\n }\n }\n }\n\n &--vertical {\n grid-template:\n \"icon label button\"\n \". value value\";\n grid-template-columns: auto 1fr auto;\n gap: calc(8 / var(--font-size-base) * 1rem)\n calc(12 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(2 / var(--font-size-base) * 1rem);\n margin-right: 0;\n }\n\n &__label,\n &__value {\n margin-right: 0;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n\n &__value {\n margin: 0;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n}\n\n@media (width <= #{breakpoints.$breakpoint-sm}) {\n .af-content-item-duo {\n &--large {\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(1 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: end;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n\n &--vertical {\n row-gap: calc(6 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n }\n }\n }\n}\n\n@media (width >= #{breakpoints.$breakpoint-lg}) {\n .af-content-item-duo__label {\n max-width: calc(3680 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"./ContentItemDuoCommon\";\n\n.af-content-item-duo {\n &__label {\n --content-duo-label-color: var(--neutral-80);\n }\n\n &__value {\n --content-duo-value-color: var(--neutral-100);\n }\n}\n","@use \"./ContentItemDuoCommon\";\n\n.af-content-item-duo {\n &__label {\n --content-duo-label-color: var(--neutral-80);\n }\n\n &__value {\n --content-duo-value-color: var(--neutral-100);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large
|
|
1
|
+
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large :not(:has(.af-content-item-duo__button)){row-gap:0}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:calc(4/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(40/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:calc(8/var(--font-size-base)*1rem) calc(12/var(--font-size-base)*1rem);grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:calc(2/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(1/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:calc(6/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;text-align:start}}@media (width >= 1279px){.af-content-item-duo__label{max-width:calc(3680/var(--font-size-base)*1rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss%23sass","../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CACA,6CAAA,CACA,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,
|
|
1
|
+
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss%23sass","../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CACA,6CAAA,CACA,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,CDWI,qEACE,SCTN,CDaM,uDACE,6CCXR,CDcM,gHAEE,6CAAA,CACA,gBCbR,CDgBM,wDACE,gDCdR,CDiBM,wDACE,gBCfR,CDkBM,yDACE,kBChBR,CDqBE,+BAKE,0EAAA,CAJA,iDACE,CAEF,mCCpBJ,CDyBM,0DAEE,cAAA,CADA,6CCtBR,CD0BM,sHAGE,6CAAA,CACA,gBAAA,CAFA,cAAA,CAGA,gBCzBR,CD4BM,2DACE,QC1BR,CD6BM,4DAEE,gBAAA,CADA,aC1BR,CDiCA,wBAIQ,gHAEE,6CAAA,CACA,gBClCR,CDqCM,wDACE,+CCnCR,CDsCM,wDACE,cCpCR,CDuCM,yDAEE,gBAAA,CADA,aCpCR,CD0CE,+BACE,0CCxCJ,CD2CM,sHAEE,6CAAA,CACA,gBAAA,CACA,gBC1CR,CACF,CDgDA,yBACE,4BACE,+CC9CF,CACF","file":"ContentItemDuoCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-content-item-duo {\n display: grid;\n width: 100%;\n grid-template:\n \"icon label value\"\n \"icon label button\";\n grid-template-columns: auto 1fr 1fr;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__label,\n &__value {\n margin: 0;\n font-family: var(--font-family-base);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n overflow-wrap: break-word;\n }\n\n &__label {\n margin-right: calc(16 / var(--font-size-base) * 1rem);\n grid-area: label;\n font-weight: 400;\n color: var(--content-duo-label-color);\n }\n\n &__value {\n grid-area: value;\n font-weight: 600;\n text-align: end;\n color: var(--content-duo-value-color);\n }\n\n &__button {\n grid-area: button;\n justify-self: end;\n }\n\n &--large {\n :not(:has(.af-content-item-duo__button)) {\n row-gap: 0;\n }\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label,\n &__value {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(40 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: start;\n }\n\n &__button {\n justify-self: start;\n }\n }\n }\n\n &--vertical {\n grid-template:\n \"icon label button\"\n \". value value\";\n grid-template-columns: auto 1fr auto;\n gap: calc(8 / var(--font-size-base) * 1rem)\n calc(12 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(2 / var(--font-size-base) * 1rem);\n margin-right: 0;\n }\n\n &__label,\n &__value {\n margin-right: 0;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n\n &__value {\n margin: 0;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n}\n\n@media (width <= #{breakpoints.$breakpoint-sm}) {\n .af-content-item-duo {\n &--large {\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(1 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: end;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n\n &--vertical {\n row-gap: calc(6 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n }\n }\n }\n}\n\n@media (width >= #{breakpoints.$breakpoint-lg}) {\n .af-content-item-duo__label {\n max-width: calc(3680 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-content-item-duo {\n display: grid;\n width: 100%;\n grid-template:\n \"icon label value\"\n \"icon label button\";\n grid-template-columns: auto 1fr 1fr;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__label,\n &__value {\n margin: 0;\n font-family: var(--font-family-base);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n overflow-wrap: break-word;\n }\n\n &__label {\n margin-right: calc(16 / var(--font-size-base) * 1rem);\n grid-area: label;\n font-weight: 400;\n color: var(--content-duo-label-color);\n }\n\n &__value {\n grid-area: value;\n font-weight: 600;\n text-align: end;\n color: var(--content-duo-value-color);\n }\n\n &__button {\n grid-area: button;\n justify-self: end;\n }\n\n &--large {\n :not(:has(.af-content-item-duo__button)) {\n row-gap: 0;\n }\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label,\n &__value {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(40 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: start;\n }\n\n &__button {\n justify-self: start;\n }\n }\n }\n\n &--vertical {\n grid-template:\n \"icon label button\"\n \". value value\";\n grid-template-columns: auto 1fr auto;\n gap: calc(8 / var(--font-size-base) * 1rem)\n calc(12 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(2 / var(--font-size-base) * 1rem);\n margin-right: 0;\n }\n\n &__label,\n &__value {\n margin-right: 0;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n\n &__value {\n margin: 0;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n}\n\n@media (width <= #{breakpoints.$breakpoint-sm}) {\n .af-content-item-duo {\n &--large {\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(1 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: end;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n\n &--vertical {\n row-gap: calc(6 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n }\n }\n }\n}\n\n@media (width >= #{breakpoints.$breakpoint-lg}) {\n .af-content-item-duo__label {\n max-width: calc(3680 / var(--font-size-base) * 1rem);\n }\n}\n"]}
|
|
@@ -42,8 +42,6 @@
|
|
|
42
42
|
row-gap: 0;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
row-gap: calc(12 / var(--font-size-base) * 1rem);
|
|
46
|
-
|
|
47
45
|
.af-content-item-duo {
|
|
48
46
|
&__icon {
|
|
49
47
|
margin-top: calc(4 / var(--font-size-base) * 1rem);
|
|
@@ -51,7 +49,7 @@
|
|
|
51
49
|
|
|
52
50
|
&__label,
|
|
53
51
|
&__value {
|
|
54
|
-
font-size: calc(
|
|
52
|
+
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
55
53
|
line-height: 125%;
|
|
56
54
|
}
|
|
57
55
|
|
|
@@ -74,7 +72,7 @@
|
|
|
74
72
|
"icon label button"
|
|
75
73
|
". value value";
|
|
76
74
|
grid-template-columns: auto 1fr auto;
|
|
77
|
-
gap: calc(
|
|
75
|
+
gap: calc(8 / var(--font-size-base) * 1rem)
|
|
78
76
|
calc(12 / var(--font-size-base) * 1rem);
|
|
79
77
|
|
|
80
78
|
.af-content-item-duo {
|
|
@@ -106,8 +104,6 @@
|
|
|
106
104
|
@media (width <= #{breakpoints.$breakpoint-sm}) {
|
|
107
105
|
.af-content-item-duo {
|
|
108
106
|
&--large {
|
|
109
|
-
row-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
110
|
-
|
|
111
107
|
.af-content-item-duo {
|
|
112
108
|
&__label,
|
|
113
109
|
&__value {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large
|
|
1
|
+
.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:calc(8/var(--font-size-base)*1rem);width:100%}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--content-duo-label-color);font-weight:400;grid-area:label;margin-right:calc(16/var(--font-size-base)*1rem)}.af-content-item-duo__value{color:var(--content-duo-value-color);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large :not(:has(.af-content-item-duo__button)){row-gap:0}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:calc(4/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(40/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:calc(8/var(--font-size-base)*1rem) calc(12/var(--font-size-base)*1rem);grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:calc(2/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(18/var(--font-size-base)*1rem);line-height:125%;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%}.af-content-item-duo--large .af-content-item-duo__label{margin-right:calc(1/var(--font-size-base)*1rem)}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:calc(6/var(--font-size-base)*1rem)}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:calc(16/var(--font-size-base)*1rem);line-height:125%;text-align:start}}@media (width >= 1279px){.af-content-item-duo__label{max-width:calc(3680/var(--font-size-base)*1rem)}}.af-content-item-duo__label{--content-duo-label-color:var(--color-gray-700)}.af-content-item-duo__value{--content-duo-value-color:var(--color-gray-900)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss","../../../src/List/ContentItemDuo/ContentItemDuoLF.scss","../../../src/List/ContentItemDuo/ContentItemDuoLF.scss%23sass"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CCJJ,6CAAA,CDMI,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,
|
|
1
|
+
{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuoCommon.scss","../../../src/List/ContentItemDuo/ContentItemDuoLF.scss","../../../src/List/ContentItemDuo/ContentItemDuoLF.scss%23sass"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,0CAAA,CCPF,UAIA,CDKE,wDAGE,mCAAA,CCJJ,6CAAA,CDMI,gBAAA,CAHA,QAAA,CAIA,wBCJJ,CDOE,4BAIE,oCAAA,CADA,eAAA,CADA,eAAA,CADA,gDCFJ,CDQE,4BAIE,oCAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCLJ,CDSE,6BACE,gBAAA,CACA,gBCPJ,CDWI,qEACE,SCTN,CDaM,uDACE,6CCXR,CDcM,gHAEE,6CAAA,CACA,gBCbR,CDgBM,wDACE,gDCdR,CDiBM,wDACE,gBCfR,CDkBM,yDACE,kBChBR,CDqBE,+BAKE,0EAAA,CAJA,iDACE,CAEF,mCCpBJ,CDyBM,0DAEE,cAAA,CADA,6CCtBR,CD0BM,sHAGE,6CAAA,CACA,gBAAA,CAFA,cAAA,CAGA,gBCzBR,CD4BM,2DACE,QC1BR,CD6BM,4DAEE,gBAAA,CADA,aC1BR,CDiCA,wBAIQ,gHAEE,6CAAA,CACA,gBClCR,CDqCM,wDACE,+CCnCR,CDsCM,wDACE,cCpCR,CDuCM,yDAEE,gBAAA,CADA,aCpCR,CD0CE,+BACE,0CCxCJ,CD2CM,sHAEE,6CAAA,CACA,gBAAA,CACA,gBC1CR,CACF,CDgDA,yBACE,4BACE,+CC9CF,CACF,CCjGE,4BACE,+CDmGJ,CChGE,4BACE,+CDkGJ","file":"ContentItemDuoLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-content-item-duo {\n display: grid;\n width: 100%;\n grid-template:\n \"icon label value\"\n \"icon label button\";\n grid-template-columns: auto 1fr 1fr;\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &__label,\n &__value {\n margin: 0;\n font-family: var(--font-family-base);\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n overflow-wrap: break-word;\n }\n\n &__label {\n margin-right: calc(16 / var(--font-size-base) * 1rem);\n grid-area: label;\n font-weight: 400;\n color: var(--content-duo-label-color);\n }\n\n &__value {\n grid-area: value;\n font-weight: 600;\n text-align: end;\n color: var(--content-duo-value-color);\n }\n\n &__button {\n grid-area: button;\n justify-self: end;\n }\n\n &--large {\n :not(:has(.af-content-item-duo__button)) {\n row-gap: 0;\n }\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label,\n &__value {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(40 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: start;\n }\n\n &__button {\n justify-self: start;\n }\n }\n }\n\n &--vertical {\n grid-template:\n \"icon label button\"\n \". value value\";\n grid-template-columns: auto 1fr auto;\n gap: calc(8 / var(--font-size-base) * 1rem)\n calc(12 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__icon {\n margin-top: calc(2 / var(--font-size-base) * 1rem);\n margin-right: 0;\n }\n\n &__label,\n &__value {\n margin-right: 0;\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n\n &__value {\n margin: 0;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n}\n\n@media (width <= #{breakpoints.$breakpoint-sm}) {\n .af-content-item-duo {\n &--large {\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n }\n\n &__label {\n margin-right: calc(1 / var(--font-size-base) * 1rem);\n }\n\n &__value {\n text-align: end;\n }\n\n &__button {\n margin-left: 0;\n justify-self: end;\n }\n }\n }\n\n &--vertical {\n row-gap: calc(6 / var(--font-size-base) * 1rem);\n\n .af-content-item-duo {\n &__label,\n &__value {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n line-height: 125%;\n text-align: start;\n }\n }\n }\n }\n}\n\n@media (width >= #{breakpoints.$breakpoint-lg}) {\n .af-content-item-duo__label {\n max-width: calc(3680 / var(--font-size-base) * 1rem);\n }\n}\n","@use \"./ContentItemDuoCommon\";\n\n.af-content-item-duo {\n &__label {\n --content-duo-label-color: var(--color-gray-700);\n }\n\n &__value {\n --content-duo-value-color: var(--color-gray-900);\n }\n}\n","@use \"./ContentItemDuoCommon\";\n\n.af-content-item-duo {\n &__label {\n --content-duo-label-color: var(--color-gray-700);\n }\n\n &__value {\n --content-duo-value-color: var(--color-gray-900);\n }\n}\n"]}
|