@axa-fr/design-system-look-and-feel-css 0.2.0-beta.306

package/dist/List/ClickList/ClickList.scss

@@ -0,0 +1,228 @@
+@use "../../common/reboot";
+@use "../../common/common" as common;
+
+.af-card--click-list {
+  padding: 0;
+
+  .af-list__separator {
+    width: calc(100% - 2rem);
+    margin: auto;
+  }
+
+  .af-list__item {
+    padding: 0;
+
+    .af-list-item {
+      &__content {
+        display: inherit;
+        align-items: inherit;
+        gap: 12px;
+      }
+
+      &-content {
+        &__icon svg {
+          width: 1.4rem;
+          height: 1.4rem;
+          fill: common.$color-axa;
+        }
+
+        &__label {
+          text-align: left;
+        }
+
+        &-label {
+          &__title {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+            line-height: 1.4rem;
+            color: common.$color-gray-900;
+          }
+
+          &__subtitle {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.4rem;
+            color: common.$color-gray-700;
+          }
+
+          &__secondary {
+            margin: 0;
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.1rem;
+            color: common.$color-gray-700;
+          }
+        }
+      }
+
+      &__action {
+        margin-left: auto;
+
+        svg {
+          width: 1.4rem;
+          height: 1.4rem;
+          fill: common.$color-axa;
+        }
+      }
+    }
+  }
+
+  &.af-card--large .af-list-item {
+    &-content__label {
+      font-size: 1.125rem;
+      font-weight: 600;
+      line-height: 1.4rem;
+    }
+
+    &-content-label {
+      &__title {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+
+      &__subtitle {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+    }
+  }
+
+  .af-list__item .af-list-item__button {
+    display: flex;
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: common.$default-border-radius;
+    align-items: center;
+    gap: 0.5rem;
+    color: inherit;
+    background: none;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+
+      .af-list-item {
+        &-content {
+          &__icon svg {
+            fill: common.$color-gray-500;
+          }
+
+          &__label {
+            color: common.$color-gray-500;
+          }
+
+          &-label__title,
+          &-label__subtitle,
+          &-label__secondary {
+            color: common.$color-gray-500;
+          }
+        }
+
+        &__action svg {
+          fill: common.$color-gray-500;
+        }
+      }
+    }
+
+    &:enabled {
+      &:hover {
+        box-shadow: 0 4px 8px 0 hsla(230deg, 60%, 16%, 8%);
+      }
+
+      &:active {
+        box-shadow: 0 2px 8px 0 hsla(0deg, 0%, 0%, 15%) inset;
+        outline: none;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        border: 2px solid common.$color-focus;
+        outline: none;
+      }
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-card--click-list {
+    .af-list-item-content {
+      &__label {
+        font-size: 0.875rem;
+        line-height: 1.1rem;
+      }
+
+      &-label {
+        &__title,
+        &__subtitle {
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+        }
+      }
+    }
+
+    &.af-card--large .af-list-item-content {
+      &__label {
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: 1.25rem;
+      }
+
+      &-label {
+        &__title,
+        &__subtitle {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+      }
+    }
+
+    .af-list-item__button {
+      &:enabled {
+        box-shadow: none;
+
+        &:hover {
+          box-shadow: none;
+
+          .af-list-item {
+            &__label {
+              color: common.$color-axa;
+            }
+
+            &-label__title,
+            &-label__subtitle,
+            &-label__secondary {
+              color: common.$color-axa;
+            }
+          }
+        }
+
+        &:active {
+          box-shadow: none;
+
+          .af-list-item {
+            &__label {
+              color: common.$color-blue-1;
+            }
+
+            &-label__title,
+            &-label__subtitle,
+            &-label__secondary {
+              color: common.$color-blue-1;
+            }
+          }
+        }
+
+        &:focus-visible {
+          border: none;
+          border: 1px solid common.$color-focus;
+        }
+      }
+    }
+  }
+}

package/dist/List/ContentItemDuo/ContentItemDuo.css

@@ -0,0 +1 @@
+.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:.5rem;width:100%}.af-content-item-duo__icon{grid-area:icon;margin-right:.75rem;margin-top:.125rem}.af-content-item-duo__icon svg{height:1.5rem;width:1.5rem}.af-content-item-duo__icon--done svg{fill:#00008f}.af-content-item-duo__icon--close svg{fill:#c91432}.af-content-item-duo__label,.af-content-item-duo__value{font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;line-height:1.25rem;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:#5f5f5f;font-weight:400;grid-area:label;margin-right:1rem}.af-content-item-duo__value{color:#333;font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large{row-gap:.75rem}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.25rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:2.5rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:.375rem .75rem;grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:.125rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large{row-gap:.5rem}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.125rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1rem;line-height:1.25rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:1rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:.375rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1rem;line-height:1.25rem;text-align:start}}

package/dist/List/ContentItemDuo/ContentItemDuo.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuo.scss%23sass","../../../src/List/ContentItemDuo/ContentItemDuo.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,aAAA,CCPF,UAIA,CDKE,2BAGE,cAAA,CADA,mBAAA,CADA,kBCDJ,CDKI,+BAEE,aAAA,CADA,YCFN,CDOM,qCACE,YCLR,CDUM,sCACE,YCRR,CDaE,wDAGE,4CAAA,CACA,cAAA,CACA,mBAAA,CAHA,QAAA,CAIA,wBCZJ,CDeE,4BAIE,aEda,CFab,eAAA,CADA,eAAA,CADA,iBCVJ,CDgBE,4BAIE,UAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCbJ,CDiBE,6BACE,gBAAA,CACA,gBCfJ,CDkBE,4BACE,cChBJ,CDmBM,uDACE,iBCjBR,CDoBM,gHAEE,kBAAA,CACA,kBCnBR,CDsBM,wDACE,mBCpBR,CDuBM,wDACE,gBCrBR,CDwBM,yDACE,kBCtBR,CD2BE,+BAKE,kBAAA,CAJA,iDAAA,CAGA,mCC1BJ,CD8BM,0DAEE,cAAA,CADA,kBC3BR,CD+BM,sHAGE,kBAAA,CACA,kBAAA,CAFA,cAAA,CAGA,gBC9BR,CDiCM,2DACE,QC/BR,CDkCM,4DAEE,gBAAA,CADA,aC/BR,CDsCA,wBAEI,4BACE,aCpCJ,CDuCM,uDACE,kBCrCR,CDwCM,gHAEE,cAAA,CACA,mBCvCR,CD0CM,wDACE,iBCxCR,CD2CM,wDACE,cCzCR,CD4CM,yDAEE,gBAAA,CADA,aCzCR,CD+CE,+BACE,eC7CJ,CDgDM,sHAEE,cAAA,CACA,mBAAA,CACA,gBC/CR,CACF","file":"ContentItemDuo.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: common.$color-axa;\n      }\n    }\n\n    &--close {\n      svg {\n        fill: common.$color-red-700;\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: common.$font-family-base;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: common.$color-gray-700;\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: common.$color-gray-900;\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: common.$color-axa;\n      }\n    }\n\n    &--close {\n      svg {\n        fill: common.$color-red-700;\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: common.$font-family-base;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: common.$color-gray-700;\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: common.$color-gray-900;\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/List/ContentItemDuo/ContentItemDuo.scss

@@ -0,0 +1,168 @@
+@use "../../common/common" as common;
+
+.af-content-item-duo {
+  display: grid;
+  width: 100%;
+  grid-template:
+    "icon label value"
+    "icon label button";
+  grid-template-columns: auto 1fr 1fr;
+  row-gap: 0.5rem;
+
+  &__icon {
+    margin-top: 0.125rem;
+    margin-right: 0.75rem;
+    grid-area: icon;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &--done {
+      svg {
+        fill: common.$color-axa;
+      }
+    }
+
+    &--close {
+      svg {
+        fill: common.$color-red-700;
+      }
+    }
+  }
+
+  &__label,
+  &__value {
+    margin: 0;
+    font-family: common.$font-family-base;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    overflow-wrap: break-word;
+  }
+
+  &__label {
+    margin-right: 1rem;
+    grid-area: label;
+    font-weight: 400;
+    color: common.$color-gray-700;
+  }
+
+  &__value {
+    grid-area: value;
+    font-weight: 600;
+    text-align: end;
+    color: common.$color-gray-900;
+  }
+
+  &__button {
+    grid-area: button;
+    justify-self: end;
+  }
+
+  &--large {
+    row-gap: 0.75rem;
+
+    .af-content-item-duo {
+      &__icon {
+        margin-top: 0.25rem;
+      }
+
+      &__label,
+      &__value {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+
+      &__label {
+        margin-right: 2.5rem;
+      }
+
+      &__value {
+        text-align: start;
+      }
+
+      &__button {
+        justify-self: start;
+      }
+    }
+  }
+
+  &--vertical {
+    grid-template:
+      "icon label button"
+      ". value value";
+    grid-template-columns: auto 1fr auto;
+    gap: 0.375rem 0.75rem;
+
+    .af-content-item-duo {
+      &__icon {
+        margin-top: 0.125rem;
+        margin-right: 0;
+      }
+
+      &__label,
+      &__value {
+        margin-right: 0;
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+        text-align: start;
+      }
+
+      &__value {
+        margin: 0;
+      }
+
+      &__button {
+        margin-left: 0;
+        justify-self: end;
+      }
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-content-item-duo {
+    &--large {
+      row-gap: 0.5rem;
+
+      .af-content-item-duo {
+        &__icon {
+          margin-top: 0.125rem;
+        }
+
+        &__label,
+        &__value {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        &__label {
+          margin-right: 1rem;
+        }
+
+        &__value {
+          text-align: end;
+        }
+
+        &__button {
+          margin-left: 0;
+          justify-self: end;
+        }
+      }
+    }
+
+    &--vertical {
+      row-gap: 0.375rem;
+
+      .af-content-item-duo {
+        &__label,
+        &__value {
+          font-size: 1rem;
+          line-height: 1.25rem;
+          text-align: start;
+        }
+      }
+    }
+  }
+}

package/dist/List/ContentItemMono/ContentItemMono.css

@@ -0,0 +1 @@
+.af-content-item-mono{display:flex;gap:.75rem}.af-content-item-mono__stick{background-color:#00008f;border-radius:.125rem;width:.25rem}.af-content-item-mono__left-container svg{height:1.5rem;width:1.5rem;fill:#00008f}.af-content-item-mono__left-container--center{align-items:center;display:flex}.af-content-item-mono--disabled .af-content-item-mono__stick{background-color:#333}.af-content-item-mono--disabled .af-content-item-mono__left-container svg{fill:#333}.af-content-item-mono__text-container{display:grid;gap:.125rem}.af-content-item-mono__text-container p{margin:0}.af-content-item-mono__text-container .af-content-item-mono__main-text{color:#333}.af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-family:Source Sans Pro,arial,sans-serif;font-weight:400}.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__main-text{font-family:Publico Headline;font-size:1.5rem;font-weight:700;line-height:1.875rem}.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__secondary-text{color:#5f5f5f;font-size:1.125rem;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__main-text{font-family:Source Sans Pro,arial,sans-serif;font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-size:1.125rem;line-height:1.4rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__tertiary-text{color:#5f5f5f;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25rem}.af-content-item-mono--m .af-content-item-mono__text-container:not(:has(.af-content-item-mono__tertiary-text)) .af-content-item-mono__secondary-text{color:#5f5f5f;font-size:1rem;line-height:1.25rem}.af-content-item-mono--m:has(.af-content-item-mono__stick) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1rem;line-height:1.25rem}.af-content-item-mono--m:not(:has(.af-content-item-mono__text-container .af-content-item-mono__secondary-text)):has(.af-content-item-mono__text-container .af-content-item-mono__tertiary-text) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1rem;font-weight:400;line-height:1.25rem}@media (width <= 667px){.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:1.25rem;line-height:1.56rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__main-text,.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__secondary-text,.af-content-item-mono--xl .af-content-item-mono__text-container .af-content-item-mono__secondary-text{font-size:1rem;line-height:1.25rem}.af-content-item-mono--m .af-content-item-mono__text-container .af-content-item-mono__tertiary-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m .af-content-item-mono__text-container:not(:has(.af-content-item-mono__tertiary-text)) .af-content-item-mono__secondary-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m:has(.af-content-item-mono__stick) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:.875rem;line-height:1.1rem}.af-content-item-mono--m:not(:has(.af-content-item-mono__text-container .af-content-item-mono__secondary-text)):has(.af-content-item-mono__text-container .af-content-item-mono__tertiary-text) .af-content-item-mono__text-container .af-content-item-mono__main-text{font-size:.875rem;font-weight:400;line-height:1.1rem}}

package/dist/List/ContentItemMono/ContentItemMono.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ContentItemMono/ContentItemMono.scss%23sass","../../../src/List/ContentItemMono/ContentItemMono.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,sBACE,YAAA,CCDF,UACA,CDGE,6BAGE,wBAAA,CADA,qBAAA,CADA,YCCJ,CDKI,0CAEE,aAAA,CADA,YAAA,CAEA,YCHN,CDMI,8CAEE,kBAAA,CADA,YCHN,CDSI,6DACE,qBCPN,CDUI,0EACE,SCRN,CDYE,sCACE,YAAA,CACA,WCVJ,CDYI,wCACE,QCVN,CDaI,uEACE,UCXN,CDcI,4EACE,4CAAA,CACA,eCZN,CDiBI,iGACE,4BAAA,CACA,gBAAA,CACA,eAAA,CACA,oBCfN,CDkBI,sGAGE,aAAA,CAFA,kBAAA,CACA,kBCfN,CDsBM,gGACE,4CAAA,CACA,kBAAA,CACA,eAAA,CACA,kBCpBR,CDuBM,qGACE,kBAAA,CACA,kBCrBR,CDwBM,oGAKE,aAAA,CAJA,4CEnFiB,CFoFjB,cAAA,CACA,eAAA,CACA,mBCrBR,CD0BQ,qJAGE,aAAA,CAFA,cAAA,CACA,mBCvBV,CD8BM,kIACE,cAAA,CACA,mBC5BR,CDyCM,uQACE,cAAA,CACA,eAAA,CACA,mBCvCR,CD6CA,wBAGM,iGACE,iBAAA,CACA,mBC5CN,CD4DM,2SACE,cAAA,CACA,mBClDR,CDqDM,oGACE,iBAAA,CACA,kBCnDR,CDuDQ,qJACE,iBAAA,CACA,kBCrDV,CD2DM,kIACE,iBAAA,CACA,kBCzDR,CDsEM,uQACE,iBAAA,CACA,eAAA,CACA,kBCpER,CACF","file":"ContentItemMono.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: common.$color-axa;\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: common.$color-axa;\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: common.$color-gray-900;\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: common.$color-gray-900;\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: common.$color-gray-900;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: common.$font-family-base;\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: common.$font-family-publico;\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: common.$color-gray-700;\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: common.$font-family-base;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: common.$font-family-base;\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: common.$color-gray-700;\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n              .af-content-item-mono__text-container\n                .af-content-item-mono__secondary-text\n            )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: common.$color-axa;\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: common.$color-axa;\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: common.$color-gray-900;\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: common.$color-gray-900;\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: common.$color-gray-900;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: common.$font-family-base;\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: common.$font-family-publico;\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: common.$color-gray-700;\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: common.$font-family-base;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: common.$font-family-base;\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: common.$color-gray-700;\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n              .af-content-item-mono__text-container\n                .af-content-item-mono__secondary-text\n            )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}

package/dist/List/ContentItemMono/ContentItemMono.scss

@@ -0,0 +1,188 @@
+@use "../../common/common" as common;
+
+.af-content-item-mono {
+  display: flex;
+  gap: 0.75rem;
+
+  &__stick {
+    width: 0.25rem;
+    border-radius: 0.125rem;
+    background-color: common.$color-axa;
+  }
+
+  &__left-container {
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: common.$color-axa;
+    }
+
+    &--center {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &--disabled {
+    .af-content-item-mono__stick {
+      background-color: common.$color-gray-900;
+    }
+
+    .af-content-item-mono__left-container svg {
+      fill: common.$color-gray-900;
+    }
+  }
+
+  &__text-container {
+    display: grid;
+    gap: 0.125rem;
+
+    p {
+      margin: 0;
+    }
+
+    .af-content-item-mono__main-text {
+      color: common.$color-gray-900;
+    }
+
+    .af-content-item-mono__secondary-text {
+      font-family: common.$font-family-base;
+      font-weight: 400;
+    }
+  }
+
+  &--xl .af-content-item-mono__text-container {
+    .af-content-item-mono__main-text {
+      font-family: common.$font-family-publico;
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1.875rem;
+    }
+
+    .af-content-item-mono__secondary-text {
+      font-size: 1.125rem;
+      line-height: 1.4rem;
+      color: common.$color-gray-700;
+    }
+  }
+
+  &--m {
+    .af-content-item-mono__text-container {
+      .af-content-item-mono__main-text {
+        font-family: common.$font-family-base;
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 1.4rem;
+      }
+
+      .af-content-item-mono__secondary-text {
+        font-size: 1.125rem;
+        line-height: 1.4rem;
+      }
+
+      .af-content-item-mono__tertiary-text {
+        font-family: common.$font-family-base;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+        color: common.$color-gray-700;
+      }
+
+      &:not(:has(.af-content-item-mono__tertiary-text)) {
+        .af-content-item-mono__secondary-text {
+          font-size: 1rem;
+          line-height: 1.25rem;
+          color: common.$color-gray-700;
+        }
+      }
+    }
+
+    &:has(.af-content-item-mono__stick) {
+      .af-content-item-mono__text-container .af-content-item-mono__main-text {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    &:not(
+        :has(
+            .af-content-item-mono__text-container
+              .af-content-item-mono__secondary-text
+          )
+      ):has(
+        .af-content-item-mono__text-container
+          .af-content-item-mono__tertiary-text
+      ) {
+      .af-content-item-mono__text-container .af-content-item-mono__main-text {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+      }
+    }
+  }
+}
+
+@media (width <= #{common.$breakpoint-sm}) {
+  .af-content-item-mono {
+    &--xl .af-content-item-mono__text-container {
+      .af-content-item-mono__main-text {
+        font-size: 1.25rem;
+        line-height: 1.56rem;
+      }
+
+      .af-content-item-mono__secondary-text {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    &--m {
+      .af-content-item-mono__text-container {
+        .af-content-item-mono__main-text {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        .af-content-item-mono__secondary-text {
+          font-size: 1rem;
+          line-height: 1.25rem;
+        }
+
+        .af-content-item-mono__tertiary-text {
+          font-size: 0.875rem;
+          line-height: 1.1rem;
+        }
+
+        &:not(:has(.af-content-item-mono__tertiary-text)) {
+          .af-content-item-mono__secondary-text {
+            font-size: 0.875rem;
+            line-height: 1.1rem;
+          }
+        }
+      }
+
+      &:has(.af-content-item-mono__stick) {
+        .af-content-item-mono__text-container .af-content-item-mono__main-text {
+          font-size: 0.875rem;
+          line-height: 1.1rem;
+        }
+      }
+
+      &:not(
+          :has(
+              .af-content-item-mono__text-container
+                .af-content-item-mono__secondary-text
+            )
+        ):has(
+          .af-content-item-mono__text-container
+            .af-content-item-mono__tertiary-text
+        ) {
+        .af-content-item-mono__text-container .af-content-item-mono__main-text {
+          font-size: 0.875rem;
+          font-weight: 400;
+          line-height: 1.1rem;
+        }
+      }
+    }
+  }
+}

package/dist/List/ContentTabList/ContentTabList.css

@@ -0,0 +1 @@
+.af-card--content-tab-list .af-list{display:flex;flex-direction:column;justify-content:center}.af-card--content-tab-list .af-list__item{align-items:center;display:flex;flex-direction:row;gap:2.5rem;justify-content:space-between}.af-card--content-tab-list .af-list__item span{display:block;margin:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container,.af-card--content-tab-list .af-list__item .af-list-item__left-container,.af-card--content-tab-list .af-list__item .af-list-item__right-container{all:inherit;padding:0}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{grid-area:content-tab__additional-data-container}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{grid-area:content-tab__tag}.af-card--content-tab-list .af-list__item .af-list-item__label{color:#333;grid-area:content-tab__label}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1.125rem;font-weight:600;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{color:#5f5f5f;font-size:1rem;font-weight:400;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__date{color:#5f5f5f;font-size:1.125rem;font-weight:600;grid-area:content-tab__date;line-height:1.4rem}.af-card--content-tab-list .af-list__item .af-list-item__value{color:#118635;font-size:1.125rem;font-weight:600;justify-self:end;line-height:1.4rem;text-align:right}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0 .625rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container svg{height:1.25rem;width:1.25rem;fill:#00008f}.af-card--content-tab-list .af-list__item:not(:has(.af-list-item__value)) .af-tag{margin:0 1.34rem}@media (width <= 667px){.af-card--content-tab-list .af-list__item{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__left-container{align-items:start;display:grid;gap:.25rem;grid-template:"content-tab__additional-data-container" "content-tab__label";justify-content:start}.af-card--content-tab-list .af-list__item .af-list-item__right-container{gap:1.5rem}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container{align-items:center;display:block}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container:has(.af-list-item__date):has(.af-tag){display:grid;gap:.75rem;grid-template:"content-tab__tag content-tab__date"}.af-card--content-tab-list .af-list__item .af-list-item__additional-data-container .af-tag{margin:0}.af-card--content-tab-list .af-list__item .af-list-item-label__title{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item-label__subtitle{font-size:.875rem;line-height:1.1rem}.af-card--content-tab-list .af-list__item .af-list-item__date,.af-card--content-tab-list .af-list__item .af-list-item__value{font-size:1rem;line-height:1.25rem}.af-card--content-tab-list .af-list__item .af-list-item__button-container{margin:0}.af-card--content-tab-list .af-list__item .af-list-item__button-container button{font-size:0;gap:0;padding:0}.af-card--content-tab-list .af-list__item:has(.af-list-item__value){align-items:start}}

package/dist/List/ContentTabList/ContentTabList.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ContentTabList/ContentTabList.scss%23sass","../../../src/List/ContentTabList/ContentTabList.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAGE,oCACE,YAAA,CCFJ,qBAAA,CDII,sBCFJ,CDKE,0CAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,UAAA,CADA,6BCFJ,CDKI,+CACE,aAAA,CACA,QCHN,CDOM,oOAGE,WAAA,CACA,SCPR,CDUM,mFACE,gDCRR,CDUQ,2FACE,0BCRV,CDYM,+DAEE,UELS,CFIT,4BCTR,CDaM,qEACE,kBAAA,CACA,eAAA,CACA,kBCXR,CDcM,wEAIE,aAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCXR,CDeM,8DAKE,aAAA,CAHA,kBAAA,CACA,eAAA,CAFA,2BAAA,CAGA,kBCZR,CDgBM,+DAME,aElCU,CF8BV,kBAAA,CACA,eAAA,CAFA,gBAAA,CAGA,kBAAA,CACA,gBCbR,CDiBM,0EACE,gBCfR,CDiBQ,8EAEE,cAAA,CADA,aAAA,CAEA,YCfV,CDqBM,kFACE,gBCnBR,CDyBA,wBACE,0CACE,UCtBF,CDyBI,wEAKE,iBAAA,CAJA,YAAA,CAMA,UAAA,CALA,2EACE,CAGF,qBCxBN,CD4BI,yEACE,UC1BN,CD6BI,mFAEE,kBAAA,CADA,aC1BN,CD6BM,yHACE,YAAA,CC1BV,UAAA,CADE,kDAEA,CACF,2FACE,QACA,CDgCI,qEACE,cAAA,CACA,mBC9BN,CDiCI,wEACE,iBAAA,CACA,kBC/BN,CDuCI,6HACE,cAAA,CACA,mBCjCN,CDoCI,0EACE,QClCN,CDoCM,iFAGE,WAAA,CADA,KAAA,CADA,SChCR,CDuCE,oEACE,iBCrCJ,CACF","file":"ContentTabList.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-card--content-tab-list {\n  .af-list {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .af-list__item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 2.5rem;\n\n    span {\n      display: block;\n      margin: 0;\n    }\n\n    .af-list-item {\n      &__left-container,\n      &__right-container,\n      &__additional-data-container {\n        all: inherit;\n        padding: 0;\n      }\n\n      &__additional-data-container {\n        grid-area: content-tab__additional-data-container;\n\n        .af-tag {\n          grid-area: content-tab__tag;\n        }\n      }\n\n      &__label {\n        grid-area: content-tab__label;\n        color: common.$color-gray-900;\n      }\n\n      &-label__title {\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      &-label__subtitle {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &__date {\n        grid-area: content-tab__date;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        color: common.$color-gray-700;\n      }\n\n      &__value {\n        justify-self: end;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        text-align: right;\n        color: common.$color-green-600;\n      }\n\n      &__button-container {\n        margin: 0 0.625rem;\n\n        svg {\n          width: 1.25rem;\n          height: 1.25rem;\n          fill: common.$color-axa;\n        }\n      }\n    }\n\n    &:not(:has(.af-list-item__value)) {\n      .af-tag {\n        margin: 0 1.34rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-card--content-tab-list .af-list__item {\n    gap: 1.5rem;\n\n    .af-list-item {\n      &__left-container {\n        display: grid;\n        grid-template:\n          \"content-tab__additional-data-container\"\n          \"content-tab__label\";\n        align-items: start;\n        justify-content: start;\n        gap: 0.25rem;\n      }\n\n      &__right-container {\n        gap: 1.5rem;\n      }\n\n      &__additional-data-container {\n        display: block;\n        align-items: center;\n\n        &:has(.af-list-item__date):has(.af-tag) {\n          display: grid;\n          grid-template: \"content-tab__tag content-tab__date\";\n          gap: 0.75rem;\n        }\n\n        .af-tag {\n          margin: 0;\n        }\n      }\n\n      &-label__title {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &-label__subtitle {\n        font-size: 0.875rem;\n        line-height: 1.1rem;\n      }\n\n      &__date {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &__value {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &__button-container {\n        margin: 0;\n\n        button {\n          padding: 0;\n          gap: 0;\n          font-size: 0;\n        }\n      }\n    }\n\n    &:has(.af-list-item__value) {\n      align-items: start;\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-card--content-tab-list {\n  .af-list {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .af-list__item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 2.5rem;\n\n    span {\n      display: block;\n      margin: 0;\n    }\n\n    .af-list-item {\n      &__left-container,\n      &__right-container,\n      &__additional-data-container {\n        all: inherit;\n        padding: 0;\n      }\n\n      &__additional-data-container {\n        grid-area: content-tab__additional-data-container;\n\n        .af-tag {\n          grid-area: content-tab__tag;\n        }\n      }\n\n      &__label {\n        grid-area: content-tab__label;\n        color: common.$color-gray-900;\n      }\n\n      &-label__title {\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      &-label__subtitle {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: common.$color-gray-700;\n      }\n\n      &__date {\n        grid-area: content-tab__date;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        color: common.$color-gray-700;\n      }\n\n      &__value {\n        justify-self: end;\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n        text-align: right;\n        color: common.$color-green-600;\n      }\n\n      &__button-container {\n        margin: 0 0.625rem;\n\n        svg {\n          width: 1.25rem;\n          height: 1.25rem;\n          fill: common.$color-axa;\n        }\n      }\n    }\n\n    &:not(:has(.af-list-item__value)) {\n      .af-tag {\n        margin: 0 1.34rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-card--content-tab-list .af-list__item {\n    gap: 1.5rem;\n\n    .af-list-item {\n      &__left-container {\n        display: grid;\n        grid-template:\n          \"content-tab__additional-data-container\"\n          \"content-tab__label\";\n        align-items: start;\n        justify-content: start;\n        gap: 0.25rem;\n      }\n\n      &__right-container {\n        gap: 1.5rem;\n      }\n\n      &__additional-data-container {\n        display: block;\n        align-items: center;\n\n        &:has(.af-list-item__date):has(.af-tag) {\n          display: grid;\n          grid-template: \"content-tab__tag content-tab__date\";\n          gap: 0.75rem;\n        }\n\n        .af-tag {\n          margin: 0;\n        }\n      }\n\n      &-label__title {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &-label__subtitle {\n        font-size: 0.875rem;\n        line-height: 1.1rem;\n      }\n\n      &__date {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &__value {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n\n      &__button-container {\n        margin: 0;\n\n        button {\n          padding: 0;\n          gap: 0;\n          font-size: 0;\n        }\n      }\n    }\n\n    &:has(.af-list-item__value) {\n      align-items: start;\n    }\n  }\n}\n","$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-disabled-border: #e5e5e5 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}