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

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 (112) hide show
  1. package/dist/Accordion/Accordion.css +1 -0
  2. package/dist/Accordion/Accordion.css.map +1 -0
  3. package/dist/Accordion/Accordion.scss +74 -0
  4. package/dist/Alert/Alert.css +1 -0
  5. package/dist/Alert/Alert.css.map +1 -0
  6. package/dist/Alert/Alert.scss +104 -0
  7. package/dist/Button/Button.css +1 -0
  8. package/dist/Button/Button.css.map +1 -0
  9. package/dist/Button/Button.scss +148 -0
  10. package/dist/Card/Card.css +1 -0
  11. package/dist/Card/Card.css.map +1 -0
  12. package/dist/Card/Card.scss +48 -0
  13. package/dist/Form/Checkbox/Checkbox.css +1 -0
  14. package/dist/Form/Checkbox/Checkbox.css.map +1 -0
  15. package/dist/Form/Checkbox/Checkbox.scss +218 -0
  16. package/dist/Form/FileUpload/FileUpload.css +1 -0
  17. package/dist/Form/FileUpload/FileUpload.css.map +1 -0
  18. package/dist/Form/FileUpload/FileUpload.scss +191 -0
  19. package/dist/Form/InputError/InputError.css +1 -0
  20. package/dist/Form/InputError/InputError.css.map +1 -0
  21. package/dist/Form/InputError/InputError.scss +19 -0
  22. package/dist/Form/Radio/Radio.css +1 -0
  23. package/dist/Form/Radio/Radio.css.map +1 -0
  24. package/dist/Form/Radio/Radio.scss +221 -0
  25. package/dist/Form/Select/Select.css +1 -0
  26. package/dist/Form/Select/Select.css.map +1 -0
  27. package/dist/Form/Select/Select.scss +116 -0
  28. package/dist/Form/Text/Text.css +1 -0
  29. package/dist/Form/Text/Text.css.map +1 -0
  30. package/dist/Form/Text/Text.scss +56 -0
  31. package/dist/Form/core/FormCore.css +0 -0
  32. package/dist/Form/core/FormCore.scss +1 -0
  33. package/dist/IconBg/IconBg.css +1 -0
  34. package/dist/IconBg/IconBg.css.map +1 -0
  35. package/dist/IconBg/IconBg.scss +38 -0
  36. package/dist/Layout/Footer/Footer.css +1 -0
  37. package/dist/Layout/Footer/Footer.css.map +1 -0
  38. package/dist/Layout/Footer/Footer.scss +173 -0
  39. package/dist/Layout/Header/Header.css +1 -0
  40. package/dist/Layout/Header/Header.css.map +1 -0
  41. package/dist/Layout/Header/Header.scss +84 -0
  42. package/dist/Layout/Header/NavBar/NavBar.css +1 -0
  43. package/dist/Layout/Header/NavBar/NavBar.css.map +1 -0
  44. package/dist/Layout/Header/NavBar/NavBar.scss +50 -0
  45. package/dist/Layout/Header/PreviousLink/PreviousLink.css +1 -0
  46. package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -0
  47. package/dist/Layout/Header/PreviousLink/PreviousLink.scss +42 -0
  48. package/dist/Link/Link.css +1 -0
  49. package/dist/Link/Link.css.map +1 -0
  50. package/dist/Link/Link.scss +44 -0
  51. package/dist/List/ClickList/ClickList.css +1 -0
  52. package/dist/List/ClickList/ClickList.css.map +1 -0
  53. package/dist/List/ClickList/ClickList.scss +228 -0
  54. package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -0
  55. package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -0
  56. package/dist/List/ContentItemDuo/ContentItemDuo.scss +168 -0
  57. package/dist/List/ContentItemMono/ContentItemMono.css +1 -0
  58. package/dist/List/ContentItemMono/ContentItemMono.css.map +1 -0
  59. package/dist/List/ContentItemMono/ContentItemMono.scss +188 -0
  60. package/dist/List/ContentTabList/ContentTabList.css +1 -0
  61. package/dist/List/ContentTabList/ContentTabList.css.map +1 -0
  62. package/dist/List/ContentTabList/ContentTabList.scss +161 -0
  63. package/dist/List/List.css +1 -0
  64. package/dist/List/List.css.map +1 -0
  65. package/dist/List/List.scss +53 -0
  66. package/dist/Loader/Loader.css +1 -0
  67. package/dist/Loader/Loader.css.map +1 -0
  68. package/dist/Loader/Loader.scss +26 -0
  69. package/dist/Modal/Modal.css +1 -0
  70. package/dist/Modal/Modal.css.map +1 -0
  71. package/dist/Modal/Modal.scss +128 -0
  72. package/dist/Pagination/Pagination.css +1 -0
  73. package/dist/Pagination/Pagination.css.map +1 -0
  74. package/dist/Pagination/Pagination.scss +8 -0
  75. package/dist/Pagination/PaginationDesktop.css +1 -0
  76. package/dist/Pagination/PaginationDesktop.css.map +1 -0
  77. package/dist/Pagination/PaginationDesktop.scss +68 -0
  78. package/dist/Pagination/PaginationMobile.css +1 -0
  79. package/dist/Pagination/PaginationMobile.css.map +1 -0
  80. package/dist/Pagination/PaginationMobile.scss +35 -0
  81. package/dist/Stepper/Stepper.css +1 -0
  82. package/dist/Stepper/Stepper.css.map +1 -0
  83. package/dist/Stepper/Stepper.scss +53 -0
  84. package/dist/Tabs/Tabs.css +1 -0
  85. package/dist/Tabs/Tabs.css.map +1 -0
  86. package/dist/Tabs/Tabs.scss +63 -0
  87. package/dist/Tag/Tag.css +1 -0
  88. package/dist/Tag/Tag.css.map +1 -0
  89. package/dist/Tag/Tag.scss +48 -0
  90. package/dist/Title/Title.css +1 -0
  91. package/dist/Title/Title.css.map +1 -0
  92. package/dist/Title/Title.scss +76 -0
  93. package/dist/common/assets/logo-axa.svg +40 -0
  94. package/dist/common/common.css +0 -0
  95. package/dist/common/common.scss +107 -0
  96. package/dist/common/glyphicons/icons.eot +0 -0
  97. package/dist/common/glyphicons/icons.svg +918 -0
  98. package/dist/common/glyphicons/icons.ttf +0 -0
  99. package/dist/common/glyphicons/icons.woff +0 -0
  100. package/dist/common/grid.css +1 -0
  101. package/dist/common/grid.css.map +1 -0
  102. package/dist/common/grid.scss +1029 -0
  103. package/dist/common/icons.css +1 -0
  104. package/dist/common/icons.css.map +1 -0
  105. package/dist/common/icons.scss +1236 -0
  106. package/dist/common/reboot.css +1 -0
  107. package/dist/common/reboot.css.map +1 -0
  108. package/dist/common/reboot.scss +337 -0
  109. package/dist/look-and-feel.css +1 -0
  110. package/dist/look-and-feel.css.map +1 -0
  111. package/dist/look-and-feel.scss +27 -0
  112. package/package.json +108 -0
