npm - @axa-fr/design-system-apollo-css - Versions diffs - 1.0.5-alpha.249 → 1.0.5-alpha.251 - Mend

@axa-fr/design-system-apollo-css 1.0.5-alpha.249 → 1.0.5-alpha.251

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 (43) hide show

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css ADDED Viewed

@@ -0,0 +1 @@

+ .af-checkbox__icons{align-items:center;border:solid var(--checkbox-border);border-radius:var(--checkbox-border-radius);display:flex;gap:calc(12/var(--font-size-base)*1rem);height:calc(24/var(--font-size-base)*1rem);max-width:calc(24/var(--font-size-base)*1rem);min-width:calc(24/var(--font-size-base)*1rem)}.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox input[type=checkbox][aria-invalid=true]~.af-checkbox__icons{background-color:var(--checkbox-background-color);border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]{cursor:pointer;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~.af-checkbox__icons,.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{background-color:var(--checkbox-background-color)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{display:block;fill:var(--checkbox-check-fill)}.af-checkbox__icons{--checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--checkbox-border:1px var(--axa-blue-65)}.af-checkbox input[type=checkbox][aria-invalid=true]~.af-checkbox__icons{--checkbox-border:1px var(--red-alert-100);--checkbox-box-shadow-color:var(--red-alert-100);--checkbox-background-color:var(--white)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons,.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{--checkbox-border:1px var(--axa-blue-100);--checkbox-box-shadow-color:var(--axa-blue-100)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{--checkbox-background-color:var(--axa-blue-100)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{--checkbox-check-fill:var(--white)}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss%23sass"],"names":[],"mappings":"AACE,oBAOE,kBAAA,CAFA,mCAAA,CACA,2CAAA,CALA,YAAA,CAOA,uCAAA,CAJA,0CAAA,CADA,6CAAA,CCFJ,6CAOA,CDEI,0CACE,YCAN,CDKI,yEAEE,iDAAA,CADA,mCAAA,CAEA,2DCHN,CDOE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCDJ,CDgBI,0HAPI,mCAAA,CACA,2DCDR,CDOI,8DAEE,iDCTN,CDYM,oFACE,aAAA,CACA,+BCVR,CCnCE,oBACE,2DAAA,CACA,wCDsCJ,CClCI,yEACE,0CAAA,CACA,gDAAA,CACA,wCDoCN,CCxBI,0HANE,yCAAA,CACA,+CDsCN,CCjCI,8DAGE,+CD8BN,CC5BM,oFACE,kCD8BR","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\n &__icons {\n display: flex;\n min-width: calc(24 / var(--font-size-base) * 1rem);\n max-width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: solid var(--checkbox-border);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n gap: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox__checked {\n display: none;\n }\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\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 cursor: pointer;\n\n &:hover {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n\n & .af-checkbox__checked {\n display: block;\n fill: var(--checkbox-check-fill);\n }\n }\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n &__icons {\n --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n --checkbox-border: 1px var(--axa-blue-65);\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--red-alert-100);\n --checkbox-box-shadow-color: var(--red-alert-100);\n --checkbox-background-color: var(--white);\n }\n }\n\n input[type=\"checkbox\"]:hover {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--axa-blue-100);\n --checkbox-box-shadow-color: var(--axa-blue-100);\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--axa-blue-100);\n --checkbox-box-shadow-color: var(--axa-blue-100);\n --checkbox-background-color: var(--axa-blue-100);\n\n & .af-checkbox__checked {\n --checkbox-check-fill: var(--white);\n }\n }\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n &__icons {\n --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n --checkbox-border: 1px var(--axa-blue-65);\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--red-alert-100);\n --checkbox-box-shadow-color: var(--red-alert-100);\n --checkbox-background-color: var(--white);\n }\n }\n\n input[type=\"checkbox\"]:hover {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--axa-blue-100);\n --checkbox-box-shadow-color: var(--axa-blue-100);\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n --checkbox-border: 1px var(--axa-blue-100);\n --checkbox-box-shadow-color: var(--axa-blue-100);\n --checkbox-background-color: var(--axa-blue-100);\n\n & .af-checkbox__checked {\n --checkbox-check-fill: var(--white);\n }\n }\n }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss ADDED Viewed

@@ -0,0 +1,35 @@
+@use "CheckboxCommon";
+.af-checkbox {
+  &__icons {
+    --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
+    --checkbox-border: 1px var(--axa-blue-65);
+  }
+  input[type="checkbox"][aria-invalid="true"] {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 1px var(--red-alert-100);
+      --checkbox-box-shadow-color: var(--red-alert-100);
+      --checkbox-background-color: var(--white);
+    }
+  }
+  input[type="checkbox"]:hover {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 1px var(--axa-blue-100);
+      --checkbox-box-shadow-color: var(--axa-blue-100);
+    }
+  }
+  input[type="checkbox"]:checked {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 1px var(--axa-blue-100);
+      --checkbox-box-shadow-color: var(--axa-blue-100);
+      --checkbox-background-color: var(--axa-blue-100);
+      & .af-checkbox__checked {
+        --checkbox-check-fill: var(--white);
+      }
+    }
+  }
+}

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss"],"names":[],"mappings":"AACE,oBAOE,kBAAA,CAFA,mCAAA,CACA,2CAAA,CALA,YAAA,CAOA,uCAAA,CAJA,0CAAA,CADA,6CAAA,CADA,6CCMJ,CDEI,0CACE,YCAN,CDKI,yEAEE,iDAAA,CADA,mCAAA,CAEA,2DCHN,CDOE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCDJ,CDgBI,0HAPI,mCAAA,CACA,2DCDR,CDOI,8DAEE,iDCTN,CDYM,oFACE,aAAA,CACA,+BCVR","file":"CheckboxCommon.css","sourcesContent":[".af-checkbox {\n &__icons {\n display: flex;\n min-width: calc(24 / var(--font-size-base) * 1rem);\n max-width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: solid var(--checkbox-border);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n gap: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox__checked {\n display: none;\n }\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\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 cursor: pointer;\n\n &:hover {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n\n & .af-checkbox__checked {\n display: block;\n fill: var(--checkbox-check-fill);\n }\n }\n }\n}\n",".af-checkbox {\n &__icons {\n display: flex;\n min-width: calc(24 / var(--font-size-base) * 1rem);\n max-width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: solid var(--checkbox-border);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n gap: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox__checked {\n display: none;\n }\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\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 cursor: pointer;\n\n &:hover {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n\n & .af-checkbox__checked {\n display: block;\n fill: var(--checkbox-check-fill);\n }\n }\n }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.scss ADDED Viewed

@@ -0,0 +1,53 @@
+.af-checkbox {
+  &__icons {
+    display: flex;
+    min-width: calc(24 / var(--font-size-base) * 1rem);
+    max-width: calc(24 / var(--font-size-base) * 1rem);
+    height: calc(24 / var(--font-size-base) * 1rem);
+    border: solid var(--checkbox-border);
+    border-radius: var(--checkbox-border-radius);
+    align-items: center;
+    gap: calc(12 / var(--font-size-base) * 1rem);
+    .af-checkbox__checked {
+      display: none;
+    }
+  }
+  input[type="checkbox"][aria-invalid="true"] {
+    ~ .af-checkbox__icons {
+      border: solid var(--checkbox-border);
+      background-color: var(--checkbox-background-color);
+      box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;
+    }
+  }
+  input[type="checkbox"] {
+    position: absolute;
+    width: calc(24 / var(--font-size-base) * 1rem);
+    height: calc(24 / var(--font-size-base) * 1rem);
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    &:hover {
+      ~ .af-checkbox__icons {
+        border: solid var(--checkbox-border);
+        box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;
+      }
+    }
+  }
+  input[type="checkbox"]:checked {
+    ~ .af-checkbox__icons {
+      border: solid var(--checkbox-border);
+      background-color: var(--checkbox-background-color);
+      box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;
+      & .af-checkbox__checked {
+        display: block;
+        fill: var(--checkbox-check-fill);
+      }
+    }
+  }
+}

package/dist/Form/Checkbox/Checkbox/CheckboxLF.css ADDED Viewed

@@ -0,0 +1 @@

+ .af-checkbox__icons{align-items:center;border:solid var(--checkbox-border);border-radius:var(--checkbox-border-radius);display:flex;gap:calc(12/var(--font-size-base)*1rem);height:calc(24/var(--font-size-base)*1rem);max-width:calc(24/var(--font-size-base)*1rem);min-width:calc(24/var(--font-size-base)*1rem)}.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox input[type=checkbox][aria-invalid=true]~.af-checkbox__icons{background-color:var(--checkbox-background-color);border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]{cursor:pointer;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~.af-checkbox__icons,.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{border:solid var(--checkbox-border);box-shadow:0 0 0 1px var(--checkbox-box-shadow-color) inset}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{background-color:var(--checkbox-background-color)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{display:block;fill:var(--checkbox-check-fill)}.af-checkbox__icons{--checkbox-border-radius:calc(4/var(--font-size-base)*1rem);--checkbox-border:2px var(--color-gray-700)}.af-checkbox input[type=checkbox][aria-invalid=true]~.af-checkbox__icons{--checkbox-border:2px var(--color-red-700);--checkbox-box-shadow-color:var(--color-red-700);--checkbox-background-color:var(--color-white)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons,.af-checkbox input[type=checkbox]:hover~.af-checkbox__icons{--checkbox-border:2px var(--color-axa);--checkbox-box-shadow-color:var(--color-axa)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons{--checkbox-background-color:var(--color-axa)}.af-checkbox input[type=checkbox]:checked~.af-checkbox__icons .af-checkbox__checked{--checkbox-check-fill:var(--color-white)}

package/dist/Form/Checkbox/Checkbox/CheckboxLF.css.map ADDED Viewed

@@ -0,0 +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":"AACE,oBAOE,kBAAA,CAFA,mCAAA,CACA,2CAAA,CALA,YAAA,CAOA,uCAAA,CAJA,0CAAA,CADA,6CAAA,CCFJ,6CAOA,CDEI,0CACE,YCAN,CDKI,yEAEE,iDAAA,CADA,mCAAA,CAEA,2DCHN,CDOE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCDJ,CDgBI,0HAPI,mCAAA,CACA,2DCDR,CDOI,8DAEE,iDCTN,CDYM,oFACE,aAAA,CACA,+BCVR,CCnCE,oBACE,2DAAA,CACA,2CDsCJ,CClCI,yEACE,0CAAA,CACA,gDAAA,CACA,8CDoCN,CCxBI,0HANE,sCAAA,CACA,4CDsCN,CCjCI,8DAGE,4CD8BN,CC5BM,oFACE,wCD8BR","file":"CheckboxLF.css","sourcesContent":[".af-checkbox {\n &__icons {\n display: flex;\n min-width: calc(24 / var(--font-size-base) * 1rem);\n max-width: calc(24 / var(--font-size-base) * 1rem);\n height: calc(24 / var(--font-size-base) * 1rem);\n border: solid var(--checkbox-border);\n border-radius: var(--checkbox-border-radius);\n align-items: center;\n gap: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox__checked {\n display: none;\n }\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\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 cursor: pointer;\n\n &:hover {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n }\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n border: solid var(--checkbox-border);\n background-color: var(--checkbox-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-box-shadow-color) inset;\n\n & .af-checkbox__checked {\n display: block;\n fill: var(--checkbox-check-fill);\n }\n }\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n &__icons {\n --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n --checkbox-border: 2px var(--color-gray-700);\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-red-700);\n --checkbox-box-shadow-color: var(--color-red-700);\n --checkbox-background-color: var(--color-white);\n }\n }\n\n input[type=\"checkbox\"]:hover {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-axa);\n --checkbox-box-shadow-color: var(--color-axa);\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-axa);\n --checkbox-box-shadow-color: var(--color-axa);\n --checkbox-background-color: var(--color-axa);\n\n & .af-checkbox__checked {\n --checkbox-check-fill: var(--color-white);\n }\n }\n }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n &__icons {\n --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n --checkbox-border: 2px var(--color-gray-700);\n }\n\n input[type=\"checkbox\"][aria-invalid=\"true\"] {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-red-700);\n --checkbox-box-shadow-color: var(--color-red-700);\n --checkbox-background-color: var(--color-white);\n }\n }\n\n input[type=\"checkbox\"]:hover {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-axa);\n --checkbox-box-shadow-color: var(--color-axa);\n }\n }\n\n input[type=\"checkbox\"]:checked {\n ~ .af-checkbox__icons {\n --checkbox-border: 2px var(--color-axa);\n --checkbox-box-shadow-color: var(--color-axa);\n --checkbox-background-color: var(--color-axa);\n\n & .af-checkbox__checked {\n --checkbox-check-fill: var(--color-white);\n }\n }\n }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxLF.scss ADDED Viewed

@@ -0,0 +1,35 @@
+@use "CheckboxCommon";
+.af-checkbox {
+  &__icons {
+    --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);
+    --checkbox-border: 2px var(--color-gray-700);
+  }
+  input[type="checkbox"][aria-invalid="true"] {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 2px var(--color-red-700);
+      --checkbox-box-shadow-color: var(--color-red-700);
+      --checkbox-background-color: var(--color-white);
+    }
+  }
+  input[type="checkbox"]:hover {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 2px var(--color-axa);
+      --checkbox-box-shadow-color: var(--color-axa);
+    }
+  }
+  input[type="checkbox"]:checked {
+    ~ .af-checkbox__icons {
+      --checkbox-border: 2px var(--color-axa);
+      --checkbox-box-shadow-color: var(--color-axa);
+      --checkbox-background-color: var(--color-axa);
+      & .af-checkbox__checked {
+        --checkbox-check-fill: var(--color-white);
+      }
+    }
+  }
+}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css ADDED Viewed

@@ -0,0 +1 @@

+ .af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--vertical{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:left}.af-checkbox-card-group--horizontal{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{flex:1 1;flex-direction:var(--checkbox-card-flex-direction);width:100%}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:center}.af-checkbox-card-group--horizontal,.af-checkbox-card-group--vertical{align-items:stretch;display:flex;font-family:var(--checkbox-card-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{align-self:stretch;border:solid var(--checkbox-card-border);border-radius:var(--checkbox-card-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{color:var(--checkbox-card-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){color:var(--checkbox-card-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-checkbox-card__label{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__description{--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card__content>svg{--checkbox-card-color:var(--color-axa);--checkbox-card-fill:var(--color-axa)}.af-checkbox-card__content-description>span:first-child{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__content-description>span:not(:first-child){--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{--error-box-color:var(--color-red-700)}.af-checkbox-card-group--vertical{--checkbox-card-flex-direction:column}.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-flex-direction:row}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:row;--checkbox-card-margin-left:calc(12/var(--font-size-base)*1rem)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:flex-start}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--axa-blue-100)}.af-checkbox-card-group--horizontal{--checkbox-card-flex-direction:row}.af-checkbox-card-group--horizontal .af-checkbox-card-label{--checkbox-card-flex-direction:column-reverse}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:column;--checkbox-card-margin-left:calc(2/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{--checkbox-card-background-color:var(--axa-red-4);--checkbox-card-border:1px var(--red-alert-100);--checkbox-card-shadow-color:var(--red-alert-100)}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-border:1px var(--axa-blue-65);--checkbox-card-border-radius:calc(8/var(--font-size-base)*1rem);--checkbox-card-align-items:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--axa-blue-100)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{--checkbox-card-border:1px var(--axa-blue-100);--checkbox-card-shadow-color:var(--axa-blue-100);--checkbox-card-background-color:var(--white)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){--checkbox-card-border:1px var(--axa-blue-100);--checkbox-card-shadow-color:var(--axa-blue-100);--checkbox-card-background-color:var(--axa-blue-4)}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,kCACE,kDCZJ,CDcI,0DAEE,4CAAA,CADA,kDCXN,CDcM,oFACE,kDCZR,CDcQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,oCACE,kDChBJ,CDkBI,4DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,sFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN,CC1JE,mCACE,oDD6JJ,CC1JE,yBACE,2CD4JJ,CCzJE,+BACE,2CD2JJ,CCvJI,+BACE,sCAAA,CACA,qCDyJN,CCrJM,wDACE,2CDuJR,CCpJM,8DACE,2CDsJR,CC9II,0FACE,sCDmJN,CC/IE,kCACE,qCDiJJ,CC/II,0DACE,kCDiJN,CC/IM,oFACE,kCAAA,CACA,+DDiJR,CC/IQ,0HACE,qCAAA,CACA,qCDiJV,CC/IU,2IACE,oDDiJZ,CC1IE,oCACE,kCD4IJ,CC1II,4DACE,6CD4IN,CC1IM,sFACE,qCAAA,CACA,8DD4IR,CC1IQ,4HACE,qCAAA,CACA,iCD4IV,CCpII,4JACE,iDAAA,CACA,+CAAA,CACA,iDDsIN,CCnII,sHACE,6CAAA,CACA,gEAAA,CACA,kCDqIN,CCjIU,wRACE,oDDmIZ,CC9HM,kIACE,8CAAA,CACA,gDAAA,CACA,6CDgIR,CC5HI,4JACE,8CAAA,CACA,gDAAA,CACA,kDD8HN","file":"CheckboxCardApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n","@use \"CheckboxCardCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__label-container {\n --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n &__description {\n --checkbox-card-color: var(--color-gray-700);\n }\n\n &__content {\n & > svg {\n --checkbox-card-color: var(--color-axa);\n --checkbox-card-fill: var(--color-axa);\n }\n\n &-description {\n & > span:first-child {\n --checkbox-card-color: var(--color-gray-900);\n }\n\n & > span:not(:first-child) {\n --checkbox-card-color: var(--color-gray-700);\n }\n }\n }\n\n & ~ &__error {\n --error-box-color: var(--color-red-700);\n\n & > svg {\n --error-box-color: var(--color-red-700);\n }\n }\n\n &-group--vertical {\n --checkbox-card-flex-direction: column;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: row;\n --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: flex-start;\n\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n }\n }\n\n &-group--horizontal {\n --checkbox-card-flex-direction: row;\n\n .af-checkbox-card-label {\n --checkbox-card-flex-direction: column-reverse;\n\n .af-checkbox-card-content {\n --checkbox-card-flex-direction: column;\n --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n --checkbox-card-flex-direction: column;\n --checkbox-card-align-item: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n --checkbox-card-background-color: var(--axa-red-4);\n --checkbox-card-border: 1px var(--red-alert-100);\n --checkbox-card-shadow-color: var(--red-alert-100);\n }\n\n .af-checkbox-card-label {\n --checkbox-card-border: 1px var(--axa-blue-65);\n --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);\n --checkbox-card-align-items: center;\n\n .af-checkbox-card-content {\n .af-checkbox-card-content-description {\n & > span:first-child {\n --checkbox-card-label-text-color: var(--axa-blue-100);\n }\n }\n }\n\n &:hover {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--white);\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n --checkbox-card-border: 1px var(--axa-blue-100);\n --checkbox-card-shadow-color: var(--axa-blue-100);\n --checkbox-card-background-color: var(--axa-blue-4);\n }\n }\n}\n"]}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss ADDED Viewed

@@ -0,0 +1,116 @@
+@use "CheckboxCardCommon";
+@use "../../../common/breakpoints" as breakpoints;
+.af-checkbox-card {
+  &__label-container {
+    --font-size-base: calc(16 / var(--font-size-base) * 1rem);
+  }
+  &__label {
+    --checkbox-card-color: var(--color-gray-900);
+  }
+  &__description {
+    --checkbox-card-color: var(--color-gray-700);
+  }
+  &__content {
+    & > svg {
+      --checkbox-card-color: var(--color-axa);
+      --checkbox-card-fill: var(--color-axa);
+    }
+    &-description {
+      & > span:first-child {
+        --checkbox-card-color: var(--color-gray-900);
+      }
+      & > span:not(:first-child) {
+        --checkbox-card-color: var(--color-gray-700);
+      }
+    }
+  }
+  & ~ &__error {
+    --error-box-color: var(--color-red-700);
+    & > svg {
+      --error-box-color: var(--color-red-700);
+    }
+  }
+  &-group--vertical {
+    --checkbox-card-flex-direction: column;
+    .af-checkbox-card-label {
+      --checkbox-card-flex-direction: row;
+      .af-checkbox-card-content {
+        --checkbox-card-flex-direction: row;
+        --checkbox-card-margin-left: calc(12 / var(--font-size-base) * 1rem);
+        .af-checkbox-card-content-description {
+          --checkbox-card-flex-direction: column;
+          --checkbox-card-align-item: flex-start;
+          & > span:first-child {
+            --checkbox-card-label-text-color: var(--axa-blue-100);
+          }
+        }
+      }
+    }
+  }
+  &-group--horizontal {
+    --checkbox-card-flex-direction: row;
+    .af-checkbox-card-label {
+      --checkbox-card-flex-direction: column-reverse;
+      .af-checkbox-card-content {
+        --checkbox-card-flex-direction: column;
+        --checkbox-card-margin-left: calc(2 / var(--font-size-base) * 1rem);
+        .af-checkbox-card-content-description {
+          --checkbox-card-flex-direction: column;
+          --checkbox-card-align-item: center;
+        }
+      }
+    }
+  }
+  &-group--vertical,
+  &-group--horizontal {
+    .af-checkbox-card-label[aria-invalid="true"] {
+      --checkbox-card-background-color: var(--axa-red-4);
+      --checkbox-card-border: 1px var(--red-alert-100);
+      --checkbox-card-shadow-color: var(--red-alert-100);
+    }
+    .af-checkbox-card-label {
+      --checkbox-card-border: 1px var(--axa-blue-65);
+      --checkbox-card-border-radius: calc(8 / var(--font-size-base) * 1rem);
+      --checkbox-card-align-items: center;
+      .af-checkbox-card-content {
+        .af-checkbox-card-content-description {
+          & > span:first-child {
+            --checkbox-card-label-text-color: var(--axa-blue-100);
+          }
+        }
+      }
+      &:hover {
+        --checkbox-card-border: 1px var(--axa-blue-100);
+        --checkbox-card-shadow-color: var(--axa-blue-100);
+        --checkbox-card-background-color: var(--white);
+      }
+    }
+    .af-checkbox-card-label:has(input:checked) {
+      --checkbox-card-border: 1px var(--axa-blue-100);
+      --checkbox-card-shadow-color: var(--axa-blue-100);
+      --checkbox-card-background-color: var(--axa-blue-4);
+    }
+  }
+}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,mCACE,YAAA,CACA,qBAAA,CACA,0CCHJ,CDME,yBAGE,gCAAA,CAFA,6CAAA,CACA,eCHJ,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,+BAGE,gCAAA,CADA,0CAAA,CADA,yCAAA,CAGA,8BCLN,CDQI,uCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,wDAEE,gCAAA,CADA,+CCLR,CDSM,8DACE,gCCPR,CDeI,0FACE,iCCVN,CDcE,kCACE,kDCZJ,CDcI,0DAEE,4CAAA,CADA,kDCXN,CDcM,oFACE,kDCZR,CDcQ,0HAEE,2CAAA,CADA,kDAAA,CAEA,eCZV,CDkBE,oCACE,kDChBJ,CDkBI,4DAEE,4CAAA,CADA,kDAAA,CAEA,oDChBN,CDkBM,sFAEE,QAAA,CACA,kDAAA,CAFA,UCdR,CDkBQ,4HAEE,2CAAA,CADA,kDAAA,CAEA,iBChBV,CDsBE,sEAGE,mBAAA,CADA,YAAA,CAGA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CCrBJ,CDuBI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DCrBN,CDwBI,sHAME,kBAAA,CAHA,wCAAA,CACA,gDAAA,CAIA,cAAA,CAPA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YChBN,CDwBM,0KAEE,kBAAA,CADA,YAAA,CAEA,sCCtBR,CDwBQ,sPACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CCtBV,CDwBU,wRAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,wRAMI,6CAAA,CACA,eCrBZ,CACF,CDwBU,oSAGE,2CAAA,CAFA,6CAAA,CACA,eCrBZ,CDwBY,uBALF,oSAMI,6CAAA,CACA,eCrBZ,CACF,CD0BM,kIAEE,sDAAA,CADA,wCAAA,CAEA,4DCxBR,CD4BI,4JAEE,sDAAA,CADA,wCAAA,CAEA,4DC1BN","file":"CheckboxCardCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-card {\n &__container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n &__label-container {\n display: flex;\n flex-direction: column;\n row-gap: calc(4 / var(--font-size-base) * 1rem);\n }\n\n &__label {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--checkbox-card-color);\n }\n\n &__description {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n line-height: calc(16 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n\n @media (width > #{breakpoints.$breakpoint-sm}) {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n line-height: calc(18 / var(--font-size-base) * 1rem);\n }\n }\n\n &__content {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: calc(28 / var(--font-size-base) * 1rem);\n height: calc(28 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n fill: var(--checkbox-card-fill);\n }\n\n &-description {\n display: flex;\n flex-direction: column;\n gap: calc(4 / var(--font-size-base) * 1rem);\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n line-height: calc(24 / var(--font-size-base) * 1rem);\n color: var(--checkbox-card-color);\n }\n\n & > span:not(:first-child) {\n color: var(--checkbox-card-color);\n }\n }\n }\n\n & ~ &__error {\n border: solid var(--color-red-700);\n\n & > svg {\n border: solid var(--color-red-700);\n }\n }\n\n &-group--vertical {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n\n .af-checkbox-card-content {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: left;\n }\n }\n }\n }\n\n &-group--horizontal {\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-label {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-items);\n justify-content: var(--checkbox-card-justify-content);\n\n .af-checkbox-card-content {\n width: 100%;\n flex: 1;\n flex-direction: var(--checkbox-card-flex-direction);\n\n .af-checkbox-card-content-description {\n flex-direction: var(--checkbox-card-flex-direction);\n align-items: var(--checkbox-card-align-item);\n text-align: center;\n }\n }\n }\n }\n\n &-group--vertical,\n &-group--horizontal {\n display: flex;\n align-items: stretch;\n gap: 1rem;\n font-family: var(--checkbox-card-font-family);\n font-style: normal;\n font-weight: 400;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-label[aria-invalid=\"true\"] {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n\n .af-checkbox-card-label {\n display: flex;\n padding: 1rem;\n border: solid var(--checkbox-card-border);\n border-radius: var(--checkbox-card-border-radius);\n flex: 1;\n align-self: stretch;\n gap: calc(12 / var(--font-size-base) * 1rem);\n cursor: pointer;\n\n .af-checkbox-card-content {\n display: flex;\n align-items: center;\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n .af-checkbox-card-content-description {\n display: flex;\n justify-content: center;\n font-size: 1rem;\n line-height: calc(20 / var(--font-size-base) * 1rem);\n\n & > span:first-child {\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n\n & > span:not(:first-child) {\n font-size: calc(16 / var(--font-size-base) * 1rem);\n font-weight: 400;\n color: var(--checkbox-card-label-text-color);\n\n @media (width < #{breakpoints.$breakpoint-sm}) {\n font-size: calc(14 / var(--font-size-base) * 1rem);\n font-weight: 400;\n }\n }\n }\n }\n\n &:hover {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n\n .af-checkbox-card-label:has(input:checked) {\n border: solid var(--checkbox-card-border);\n background-color: var(--checkbox-card-background-color);\n box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;\n }\n }\n}\n"]}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.scss ADDED Viewed

@@ -0,0 +1,188 @@
+@use "../../../common/breakpoints" as breakpoints;
+.af-checkbox-card {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  &__label-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
+  }
+  &__label {
+    font-size: calc(18 / var(--font-size-base) * 1rem);
+    font-weight: 600;
+    color: var(--checkbox-card-color);
+  }
+  &__description {
+    font-size: calc(16 / var(--font-size-base) * 1rem);
+    font-weight: 400;
+    line-height: calc(16 / var(--font-size-base) * 1rem);
+    color: var(--checkbox-card-color);
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      font-size: calc(18 / var(--font-size-base) * 1rem);
+      line-height: calc(18 / var(--font-size-base) * 1rem);
+    }
+  }
+  &__content {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    & > svg {
+      width: calc(28 / var(--font-size-base) * 1rem);
+      height: calc(28 / var(--font-size-base) * 1rem);
+      color: var(--checkbox-card-color);
+      fill: var(--checkbox-card-fill);
+    }
+    &-description {
+      display: flex;
+      flex-direction: column;
+      gap: calc(4 / var(--font-size-base) * 1rem);
+      line-height: calc(20 / var(--font-size-base) * 1rem);
+      & > span:first-child {
+        line-height: calc(24 / var(--font-size-base) * 1rem);
+        color: var(--checkbox-card-color);
+      }
+      & > span:not(:first-child) {
+        color: var(--checkbox-card-color);
+      }
+    }
+  }
+  & ~ &__error {
+    border: solid var(--color-red-700);
+    & > svg {
+      border: solid var(--color-red-700);
+    }
+  }
+  &-group--vertical {
+    flex-direction: var(--checkbox-card-flex-direction);
+    .af-checkbox-card-label {
+      flex-direction: var(--checkbox-card-flex-direction);
+      align-items: var(--checkbox-card-align-items);
+      .af-checkbox-card-content {
+        flex-direction: var(--checkbox-card-flex-direction);
+        .af-checkbox-card-content-description {
+          flex-direction: var(--checkbox-card-flex-direction);
+          align-items: var(--checkbox-card-align-item);
+          text-align: left;
+        }
+      }
+    }
+  }
+  &-group--horizontal {
+    flex-direction: var(--checkbox-card-flex-direction);
+    .af-checkbox-card-label {
+      flex-direction: var(--checkbox-card-flex-direction);
+      align-items: var(--checkbox-card-align-items);
+      justify-content: var(--checkbox-card-justify-content);
+      .af-checkbox-card-content {
+        width: 100%;
+        flex: 1;
+        flex-direction: var(--checkbox-card-flex-direction);
+        .af-checkbox-card-content-description {
+          flex-direction: var(--checkbox-card-flex-direction);
+          align-items: var(--checkbox-card-align-item);
+          text-align: center;
+        }
+      }
+    }
+  }
+  &-group--vertical,
+  &-group--horizontal {
+    display: flex;
+    align-items: stretch;
+    gap: 1rem;
+    font-family: var(--checkbox-card-font-family);
+    font-style: normal;
+    font-weight: 400;
+    line-height: calc(20 / var(--font-size-base) * 1rem);
+    .af-checkbox-card-label[aria-invalid="true"] {
+      border: solid var(--checkbox-card-border);
+      background-color: var(--checkbox-card-background-color);
+      box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
+    }
+    .af-checkbox-card-label {
+      display: flex;
+      padding: 1rem;
+      border: solid var(--checkbox-card-border);
+      border-radius: var(--checkbox-card-border-radius);
+      flex: 1;
+      align-self: stretch;
+      gap: calc(12 / var(--font-size-base) * 1rem);
+      cursor: pointer;
+      .af-checkbox-card-content {
+        display: flex;
+        align-items: center;
+        gap: calc(4 / var(--font-size-base) * 1rem);
+        .af-checkbox-card-content-description {
+          display: flex;
+          justify-content: center;
+          font-size: 1rem;
+          line-height: calc(20 / var(--font-size-base) * 1rem);
+          & > span:first-child {
+            font-size: calc(18 / var(--font-size-base) * 1rem);
+            font-weight: 400;
+            color: var(--checkbox-card-label-text-color);
+            @media (width < #{breakpoints.$breakpoint-sm}) {
+              font-size: calc(16 / var(--font-size-base) * 1rem);
+              font-weight: 400;
+            }
+          }
+          & > span:not(:first-child) {
+            font-size: calc(16 / var(--font-size-base) * 1rem);
+            font-weight: 400;
+            color: var(--checkbox-card-label-text-color);
+            @media (width < #{breakpoints.$breakpoint-sm}) {
+              font-size: calc(14 / var(--font-size-base) * 1rem);
+              font-weight: 400;
+            }
+          }
+        }
+      }
+      &:hover {
+        border: solid var(--checkbox-card-border);
+        background-color: var(--checkbox-card-background-color);
+        box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
+      }
+    }
+    .af-checkbox-card-label:has(input:checked) {
+      border: solid var(--checkbox-card-border);
+      background-color: var(--checkbox-card-background-color);
+      box-shadow: 0 0 0 1px var(--checkbox-card-shadow-color) inset;
+    }
+  }
+}

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.css ADDED Viewed

@@ -0,0 +1 @@

+ .af-checkbox-card__container{display:flex;flex-direction:column;gap:1rem}.af-checkbox-card__label-container{display:flex;flex-direction:column;row-gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card__label{color:var(--checkbox-card-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600}.af-checkbox-card__description{color:var(--checkbox-card-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-checkbox-card__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-card__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-checkbox-card__content>svg{color:var(--checkbox-card-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--checkbox-card-fill)}.af-checkbox-card__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:first-child{color:var(--checkbox-card-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-checkbox-card__content-description>span:not(:first-child){color:var(--checkbox-card-color)}.af-checkbox-card~.af-checkbox-card__error,.af-checkbox-card~.af-checkbox-card__error>svg{border:solid var(--color-red-700)}.af-checkbox-card-group--vertical{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:left}.af-checkbox-card-group--horizontal{flex-direction:var(--checkbox-card-flex-direction)}.af-checkbox-card-group--horizontal .af-checkbox-card-label{align-items:var(--checkbox-card-align-items);flex-direction:var(--checkbox-card-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{flex:1 1;flex-direction:var(--checkbox-card-flex-direction);width:100%}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{align-items:var(--checkbox-card-align-item);flex-direction:var(--checkbox-card-flex-direction);text-align:center}.af-checkbox-card-group--horizontal,.af-checkbox-card-group--vertical{align-items:stretch;display:flex;font-family:var(--checkbox-card-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{align-self:stretch;border:solid var(--checkbox-card-border);border-radius:var(--checkbox-card-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{color:var(--checkbox-card-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){color:var(--checkbox-card-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child),.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){background-color:var(--checkbox-card-background-color);border:solid var(--checkbox-card-border);box-shadow:0 0 0 1px var(--checkbox-card-shadow-color) inset}.af-checkbox-card__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-checkbox-card__label{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__description{--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card__content>svg{--checkbox-card-color:var(--color-axa);--checkbox-card-fill:var(--color-axa)}.af-checkbox-card__content-description>span:first-child{--checkbox-card-color:var(--color-gray-900)}.af-checkbox-card__content-description>span:not(:first-child){--checkbox-card-color:var(--color-gray-700)}.af-checkbox-card~.af-checkbox-card__error{--error-box-color:var(--color-red-700)}.af-checkbox-card~.af-checkbox-card__error>svg{--error-box-color:var(--color-red-700);--error-box-fill:var(--color-red-700)}.af-checkbox-card-group--vertical{--checkbox-card-flex-direction:column}.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-flex-direction:row;--checkbox-card-align-items:center}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:row;--checkbox-card-margin-left:calc(12/var(--font-size-base)*1rem)}.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:flex-start}.af-checkbox-card-group--horizontal{--checkbox-card-flex-direction:row}.af-checkbox-card-group--horizontal .af-checkbox-card-label{--checkbox-card-flex-direction:row;--checkbox-card-align-items:flex-start;--checkbox-card-justify-content:flex-start}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content{--checkbox-card-flex-direction:column;--checkbox-card-margin-left:calc(2/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description{--checkbox-card-flex-direction:column;--checkbox-card-align-item:center}.af-checkbox-card-group--horizontal .af-checkbox-card-label[aria-invalid=true],.af-checkbox-card-group--vertical .af-checkbox-card-label[aria-invalid=true]{--checkbox-card-background-color:var(--color-white);--checkbox-card-border:2px var(--color-red-700);--checkbox-card-shadow-color:var(--color-red-700)}.af-checkbox-card-group--horizontal .af-checkbox-card-label,.af-checkbox-card-group--vertical .af-checkbox-card-label{--checkbox-card-border:2px var(--color-gray-700);--checkbox-card-border-radius:calc(6/var(--font-size-base)*1rem)}.af-checkbox-card-group--horizontal .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child,.af-checkbox-card-group--vertical .af-checkbox-card-label .af-checkbox-card-content .af-checkbox-card-content-description>span:first-child{--checkbox-card-label-text-color:var(--color-black)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:hover,.af-checkbox-card-group--vertical .af-checkbox-card-label:hover{--checkbox-card-border:2px var(--color-axa);--checkbox-card-shadow-color:var(--color-axa);--checkbox-card-background-color:var(--color-white)}.af-checkbox-card-group--horizontal .af-checkbox-card-label:has(input:checked),.af-checkbox-card-group--vertical .af-checkbox-card-label:has(input:checked){--checkbox-card-border:2px var(--color-axa);--checkbox-card-shadow-color:var(--color-axa);--checkbox-card-background-color:var(--color-blue-2)}