@axa-fr/design-system-apollo-css 1.0.5-alpha.285 → 1.0.5-alpha.290
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/Divider/DividerLF.css +1 -1
- package/dist/Divider/DividerLF.css.map +1 -1
- package/dist/Divider/DividerLF.scss +1 -1
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css.map +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss +106 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css.map +1 -0
- package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardCommon.scss → CardCheckbox/CardCheckboxCommon.scss} +44 -51
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css.map +1 -0
- package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss +93 -0
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss +14 -28
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxCommon.scss +23 -30
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.css +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox/CheckboxLF.scss +15 -28
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css +1 -1
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css.map +1 -1
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.css +1 -1
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.css.map +1 -1
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss +22 -4
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css +1 -1
- package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css.map +1 -1
- package/dist/Grid/DebugGrid.css +1 -1
- package/dist/Grid/DebugGrid.css.map +1 -1
- package/dist/Grid/DebugGrid.scss +1 -1
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +1 -1
- package/dist/look-and-feel.css +2 -2
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +1 -1
- package/package.json +1 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css.map +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss +0 -104
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css.map +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.css +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.css.map +0 -1
- package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss +0 -92
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss"],"names":[],"mappings":"AAAA,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CAJA,YAAA,CAEA,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAGE,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCAJ,CDKI,8CACE,aCHN","file":"CheckboxCommon.css","sourcesContent":[".af-checkbox {\n position: relative;\n display: flex;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n background-color: var(--checkbox-background-color);\n\n svg {\n position: absolute;\n top: 50%;\n left: 50%;\n display: none;\n transform: translate(-50%, -50%);\n fill: var(--checkbox-check-fill);\n }\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n outline: 1px solid var(--checkbox-outline-color);\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n margin: 0;\n opacity: 0;\n\n &:checked + svg {\n display: block;\n }\n }\n}\n",".af-checkbox {\n position: relative;\n display: flex;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n background-color: var(--checkbox-background-color);\n\n svg {\n position: absolute;\n top: 50%;\n left: 50%;\n display: none;\n transform: translate(-50%, -50%);\n fill: var(--checkbox-check-fill);\n }\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n outline: 1px solid var(--checkbox-outline-color);\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n margin: 0;\n opacity: 0;\n\n &:checked + svg {\n display: block;\n }\n }\n}\n"]}
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
.af-checkbox {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
gap: calc(12 / var(--font-size-base) * 1rem);
|
|
11
|
-
background-color: var(--checkbox-background-color);
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
width: calc(24 / var(--font-size-base) * 1rem);
|
|
5
|
+
height: calc(24 / var(--font-size-base) * 1rem);
|
|
6
|
+
border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color);
|
|
7
|
+
border-radius: var(--checkbox-border-radius);
|
|
8
|
+
align-items: center;
|
|
9
|
+
background-color: var(--checkbox-background-color);
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
svg {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 50%;
|
|
14
|
+
left: 50%;
|
|
15
|
+
display: none;
|
|
16
|
+
transform: translate(-50%, -50%);
|
|
17
|
+
fill: var(--checkbox-check-fill);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:hover,
|
|
21
|
+
&:focus-within,
|
|
22
|
+
&:has(:checked) {
|
|
23
|
+
outline: 1px solid var(--checkbox-outline-color);
|
|
16
24
|
}
|
|
17
25
|
|
|
18
26
|
input[type="checkbox"] {
|
|
@@ -21,24 +29,9 @@
|
|
|
21
29
|
height: calc(24 / var(--font-size-base) * 1rem);
|
|
22
30
|
margin: 0;
|
|
23
31
|
opacity: 0;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
|
|
26
|
-
&:checked {
|
|
27
|
-
~ .af-checkbox__icons {
|
|
28
|
-
box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;
|
|
29
|
-
|
|
30
|
-
& .af-checkbox__checked {
|
|
31
|
-
display: block;
|
|
32
|
-
fill: var(--checkbox-check-fill);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
32
|
|
|
37
|
-
&:
|
|
38
|
-
|
|
39
|
-
border: solid var(--checkbox-border);
|
|
40
|
-
box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;
|
|
41
|
-
}
|
|
33
|
+
&:checked + svg {
|
|
34
|
+
display: block;
|
|
42
35
|
}
|
|
43
36
|
}
|
|
44
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.af-checkbox input[type=checkbox]{height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox input[type=checkbox]:checked+svg{display:block}.af-checkbox{--checkbox-border-radius:calc(4/var(--font-size-base)*1rem);--checkbox-border-color:var(--color-gray-500);--checkbox-outline-color:var(--checkbox-border-color);--checkbox-check-fill:var(--color-white);--checkbox-border-width:2px}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{--checkbox-border-color:var(--color-axa)}.af-checkbox:has(:checked){--checkbox-background-color:var(--color-axa)}.af-checkbox:has([aria-invalid=true]){--checkbox-border-color:var(--color-red-700)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss%23sass"],"names":[],"mappings":"AAAA,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CCJF,YAAA,CDEE,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAGE,0CAAA,CACA,QAAA,CACA,SAAA,CCRJ,iBAAA,CDKI,yCCAJ,CDKI,8CACE,aCHN,CC5BA,aACE,2DAAA,CACA,6CAAA,CACA,qDAAA,CACA,wCAAA,CACA,2BD+BF,CC7BE,wEAGE,wCD6BJ,CC1BE,2BACE,4CD4BJ,CCzBE,sCACE,4CD2BJ","file":"CheckboxLF.css","sourcesContent":[".af-checkbox {\n position: relative;\n display: flex;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: var(--checkbox-border-width, 1px) solid var(--checkbox-border-color);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n background-color: var(--checkbox-background-color);\n\n svg {\n position: absolute;\n top: 50%;\n left: 50%;\n display: none;\n transform: translate(-50%, -50%);\n fill: var(--checkbox-check-fill);\n }\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n outline: 1px solid var(--checkbox-outline-color);\n }\n\n input[type=\"checkbox\"] {\n position: absolute;\n width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n margin: 0;\n opacity: 0;\n\n &:checked + svg {\n display: block;\n }\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n --checkbox-border-color: var(--color-gray-500);\n --checkbox-outline-color: var(--checkbox-border-color);\n --checkbox-check-fill: var(--color-white);\n --checkbox-border-width: 2px;\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n --checkbox-border-color: var(--color-axa);\n }\n\n &:has(:checked) {\n --checkbox-background-color: var(--color-axa);\n }\n\n &:has([aria-invalid=\"true\"]) {\n --checkbox-border-color: var(--color-red-700);\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n --checkbox-border-color: var(--color-gray-500);\n --checkbox-outline-color: var(--checkbox-border-color);\n --checkbox-check-fill: var(--color-white);\n --checkbox-border-width: 2px;\n\n &:hover,\n &:focus-within,\n &:has(:checked) {\n --checkbox-border-color: var(--color-axa);\n }\n\n &:has(:checked) {\n --checkbox-background-color: var(--color-axa);\n }\n\n &:has([aria-invalid=\"true\"]) {\n --checkbox-border-color: var(--color-red-700);\n }\n}\n"]}
|
|
@@ -1,36 +1,23 @@
|
|
|
1
1
|
@use "CheckboxCommon";
|
|
2
2
|
|
|
3
3
|
.af-checkbox {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
input[type="checkbox"] {
|
|
10
|
-
&[aria-invalid="true"] {
|
|
11
|
-
~ .af-checkbox__icons {
|
|
12
|
-
--checkbox-border: 2px var(--color-red-700);
|
|
13
|
-
--checkbox-background-color: var(--color-white);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
4
|
+
--checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);
|
|
5
|
+
--checkbox-border-color: var(--color-gray-500);
|
|
6
|
+
--checkbox-outline-color: var(--checkbox-border-color);
|
|
7
|
+
--checkbox-check-fill: var(--color-white);
|
|
8
|
+
--checkbox-border-width: 2px;
|
|
16
9
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
10
|
+
&:hover,
|
|
11
|
+
&:focus-within,
|
|
12
|
+
&:has(:checked) {
|
|
13
|
+
--checkbox-border-color: var(--color-axa);
|
|
14
|
+
}
|
|
23
15
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
--checkbox-box-shadow-color: var(--color-axa);
|
|
28
|
-
--checkbox-background-color: var(--color-axa);
|
|
16
|
+
&:has(:checked) {
|
|
17
|
+
--checkbox-background-color: var(--color-axa);
|
|
18
|
+
}
|
|
29
19
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
20
|
+
&:has([aria-invalid="true"]) {
|
|
21
|
+
--checkbox-border-color: var(--color-red-700);
|
|
35
22
|
}
|
|
36
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(
|
|
1
|
+
.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon;width:fit-content}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text label{--checkbox-text-label-color:var(--black)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss%23sass"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BAEE,cAAA,CADA,iBCHJ,CDOE,mCACE,iBCLJ,CC7BE,wBACE,wCDgCJ","file":"CheckboxTextApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n display: grid;\n grid-template-areas:\n \"icon label\"\n \"icon message\";\n grid-template-columns: min-content 1fr;\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-message) {\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n label {\n display: flex;\n margin: 0;\n grid-area: label;\n align-items: flex-start;\n gap: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25;\n color: var(--checkbox-text-label-color);\n cursor: pointer;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n .af-checkbox {\n width: fit-content;\n grid-area: icon;\n }\n\n .af-item-message {\n grid-area: message;\n }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n & label {\n --checkbox-text-label-color: var(--black);\n }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n & label {\n --checkbox-text-label-color: var(--black);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(
|
|
1
|
+
.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon;width:fit-content}.af-checkbox-text .af-item-message{grid-area:message}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BAEE,cAAA,CADA,iBCHJ,CDOE,mCACE,iBCLJ","file":"CheckboxTextCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n display: grid;\n grid-template-areas:\n \"icon label\"\n \"icon message\";\n grid-template-columns: min-content 1fr;\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-message) {\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n label {\n display: flex;\n margin: 0;\n grid-area: label;\n align-items: flex-start;\n gap: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25;\n color: var(--checkbox-text-label-color);\n cursor: pointer;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n .af-checkbox {\n width: fit-content;\n grid-area: icon;\n }\n\n .af-item-message {\n grid-area: message;\n }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n display: grid;\n grid-template-areas:\n \"icon label\"\n \"icon message\";\n grid-template-columns: min-content 1fr;\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-message) {\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n label {\n display: flex;\n margin: 0;\n grid-area: label;\n align-items: flex-start;\n gap: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25;\n color: var(--checkbox-text-label-color);\n cursor: pointer;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n .af-checkbox {\n width: fit-content;\n grid-area: icon;\n }\n\n .af-item-message {\n grid-area: message;\n }\n}\n"]}
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
@use "../../../common/breakpoints" as breakpoints;
|
|
2
2
|
|
|
3
3
|
.af-checkbox-text {
|
|
4
|
-
|
|
4
|
+
display: grid;
|
|
5
|
+
grid-template-areas:
|
|
6
|
+
"icon label"
|
|
7
|
+
"icon message";
|
|
8
|
+
grid-template-columns: min-content 1fr;
|
|
9
|
+
column-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
10
|
+
|
|
11
|
+
&:has(> .af-item-message) {
|
|
12
|
+
row-gap: calc(8 / var(--font-size-base) * 1rem);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
label {
|
|
5
16
|
display: flex;
|
|
6
17
|
margin: 0;
|
|
18
|
+
grid-area: label;
|
|
7
19
|
align-items: flex-start;
|
|
8
|
-
gap: calc(
|
|
20
|
+
gap: calc(8 / var(--font-size-base) * 1rem);
|
|
9
21
|
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
10
22
|
font-weight: 400;
|
|
23
|
+
line-height: 1.25;
|
|
11
24
|
color: var(--checkbox-text-label-color);
|
|
12
25
|
cursor: pointer;
|
|
13
26
|
|
|
@@ -16,7 +29,12 @@
|
|
|
16
29
|
}
|
|
17
30
|
}
|
|
18
31
|
|
|
19
|
-
|
|
20
|
-
|
|
32
|
+
.af-checkbox {
|
|
33
|
+
width: fit-content;
|
|
34
|
+
grid-area: icon;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.af-item-message {
|
|
38
|
+
grid-area: message;
|
|
21
39
|
}
|
|
22
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(
|
|
1
|
+
.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon;width:fit-content}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text label{--checkbox-text-label-color:var(--color-black)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss%23sass"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss%23sass"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BAEE,cAAA,CADA,iBCHJ,CDOE,mCACE,iBCLJ,CC7BE,wBACE,8CDgCJ","file":"CheckboxTextLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n display: grid;\n grid-template-areas:\n \"icon label\"\n \"icon message\";\n grid-template-columns: min-content 1fr;\n column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n &:has(> .af-item-message) {\n row-gap: calc(8 / var(--font-size-base) * 1rem);\n }\n\n label {\n display: flex;\n margin: 0;\n grid-area: label;\n align-items: flex-start;\n gap: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: 1.25;\n color: var(--checkbox-text-label-color);\n cursor: pointer;\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n }\n\n .af-checkbox {\n width: fit-content;\n grid-area: icon;\n }\n\n .af-item-message {\n grid-area: message;\n }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n & label {\n --checkbox-text-label-color: var(--color-black);\n }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n & label {\n --checkbox-text-label-color: var(--color-black);\n }\n}\n"]}
|
package/dist/Grid/DebugGrid.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-
|
|
1
|
+
.af-card-checkbox__container:has(label [name=debuggrid]){bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,yDAGE,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAIA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-
|
|
1
|
+
{"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,yDAGE,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAIA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox__container:has(label [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox__container:has(label [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{breakpoints.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n"]}
|