@@ -0,0 +1 @@
1
+ .af-accordion-client{background-color:#fff;border-radius:8px;display:block;font-family:Source Sans Pro,arial,sans-serif;margin:0;padding:0}.af-accordion-client__item:not(:last-child){border-bottom:1px solid #e9ecf2}.af-accordion-client__item>h3{font-size:1.125rem;font-weight:600;margin:0;width:100%}.af-accordion-client__item>h3:has(button[aria-expanded=true]){border-bottom:none;color:#00008f}.af-accordion-client__item>h3>button{align-items:center;background-color:inherit;border:0;color:inherit;cursor:pointer;display:flex;font-size:1.125rem;font-weight:600;padding:15px 20px;text-align:start;width:100%}.af-accordion-client__item>h3>button:focus{outline:unset}.af-accordion-client__item>h3>button:focus-visible{outline:2px solid #36f;outline-offset:3px}.af-accordion-client__item>h3>button:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%2300008F' d='m24 13.333-1.88-1.88L16 17.56l-6.12-6.107L8 13.333l8 8z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M32 0v32H0V0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100%;content:"";flex-shrink:0;height:32px;margin-left:auto;transition:transform .2s ease-in-out;width:32px}.af-accordion-client__item>h3>button[aria-expanded=true]:after{transform:rotate(180deg)}.af-accordion-client__item>[role=region]{margin-bottom:1rem;padding:0 20px}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Accordion/Accordion.scss%23sass","../../src/Accordion/Accordion.scss"],"names":[],"mappings":"AAEA,qBAME,qBAAA,CAFA,iBAAA,CAHA,aAAA,CAIA,4CAAA,CCLF,QAAA,CDGE,SCEF,CDII,4CACE,+BCFN,CDKI,8BAGE,kBAAA,CACA,eAAA,CAFA,QAAA,CADA,UCAN,CDKM,8DACE,kBAAA,CACA,aCHR,CDMM,qCAKE,kBAAA,CAKA,wBAAA,CANA,QAAA,CAKA,aAAA,CAEA,cAAA,CAVA,YAAA,CAKA,kBAAA,CACA,eAAA,CAJA,iBAAA,CAKA,gBAAA,CANA,UCKR,CDMQ,2CACE,aCJV,CDOQ,mDACE,sBAAA,CACA,kBCLV,CDQQ,2CAKE,uYAAA,CACA,2BAAA,CACA,oBAAA,CAEA,UAAA,CALA,aAAA,CAFA,WAAA,CACA,gBAAA,CAKA,oCAAA,CAPA,UCEV,CDUU,+DACE,wBCRZ,CDcI,yCACE,kBAAA,CACA,cCZN","file":"Accordion.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-accordion-client {\n display: block;\n margin: 0;\n padding: 0;\n border-radius: 8px;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n background-color: common.$color-white;\n\n &__item {\n &:not(:last-child) {\n border-bottom: 1px solid #e9ecf2;\n }\n\n & > h3 {\n width: 100%;\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n\n &:has(button[aria-expanded=\"true\"]) {\n border-bottom: none;\n color: common.$color-axa;\n }\n\n & > button {\n display: flex;\n width: 100%;\n padding: 15px 20px;\n border: 0;\n align-items: center;\n font-size: 1.125rem;\n font-weight: 600;\n text-align: start;\n color: inherit;\n background-color: inherit;\n cursor: pointer;\n\n &:focus {\n outline: unset;\n }\n\n &:focus-visible {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n\n &::after {\n width: 32px;\n height: 32px;\n margin-left: auto;\n flex-shrink: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_14583_27882)%22%3E%0A%3Cpath%20d%3D%22M24%2013.3331L22.12%2011.4531L16%2017.5598L9.88%2011.4531L8%2013.3331L16%2021.3331L24%2013.3331Z%22%20fill%3D%22%2300008F%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_14583_27882%22%3E%0A%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20transform%3D%22matrix(0%201%20-1%200%2032%200)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A\");\n background-repeat: no-repeat;\n background-size: 100%;\n transition: transform 0.2s ease-in-out;\n content: \"\";\n }\n\n &[aria-expanded=\"true\"] {\n &::after {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n & > [role=\"region\"] {\n margin-bottom: 1rem;\n padding: 0 20px;\n }\n }\n}\n","@use \"../common/common\" as common;\n\n.af-accordion-client {\n display: block;\n margin: 0;\n padding: 0;\n border-radius: 8px;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n background-color: common.$color-white;\n\n &__item {\n &:not(:last-child) {\n border-bottom: 1px solid #e9ecf2;\n }\n\n & > h3 {\n width: 100%;\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n\n &:has(button[aria-expanded=\"true\"]) {\n border-bottom: none;\n color: common.$color-axa;\n }\n\n & > button {\n display: flex;\n width: 100%;\n padding: 15px 20px;\n border: 0;\n align-items: center;\n font-size: 1.125rem;\n font-weight: 600;\n text-align: start;\n color: inherit;\n background-color: inherit;\n cursor: pointer;\n\n &:focus {\n outline: unset;\n }\n\n &:focus-visible {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n\n &::after {\n width: 32px;\n height: 32px;\n margin-left: auto;\n flex-shrink: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_14583_27882)%22%3E%0A%3Cpath%20d%3D%22M24%2013.3331L22.12%2011.4531L16%2017.5598L9.88%2011.4531L8%2013.3331L16%2021.3331L24%2013.3331Z%22%20fill%3D%22%2300008F%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_14583_27882%22%3E%0A%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20transform%3D%22matrix(0%201%20-1%200%2032%200)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A\");\n background-repeat: no-repeat;\n background-size: 100%;\n transition: transform 0.2s ease-in-out;\n content: \"\";\n }\n\n &[aria-expanded=\"true\"] {\n &::after {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n & > [role=\"region\"] {\n margin-bottom: 1rem;\n padding: 0 20px;\n }\n }\n}\n"]}
@@ -0,0 +1,74 @@
1
+ @use "../common/common" as common;
2
+
3
+ .af-accordion-client {
4
+ display: block;
5
+ margin: 0;
6
+ padding: 0;
7
+ border-radius: 8px;
8
+ font-family: "Source Sans Pro", arial, sans-serif;
9
+ background-color: common.$color-white;
10
+
11
+ &__item {
12
+ &:not(:last-child) {
13
+ border-bottom: 1px solid #e9ecf2;
14
+ }
15
+
16
+ & > h3 {
17
+ width: 100%;
18
+ margin: 0;
19
+ font-size: 1.125rem;
20
+ font-weight: 600;
21
+
22
+ &:has(button[aria-expanded="true"]) {
23
+ border-bottom: none;
24
+ color: common.$color-axa;
25
+ }
26
+
27
+ & > button {
28
+ display: flex;
29
+ width: 100%;
30
+ padding: 15px 20px;
31
+ border: 0;
32
+ align-items: center;
33
+ font-size: 1.125rem;
34
+ font-weight: 600;
35
+ text-align: start;
36
+ color: inherit;
37
+ background-color: inherit;
38
+ cursor: pointer;
39
+
40
+ &:focus {
41
+ outline: unset;
42
+ }
43
+
44
+ &:focus-visible {
45
+ outline: 2px solid common.$color-blue-3;
46
+ outline-offset: 3px;
47
+ }
48
+
49
+ &::after {
50
+ width: 32px;
51
+ height: 32px;
52
+ margin-left: auto;
53
+ flex-shrink: 0;
54
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_14583_27882)%22%3E%0A%3Cpath%20d%3D%22M24%2013.3331L22.12%2011.4531L16%2017.5598L9.88%2011.4531L8%2013.3331L16%2021.3331L24%2013.3331Z%22%20fill%3D%22%2300008F%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_14583_27882%22%3E%0A%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20transform%3D%22matrix(0%201%20-1%200%2032%200)%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A");
55
+ background-repeat: no-repeat;
56
+ background-size: 100%;
57
+ transition: transform 0.2s ease-in-out;
58
+ content: "";
59
+ }
60
+
61
+ &[aria-expanded="true"] {
62
+ &::after {
63
+ transform: rotate(180deg);
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ & > [role="region"] {
70
+ margin-bottom: 1rem;
71
+ padding: 0 20px;
72
+ }
73
+ }
74
+ }
@@ -0,0 +1 @@
1
+ .af-alert{align-items:center;background-color:#fff;border-radius:12px;display:flex;flex:1 1;font-family:Source Sans Pro,arial,sans-serif;margin-top:1rem;padding:1rem}.af-alert .af-alert__icon{aspect-ratio:1;flex-shrink:0;margin-right:1rem}.af-alert--information{border:1px solid #00008f}.af-alert--information .af-alert__icon{color:#00008f;transform:rotate(180deg);fill:#00008f}.af-alert--information .af-alert__title{color:#00008f}.af-alert--error{border:1px solid #c91432}.af-alert--error .af-alert__icon{color:#c91432;fill:#c91432}.af-alert--error .af-alert__title{color:#c91432}.af-alert--neutral{border:1px solid #5f5f5f}.af-alert--neutral .af-alert__icon{color:#5f5f5f;fill:#5f5f5f}.af-alert--neutral .af-alert__title{color:#5f5f5f}.af-alert--warning{border:1px solid #c94e14}.af-alert--warning .af-alert__icon{color:#c94e14;fill:#c94e14}.af-alert--warning .af-alert__title{color:#c94e14}.af-alert--validation{border:1px solid #118635}.af-alert--validation .af-alert__icon{color:#118635;fill:#118635}.af-alert--validation .af-alert__title{color:#118635}.af-alert .af-alert-client__content{width:100%}.af-alert .af-alert-client__content .af-alert__link{text-align:right}.af-alert .af-alert-client__content .af-alert__title{font-weight:600;line-height:1.5rem;padding-bottom:.25rem}.af-alert *{font-size:1.125rem;font-weight:400;margin:0}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Alert/Alert.scss%23sass","../../src/Alert/Alert.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,UAME,kBAAA,CAEA,qBAAA,CAJA,kBAAA,CAHA,YAAA,CAIA,QAAA,CAEA,4CAAA,CCPF,eAAA,CDGE,YCIF,CDGE,0BACE,cAAA,CAEA,aAAA,CADA,iBCAJ,CDIE,uBACE,wBCFJ,CDII,uCACE,aAAA,CACA,wBAAA,CACA,YCFN,CDKI,wCACE,aCHN,CDOE,iBACE,wBCLJ,CDOI,iCACE,aAAA,CACA,YCLN,CDQI,kCACE,aCNN,CDUE,mBACE,wBCRJ,CDUI,mCACE,aAAA,CACA,YCRN,CDWI,oCACE,aCTN,CDaE,mBACE,wBCXJ,CDaI,mCACE,aAAA,CACA,YCXN,CDcI,oCACE,aCZN,CDgBE,sBACE,wBCdJ,CDgBI,sCACE,aExCY,CFyCZ,YCdN,CDiBI,uCACE,aCfN,CDmBE,oCACE,UCjBJ,CDmBI,oDACE,gBCjBN,CDoBI,qDAEE,eAAA,CACA,kBAAA,CAFA,qBChBN,CDsBE,YAEE,kBAAA,CACA,eAAA,CAFA,QClBJ","file":"Alert.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-alert {\n display: flex;\n margin-top: 1rem;\n padding: 1rem;\n border-radius: 12px;\n flex: 1 1 0;\n align-items: center;\n font-family: common.$font-family-base;\n background-color: white;\n\n .af-alert__icon {\n aspect-ratio: 1;\n margin-right: 1rem;\n flex-shrink: 0;\n }\n\n &--information {\n border: 1px solid common.$color-axa;\n\n .af-alert__icon {\n color: common.$color-axa;\n transform: rotate(180deg);\n fill: common.$color-axa;\n }\n\n .af-alert__title {\n color: common.$color-axa;\n }\n }\n\n &--error {\n border: 1px solid common.$color-red-700;\n\n .af-alert__icon {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n\n .af-alert__title {\n color: common.$color-red-700;\n }\n }\n\n &--neutral {\n border: 1px solid common.$color-gray;\n\n .af-alert__icon {\n color: common.$color-gray;\n fill: common.$color-gray;\n }\n\n .af-alert__title {\n color: common.$color-gray;\n }\n }\n\n &--warning {\n border: 1px solid common.$color-btn-business;\n\n .af-alert__icon {\n color: common.$color-btn-business;\n fill: common.$color-btn-business;\n }\n\n .af-alert__title {\n color: common.$color-btn-business;\n }\n }\n\n &--validation {\n border: 1px solid common.$color-green-600;\n\n .af-alert__icon {\n color: common.$color-green-600;\n fill: common.$color-green-600;\n }\n\n .af-alert__title {\n color: common.$color-green-600;\n }\n }\n\n .af-alert-client__content {\n width: 100%;\n\n .af-alert__link {\n text-align: right;\n }\n\n .af-alert__title {\n padding-bottom: 0.25rem;\n font-weight: 600;\n line-height: 1.5rem;\n }\n }\n\n * {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 400;\n }\n}\n","@use \"../common/common\" as common;\n\n.af-alert {\n display: flex;\n margin-top: 1rem;\n padding: 1rem;\n border-radius: 12px;\n flex: 1 1 0;\n align-items: center;\n font-family: common.$font-family-base;\n background-color: white;\n\n .af-alert__icon {\n aspect-ratio: 1;\n margin-right: 1rem;\n flex-shrink: 0;\n }\n\n &--information {\n border: 1px solid common.$color-axa;\n\n .af-alert__icon {\n color: common.$color-axa;\n transform: rotate(180deg);\n fill: common.$color-axa;\n }\n\n .af-alert__title {\n color: common.$color-axa;\n }\n }\n\n &--error {\n border: 1px solid common.$color-red-700;\n\n .af-alert__icon {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n\n .af-alert__title {\n color: common.$color-red-700;\n }\n }\n\n &--neutral {\n border: 1px solid common.$color-gray;\n\n .af-alert__icon {\n color: common.$color-gray;\n fill: common.$color-gray;\n }\n\n .af-alert__title {\n color: common.$color-gray;\n }\n }\n\n &--warning {\n border: 1px solid common.$color-btn-business;\n\n .af-alert__icon {\n color: common.$color-btn-business;\n fill: common.$color-btn-business;\n }\n\n .af-alert__title {\n color: common.$color-btn-business;\n }\n }\n\n &--validation {\n border: 1px solid common.$color-green-600;\n\n .af-alert__icon {\n color: common.$color-green-600;\n fill: common.$color-green-600;\n }\n\n .af-alert__title {\n color: common.$color-green-600;\n }\n }\n\n .af-alert-client__content {\n width: 100%;\n\n .af-alert__link {\n text-align: right;\n }\n\n .af-alert__title {\n padding-bottom: 0.25rem;\n font-weight: 600;\n line-height: 1.5rem;\n }\n }\n\n * {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 400;\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"]}
@@ -0,0 +1,104 @@
1
+ @use "../common/common" as common;
2
+
3
+ .af-alert {
4
+ display: flex;
5
+ margin-top: 1rem;
6
+ padding: 1rem;
7
+ border-radius: 12px;
8
+ flex: 1 1 0;
9
+ align-items: center;
10
+ font-family: common.$font-family-base;
11
+ background-color: white;
12
+
13
+ .af-alert__icon {
14
+ aspect-ratio: 1;
15
+ margin-right: 1rem;
16
+ flex-shrink: 0;
17
+ }
18
+
19
+ &--information {
20
+ border: 1px solid common.$color-axa;
21
+
22
+ .af-alert__icon {
23
+ color: common.$color-axa;
24
+ transform: rotate(180deg);
25
+ fill: common.$color-axa;
26
+ }
27
+
28
+ .af-alert__title {
29
+ color: common.$color-axa;
30
+ }
31
+ }
32
+
33
+ &--error {
34
+ border: 1px solid common.$color-red-700;
35
+
36
+ .af-alert__icon {
37
+ color: common.$color-red-700;
38
+ fill: common.$color-red-700;
39
+ }
40
+
41
+ .af-alert__title {
42
+ color: common.$color-red-700;
43
+ }
44
+ }
45
+
46
+ &--neutral {
47
+ border: 1px solid common.$color-gray;
48
+
49
+ .af-alert__icon {
50
+ color: common.$color-gray;
51
+ fill: common.$color-gray;
52
+ }
53
+
54
+ .af-alert__title {
55
+ color: common.$color-gray;
56
+ }
57
+ }
58
+
59
+ &--warning {
60
+ border: 1px solid common.$color-btn-business;
61
+
62
+ .af-alert__icon {
63
+ color: common.$color-btn-business;
64
+ fill: common.$color-btn-business;
65
+ }
66
+
67
+ .af-alert__title {
68
+ color: common.$color-btn-business;
69
+ }
70
+ }
71
+
72
+ &--validation {
73
+ border: 1px solid common.$color-green-600;
74
+
75
+ .af-alert__icon {
76
+ color: common.$color-green-600;
77
+ fill: common.$color-green-600;
78
+ }
79
+
80
+ .af-alert__title {
81
+ color: common.$color-green-600;
82
+ }
83
+ }
84
+
85
+ .af-alert-client__content {
86
+ width: 100%;
87
+
88
+ .af-alert__link {
89
+ text-align: right;
90
+ }
91
+
92
+ .af-alert__title {
93
+ padding-bottom: 0.25rem;
94
+ font-weight: 600;
95
+ line-height: 1.5rem;
96
+ }
97
+ }
98
+
99
+ * {
100
+ margin: 0;
101
+ font-size: 1.125rem;
102
+ font-weight: 400;
103
+ }
104
+ }
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:#00008f;border:0;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-family:Source Sans Pro,arial,sans-serif;font-weight:600;gap:1rem;justify-content:center;min-height:3.5rem;min-width:11.25rem;padding:.8rem 1.2rem;transition-duration:.2s;transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear}.af-btn-client:hover{background-color:#000072;color:#fff}.af-btn-client:active,.af-btn-client:focus{background-color:#3333a5;color:#fff}.af-btn-client:focus-visible{outline:2px solid #36f;outline-offset:3px}.af-btn-client>svg{aspect-ratio:1}.af-btn-client--ghost{background-color:initial;color:#00008f;gap:.25rem;min-height:auto;min-width:auto;padding:0}.af-btn-client--ghost:hover{background-color:initial;color:#000072}.af-btn-client--ghost:active,.af-btn-client--ghost:focus{background-color:initial;color:#3333a5}.af-btn-client--primary-business{background-color:#c94e14}.af-btn-client--primary-business:hover{background-color:#a8391c}.af-btn-client--primary-business:focus{background-color:#df7e65}.af-btn-client--tertiary{background-color:#eef;color:#00008f}.af-btn-client--tertiary:hover{background-color:#e4e4ff;color:#00008f}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus{background-color:#f8f8ff;color:#00008f}.af-btn-client--secondary{background-color:#fff;box-shadow:inset 0 0 0 1px #00008f;color:#00008f}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:hover{background-color:#fff;box-shadow:inset 0 0 0 2px #000072;color:#000072}.af-btn-client--secondary:active{background-color:#f8f8ff}.af-btn-client--secondary-error{background-color:#fff;box-shadow:inset 0 0 0 1px #c91432;color:#c91432}.af-btn-client--secondary-error:active,.af-btn-client--secondary-error:focus,.af-btn-client--secondary-error:hover{background-color:#fff;box-shadow:inset 0 0 0 2px #a11028;color:#a11028}.af-btn-client--secondary-error:active{background-color:#fff3f5}.af-btn-client__wrapper{align-items:center;display:flex;justify-content:center;line-height:1}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{background-color:#e9ecf2;box-shadow:none;color:#999;cursor:not-allowed}.af-btn-client:disabled:focus,.af-btn-client:disabled:hover,.af-btn-client[aria-disabled=true]:focus,.af-btn-client[aria-disabled=true]:hover{background-color:#e9ecf2;border-color:#0000;color:#999}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Button/Button.scss%23sass","../../src/common/common.scss","../../src/Button/Button.scss"],"names":[],"mappings":"AAEA,eAOE,kBAAA,CAMA,wBAAA,CARA,QAAA,CACA,iBAAA,CAMA,UAAA,CAMA,cAAA,CAjBA,YAAA,CASA,4CCZuB,CDavB,eAAA,CAFA,QAAA,CADA,sBAAA,CALA,iBAAA,CEHF,kBAAA,CFIE,oBAAA,CAUA,uBAAA,CACA,iFAAA,CAEA,iCEDF,CFIE,qBAEE,wBCXW,CDUX,UEDJ,CFKE,2CAGE,wBAAA,CADA,UEHJ,CFOE,6BACE,sBAAA,CACA,kBELJ,CFQE,mBACE,cENJ,CFSE,sBAME,wBAAA,CADA,aAAA,CADA,UAAA,CAFA,eAAA,CADA,cAAA,CAEA,SEJJ,CFSI,4BAEE,wBAAA,CADA,aENN,CFUI,yDAGE,wBAAA,CADA,aERN,CFaE,iCACE,wBEXJ,CFaI,uCACE,wBEXN,CFcI,uCACE,wBEZN,CFgBE,yBAEE,qBCpDoB,CDmDpB,aEbJ,CFgBI,+BAEE,wBAAA,CADA,aEbN,CFiBI,+DAGE,wBAAA,CADA,aEfN,CFoBE,0BAEE,qBCpFU,CDqFV,kCAAA,CAFA,aEhBJ,CFoBI,iGAIE,qBAAA,CACA,kCAAA,CAFA,aElBN,CFuBI,iCACE,wBErBN,CFyBE,gCAEE,qBAAA,CACA,kCAAA,CAFA,aErBJ,CFyBI,mHAIE,qBAAA,CACA,kCAAA,CAFA,aEvBN,CF4BI,uCACE,wBE1BN,CF8BE,wBAEE,kBAAA,CADA,YAAA,CAEA,sBAAA,CACA,aE5BJ,CF+BE,2DAGE,wBAAA,CACA,eAAA,CAFA,UAAA,CAGA,kBE9BJ,CFgCI,8IAIE,wBClHW,CDgHX,kBAAA,CACA,UE9BN","file":"Button.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-btn-client {\n display: flex;\n min-width: 11.25rem;\n min-height: 3.5rem;\n padding: 0.8rem 1.2rem;\n border: 0;\n border-radius: 8px;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: common.$font-family-base;\n font-weight: 600;\n color: common.$color-white;\n background-color: common.$color-axa;\n transition-duration: common.$transition-duration;\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n cursor: pointer;\n\n &:hover {\n color: common.$color-white;\n background-color: common.$color-blue-1;\n }\n\n &:active,\n &:focus {\n color: common.$color-white;\n background-color: common.$color-btn-light;\n }\n\n &:focus-visible {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n\n & > svg {\n aspect-ratio: 1;\n }\n\n &--ghost {\n min-width: auto;\n min-height: auto;\n padding: 0;\n gap: 0.25rem;\n color: common.$color-axa;\n background-color: transparent;\n\n &:hover {\n color: common.$color-blue-1;\n background-color: transparent;\n }\n\n &:focus,\n &:active {\n color: common.$color-btn-light;\n background-color: transparent;\n }\n }\n\n &--primary-business {\n background-color: common.$color-btn-business;\n\n &:hover {\n background-color: common.$color-btn-business-dark;\n }\n\n &:focus {\n background-color: common.$color-btn-business-light;\n }\n }\n\n &--tertiary {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg;\n\n &:hover {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg-darker;\n }\n\n &:focus,\n &:active {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg-lighter;\n }\n }\n\n &--secondary {\n color: common.$color-axa;\n background-color: common.$color-white;\n box-shadow: 0 0 0 1px common.$color-axa inset;\n\n &:hover,\n &:focus,\n &:active {\n color: common.$color-blue-1;\n background-color: common.$color-white;\n box-shadow: 0 0 0 2px common.$color-blue-1 inset;\n }\n\n &:active {\n background-color: common.$color-blue-2;\n }\n }\n\n &--secondary-error {\n color: common.$color-red-700;\n background-color: common.$color-white;\n box-shadow: 0 0 0 1px common.$color-red-700 inset;\n\n &:hover,\n &:focus,\n &:active {\n color: common.$color-btn-error-text;\n background-color: common.$color-white;\n box-shadow: 0 0 0 2px common.$color-btn-error-text inset;\n }\n\n &:active {\n background-color: common.$color-btn-error-bg;\n }\n }\n\n &__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-300;\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n border-color: transparent;\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-300;\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","@use \"../common/common\" as common;\n\n.af-btn-client {\n display: flex;\n min-width: 11.25rem;\n min-height: 3.5rem;\n padding: 0.8rem 1.2rem;\n border: 0;\n border-radius: 8px;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: common.$font-family-base;\n font-weight: 600;\n color: common.$color-white;\n background-color: common.$color-axa;\n transition-duration: common.$transition-duration;\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n cursor: pointer;\n\n &:hover {\n color: common.$color-white;\n background-color: common.$color-blue-1;\n }\n\n &:active,\n &:focus {\n color: common.$color-white;\n background-color: common.$color-btn-light;\n }\n\n &:focus-visible {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n\n & > svg {\n aspect-ratio: 1;\n }\n\n &--ghost {\n min-width: auto;\n min-height: auto;\n padding: 0;\n gap: 0.25rem;\n color: common.$color-axa;\n background-color: transparent;\n\n &:hover {\n color: common.$color-blue-1;\n background-color: transparent;\n }\n\n &:focus,\n &:active {\n color: common.$color-btn-light;\n background-color: transparent;\n }\n }\n\n &--primary-business {\n background-color: common.$color-btn-business;\n\n &:hover {\n background-color: common.$color-btn-business-dark;\n }\n\n &:focus {\n background-color: common.$color-btn-business-light;\n }\n }\n\n &--tertiary {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg;\n\n &:hover {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg-darker;\n }\n\n &:focus,\n &:active {\n color: common.$color-axa;\n background-color: common.$color-btn-tertiary-bg-lighter;\n }\n }\n\n &--secondary {\n color: common.$color-axa;\n background-color: common.$color-white;\n box-shadow: 0 0 0 1px common.$color-axa inset;\n\n &:hover,\n &:focus,\n &:active {\n color: common.$color-blue-1;\n background-color: common.$color-white;\n box-shadow: 0 0 0 2px common.$color-blue-1 inset;\n }\n\n &:active {\n background-color: common.$color-blue-2;\n }\n }\n\n &--secondary-error {\n color: common.$color-red-700;\n background-color: common.$color-white;\n box-shadow: 0 0 0 1px common.$color-red-700 inset;\n\n &:hover,\n &:focus,\n &:active {\n color: common.$color-btn-error-text;\n background-color: common.$color-white;\n box-shadow: 0 0 0 2px common.$color-btn-error-text inset;\n }\n\n &:active {\n background-color: common.$color-btn-error-bg;\n }\n }\n\n &__wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-300;\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n border-color: transparent;\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-300;\n }\n }\n}\n"]}
@@ -0,0 +1,148 @@
1
+ @use "../common/common" as common;
2
+
3
+ .af-btn-client {
4
+ display: flex;
5
+ min-width: 11.25rem;
6
+ min-height: 3.5rem;
7
+ padding: 0.8rem 1.2rem;
8
+ border: 0;
9
+ border-radius: 8px;
10
+ align-items: center;
11
+ justify-content: center;
12
+ gap: 1rem;
13
+ font-family: common.$font-family-base;
14
+ font-weight: 600;
15
+ color: common.$color-white;
16
+ background-color: common.$color-axa;
17
+ transition-duration: common.$transition-duration;
18
+ transition-property: width, height, border, color, background-color, outline,
19
+ box-shadow;
20
+ transition-timing-function: linear;
21
+ cursor: pointer;
22
+
23
+ &:hover {
24
+ color: common.$color-white;
25
+ background-color: common.$color-blue-1;
26
+ }
27
+
28
+ &:active,
29
+ &:focus {
30
+ color: common.$color-white;
31
+ background-color: common.$color-btn-light;
32
+ }
33
+
34
+ &:focus-visible {
35
+ outline: 2px solid common.$color-blue-3;
36
+ outline-offset: 3px;
37
+ }
38
+
39
+ & > svg {
40
+ aspect-ratio: 1;
41
+ }
42
+
43
+ &--ghost {
44
+ min-width: auto;
45
+ min-height: auto;
46
+ padding: 0;
47
+ gap: 0.25rem;
48
+ color: common.$color-axa;
49
+ background-color: transparent;
50
+
51
+ &:hover {
52
+ color: common.$color-blue-1;
53
+ background-color: transparent;
54
+ }
55
+
56
+ &:focus,
57
+ &:active {
58
+ color: common.$color-btn-light;
59
+ background-color: transparent;
60
+ }
61
+ }
62
+
63
+ &--primary-business {
64
+ background-color: common.$color-btn-business;
65
+
66
+ &:hover {
67
+ background-color: common.$color-btn-business-dark;
68
+ }
69
+
70
+ &:focus {
71
+ background-color: common.$color-btn-business-light;
72
+ }
73
+ }
74
+
75
+ &--tertiary {
76
+ color: common.$color-axa;
77
+ background-color: common.$color-btn-tertiary-bg;
78
+
79
+ &:hover {
80
+ color: common.$color-axa;
81
+ background-color: common.$color-btn-tertiary-bg-darker;
82
+ }
83
+
84
+ &:focus,
85
+ &:active {
86
+ color: common.$color-axa;
87
+ background-color: common.$color-btn-tertiary-bg-lighter;
88
+ }
89
+ }
90
+
91
+ &--secondary {
92
+ color: common.$color-axa;
93
+ background-color: common.$color-white;
94
+ box-shadow: 0 0 0 1px common.$color-axa inset;
95
+
96
+ &:hover,
97
+ &:focus,
98
+ &:active {
99
+ color: common.$color-blue-1;
100
+ background-color: common.$color-white;
101
+ box-shadow: 0 0 0 2px common.$color-blue-1 inset;
102
+ }
103
+
104
+ &:active {
105
+ background-color: common.$color-blue-2;
106
+ }
107
+ }
108
+
109
+ &--secondary-error {
110
+ color: common.$color-red-700;
111
+ background-color: common.$color-white;
112
+ box-shadow: 0 0 0 1px common.$color-red-700 inset;
113
+
114
+ &:hover,
115
+ &:focus,
116
+ &:active {
117
+ color: common.$color-btn-error-text;
118
+ background-color: common.$color-white;
119
+ box-shadow: 0 0 0 2px common.$color-btn-error-text inset;
120
+ }
121
+
122
+ &:active {
123
+ background-color: common.$color-btn-error-bg;
124
+ }
125
+ }
126
+
127
+ &__wrapper {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ line-height: 1;
132
+ }
133
+
134
+ &:disabled,
135
+ &[aria-disabled="true"] {
136
+ color: common.$color-btn-disabled-text;
137
+ background-color: common.$color-gray-300;
138
+ box-shadow: none;
139
+ cursor: not-allowed;
140
+
141
+ &:hover,
142
+ &:focus {
143
+ border-color: transparent;
144
+ color: common.$color-btn-disabled-text;
145
+ background-color: common.$color-gray-300;
146
+ }
147
+ }
148
+ }
@@ -0,0 +1 @@
1
+ *,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{background-color:#fff;color:#333;font-family:Source Sans Pro,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;margin:0;text-align:left}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:initial;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;margin-top:0}p{margin-bottom:1rem;margin-top:0}abbr[data-original-title],abbr[title]{border-bottom:0;cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit}address,dl,ol,ul{margin-bottom:1rem}dl,ol,ul{margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}a{background-color:initial;color:#00008f;text-decoration:none}a:hover{color:#000043;text-decoration:underline}a:not([href],[tabindex]),a:not([href],[tabindex]):focus,a:not([href],[tabindex]):hover{color:inherit;text-decoration:none}a:not([href],[tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-bottom:1rem;margin-top:0;overflow:auto}figure{margin:0 0 1rem}img{border-style:none}img,svg{vertical-align:middle}svg{overflow:hidden}table{border-collapse:collapse}caption{caption-side:bottom;color:#6c757d;padding-bottom:.5rem;padding-top:.5rem;text-align:left}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox;appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{border:0;margin:0;min-width:0;padding:0}legend{color:inherit;display:block;font-size:1.5rem;line-height:inherit;margin-bottom:.5rem;max-width:100%;padding:0;white-space:normal;width:100%}progress{vertical-align:initial}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:none;appearance:none;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}output{display:inline-block}summary{cursor:pointer;display:list-item}template{display:none}[hidden]{display:none!important}.af-card{background-color:#fff;border:1px solid #e9ecf2;border-radius:.5rem;box-shadow:0 .25rem .5rem 0 #10184114;font-family:Source Sans Pro,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25rem;padding:1rem;width:fit-content}.af-card>:last-child{margin-block-end:0}.af-card:focus-visible{border:2px solid #36f;outline:none}.af-card--elevation-2:not(:focus){box-shadow:0 .25rem .5rem 0 #10184129}.af-card__title{color:#00008f;font-size:1.125rem;font-weight:600;line-height:1.4rem}button.af-card{cursor:pointer;text-align:initial}button.af-card:active{box-shadow:none}button.af-card:focus{outline:none}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/common/reboot.scss","../../src/Card/Card.scss","../../src/Card/Card.scss%23sass","../../src/common/common.scss"],"names":[],"mappings":"AAAA,iBCGA,qBACA,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KCQA,qBAAA,CDDE,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,CADA,YAAA,CAEA,aCAF,CDGA,OACE,eCAF,CDGA,IACE,iBCCF,CDGA,QAHE,qBCKF,CDFA,IAEE,eCAF,CDGA,MACE,wBCAF,CDGA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCCF,CDGA,GACE,kBCAF,CDGA,MACE,oBAAA,CACA,mBCAF,CDGA,OACE,eCAF,CDGA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCGF,CDGA,aAEE,gBCAF,CDGA,cAEE,mBCAF,CDGA,OACE,gBCAF,CDGA,gDAIE,yBAAA,CAAA,iBCAF,CDGA,aACE,kBAAA,CACA,yCCAF,CDGA,4GAIE,cCAF,CDGA,wHAKE,iBAAA,CADA,SCCF,CDGA,uCAEE,qBAAA,CACA,SCAF,CDGA,+EAIE,0BAAA,CAAA,kBCAF,CDGA,SACE,aAAA,CACA,eCAF,CDGA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCCF,CDGA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCOF,CDGA,SACE,sBCAF,CDGA,kFAEE,WCAF,CDGA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCCF,CDGA,yCACE,uBAAA,CAAA,eCAF,CDGA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCCF,CDGA,OACE,oBCAF,CDGA,QAEE,cAAA,CADA,iBCCF,CDGA,SACE,YCAF,CDGA,SACE,sBCAF,CC5UA,SASE,qBCJY,CDFZ,wBAAA,CACA,mBAAA,CAMA,qCAAA,CALA,4CCRuB,CDSvB,cAAA,CACA,eAAA,CACA,mBAAA,CANA,YAAA,CADA,iBDwVF,CC7UE,qBACE,kBD+UJ,CC5UE,uBACE,qBAAA,CACA,YD8UJ,CC3UE,kCACE,qCD6UJ,CC1UE,gBAIE,aCzBQ,CDsBR,kBAAA,CACA,eAAA,CACA,kBD6UJ,CCxUA,eAEE,cAAA,CADA,kBD4UF,CCzUE,sBACE,eD2UJ,CCxUE,qBACE,YD0UJ","file":"Card.css","sourcesContent":["*,\n::after,\n::before {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: 1.15;\n text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n display: block;\n}\n\nbody {\n margin: 0;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n text-align: left;\n color: #333;\n background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n\np {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n border-bottom: 0;\n text-decoration: underline;\n text-decoration: underline dotted;\n text-decoration-skip-ink: none;\n cursor: help;\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\ndl,\nol,\nul {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: 700;\n}\n\ndd {\n margin-bottom: 0.5rem;\n margin-left: 0;\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n position: relative;\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\na {\n text-decoration: none;\n color: #00008f;\n background-color: transparent;\n}\n\na:hover {\n text-decoration: underline;\n color: #000043;\n}\n\na:not([href], [tabindex]) {\n text-decoration: none;\n color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n text-decoration: none;\n color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-size: 1em;\n}\n\npre {\n margin-top: 0;\n margin-bottom: 1rem;\n overflow: auto;\n}\n\nfigure {\n margin: 0 0 1rem;\n}\n\nimg {\n border-style: none;\n vertical-align: middle;\n}\n\nsvg {\n vertical-align: middle;\n overflow: hidden;\n}\n\ntable {\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n caption-side: bottom;\n text-align: left;\n color: #6c757d;\n}\n\nth {\n text-align: inherit;\n}\n\nlabel {\n display: inline-block;\n margin-bottom: 0.5rem;\n}\n\nbutton {\n border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nselect {\n word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n appearance: button;\n}\n\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n appearance: listbox;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nfieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\nlegend {\n display: block;\n width: 100%;\n max-width: 100%;\n margin-bottom: 0.5rem;\n padding: 0;\n font-size: 1.5rem;\n line-height: inherit;\n white-space: normal;\n color: inherit;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n appearance: none;\n}\n\n::-webkit-file-upload-button {\n font: inherit;\n appearance: button;\n}\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item;\n cursor: pointer;\n}\n\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none !important;\n}\n","@use \"../common/reboot\";\n@use \"../common/common\" as common;\n\n.af-card {\n width: fit-content;\n padding: 1rem;\n border: 1px solid common.$color-gray-300;\n border-radius: 0.5rem;\n font-family: common.$font-family-base;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n background-color: common.$color-white;\n box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);\n\n > *:last-child {\n margin-block-end: 0;\n }\n\n &:focus-visible {\n border: 2px solid common.$color-focus;\n outline: none;\n }\n\n &--elevation-2:not(:focus) {\n box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);\n }\n\n &__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-axa;\n }\n}\n\nbutton.af-card {\n text-align: initial;\n cursor: pointer;\n\n &:active {\n box-shadow: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n","@use \"../common/reboot\";\n@use \"../common/common\" as common;\n\n.af-card {\n width: fit-content;\n padding: 1rem;\n border: 1px solid common.$color-gray-300;\n border-radius: 0.5rem;\n font-family: common.$font-family-base;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n background-color: common.$color-white;\n box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);\n\n > *:last-child {\n margin-block-end: 0;\n }\n\n &:focus-visible {\n border: 2px solid common.$color-focus;\n outline: none;\n }\n\n &--elevation-2:not(:focus) {\n box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);\n }\n\n &__title {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4rem;\n color: common.$color-axa;\n }\n}\n\nbutton.af-card {\n text-align: initial;\n cursor: pointer;\n\n &:active {\n box-shadow: none;\n }\n\n &:focus {\n outline: none;\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"]}
@@ -0,0 +1,48 @@
1
+ @use "../common/reboot";
2
+ @use "../common/common" as common;
3
+
4
+ .af-card {
5
+ width: fit-content;
6
+ padding: 1rem;
7
+ border: 1px solid common.$color-gray-300;
8
+ border-radius: 0.5rem;
9
+ font-family: common.$font-family-base;
10
+ font-size: 1rem;
11
+ font-weight: 400;
12
+ line-height: 1.25rem;
13
+ background-color: common.$color-white;
14
+ box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 8%);
15
+
16
+ > *:last-child {
17
+ margin-block-end: 0;
18
+ }
19
+
20
+ &:focus-visible {
21
+ border: 2px solid common.$color-focus;
22
+ outline: none;
23
+ }
24
+
25
+ &--elevation-2:not(:focus) {
26
+ box-shadow: 0 0.25rem 0.5rem 0 hsla(230deg, 60%, 16%, 16%);
27
+ }
28
+
29
+ &__title {
30
+ font-size: 1.125rem;
31
+ font-weight: 600;
32
+ line-height: 1.4rem;
33
+ color: common.$color-axa;
34
+ }
35
+ }
36
+
37
+ button.af-card {
38
+ text-align: initial;
39
+ cursor: pointer;
40
+
41
+ &:active {
42
+ box-shadow: none;
43
+ }
44
+
45
+ &:focus {
46
+ outline: none;
47
+ }
48
+ }
@@ -0,0 +1 @@
1
+ .af-checkbox{font-family:Source Sans Pro,arial,sans-serif}.af-checkbox *{box-sizing:border-box}.af-checkbox__content{align-items:center;display:flex;gap:1rem;justify-content:center}.af-checkbox__content>svg{color:#00008f;height:1.75rem;width:1.75rem;fill:#00008f}.af-checkbox__content .af-checkbox__content-description{display:flex;flex-direction:column;gap:.25rem;line-height:1.25rem}.af-checkbox__content .af-checkbox__content-description>span:first-child{color:#333;line-height:1.4rem}.af-checkbox__content .af-checkbox__content-description>span:not(:first-child){color:#5f5f5f}.af-checkbox-select--horizontal .af-checkbox__content{flex-direction:column;gap:.5rem}.af-checkbox__group-description{font-size:1rem;line-height:1.25rem}.af-checkbox~.af-checkbox__error{align-items:center;color:#c91432;display:flex;font-family:Source Sans Pro,arial,sans-serif;gap:.5rem;line-height:1.25rem;margin-left:3.2rem}.af-checkbox~.af-checkbox__error>svg{color:#c91432;fill:#c91432}.af-checkbox-select~.af-checkbox__error{margin:1rem 0 0}.af-checkbox label{align-items:center;border-radius:4px;cursor:pointer;display:flex;gap:.75rem;margin:0}.af-checkbox-select label{align-items:center;box-shadow:0 0 0 1px var(--box-shadow-color) inset;height:6.4rem;padding:1rem;--box-shadow-color:#5f5f5f}.af-checkbox-select--horizontal label{flex-direction:column;gap:0;height:auto;justify-content:flex-start;padding:1rem;position:relative;text-align:center;width:12rem}.af-checkbox-select--horizontal label .af-checkbox__icons{left:1rem;position:absolute;top:1rem}.af-checkbox label input[type=checkbox]{margin-right:.5rem;opacity:0;position:absolute}.af-checkbox label input[type=checkbox]~.af-checkbox__icons{align-items:center;display:flex;gap:.75rem}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__checked,.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__unchecked{align-items:center;height:1.75rem;width:1.75rem}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__checked{display:none}.af-checkbox label input[type=checkbox]~.af-checkbox__icons .af-checkbox__unchecked{color:#5f5f5f;fill:#5f5f5f}.af-checkbox label:has(input[type=checkbox][aria-invalid=true]) .af-checkbox__checked,.af-checkbox label:has(input[type=checkbox][aria-invalid=true]) .af-checkbox__unchecked{color:#c91432;fill:#c91432}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__checked{color:#00008f;display:block;fill:#00008f}.af-checkbox label:has(input[type=checkbox]:checked) .af-checkbox__unchecked{display:none}.af-checkbox-select label:has(input[type=checkbox]:checked){background-color:#f8f8ff;box-shadow:inset 0 0 0 2px #00008f}.af-checkbox label:has(input[type=checkbox]:disabled){cursor:default}.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__checked,.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__content>svg,.af-checkbox label:has(input[type=checkbox]:disabled) .af-checkbox__unchecked{color:#999;fill:#999}.af-checkbox-select label:has(input[type=checkbox]:disabled){background-color:#f3f3f3;box-shadow:0 0 0 1px var(--box-shadow-color) inset;color:#999;--box-shadow-color:#e5e5e5}.af-checkbox-select label:has(input[type=checkbox][aria-invalid=true]){--box-shadow-color:#c91432;box-shadow:0 0 0 2px var(--box-shadow-color) inset}.af-checkbox label input[type=checkbox]:focus-visible~.af-checkbox__icons .af-checkbox__checked,.af-checkbox label input[type=checkbox]:focus-visible~.af-checkbox__icons .af-checkbox__unchecked{outline:2px solid #36f;outline-offset:3px}.af-checkbox label:hover:not(:has(input[type=checkbox]:disabled)) .af-checkbox__unchecked{color:#00008f;fill:#00008f}.af-checkbox-select label:hover:not(:has(input[type=checkbox]:disabled)){--box-shadow-color:#00008f;box-shadow:0 0 0 1px var(--box-shadow-color) inset}.af-checkbox-select{color:#5f5f5f;display:flex;flex-direction:column;font-family:Source Sans Pro,arial,sans-serif;font-style:normal;font-weight:400;gap:1rem;line-height:1.25rem;margin-top:1rem}.af-checkbox-select--horizontal{flex-direction:row}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Form/Checkbox/Checkbox.scss%23sass","../../../src/Form/Checkbox/Checkbox.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,aACE,4CCDF,CDGE,eACE,qBCDJ,CDIE,sBAEE,kBAAA,CADA,YAAA,CAGA,QAAA,CADA,sBCDJ,CDII,0BAGE,aAAA,CADA,cAAA,CADA,aAAA,CAGA,YCFN,CDKI,wDACE,YAAA,CACA,qBAAA,CACA,UAAA,CACA,mBCHN,CDKM,yEAEE,UAAA,CADA,kBCFR,CDMM,+EACE,aCJR,CDSE,sDACE,qBAAA,CACA,SCPJ,CDUE,gCACE,cAAA,CACA,mBCRJ,CDWE,iCAGE,kBAAA,CAIA,aAAA,CANA,YAAA,CAIA,4CAAA,CADA,SAAA,CAEA,mBAAA,CAJA,kBCJJ,CDWI,qCACE,aAAA,CACA,YCTN,CDaE,wCACE,eCXJ,CDcE,mBAIE,kBAAA,CADA,iBAAA,CAGA,cAAA,CALA,YAAA,CAIA,UAAA,CAHA,QCRJ,CDeE,0BAGE,kBAAA,CACA,kDAAA,CAHA,aAAA,CACA,YAAA,CAIA,0BCdJ,CDiBE,sCAKE,qBAAA,CAEA,KAAA,CAJA,WAAA,CAGA,0BAAA,CAFA,YAAA,CAHA,iBAAA,CAOA,iBAAA,CANA,WCTJ,CDiBI,0DAGE,SAAA,CAFA,iBAAA,CACA,QCdN,CDmBE,wCAEE,kBAAA,CACA,SAAA,CAFA,iBCfJ,CDmBI,4DAEE,kBAAA,CADA,YAAA,CAEA,UCjBN,CDmBM,sKAIE,kBAAA,CADA,cAAA,CADA,aChBR,CDqBM,kFACE,YCnBR,CDsBM,oFACE,aAAA,CACA,YCpBR,CD0BI,8KAEE,aAAA,CACA,YCzBN,CD8BI,2EAEE,aAAA,CADA,aAAA,CAEA,YC5BN,CD+BI,6EACE,YC7BN,CDiCE,4DACE,wBAAA,CACA,kCC/BJ,CDkCE,sDACE,cChCJ,CDkCI,0OAGE,UAAA,CACA,SClCN,CDsCE,6DAEE,wBAAA,CACA,kDAAA,CAFA,UAAA,CAIA,0BCrCJ,CDwCE,uEACE,0BAAA,CAEA,kDCvCJ,CD2CI,kMAEE,sBAAA,CACA,kBC1CN,CD+CI,0FACE,aExLM,CFyLN,YC7CN,CDiDE,yEACE,0BAAA,CAEA,kDChDJ,CDmDE,oBASE,aElLa,CF0Kb,YAAA,CAEA,qBAAA,CAEA,4CE/MqB,CFgNrB,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,mBAAA,CANA,eC1CJ,CDmDI,gCACE,kBCjDN","file":"Checkbox.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n line-height: 1.4rem;\n color: common.$color-gray-900;\n }\n\n & > span:not(:first-child) {\n color: common.$color-gray-700;\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: common.$color-red-700;\n\n & > svg {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: common.$default-border-radius;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{common.$color-gray};\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: common.$color-gray-700;\n fill: common.$color-gray-700;\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: common.$color-blue-2;\n box-shadow: 0 0 0 2px common.$color-axa inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: common.$color-btn-disabled-text;\n fill: common.$color-btn-disabled-text;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-200;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{common.$color-gray-400};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{common.$color-red-700};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: #{common.$color-axa};\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n margin-top: 1rem;\n flex-direction: column;\n gap: 1rem;\n font-family: common.$font-family-base;\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n\n &--horizontal {\n flex-direction: row;\n }\n }\n}\n","@use \"../../common/common\" as common;\n\n.af-checkbox {\n font-family: \"Source Sans Pro\", arial, sans-serif;\n\n * {\n box-sizing: border-box;\n }\n\n &__content {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n\n & > svg {\n width: 1.75rem;\n height: 1.75rem;\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n\n & &-description {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n line-height: 1.25rem;\n\n & > span:first-child {\n line-height: 1.4rem;\n color: common.$color-gray-900;\n }\n\n & > span:not(:first-child) {\n color: common.$color-gray-700;\n }\n }\n }\n\n &-select--horizontal &__content {\n flex-direction: column;\n gap: 0.5rem;\n }\n\n &__group-description {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n\n & ~ &__error {\n display: flex;\n margin-left: 3.2rem;\n align-items: center;\n gap: 0.5rem;\n font-family: \"Source Sans Pro\", arial, sans-serif;\n line-height: 1.25rem;\n color: common.$color-red-700;\n\n & > svg {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n }\n\n &-select ~ &__error {\n margin: 1rem 0 0;\n }\n\n & label {\n display: flex;\n margin: 0;\n border-radius: common.$default-border-radius;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n }\n\n &-select label {\n height: 6.4rem;\n padding: 1rem;\n align-items: center;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{common.$color-gray};\n }\n\n &-select--horizontal label {\n position: relative;\n width: 12rem;\n height: auto;\n padding: 1rem;\n flex-direction: column;\n justify-content: flex-start;\n gap: 0;\n text-align: center;\n\n & .af-checkbox__icons {\n position: absolute;\n top: 1rem;\n left: 1rem;\n }\n }\n\n & label input[type=\"checkbox\"] {\n position: absolute;\n margin-right: 0.5rem;\n opacity: 0;\n\n & ~ .af-checkbox__icons {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n width: 1.75rem;\n height: 1.75rem;\n align-items: center;\n }\n\n & .af-checkbox__checked {\n display: none;\n }\n\n & .af-checkbox__unchecked {\n color: common.$color-gray-700;\n fill: common.$color-gray-700;\n }\n }\n }\n\n & label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: common.$color-red-700;\n fill: common.$color-red-700;\n }\n }\n\n & label:has(input[type=\"checkbox\"]:checked) {\n & .af-checkbox__checked {\n display: block;\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n\n & .af-checkbox__unchecked {\n display: none;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:checked) {\n background-color: common.$color-blue-2;\n box-shadow: 0 0 0 2px common.$color-axa inset;\n }\n\n & label:has(input[type=\"checkbox\"]:disabled) {\n cursor: default;\n\n & .af-checkbox__content > svg,\n & .af-checkbox__checked,\n & .af-checkbox__unchecked {\n color: common.$color-btn-disabled-text;\n fill: common.$color-btn-disabled-text;\n }\n }\n\n &-select label:has(input[type=\"checkbox\"]:disabled) {\n color: common.$color-btn-disabled-text;\n background-color: common.$color-gray-200;\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n\n --box-shadow-color: #{common.$color-gray-400};\n }\n\n &-select label:has(input[type=\"checkbox\"][aria-invalid=\"true\"]) {\n --box-shadow-color: #{common.$color-red-700};\n\n box-shadow: 0 0 0 2px var(--box-shadow-color) inset;\n }\n\n & label input[type=\"checkbox\"]:focus-visible ~ .af-checkbox__icons {\n & .af-checkbox__unchecked,\n & .af-checkbox__checked {\n outline: 2px solid common.$color-blue-3;\n outline-offset: 3px;\n }\n }\n\n & label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n & .af-checkbox__unchecked {\n color: common.$color-axa;\n fill: common.$color-axa;\n }\n }\n\n &-select label:hover:not(:has(input[type=\"checkbox\"]:disabled)) {\n --box-shadow-color: #{common.$color-axa};\n\n box-shadow: 0 0 0 1px var(--box-shadow-color) inset;\n }\n\n &-select {\n display: flex;\n margin-top: 1rem;\n flex-direction: column;\n gap: 1rem;\n font-family: common.$font-family-base;\n font-style: normal;\n font-weight: 400;\n line-height: 1.25rem;\n color: common.$color-gray-700;\n\n &--horizontal {\n flex-direction: row;\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"]}