@axa-fr/design-system-look-and-feel-css 1.0.3-alpha.152 → 1.0.3-alpha.154

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 (13) hide show
  1. package/dist/Form/TextArea/TextArea.css +1 -1
  2. package/dist/Form/TextArea/TextArea.css.map +1 -1
  3. package/dist/Form/TextArea/TextArea.scss +5 -4
  4. package/dist/Layout/Header/BurgerMenu/BurgerMenu.css.map +1 -1
  5. package/dist/Layout/Header/Header.css.map +1 -1
  6. package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -1
  7. package/dist/common/common.scss +2 -2
  8. package/dist/common/tokens.css.map +1 -1
  9. package/dist/common/tokens.scss +2 -2
  10. package/dist/look-and-feel.css +1 -1
  11. package/dist/look-and-feel.css.map +1 -1
  12. package/dist/look-and-feel.scss +0 -1
  13. package/package.json +1 -1
package/dist/Form/TextArea/TextArea.css CHANGED
@@ -1 +1 @@
1
- .af-form__input-container{--row-gap:calc(8/var(--font-size-base)*1rem);align-items:flex-start}.af-form__input-container,.af-form__label-container{display:flex;flex-direction:column;row-gap:var(--row-gap)}.af-form__label-container{--row-gap:calc(4/var(--font-size-base)*1rem);width:100%}.af-form__label-header{align-items:center;display:flex;justify-content:space-between}.af-form__input-label{color:var(--color-gray-900);font-size:1.125rem;font-weight:600;line-height:1.25rem}@media (width > 1023px){.af-form__input-label{font-size:1.125rem;line-height:1.5rem}}.af-form__input-description{color:var(--color-gray-700);font-size:.875rem;font-weight:400;line-height:1.125rem}@media (width > 1023px){.af-form__input-description{font-size:1rem;line-height:1.25rem}}.af-form__input-helper{color:var(--color-gray-700);font-size:.875rem;line-height:1.125rem}@media (width > 1023px){.af-form__input-helper{font-size:1rem;line-height:1.25rem}}.af-form__input-more{width:fit-content;fill:var(--color-axa)}.af-form__input-more svg{height:1.25rem;width:1.25rem}.af-form__input-text{color:var(--color-gray-900);font-size:1rem;line-height:1.25rem}.af-form__input-text~*{color:var(--color-gray-900);fill:var(--color-gray-900)}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-variant{align-items:center;background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);display:grid;grid-template-columns:auto min-content;padding:1rem;width:100%}.af-form__input-variant>input{all:unset}.af-form__input-variant:has(>input:is(:focus-visible)){outline:2px solid var(--color-focus);outline-offset:3px}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){border:1px solid var(--color-axa);box-shadow:0 0 0 1px var(--color-axa) inset}.af-form__input-variant:has(>input[class*="--error"]){border:1px solid var(--color-red-700)}.af-form__input-variant>input~*{margin-left:.5rem}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){background-color:var(--color-border);border:1px solid var(--color-gray-400);box-shadow:unset;color:var(--color-gray-500);cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{color:var(--color-gray-500);cursor:not-allowed;fill:var(--color-gray-500)}.af-form__input-variant:has(>input[class*="--error"]):is(:hover,:focus,:active){border:1px solid var(--color-red-700);box-shadow:0 0 0 1px var(--color-red-700) inset}.af-form__input-variant:has(input:not([value=""],[class*="--error"])):not(:hover,:focus,:active){border:1px solid var(--color-axa)}.af-form__input-textarea{background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);color:var(--color-gray-900);font-size:1rem;height:8.875rem;line-height:1.25rem;padding:1rem 2.5rem 1rem 1rem;width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:1.125rem;line-height:1.5rem}}.af-form__input-textarea--error{border:2px solid var(--color-red-700)}.af-form__input-textarea:not(:empty,:hover,:focus,:active){border:1px solid var(--color-axa)}.af-form__input-textarea:enabled:active,.af-form__input-textarea:enabled:focus{border:1px solid var(--color-axa);outline:none}.af-form__input-textarea:not(:disabled,:focus,:active,.af-form__input-textarea--error):hover{border:2px solid var(--color-axa);outline:none}
1
+ .af-form__input-textarea{background-color:var(--color-white);border:1px solid var(--color-gray);border-radius:var(--default-border-radius);color:var(--color-gray-900);font-size:1rem;height:8.875rem;line-height:1.25rem;padding:1rem 2.5rem 1rem 1rem;width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:1.125rem;line-height:1.5rem}}.af-form__input-textarea--error{border:1px solid var(--color-red-700);box-shadow:0 0 0 1px var(--color-red-700) inset}.af-form__input-textarea:not(:empty,:hover,:focus,:active,[class*="--error"]){border:1px solid var(--color-axa)}.af-form__input-textarea:enabled:active,.af-form__input-textarea:enabled:focus{border:1px solid var(--color-axa);outline:none}.af-form__input-textarea:not(:disabled,:focus,:active,.af-form__input-textarea--error):hover{border:1px solid var(--color-axa);box-shadow:0 0 0 1px var(--color-axa) inset;outline:none}
package/dist/Form/TextArea/TextArea.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Form/Text/Text.scss","../../../src/Form/TextArea/TextArea.scss","../../../src/Form/TextArea/TextArea.scss%23sass"],"names":[],"mappings":"AAGE,0BCFF,4CDGI,CAIA,sBCFJ,CDME,oDANE,YAAA,CCHJ,qBAAA,CDMI,sBCIJ,CDDE,0BACE,4CAAA,CAGA,UCHJ,CDQE,uBAEE,kBAAA,CADA,YAAA,CAEA,6BCNJ,CDSE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCNJ,CDSI,wBANF,sBCAA,kBAAA,CDQI,kBCNJ,CACF,CDSE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCNJ,CDSI,wBANF,4BCAF,cAAA,CDQM,mBCNJ,CACF,CDSE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCNJ,CDSI,wBALF,uBAMI,cAAA,CACA,mBCNJ,CACF,CDSE,qBACE,iBAAA,CACA,qBCPJ,CDSI,yBAEE,cAAA,CADA,aCNN,CDWE,qBAGE,2BAAA,CAFA,cAAA,CACA,mBCRJ,CDWI,uBACE,2BAAA,CACA,0BCTN,CDYI,wBAVF,qBAWI,kBAAA,CACA,kBCTJ,CACF,CDYE,wBAWE,kBAAA,CACA,mCAAA,CAJA,kCAAA,CACA,0CAAA,CAJA,YAAA,CAKA,sCAAA,CAHA,YAAA,CADA,UCRJ,CDGI,8BACE,SCDN,CDaI,uDACE,oCAAA,CACA,kBCXN,CDcI,8DACE,iCAAA,CACA,2CCZN,CDeI,sDACE,qCCbN,CDgBI,gCACE,iBCdN,CDiBI,oHAIE,oCAAA,CAFA,sCAAA,CAGA,gBAAA,CAFA,2BAAA,CAGA,kBChBN,CDkBM,oIACE,2BAAA,CACA,kBAAA,CACA,0BChBR,CDoBI,gFACE,qCAAA,CACA,+CClBN,CDsBM,iGACE,iCCpBR,CCvHA,yBASE,mCAAA,CALA,kCAAA,CACA,0CAAA,CAGA,2BAAA,CAFA,cAAA,CAJA,eAAA,CAKA,mBAAA,CAJA,6BAAA,CAFA,UDkIF,CCxHE,wBAXF,yBAYI,kBAAA,CACA,kBD2HF,CACF,CCzHE,gCACE,qCD2HJ,CCxHE,2DACE,iCD0HJ,CCtHI,+EAEE,iCAAA,CACA,YDuHN,CCnHE,6FACE,iCAAA,CACA,YDqHJ","file":"TextArea.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form {\n &__input-container {\n --row-gap: calc(8 / var(--font-size-base) * 1rem);\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: var(--row-gap);\n }\n\n &__label-container {\n --row-gap: calc(4 / var(--font-size-base) * 1rem);\n\n display: flex;\n width: 100%;\n flex-direction: column;\n row-gap: var(--row-gap);\n }\n\n &__label-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n &__input-label {\n font-size: common.rem(18);\n font-weight: 600;\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-description {\n font-size: common.rem(14);\n font-weight: 400;\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__input-helper {\n font-size: common.rem(14);\n line-height: common.rem(18);\n color: var(--color-gray-700);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(16);\n line-height: common.rem(20);\n }\n }\n\n &__input-more {\n width: fit-content;\n fill: var(--color-axa);\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &__input-text {\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n\n & ~ * {\n color: var(--color-gray-900);\n fill: var(--color-gray-900);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n }\n\n &__input-variant {\n & > input {\n all: unset;\n }\n\n display: grid;\n width: 100%;\n padding: 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n grid-template-columns: auto min-content;\n align-items: center;\n background-color: var(--color-white);\n\n &:has(> input:is(:focus-visible)) {\n outline: 2px solid var(--color-focus);\n outline-offset: 3px;\n }\n\n &:has(> input:is(:hover, :focus, :active)) {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n }\n\n &:has(> input[class*=\"--error\"]) {\n border: 1px solid var(--color-red-700);\n }\n\n & > input ~ * {\n margin-left: 0.5rem;\n }\n\n &:has(> input:disabled),\n &:has(> input:disabled):is(:hover, :focus, :active) {\n border: 1px solid var(--color-gray-400);\n color: var(--color-gray-500);\n background-color: var(--color-border);\n box-shadow: unset;\n cursor: not-allowed;\n\n & > input ~ * {\n color: var(--color-gray-500);\n cursor: not-allowed;\n fill: var(--color-gray-500);\n }\n }\n\n &:has(> input[class*=\"--error\"]):is(:hover, :focus, :active) {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n\n &:has(input:not([value=\"\"], [class*=\"--error\"])) {\n &:not(:hover, :focus, :active) {\n border: 1px solid var(--color-axa);\n }\n }\n }\n}\n","@use \"../../common/common\" as common;\n@use \"../Text/Text\";\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 2px solid var(--color-red-700);\n }\n\n &:not(:empty, :hover, :focus, :active) {\n border: 1px solid var(--color-axa);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 2px solid var(--color-axa);\n outline: none;\n }\n}\n","@use \"../../common/common\" as common;\n@use \"../Text/Text\";\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 2px solid var(--color-red-700);\n }\n\n &:not(:empty, :hover, :focus, :active) {\n border: 1px solid var(--color-axa);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 2px solid var(--color-axa);\n outline: none;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../src/Form/TextArea/TextArea.scss%23sass","../../../src/Form/TextArea/TextArea.scss"],"names":[],"mappings":"AAEA,yBASE,mCAAA,CALA,kCAAA,CACA,0CAAA,CAGA,2BAAA,CAFA,cAAA,CCNF,eAAA,CDOE,mBAAA,CAJA,6BAAA,CAFA,UCOF,CDGE,wBAXF,yBCWE,kBAAA,CDEE,kBCAF,CACF,CDEE,gCACE,qCAAA,CACA,+CCAJ,CDGE,8EACE,iCCDJ,CDKI,+EAEE,iCAAA,CACA,YCJN,CDQE,6FACE,iCAAA,CACA,2CAAA,CACA,YCNJ","file":"TextArea.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n\n &:not(:empty, :hover, :focus, :active, [class*=\"--error\"]) {\n border: 1px solid var(--color-axa);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n outline: none;\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-form__input-textarea {\n width: 100%;\n height: common.rem(142);\n padding: 1rem 2.5rem 1rem 1rem;\n border: 1px solid var(--color-gray);\n border-radius: var(--default-border-radius);\n font-size: common.rem(16);\n line-height: common.rem(20);\n color: var(--color-gray-900);\n background-color: var(--color-white);\n\n @media (width > #{common.$breakpoint-md}) {\n font-size: common.rem(18);\n line-height: common.rem(24);\n }\n\n &--error {\n border: 1px solid var(--color-red-700);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n }\n\n &:not(:empty, :hover, :focus, :active, [class*=\"--error\"]) {\n border: 1px solid var(--color-axa);\n }\n\n &:enabled {\n &:focus,\n &:active {\n border: 1px solid var(--color-axa);\n outline: none;\n }\n }\n\n &:not(:disabled, :focus, :active, &--error):hover {\n border: 1px solid var(--color-axa);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n outline: none;\n }\n}\n"]}
package/dist/Form/TextArea/TextArea.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use "../../common/common" as common;
2
- @use "../Text/Text";
3
2
 
4
3
  .af-form__input-textarea {
5
4
  width: 100%;
@@ -18,10 +17,11 @@
18
17
  }
19
18
 
20
19
  &--error {
21
- border: 2px solid var(--color-red-700);
20
+ border: 1px solid var(--color-red-700);
21
+ box-shadow: 0 0 0 1px var(--color-red-700) inset;
22
22
  }
23
23
 
24
- &:not(:empty, :hover, :focus, :active) {
24
+ &:not(:empty, :hover, :focus, :active, [class*="--error"]) {
25
25
  border: 1px solid var(--color-axa);
26
26
  }
27
27
 
@@ -34,7 +34,8 @@
34
34
  }
35
35
 
36
36
  &:not(:disabled, :focus, :active, &--error):hover {
37
- border: 2px solid var(--color-axa);
37
+ border: 1px solid var(--color-axa);
38
+ box-shadow: 0 0 0 1px var(--color-axa) inset;
38
39
  outline: none;
39
40
  }
40
41
  }
package/dist/Layout/Header/BurgerMenu/BurgerMenu.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss%23sass","../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,wBACE,YCDF,CCqMI,6BFrMJ,wBAOI,6BAAA,CCJF,iBAAA,CDEE,UCGF,CDEE,mDAFA,oBAAA,CAFA,SCMF,CDGE,uCACE,SCDJ,CDGI,sDAEE,eAAA,CADA,QCAN,CDGM,0DACE,qBCDR,CDIM,6DAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,cAAA,CACA,eAAA,CAFA,QCAR,CDIQ,iEACE,qBCFV,CDQE,6BACE,aCNJ,CACF","file":"BurgerMenu.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n position: absolute;\n width: 100%;\n padding: 0;\n border-radius: 0 0 common.rem(8) common.rem(8);\n list-style-type: none;\n\n & > ul {\n padding: 0;\n list-style-type: none;\n }\n\n .af-list__item {\n padding: 0;\n\n .af-click-item {\n gap: common.rem(16);\n box-shadow: none;\n\n & > svg {\n fill: var(--color-axa);\n }\n\n &__label {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: common.rem(16);\n font-size: common.rem(16);\n font-weight: 400;\n\n & > svg {\n fill: var(--color-axa);\n }\n }\n }\n }\n\n &.open {\n display: block;\n }\n }\n}\n","@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n position: absolute;\n width: 100%;\n padding: 0;\n border-radius: 0 0 common.rem(8) common.rem(8);\n list-style-type: none;\n\n & > ul {\n padding: 0;\n list-style-type: none;\n }\n\n .af-list__item {\n padding: 0;\n\n .af-click-item {\n gap: common.rem(16);\n box-shadow: none;\n\n & > svg {\n fill: var(--color-axa);\n }\n\n &__label {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: common.rem(16);\n font-size: common.rem(16);\n font-weight: 400;\n\n & > svg {\n fill: var(--color-axa);\n }\n }\n }\n }\n\n &.open {\n display: block;\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss%23sass","../../../../src/Layout/Header/BurgerMenu/BurgerMenu.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,wBACE,YCDF,CCqMI,6BFrMJ,wBAOI,6BAAA,CCJF,iBAAA,CDEE,UCGF,CDEE,mDAFA,oBAAA,CAFA,SCMF,CDGE,uCACE,SCDJ,CDGI,sDAEE,eAAA,CADA,QCAN,CDGM,0DACE,qBCDR,CDIM,6DAGE,kBAAA,CAFA,YAAA,CACA,kBAAA,CAGA,cAAA,CACA,eAAA,CAFA,QCAR,CDIQ,iEACE,qBCFV,CDQE,6BACE,aCNJ,CACF","file":"BurgerMenu.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n position: absolute;\n width: 100%;\n padding: 0;\n border-radius: 0 0 common.rem(8) common.rem(8);\n list-style-type: none;\n\n & > ul {\n padding: 0;\n list-style-type: none;\n }\n\n .af-list__item {\n padding: 0;\n\n .af-click-item {\n gap: common.rem(16);\n box-shadow: none;\n\n & > svg {\n fill: var(--color-axa);\n }\n\n &__label {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: common.rem(16);\n font-size: common.rem(16);\n font-weight: 400;\n\n & > svg {\n fill: var(--color-axa);\n }\n }\n }\n }\n\n &.open {\n display: block;\n }\n }\n}\n","@use \"../../../common/common\" as common;\n\n.af-burger-menu.af-card {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n position: absolute;\n width: 100%;\n padding: 0;\n border-radius: 0 0 common.rem(8) common.rem(8);\n list-style-type: none;\n\n & > ul {\n padding: 0;\n list-style-type: none;\n }\n\n .af-list__item {\n padding: 0;\n\n .af-click-item {\n gap: common.rem(16);\n box-shadow: none;\n\n & > svg {\n fill: var(--color-axa);\n }\n\n &__label {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: common.rem(16);\n font-size: common.rem(16);\n font-weight: 400;\n\n & > svg {\n fill: var(--color-axa);\n }\n }\n }\n }\n\n &.open {\n display: block;\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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; // prefer use $color-gray-200\n$color-focus: #36f !default; // prefer use $color-blue-3\n\n// others\n\n$default-border-radius: 4px !default;\n$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
package/dist/Layout/Header/Header.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,SAGA,CDGE,gCAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,iBAAA,CAFA,UCUJ,CCmLI,6BF/LF,gCAiBI,WAAA,CACA,cAAA,CAFA,UCEJ,CACF,CDEI,qDAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CAEA,UAAA,CAHA,WCGN,CDEM,8DAEE,WAAA,CADA,UCCR,CCiKI,6BFnKE,8DAOI,iBAAA,CADA,WAAA,CADA,UCGR,CACF,CDEM,yDACE,aCAR,CCuJI,6BFnJI,yDACE,YCDR,CACF,CDKI,sDACE,YAAA,CAEA,kBAAA,CACA,qBAAA,CAFA,QCDN,CC4II,6BF7IA,sDAOI,YCFN,CACF,CDKI,+CACE,YCHN,CCoII,6BFlIA,+CAII,aCFN,CACF,CDOA,mBACE,YCJF,CC2HI,6BFpHA,wBAME,gCAAA,CCPJ,aAAA,CDII,OAAA,CAEA,UAAA,CCTN,cAAA,CACE,SAKA,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n position: sticky;\n z-index: 2;\n top: 0;\n background-color: var(--color-white);\n\n & > .af-header-container {\n display: flex;\n width: auto;\n height: common.rem(80);\n padding: 0 3.75rem;\n border-top: 2px solid var(--color-axa);\n border-bottom: 1px solid var(--color-gray-300);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-axa);\n\n @include common.media-breakpoint-down(md) {\n width: 100%;\n height: 72px;\n padding: 0 1rem;\n }\n\n & > .af-header-left-item {\n display: flex;\n height: 5rem;\n flex-direction: row;\n align-items: center;\n gap: 1.5rem;\n\n & > .af-logo {\n width: 56px;\n height: 56px;\n\n @include common.media-breakpoint-down(md) {\n width: 40px;\n height: 40px;\n align-self: center;\n }\n }\n\n & > nav {\n display: block;\n }\n\n @include common.media-breakpoint-down(md) {\n & > nav {\n display: none;\n }\n }\n }\n\n & > .af-header-right-item {\n display: flex;\n margin: 0;\n flex-direction: row;\n gap: var(--spacing-u2);\n\n @include common.media-breakpoint-down(md) {\n display: none;\n }\n }\n\n & > .af-btn-client {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n display: block;\n }\n }\n }\n}\n\n.af-header-overlay {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n &.open {\n position: fixed;\n z-index: 1;\n inset: 0;\n display: block;\n opacity: 0.5;\n background: var(--color-gray-900);\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n position: sticky;\n z-index: 2;\n top: 0;\n background-color: var(--color-white);\n\n & > .af-header-container {\n display: flex;\n width: auto;\n height: common.rem(80);\n padding: 0 3.75rem;\n border-top: 2px solid var(--color-axa);\n border-bottom: 1px solid var(--color-gray-300);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-axa);\n\n @include common.media-breakpoint-down(md) {\n width: 100%;\n height: 72px;\n padding: 0 1rem;\n }\n\n & > .af-header-left-item {\n display: flex;\n height: 5rem;\n flex-direction: row;\n align-items: center;\n gap: 1.5rem;\n\n & > .af-logo {\n width: 56px;\n height: 56px;\n\n @include common.media-breakpoint-down(md) {\n width: 40px;\n height: 40px;\n align-self: center;\n }\n }\n\n & > nav {\n display: block;\n }\n\n @include common.media-breakpoint-down(md) {\n & > nav {\n display: none;\n }\n }\n }\n\n & > .af-header-right-item {\n display: flex;\n margin: 0;\n flex-direction: row;\n gap: var(--spacing-u2);\n\n @include common.media-breakpoint-down(md) {\n display: none;\n }\n }\n\n & > .af-btn-client {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n display: block;\n }\n }\n }\n}\n\n.af-header-overlay {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n &.open {\n position: fixed;\n z-index: 1;\n inset: 0;\n display: block;\n opacity: 0.5;\n background: var(--color-gray-900);\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,SAGA,CDGE,gCAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,iBAAA,CAFA,UCUJ,CCmLI,6BF/LF,gCAiBI,WAAA,CACA,cAAA,CAFA,UCEJ,CACF,CDEI,qDAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CAEA,UAAA,CAHA,WCGN,CDEM,8DAEE,WAAA,CADA,UCCR,CCiKI,6BFnKE,8DAOI,iBAAA,CADA,WAAA,CADA,UCGR,CACF,CDEM,yDACE,aCAR,CCuJI,6BFnJI,yDACE,YCDR,CACF,CDKI,sDACE,YAAA,CAEA,kBAAA,CACA,qBAAA,CAFA,QCDN,CC4II,6BF7IA,sDAOI,YCFN,CACF,CDKI,+CACE,YCHN,CCoII,6BFlIA,+CAII,aCFN,CACF,CDOA,mBACE,YCJF,CC2HI,6BFpHA,wBAME,gCAAA,CCPJ,aAAA,CDII,OAAA,CAEA,UAAA,CCTN,cAAA,CACE,SAKA,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n position: sticky;\n z-index: 2;\n top: 0;\n background-color: var(--color-white);\n\n & > .af-header-container {\n display: flex;\n width: auto;\n height: common.rem(80);\n padding: 0 3.75rem;\n border-top: 2px solid var(--color-axa);\n border-bottom: 1px solid var(--color-gray-300);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-axa);\n\n @include common.media-breakpoint-down(md) {\n width: 100%;\n height: 72px;\n padding: 0 1rem;\n }\n\n & > .af-header-left-item {\n display: flex;\n height: 5rem;\n flex-direction: row;\n align-items: center;\n gap: 1.5rem;\n\n & > .af-logo {\n width: 56px;\n height: 56px;\n\n @include common.media-breakpoint-down(md) {\n width: 40px;\n height: 40px;\n align-self: center;\n }\n }\n\n & > nav {\n display: block;\n }\n\n @include common.media-breakpoint-down(md) {\n & > nav {\n display: none;\n }\n }\n }\n\n & > .af-header-right-item {\n display: flex;\n margin: 0;\n flex-direction: row;\n gap: var(--spacing-u2);\n\n @include common.media-breakpoint-down(md) {\n display: none;\n }\n }\n\n & > .af-btn-client {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n display: block;\n }\n }\n }\n}\n\n.af-header-overlay {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n &.open {\n position: fixed;\n z-index: 1;\n inset: 0;\n display: block;\n opacity: 0.5;\n background: var(--color-gray-900);\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n position: sticky;\n z-index: 2;\n top: 0;\n background-color: var(--color-white);\n\n & > .af-header-container {\n display: flex;\n width: auto;\n height: common.rem(80);\n padding: 0 3.75rem;\n border-top: 2px solid var(--color-axa);\n border-bottom: 1px solid var(--color-gray-300);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-family-sans-serif);\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--color-axa);\n\n @include common.media-breakpoint-down(md) {\n width: 100%;\n height: 72px;\n padding: 0 1rem;\n }\n\n & > .af-header-left-item {\n display: flex;\n height: 5rem;\n flex-direction: row;\n align-items: center;\n gap: 1.5rem;\n\n & > .af-logo {\n width: 56px;\n height: 56px;\n\n @include common.media-breakpoint-down(md) {\n width: 40px;\n height: 40px;\n align-self: center;\n }\n }\n\n & > nav {\n display: block;\n }\n\n @include common.media-breakpoint-down(md) {\n & > nav {\n display: none;\n }\n }\n }\n\n & > .af-header-right-item {\n display: flex;\n margin: 0;\n flex-direction: row;\n gap: var(--spacing-u2);\n\n @include common.media-breakpoint-down(md) {\n display: none;\n }\n }\n\n & > .af-btn-client {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n display: block;\n }\n }\n }\n}\n\n.af-header-overlay {\n display: none;\n\n @include common.media-breakpoint-down(md) {\n &.open {\n position: fixed;\n z-index: 1;\n inset: 0;\n display: block;\n opacity: 0.5;\n background: var(--color-gray-900);\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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; // prefer use $color-gray-200\n$color-focus: #36f !default; // prefer use $color-blue-3\n\n// others\n\n$default-border-radius: 4px !default;\n$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
package/dist/Layout/Header/PreviousLink/PreviousLink.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/Layout/Header/PreviousLink/PreviousLink.scss%23sass","../../../../src/Layout/Header/PreviousLink/PreviousLink.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,mCAGE,kBAAA,CAFA,YAAA,CAGA,UAAA,CCJF,gBAGA,CCoLI,0BFvLJ,mCCME,yBACA,CACF,CDEE,wEAIE,2BAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCCJ,CDEI,4EACE,0BCAN,CCsKI,0BF7KF,wEAWI,kBAAA,CACA,sBCAJ,CACF","file":"PreviousLink.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n display: flex;\n padding-top: 1rem;\n align-items: center;\n gap: 0.25rem;\n\n @include common.media-breakpoint-up(md) {\n padding: 1.5rem 0 0 7.5rem;\n }\n\n .af-btn-client--header-previous-link {\n font-size: common.rem(16);\n font-weight: 400;\n line-height: common.rem(20);\n color: var(--color-gray-700);\n\n svg {\n fill: var(--color-gray-700);\n }\n\n @include common.media-breakpoint-up(md) {\n font-size: common.rem(18);\n line-height: common.rem(22.5);\n }\n }\n}\n","@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n display: flex;\n padding-top: 1rem;\n align-items: center;\n gap: 0.25rem;\n\n @include common.media-breakpoint-up(md) {\n padding: 1.5rem 0 0 7.5rem;\n }\n\n .af-btn-client--header-previous-link {\n font-size: common.rem(16);\n font-weight: 400;\n line-height: common.rem(20);\n color: var(--color-gray-700);\n\n svg {\n fill: var(--color-gray-700);\n }\n\n @include common.media-breakpoint-up(md) {\n font-size: common.rem(18);\n line-height: common.rem(22.5);\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/Layout/Header/PreviousLink/PreviousLink.scss%23sass","../../../../src/Layout/Header/PreviousLink/PreviousLink.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,mCAGE,kBAAA,CAFA,YAAA,CAGA,UAAA,CCJF,gBAGA,CCoLI,0BFvLJ,mCCME,yBACA,CACF,CDEE,wEAIE,2BAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCCJ,CDEI,4EACE,0BCAN,CCsKI,0BF7KF,wEAWI,kBAAA,CACA,sBCAJ,CACF","file":"PreviousLink.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n display: flex;\n padding-top: 1rem;\n align-items: center;\n gap: 0.25rem;\n\n @include common.media-breakpoint-up(md) {\n padding: 1.5rem 0 0 7.5rem;\n }\n\n .af-btn-client--header-previous-link {\n font-size: common.rem(16);\n font-weight: 400;\n line-height: common.rem(20);\n color: var(--color-gray-700);\n\n svg {\n fill: var(--color-gray-700);\n }\n\n @include common.media-breakpoint-up(md) {\n font-size: common.rem(18);\n line-height: common.rem(22.5);\n }\n }\n}\n","@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n display: flex;\n padding-top: 1rem;\n align-items: center;\n gap: 0.25rem;\n\n @include common.media-breakpoint-up(md) {\n padding: 1.5rem 0 0 7.5rem;\n }\n\n .af-btn-client--header-previous-link {\n font-size: common.rem(16);\n font-weight: 400;\n line-height: common.rem(20);\n color: var(--color-gray-700);\n\n svg {\n fill: var(--color-gray-700);\n }\n\n @include common.media-breakpoint-up(md) {\n font-size: common.rem(18);\n line-height: common.rem(22.5);\n }\n }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\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-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; // prefer use $color-gray-200\n$color-focus: #36f !default; // prefer use $color-blue-3\n\n// others\n\n$default-border-radius: 4px !default;\n$radius-8: 8px !default;\n$radius-100: 100% !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// Grid 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\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: $breakpoint-xs,\n sm: $breakpoint-sm,\n md: $breakpoint-md,\n lg: $breakpoint-lg,\n xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n// (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $grid-breakpoints,\n $breakpoint-names: map.keys($breakpoints)\n) {\n $n: list.index($breakpoint-names, $name);\n\n @return if(\n $n < list.length($breakpoint-names),\n list.nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n// >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map.get($breakpoints, $name);\n\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n// >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n// 1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n\n @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n"]}
package/dist/common/common.scss CHANGED
@@ -38,8 +38,8 @@ $color-gray-500: #999;
38
38
  $color-gray-700: #5f5f5f;
39
39
  $color-gray-900: #333 !default;
40
40
  $color-green-600: #118635 !default;
41
- $color-border: #f3f3f3 !default;
42
- $color-focus: #36f !default;
41
+ $color-border: #f3f3f3 !default; // prefer use $color-gray-200
42
+ $color-focus: #36f !default; // prefer use $color-blue-3
43
43
 
44
44
  // others
45
45
 
package/dist/common/tokens.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AAEA,MCAA,yDAAA,CDGE,uDAAA,CACA,mDAAA,CACA,gDAAA,CACA,sCAAA,CACA,mBAAA,CAIA,kBAAA,CACA,kBAAA,CAGA,mBAAA,CACA,sBAAA,CACA,sBAAA,CACA,mBAAA,CACA,0BAAA,CACA,yBAAA,CACA,kBAAA,CACA,4BAAA,CACA,sCAAA,CACA,uCAAA,CAGA,mBAAA,CACA,uBAAA,CACA,8BAAA,CACA,4BAAA,CACA,6BAAA,CACA,yBAAA,CAGA,yCAAA,CACA,qCAAA,CACA,4BAAA,CACA,iCAAA,CACA,kCAAA,CAGA,oBAAA,CACA,mBAAA,CACA,wBAAA,CACA,wBAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,qBAAA,CACA,8BAAA,CACA,sBAAA,CAGA,yBAAA,CAIA,aAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,gBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,iBAAA,CAIA,oBAAA,CACA,cAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,oBAAA,CACA,oBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CAIA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,uBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,sBAAA,CAIA,2BAAA,CACA,cAAA,CACA,iBAAA,CAIA,0BClBF","file":"tokens.css","sourcesContent":["@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n --font-size-base: 16;\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus};\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border};\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n","@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n --font-size-base: 16;\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus};\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border};\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n"]}
1
+ {"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AAEA,MCAA,yDAAA,CDGE,uDAAA,CACA,mDAAA,CACA,gDAAA,CACA,sCAAA,CACA,mBAAA,CAIA,kBAAA,CACA,kBAAA,CAGA,mBAAA,CACA,sBAAA,CACA,sBAAA,CACA,mBAAA,CACA,0BAAA,CACA,yBAAA,CACA,kBAAA,CACA,4BAAA,CACA,sCAAA,CACA,uCAAA,CAGA,mBAAA,CACA,uBAAA,CACA,8BAAA,CACA,4BAAA,CACA,6BAAA,CACA,yBAAA,CAGA,yCAAA,CACA,qCAAA,CACA,4BAAA,CACA,iCAAA,CACA,kCAAA,CAGA,oBAAA,CACA,mBAAA,CACA,wBAAA,CACA,wBAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,qBAAA,CACA,8BAAA,CACA,sBAAA,CAGA,yBAAA,CAIA,aAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,gBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,iBAAA,CAIA,oBAAA,CACA,cAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,oBAAA,CACA,oBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CAIA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,uBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,sBAAA,CAIA,2BAAA,CACA,cAAA,CACA,iBAAA,CAIA,0BClBF","file":"tokens.css","sourcesContent":["@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n --font-size-base: 16;\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus}; /* prefer use --color-blue-3*/\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border}; /* prefer use --color-gray-200*/\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n","@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n --font-size-base: 16;\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus}; // prefer use --color-blue-3\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border}; // prefer use --color-gray-200\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n"]}
package/dist/common/tokens.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --color-blue-3: #{common.$color-blue-3};
22
22
  --color-ocean-blue: #{common.$color-oceanBlue};
23
23
  --color-btn-light: #{common.$color-btn-light};
24
- --color-focus: #{common.$color-focus};
24
+ --color-focus: #{common.$color-focus}; // prefer use --color-blue-3
25
25
  --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};
26
26
  --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};
27
27
  --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};
@@ -51,7 +51,7 @@
51
51
  --color-gray-700: #{common.$color-gray-700};
52
52
  --color-gray-900: #{common.$color-gray-900};
53
53
  --color-btn-disabled-text: #{common.$color-btn-disabled-text};
54
- --color-border: #{common.$color-border};
54
+ --color-border: #{common.$color-border}; // prefer use --color-gray-200
55
55
 
56
56
  /* green */
57
57
  --color-green-600: #{common.$color-green-600};