@axa-fr/design-system-look-and-feel-css 1.0.4-ci.9 → 1.0.5-alpha.243

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 (89) hide show
  1. package/dist/Alert/Alert.css +1 -1
  2. package/dist/Alert/Alert.css.map +1 -1
  3. package/dist/Alert/Alert.scss +6 -6
  4. package/dist/Card/Card.css.map +1 -1
  5. package/dist/Form/Checkbox/Checkbox.css +1 -1
  6. package/dist/Form/Checkbox/Checkbox.css.map +1 -1
  7. package/dist/Form/Checkbox/Checkbox.scss +22 -5
  8. package/dist/Form/FileUpload/FileUpload.css +1 -1
  9. package/dist/Form/FileUpload/FileUpload.css.map +1 -1
  10. package/dist/Form/FileUpload/FileUpload.scss +9 -10
  11. package/dist/Form/InputError/InputError.css +1 -1
  12. package/dist/Form/InputError/InputError.css.map +1 -1
  13. package/dist/Form/InputError/InputError.scss +1 -1
  14. package/dist/Form/Radio/Radio.css +1 -1
  15. package/dist/Form/Radio/Radio.css.map +1 -1
  16. package/dist/Form/Radio/Radio.scss +35 -6
  17. package/dist/Form/Select/Select.css +1 -1
  18. package/dist/Form/Select/Select.css.map +1 -1
  19. package/dist/Form/Select/Select.scss +57 -88
  20. package/dist/Form/Text/Text.css +1 -1
  21. package/dist/Form/Text/Text.css.map +1 -1
  22. package/dist/Form/Text/Text.scss +64 -13
  23. package/dist/Grid/Grid-demo-example-form.css +1 -1
  24. package/dist/Grid/Grid-demo-example-form.css.map +1 -1
  25. package/dist/Grid/Grid-demo-example-form.scss +20 -0
  26. package/dist/Layout/Header/BurgerMenu/BurgerMenu.css +1 -0
  27. package/dist/Layout/Header/BurgerMenu/BurgerMenu.css.map +1 -0
  28. package/dist/Layout/Header/BurgerMenu/BurgerMenu.scss +48 -0
  29. package/dist/Layout/Header/Header.css +1 -1
  30. package/dist/Layout/Header/Header.css.map +1 -1
  31. package/dist/Layout/Header/Header.scss +70 -62
  32. package/dist/Layout/Header/NavBar/NavBar.css +1 -1
  33. package/dist/Layout/Header/NavBar/NavBar.css.map +1 -1
  34. package/dist/Layout/Header/NavBar/NavBar.scss +35 -29
  35. package/dist/Layout/Header/PreviousLink/PreviousLink.css +1 -1
  36. package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -1
  37. package/dist/Layout/Header/PreviousLink/PreviousLink.scss +5 -7
  38. package/dist/List/ClickItem/ClickItem.css.map +1 -0
  39. package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -1
  40. package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -1
  41. package/dist/List/ContentItemDuo/ContentItemDuo.scss +10 -0
  42. package/dist/List/ContentItemMono/ContentItemMono.css.map +1 -1
  43. package/dist/List/ContentItemMono/ContentItemMono.scss +6 -6
  44. package/dist/Modal/Modal.css +1 -1
  45. package/dist/Modal/Modal.css.map +1 -1
  46. package/dist/Modal/Modal.scss +60 -91
  47. package/dist/Title/Title.css.map +1 -1
  48. package/dist/common/common.scss +111 -4
  49. package/dist/common/reboot.css.map +1 -1
  50. package/dist/common/reboot.scss +3 -2
  51. package/dist/common/tokens.css +1 -1
  52. package/dist/common/tokens.css.map +1 -1
  53. package/dist/common/tokens.scss +13 -2
  54. package/dist/look-and-feel.css +1 -1
  55. package/dist/look-and-feel.css.map +1 -1
  56. package/dist/look-and-feel.scss +4 -11
  57. package/package.json +28 -70
  58. package/dist/Button/Button.css +0 -1
  59. package/dist/Button/Button.css.map +0 -1
  60. package/dist/Button/Button.scss +0 -150
  61. package/dist/Form/TextArea/TextArea.css +0 -1
  62. package/dist/Form/TextArea/TextArea.css.map +0 -1
  63. package/dist/Form/TextArea/TextArea.scss +0 -36
  64. package/dist/Grid/DebugGrid.css +0 -1
  65. package/dist/Grid/DebugGrid.css.map +0 -1
  66. package/dist/Grid/DebugGrid.scss +0 -92
  67. package/dist/Grid/Grid.css +0 -1
  68. package/dist/Grid/Grid.css.map +0 -1
  69. package/dist/Grid/Grid.scss +0 -71
  70. package/dist/Link/Link.css +0 -1
  71. package/dist/Link/Link.css.map +0 -1
  72. package/dist/Link/Link.scss +0 -47
  73. package/dist/List/ClickList/ClickList.css.map +0 -1
  74. package/dist/Loader/Loader.css +0 -1
  75. package/dist/Loader/Loader.css.map +0 -1
  76. package/dist/Loader/Loader.scss +0 -39
  77. package/dist/Stepper/Stepper.css +0 -1
  78. package/dist/Stepper/Stepper.css.map +0 -1
  79. package/dist/Stepper/Stepper.scss +0 -51
  80. package/dist/common/glyphicons/icons.eot +0 -0
  81. package/dist/common/glyphicons/icons.svg +0 -918
  82. package/dist/common/glyphicons/icons.ttf +0 -0
  83. package/dist/common/glyphicons/icons.woff +0 -0
  84. package/dist/common/icons.css +0 -1
  85. package/dist/common/icons.css.map +0 -1
  86. package/dist/common/icons.scss +0 -1236
  87. /package/dist/List/{ClickList/ClickList.css → ClickItem/ClickItem.css} +0 -0
  88. /package/dist/List/{ClickList/ClickList.scss → ClickItem/ClickItem.scss} +0 -0
  89. /package/{dist/common → files}/assets/logo-axa.svg +0 -0
@@ -1,35 +1,28 @@
1
1
  @use "common/tokens";
2
- @use "Grid/Grid";
3
- @use "Grid/DebugGrid";
4
2
  @use "Accordion/Accordion";
5
3
  @use "AccordionCore/AccordionCore";
6
- @use "Button/Button";
4
+ @use "Alert/Alert";
7
5
  @use "Card/Card";
8
6
  @use "Divider/Divider";
9
7
  @use "Layout/Footer/Footer";
10
- @use "Stepper/Stepper";
11
- @use "Layout/Header/Header";
12
8
  @use "Form/Radio/Radio";
13
9
  @use "Tabs/Tabs";
14
10
  @use "Form/Checkbox/Checkbox";
15
11
  @use "Form/Select/Select";
16
- @use "Form/Text/Text";
17
- @use "Form/TextArea/TextArea";
18
12
  @use "Form/FileUpload/FileUpload";
19
13
  @use "Modal/Modal";
20
- @use "Alert/Alert";
21
- @use "Link/Link";
22
14
  @use "Pagination/Pagination";
23
15
  @use "Pagination/PaginationDesktop";
24
16
  @use "Pagination/PaginationMobile";
25
- @use "Loader/Loader";
26
17
  @use "./List/List";
27
- @use "List/ClickList/ClickList";
18
+ @use "List/ClickItem/ClickItem";
28
19
  @use "./List/ContentItemDuo/ContentItemDuo";
29
20
  @use "List/ContentTabList/ContentTabList";
30
21
  @use "Tag/Tag";
31
22
  @use "Form/InputError/InputError";
32
23
  @use "IconBg/IconBg";
24
+ @use "Layout/Header/BurgerMenu/BurgerMenu";
25
+ @use "Layout/Header/Header";
33
26
  @use "Layout/Header/NavBar/NavBar";
34
27
  @use "Layout/Header/PreviousLink/PreviousLink";
35
28
  @use "Title/Title";
package/package.json CHANGED
@@ -1,29 +1,33 @@
1
1
  {
2
2
  "name": "@axa-fr/design-system-look-and-feel-css",
3
- "version": "1.0.4-ci.9",
3
+ "version": "1.0.5-alpha.243",
4
4
  "description": "",
5
- "main": "index.js",
5
+ "sass": "dist/look-and-feel.scss",
6
+ "style": "dist/look-and-feel.css",
7
+ "exports": {
8
+ "./logo-axa.svg": "./files/assets/logo-axa.svg",
9
+ "./dist/common/assets/logo-axa.svg": "./files/assets/logo-axa.svg",
10
+ "./dist/*": {
11
+ "default": "./dist/*"
12
+ }
13
+ },
6
14
  "files": [
7
- "dist"
15
+ "dist",
16
+ "files"
8
17
  ],
9
18
  "scripts": {
10
19
  "prebuild": "rimraf dist",
11
- "start": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --watch --config ../../config/postcss.config.js",
12
- "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production --config ../../config/postcss.config.js",
13
- "start:storybook": "storybook dev -p 6008",
14
- "build:storybook": "storybook build",
15
- "build-storybook": "storybook build",
16
- "eslint": "eslint src --ext js,jsx,ts,tsx",
17
- "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
20
+ "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production",
21
+ "postbuild": "copyfiles --up 1 \"src/**/*.{scss,css}\" dist",
18
22
  "stylelint": "stylelint \"src/**/*.{scss,css}\"",
19
- "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
20
- "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --check --ignore-unknown",
21
- "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown",
22
- "tsc": "tsc --noEmit",
23
- "chromatic": "npx chromatic"
23
+ "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix"
24
24
  },
25
- "dependencies": {
26
- "rc-slider": "^11.1.7"
25
+ "devDependencies": {
26
+ "@axa-fr/postcss-config-design-system": "*",
27
+ "@axa-fr/prettier-config-design-system": "*",
28
+ "@axa-fr/stylelint-config-design-system": "*",
29
+ "copyfiles": "^2.4.1",
30
+ "rimraf": "^6.0.1"
27
31
  },
28
32
  "peerDependencies": {
29
33
  "@material-symbols/svg-400": ">= 0.19.0"
@@ -33,52 +37,6 @@
33
37
  "optional": true
34
38
  }
35
39
  },
36
- "devDependencies": {
37
- "@chromatic-com/storybook": "^2.0.2",
38
- "@csstools/postcss-sass": "^5.1.1",
39
- "@material-symbols/svg-400": "*",
40
- "@storybook/addon-essentials": "^8.3.5",
41
- "@storybook/addon-interactions": "^8.3.5",
42
- "@storybook/addon-links": "^8.3.5",
43
- "@storybook/addon-storysource": "^8.3.5",
44
- "@storybook/blocks": "^8.3.5",
45
- "@storybook/html": "^8.3.5",
46
- "@storybook/html-vite": "^8.3.5",
47
- "@storybook/test": "^8.3.5",
48
- "@storybook/theming": "^8.3.5",
49
- "@typescript-eslint/eslint-plugin": "^8.17.0",
50
- "@typescript-eslint/parser": "^8.17.0",
51
- "browserslist": "^4.23.3",
52
- "chromatic": "^11.12.0",
53
- "copyfiles": "^2.4.1",
54
- "cssnano": "^7.0.3",
55
- "eslint": "^8.57.0",
56
- "eslint-config-airbnb": "^19.0.4",
57
- "eslint-config-prettier": "^9.1.0",
58
- "eslint-import-resolver-typescript": "^3.6.1",
59
- "eslint-plugin-import": "^2.29.1",
60
- "eslint-plugin-jsx-a11y": "^6.8.0",
61
- "eslint-plugin-prettier": "^5.1.0",
62
- "eslint-plugin-react": "^7.36.1",
63
- "eslint-plugin-react-hooks": "^4.6.0",
64
- "eslint-plugin-storybook": "^0.9.0",
65
- "postcss": "^8.4.35",
66
- "postcss-cli": "^11.0.0",
67
- "postcss-flexbugs-fixes": "^5.0.2",
68
- "postcss-normalize": "^10.0.1",
69
- "postcss-preset-env": "^9.5.2",
70
- "postcss-scss": "^4.0.9",
71
- "prettier": "^3.3.3",
72
- "rimraf": "^6.0.1",
73
- "storybook": "^8.3.5",
74
- "stylelint": "^16.11.0",
75
- "stylelint-config-pretty-order": "^0.5.1",
76
- "stylelint-config-recommended-scss": "^14.0.0",
77
- "stylelint-config-standard": "^36.0.0",
78
- "stylelint-prettier": "^5.0.0",
79
- "tsc-files": "^1.1.4",
80
- "vite": "^5.4.8"
81
- },
82
40
  "repository": {
83
41
  "type": "git",
84
42
  "url": "git+https://github.com/AxaFrance/design-system.git"
@@ -104,13 +62,13 @@
104
62
  ]
105
63
  },
106
64
  "lint-staged": {
107
- "*.(js|jsx|ts|tsx)": "eslint --fix",
108
- "*.(ts|tsx)": "tsc-files --noEmit",
109
- "*.(scss|css)": "stylelint --fix",
110
- "*.mdx": "prettier --write"
65
+ "*.(scss|css)": "stylelint --fix"
66
+ },
67
+ "prettier": "@axa-fr/prettier-config-design-system",
68
+ "stylelint": {
69
+ "extends": "@axa-fr/stylelint-config-design-system"
111
70
  },
112
71
  "volta": {
113
- "node": "20.10.0",
114
- "npm": "10.2.5"
72
+ "extends": "../../../package.json"
115
73
  }
116
- }
74
+ }
@@ -1 +0,0 @@
1
- .af-btn-client{align-items:center;background-color:var(--color-axa);border:0;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-base);font-weight:600;gap:1rem;justify-content:center;min-height:3.5rem;padding:.8rem 1.2rem;transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client,.af-btn-client:hover{color:var(--color-white);text-decoration:none}.af-btn-client:hover{background-color:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus{background-color:var(--color-btn-light);color:var(--color-white);outline:none}.af-btn-client:focus-visible{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{background-color:initial;color:var(--color-axa);gap:.25rem;min-height:auto;min-width:auto;padding:0}.af-btn-client--ghost:hover{background-color:initial;color:var(--color-blue-1)}.af-btn-client--ghost:active,.af-btn-client--ghost:focus{background-color:initial;color:var(--color-btn-light)}.af-btn-client--primary-business{background-color:var(--color-btn-business)}.af-btn-client--primary-business:hover{background-color:var(--color-btn-business-dark)}.af-btn-client--primary-business:focus{background-color:var(--color-btn-business-light)}.af-btn-client--tertiary{background-color:var(--color-btn-tertiary-bg);color:var(--color-axa)}.af-btn-client--tertiary:hover{background-color:var(--color-btn-tertiary-bg-darker);color:var(--color-axa)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus{background-color:var(--color-btn-tertiary-bg-lighter);color:var(--color-axa)}.af-btn-client--secondary{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-axa) inset;color:var(--color-axa)}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-blue-1) inset;color:var(--color-blue-1)}.af-btn-client--secondary:active{background-color:var(--color-blue-2)}.af-btn-client--secondary-error{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-red-700) inset;color:var(--color-red-700)}.af-btn-client--secondary-error:active,.af-btn-client--secondary-error:focus,.af-btn-client--secondary-error:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-btn-error-text) inset;color:var(--color-btn-error-text)}.af-btn-client--secondary-error:active{background-color:var(--color-btn-error-bg)}.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:var(--color-gray-300);box-shadow:none;color:var(--color-btn-disabled-text);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:var(--color-gray-300);border-color:#0000;color:var(--color-btn-disabled-text)}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Button/Button.scss%23sass","../../src/Button/Button.scss"],"names":[],"mappings":"AAAA,eAME,kBAAA,CAOA,iCAAA,CATA,QAAA,CACA,iBAAA,CAaA,cAAA,CAjBA,YAAA,CAQA,mCAAA,CACA,eAAA,CAFA,QAAA,CADA,sBAAA,CALA,iBAAA,CACA,oBAAA,CAWA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CAEA,wBAAA,CAAA,gBCAF,CDEE,oCATA,wBAAA,CADA,oBCaF,CDHE,qBAGE,oCCAJ,CDGE,2CAGE,uCAAA,CADA,wBAAA,CAEA,YCFJ,CDKE,6BACE,qCAAA,CACA,kBCHJ,CDME,mBACE,cAAA,CACA,iBCJJ,CDOE,sBAME,wBAAA,CADA,sBAAA,CADA,UAAA,CAFA,eAAA,CADA,cAAA,CAEA,SCFJ,CDOI,4BAEE,wBAAA,CADA,yBCJN,CDQI,yDAGE,wBAAA,CADA,4BCNN,CDWE,iCACE,0CCTJ,CDWI,uCACE,+CCTN,CDYI,uCACE,gDCVN,CDcE,yBAEE,6CAAA,CADA,sBCXJ,CDcI,+BAEE,oDAAA,CADA,sBCXN,CDeI,+DAGE,qDAAA,CADA,sBCbN,CDkBE,0BAEE,mCAAA,CACA,2CAAA,CAFA,sBCdJ,CDkBI,iGAIE,mCAAA,CACA,8CAAA,CAFA,yBChBN,CDqBI,iCACE,oCCnBN,CDuBE,gCAEE,mCAAA,CACA,+CAAA,CAFA,0BCnBJ,CDuBI,mHAIE,mCAAA,CACA,sDAAA,CAFA,iCCrBN,CD0BI,uCACE,0CCxBN,CD4BE,wBAEE,kBAAA,CADA,YAAA,CAEA,sBAAA,CACA,aC1BJ,CD6BE,2DAGE,sCAAA,CACA,eAAA,CAFA,oCAAA,CAGA,kBC5BJ,CD8BI,8IAIE,sCAAA,CAFA,kBAAA,CACA,oCC5BN","file":"Button.css","sourcesContent":[".af-btn-client {\n display: flex;\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: var(--font-family-base);\n font-weight: 600;\n text-decoration: none;\n color: var(--color-white);\n background-color: var(--color-axa);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n cursor: pointer;\n user-select: none;\n\n &:hover {\n text-decoration: none;\n color: var(--color-white);\n background-color: var(--color-blue-1);\n }\n\n &:active,\n &:focus {\n color: var(--color-white);\n background-color: var(--color-btn-light);\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n min-width: auto;\n min-height: auto;\n padding: 0;\n gap: 0.25rem;\n color: var(--color-axa);\n background-color: transparent;\n\n &:hover {\n color: var(--color-blue-1);\n background-color: transparent;\n }\n\n &:focus,\n &:active {\n color: var(--color-btn-light);\n background-color: transparent;\n }\n }\n\n &--primary-business {\n background-color: var(--color-btn-business);\n\n &:hover {\n background-color: var(--color-btn-business-dark);\n }\n\n &:focus {\n background-color: var(--color-btn-business-light);\n }\n }\n\n &--tertiary {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg);\n\n &:hover {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:active {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg-lighter);\n }\n }\n\n &--secondary {\n color: var(--color-axa);\n background-color: var(--color-white);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n &:hover,\n &:focus,\n &:active {\n color: var(--color-blue-1);\n background-color: var(--color-white);\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n background-color: var(--color-blue-2);\n }\n }\n\n &--secondary-error {\n color: var(--color-red-700);\n background-color: var(--color-white);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n &:hover,\n &:focus,\n &:active {\n color: var(--color-btn-error-text);\n background-color: var(--color-white);\n box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n }\n\n &:active {\n background-color: var(--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: var(--color-btn-disabled-text);\n background-color: var(--color-gray-300);\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n border-color: transparent;\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-300);\n }\n }\n}\n",".af-btn-client {\n display: flex;\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: var(--font-family-base);\n font-weight: 600;\n text-decoration: none;\n color: var(--color-white);\n background-color: var(--color-axa);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n cursor: pointer;\n user-select: none;\n\n &:hover {\n text-decoration: none;\n color: var(--color-white);\n background-color: var(--color-blue-1);\n }\n\n &:active,\n &:focus {\n color: var(--color-white);\n background-color: var(--color-btn-light);\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n min-width: auto;\n min-height: auto;\n padding: 0;\n gap: 0.25rem;\n color: var(--color-axa);\n background-color: transparent;\n\n &:hover {\n color: var(--color-blue-1);\n background-color: transparent;\n }\n\n &:focus,\n &:active {\n color: var(--color-btn-light);\n background-color: transparent;\n }\n }\n\n &--primary-business {\n background-color: var(--color-btn-business);\n\n &:hover {\n background-color: var(--color-btn-business-dark);\n }\n\n &:focus {\n background-color: var(--color-btn-business-light);\n }\n }\n\n &--tertiary {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg);\n\n &:hover {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:active {\n color: var(--color-axa);\n background-color: var(--color-btn-tertiary-bg-lighter);\n }\n }\n\n &--secondary {\n color: var(--color-axa);\n background-color: var(--color-white);\n box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n &:hover,\n &:focus,\n &:active {\n color: var(--color-blue-1);\n background-color: var(--color-white);\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n background-color: var(--color-blue-2);\n }\n }\n\n &--secondary-error {\n color: var(--color-red-700);\n background-color: var(--color-white);\n box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n &:hover,\n &:focus,\n &:active {\n color: var(--color-btn-error-text);\n background-color: var(--color-white);\n box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n }\n\n &:active {\n background-color: var(--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: var(--color-btn-disabled-text);\n background-color: var(--color-gray-300);\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n border-color: transparent;\n color: var(--color-btn-disabled-text);\n background-color: var(--color-gray-300);\n }\n }\n}\n"]}
@@ -1,150 +0,0 @@
1
- .af-btn-client {
2
- display: flex;
3
- min-height: 3.5rem;
4
- padding: 0.8rem 1.2rem;
5
- border: 0;
6
- border-radius: 8px;
7
- align-items: center;
8
- justify-content: center;
9
- gap: 1rem;
10
- font-family: var(--font-family-base);
11
- font-weight: 600;
12
- text-decoration: none;
13
- color: var(--color-white);
14
- background-color: var(--color-axa);
15
- transition-duration: var(--transition-duration);
16
- transition-property: width, height, border, color, background-color, outline,
17
- box-shadow;
18
- transition-timing-function: linear;
19
- cursor: pointer;
20
- user-select: none;
21
-
22
- &:hover {
23
- text-decoration: none;
24
- color: var(--color-white);
25
- background-color: var(--color-blue-1);
26
- }
27
-
28
- &:active,
29
- &:focus {
30
- color: var(--color-white);
31
- background-color: var(--color-btn-light);
32
- outline: none;
33
- }
34
-
35
- &:focus-visible {
36
- outline: 2px solid var(--color-blue-3);
37
- outline-offset: 3px;
38
- }
39
-
40
- & > svg {
41
- aspect-ratio: 1;
42
- fill: currentcolor;
43
- }
44
-
45
- &--ghost {
46
- min-width: auto;
47
- min-height: auto;
48
- padding: 0;
49
- gap: 0.25rem;
50
- color: var(--color-axa);
51
- background-color: transparent;
52
-
53
- &:hover {
54
- color: var(--color-blue-1);
55
- background-color: transparent;
56
- }
57
-
58
- &:focus,
59
- &:active {
60
- color: var(--color-btn-light);
61
- background-color: transparent;
62
- }
63
- }
64
-
65
- &--primary-business {
66
- background-color: var(--color-btn-business);
67
-
68
- &:hover {
69
- background-color: var(--color-btn-business-dark);
70
- }
71
-
72
- &:focus {
73
- background-color: var(--color-btn-business-light);
74
- }
75
- }
76
-
77
- &--tertiary {
78
- color: var(--color-axa);
79
- background-color: var(--color-btn-tertiary-bg);
80
-
81
- &:hover {
82
- color: var(--color-axa);
83
- background-color: var(--color-btn-tertiary-bg-darker);
84
- }
85
-
86
- &:focus,
87
- &:active {
88
- color: var(--color-axa);
89
- background-color: var(--color-btn-tertiary-bg-lighter);
90
- }
91
- }
92
-
93
- &--secondary {
94
- color: var(--color-axa);
95
- background-color: var(--color-white);
96
- box-shadow: 0 0 0 1px var(--color-axa) inset;
97
-
98
- &:hover,
99
- &:focus,
100
- &:active {
101
- color: var(--color-blue-1);
102
- background-color: var(--color-white);
103
- box-shadow: 0 0 0 2px var(--color-blue-1) inset;
104
- }
105
-
106
- &:active {
107
- background-color: var(--color-blue-2);
108
- }
109
- }
110
-
111
- &--secondary-error {
112
- color: var(--color-red-700);
113
- background-color: var(--color-white);
114
- box-shadow: 0 0 0 1px var(--color-red-700) inset;
115
-
116
- &:hover,
117
- &:focus,
118
- &:active {
119
- color: var(--color-btn-error-text);
120
- background-color: var(--color-white);
121
- box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;
122
- }
123
-
124
- &:active {
125
- background-color: var(--color-btn-error-bg);
126
- }
127
- }
128
-
129
- &__wrapper {
130
- display: flex;
131
- align-items: center;
132
- justify-content: center;
133
- line-height: 1;
134
- }
135
-
136
- &:disabled,
137
- &[aria-disabled="true"] {
138
- color: var(--color-btn-disabled-text);
139
- background-color: var(--color-gray-300);
140
- box-shadow: none;
141
- cursor: not-allowed;
142
-
143
- &:hover,
144
- &:focus {
145
- border-color: transparent;
146
- color: var(--color-btn-disabled-text);
147
- background-color: var(--color-gray-300);
148
- }
149
- }
150
- }
@@ -1 +0,0 @@
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)}.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{border:1px solid var(--color-gray);border-radius:var(--default-border-radius);color:var(--color-gray-900);font-size:1rem;line-height:1.25rem;padding:1rem 2.5rem 1rem 1rem}@media (width > 1023px){.af-form__input-text{font-size:1.125rem;line-height:1.5rem}}.af-form__input-text--error{border:2px solid var(--color-red-700)}.af-form__input-text:enabled:active,.af-form__input-text:enabled:focus{border:1px solid var(--color-axa);outline:none}.af-form__input-text:not(:disabled,:focus,:active,.af-form__input-text--error):hover{border:2px solid var(--color-axa);outline:none}.af-form__input-textarea{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;margin-top:.5rem;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: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 +0,0 @@
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,sBCGJ,CDAE,0BACE,4CCDJ,CDQE,sBAIE,2BAAA,CAHA,kBAAA,CACA,eAAA,CACA,mBCLJ,CDQI,wBANF,sBCCA,kBAAA,CDOI,kBCLJ,CACF,CDQE,4BAIE,2BAAA,CAHA,iBAAA,CACA,eAAA,CACA,oBCLJ,CDQI,wBANF,4BAOI,cAAA,CCLJ,mBACF,CACA,CDQE,uBAGE,2BAAA,CAFA,iBAAA,CACA,oBCLJ,CDQI,wBALF,uBAMI,cAAA,CACA,mBCLJ,CACF,CDQE,qBACE,iBAAA,CACA,qBCNJ,CDQI,yBAEE,cAAA,CADA,aCLN,CDUE,qBAEE,kCAAA,CACA,0CAAA,CAGA,2BAAA,CAFA,cAAA,CACA,mBAAA,CAJA,6BCHJ,CDUI,wBARF,qBASI,kBAAA,CACA,kBCPJ,CACF,CDSI,4BACE,qCCPN,CDWM,uEAEE,iCAAA,CACA,YCVR,CDcI,qFACE,iCAAA,CACA,YCZN,CC7EA,yBAKE,kCAAA,CACA,0CAAA,CAGA,2BAAA,CAFA,cAAA,CALA,eAAA,CAMA,mBAAA,CALA,gBAAA,CACA,6BAAA,CAHA,UDwFF,CC9EE,wBAXF,yBAYI,kBAAA,CACA,kBDiFF,CACF,CC/EE,gCACE,qCDiFJ,CC7EI,+EAEE,iCAAA,CACA,YD8EN,CC1EE,6FACE,iCAAA,CACA,YD4EJ","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 flex-direction: column;\n row-gap: var(--row-gap);\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 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\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 &: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}\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 margin-top: 0.5rem;\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\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 &: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 margin-top: 0.5rem;\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\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 &: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,36 +0,0 @@
1
- @use "../../common/common" as common;
2
- @use "../Text/Text";
3
-
4
- .af-form__input-textarea {
5
- width: 100%;
6
- height: common.rem(142);
7
- margin-top: 0.5rem;
8
- padding: 1rem 2.5rem 1rem 1rem;
9
- border: 1px solid var(--color-gray);
10
- border-radius: var(--default-border-radius);
11
- font-size: common.rem(16);
12
- line-height: common.rem(20);
13
- color: var(--color-gray-900);
14
-
15
- @media (width > #{common.$breakpoint-md}) {
16
- font-size: common.rem(18);
17
- line-height: common.rem(24);
18
- }
19
-
20
- &--error {
21
- border: 2px solid var(--color-red-700);
22
- }
23
-
24
- &:enabled {
25
- &:focus,
26
- &:active {
27
- border: 1px solid var(--color-axa);
28
- outline: none;
29
- }
30
- }
31
-
32
- &:not(:disabled, :focus, :active, &--error):hover {
33
- border: 2px solid var(--color-axa);
34
- outline: none;
35
- }
36
- }
@@ -1 +0,0 @@
1
- .af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:#fff;bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,4DAME,qBAAA,CAHA,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAKA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: common.$color-white;\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{common.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n","@use \"../common/common.scss\" as common;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n position: fixed;\n z-index: 2;\n bottom: 0;\n left: 0;\n height: auto;\n background-color: common.$color-white;\n}\n\n.debug-grid {\n position: fixed;\n top: 0;\n display: none;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n mix-blend-mode: multiply;\n\n .grid {\n --name: \"small: 0 to 667px\";\n --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n position: relative;\n height: 100%;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 0.5vw;\n width: 100%;\n height: 100%;\n font-size: clamp(0.5rem, 4vw, 3rem);\n text-align: center;\n text-orientation: mixed;\n writing-mode: vertical-rl;\n color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n transform: translate(0, -50%);\n transition: color 300ms linear 200ms;\n content: var(--name);\n }\n\n .cols {\n display: none;\n height: 100%;\n grid-column: span 1;\n background-color: var(--color-bg-cols);\n transition: background-color 300ms linear 200ms;\n\n &:nth-child(-n + 4) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-sm}) {\n --name: \"medium: 668px to 1023px\";\n --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n .cols:nth-child(-n + 8) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-md}) {\n --name: \"large: 1024px to 1279px\";\n --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n .cols:nth-child(-n + 12) {\n display: block;\n }\n }\n\n @media (width > #{common.$breakpoint-lg}) {\n --name: \"extra large: 1280px to 1599px\";\n --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n }\n\n @media (width > #{common.$breakpoint-xl}) {\n --name: \"extra large: 1600px to infinity\";\n --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n }\n }\n}\n\nbody {\n &:has([name=\"debuggrid\"]:checked) {\n .debug-grid {\n display: block;\n }\n }\n}\n"]}
@@ -1,92 +0,0 @@
1
- @use "../common/common.scss" as common;
2
-
3
- .af-checkbox-select--debuggrid label:has(> [name="debuggrid"]) {
4
- position: fixed;
5
- z-index: 2;
6
- bottom: 0;
7
- left: 0;
8
- height: auto;
9
- background-color: common.$color-white;
10
- }
11
-
12
- .debug-grid {
13
- position: fixed;
14
- top: 0;
15
- display: none;
16
- width: 100%;
17
- height: 100%;
18
- opacity: 0.5;
19
- mix-blend-mode: multiply;
20
-
21
- .grid {
22
- --name: "small: 0 to 667px";
23
- --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);
24
-
25
- position: relative;
26
- height: 100%;
27
-
28
- &::before {
29
- position: absolute;
30
- top: 50%;
31
- left: 0.5vw;
32
- width: 100%;
33
- height: 100%;
34
- font-size: clamp(0.5rem, 4vw, 3rem);
35
- text-align: center;
36
- text-orientation: mixed;
37
- writing-mode: vertical-rl;
38
- color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);
39
- transform: translate(0, -50%);
40
- transition: color 300ms linear 200ms;
41
- content: var(--name);
42
- }
43
-
44
- .cols {
45
- display: none;
46
- height: 100%;
47
- grid-column: span 1;
48
- background-color: var(--color-bg-cols);
49
- transition: background-color 300ms linear 200ms;
50
-
51
- &:nth-child(-n + 4) {
52
- display: block;
53
- }
54
- }
55
-
56
- @media (width > #{common.$breakpoint-sm}) {
57
- --name: "medium: 668px to 1023px";
58
- --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);
59
-
60
- .cols:nth-child(-n + 8) {
61
- display: block;
62
- }
63
- }
64
-
65
- @media (width > #{common.$breakpoint-md}) {
66
- --name: "large: 1024px to 1279px";
67
- --color-bg-cols: hsl(180deg, 53.09%, 84.12%);
68
-
69
- .cols:nth-child(-n + 12) {
70
- display: block;
71
- }
72
- }
73
-
74
- @media (width > #{common.$breakpoint-lg}) {
75
- --name: "extra large: 1280px to 1599px";
76
- --color-bg-cols: hsl(120deg, 52.5%, 84.31%);
77
- }
78
-
79
- @media (width > #{common.$breakpoint-xl}) {
80
- --name: "extra large: 1600px to infinity";
81
- --color-bg-cols: hsl(357.39deg, 100%, 90.98%);
82
- }
83
- }
84
- }
85
-
86
- body {
87
- &:has([name="debuggrid"]:checked) {
88
- .debug-grid {
89
- display: block;
90
- }
91
- }
92
- }
@@ -1 +0,0 @@
1
- .grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Grid/Grid.scss%23sass","../../src/Grid/Grid.scss"],"names":[],"mappings":"AAeA,MACE,4CAAA,CACA,6CAAA,CCFF,mDAAA,CDIE,QAAA,CACA,YAAA,CAEA,YAAA,CAGA,iCAAA,CADA,6CAAA,CADA,kCCDF,CDKE,uBAZF,MCUE,QAAA,CDIE,6CAAA,CCFF,mDACA,CACF,CDIE,wBAlBF,MAmBI,6CAAA,CCDF,mDAAA,CDGE,SCDF,CACF,CDGE,wBAxBF,MCwBE,oDACA,CACF,CDEE,wBA5BF,MA6BI,oBAAA,CAEA,gBCAF,CACF,CDEE,6CAKE,mBAAA,CAFA,YAAA,CACA,yCAAA,CAEA,sBCFJ,CDKE,UACE,YCHJ,CDME,qCAEE,6BCLJ,CDOI,yCACE,yCCLN","file":"Grid.css","sourcesContent":["@use \"../common/common.scss\" as common;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel)****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{common.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{common.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{common.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{common.$breakpoint-xl}) { >>>>> more than 1599px\n\n********************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{common.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{common.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{common.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n","@use \"../common/common.scss\" as common;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel)****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{common.$breakpoint-sm}) { >>>>> more than 667px\n@media (width > #{common.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{common.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{common.$breakpoint-xl}) { >>>>> more than 1599px\n\n********************************************************************* */\n\n.grid {\n --col-gap: calc(8 / var(--font-size-base) * 1rem);\n --row-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n --cols: 4;\n --start: auto;\n\n display: grid;\n margin-inline: var(--margin-inline);\n grid-template-columns: repeat(var(--cols), 1fr);\n gap: var(--row-gap) var(--col-gap);\n\n @media (width > #{common.$breakpoint-sm}) {\n --cols: 8;\n --col-gap: calc(16 / var(--font-size-base) * 1rem);\n --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{common.$breakpoint-md}) {\n --col-gap: calc(24 / var(--font-size-base) * 1rem);\n --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n --cols: 12;\n }\n\n @media (width > #{common.$breakpoint-lg}) {\n --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n }\n\n @media (width > #{common.$breakpoint-xl}) {\n --margin-inline: auto;\n\n max-width: 1320px;\n }\n\n > *,\n & .subgrid,\n & :has(> .subgrid) {\n display: grid;\n grid-column: var(--start) / span var(--cols);\n align-content: start;\n row-gap: var(--row-gap);\n }\n\n > * > * {\n --start: auto;\n }\n\n .subgrid,\n & :has(> .subgrid) {\n grid-template-columns: subgrid;\n\n > * {\n grid-column: var(--start) / span var(--cols);\n }\n }\n}\n"]}
@@ -1,71 +0,0 @@
1
- @use "../common/common.scss" as common;
2
-
3
- /* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel)****************
4
-
5
- See the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille
6
-
7
- Its MOBILE FIRST approach, so the defauts values target the mobile.
8
-
9
- @media (width > #{common.$breakpoint-sm}) { >>>>> more than 667px
10
- @media (width > #{common.$breakpoint-md}) { >>>>> more than 1023px
11
- @media (width > #{common.$breakpoint-lg}) { >>>>> more than 1279px
12
- @media (width > #{common.$breakpoint-xl}) { >>>>> more than 1599px
13
-
14
- ********************************************************************* */
15
-
16
- .grid {
17
- --col-gap: calc(8 / var(--font-size-base) * 1rem);
18
- --row-gap: calc(16 / var(--font-size-base) * 1rem);
19
- --margin-inline: calc(16 / var(--font-size-base) * 1rem);
20
- --cols: 4;
21
- --start: auto;
22
-
23
- display: grid;
24
- margin-inline: var(--margin-inline);
25
- grid-template-columns: repeat(var(--cols), 1fr);
26
- gap: var(--row-gap) var(--col-gap);
27
-
28
- @media (width > #{common.$breakpoint-sm}) {
29
- --cols: 8;
30
- --col-gap: calc(16 / var(--font-size-base) * 1rem);
31
- --margin-inline: calc(60 / var(--font-size-base) * 1rem);
32
- }
33
-
34
- @media (width > #{common.$breakpoint-md}) {
35
- --col-gap: calc(24 / var(--font-size-base) * 1rem);
36
- --margin-inline: calc(80 / var(--font-size-base) * 1rem);
37
- --cols: 12;
38
- }
39
-
40
- @media (width > #{common.$breakpoint-lg}) {
41
- --margin-inline: calc(120 / var(--font-size-base) * 1rem);
42
- }
43
-
44
- @media (width > #{common.$breakpoint-xl}) {
45
- --margin-inline: auto;
46
-
47
- max-width: 1320px;
48
- }
49
-
50
- > *,
51
- & .subgrid,
52
- & :has(> .subgrid) {
53
- display: grid;
54
- grid-column: var(--start) / span var(--cols);
55
- align-content: start;
56
- row-gap: var(--row-gap);
57
- }
58
-
59
- > * > * {
60
- --start: auto;
61
- }
62
-
63
- .subgrid,
64
- & :has(> .subgrid) {
65
- grid-template-columns: subgrid;
66
-
67
- > * {
68
- grid-column: var(--start) / span var(--cols);
69
- }
70
- }
71
- }
@@ -1 +0,0 @@
1
- .af-link{align-items:center;color:var(--color-axa);display:inline-flex;font-family:var(--font-family-base);gap:.25rem;height:fit-content;text-decoration:underline;width:fit-content;fill:var(--color-axa)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem}.af-link--openInNewTab{font-weight:600}.af-link:has(svg){text-decoration:none}.af-link:active,.af-link:focus{color:var(--color-blue-1);fill:var(--color-blue-1)}.af-link:focus-visible{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-link:hover{color:var(--color-blue-1);fill:var(--color-blue-1)}.af-link:hover:has(svg){text-decoration:none}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Link/Link.scss%23sass","../../src/Link/Link.scss"],"names":[],"mappings":"AAEA,SAIE,kBAAA,CAIA,sBAAA,CAPA,mBAAA,CAKA,mCAAA,CADA,UAAA,CAFA,kBAAA,CAIA,yBAAA,CCPF,iBAAA,CDSE,qBCDF,CDGE,aAGE,cAAA,CADA,cAAA,CADA,aCCJ,CDIE,uBACE,eCFJ,CDKE,kBACE,oBCHJ,CDME,+BAEE,yBAAA,CACA,wBCLJ,CDQE,uBACE,qCAAA,CACA,kBCNJ,CDSE,eACE,yBAAA,CACA,wBCPJ,CDSI,wBACE,oBCPN","file":"Link.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-link {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n align-items: center;\n gap: common.rem(4);\n font-family: var(--font-family-base);\n text-decoration: underline;\n color: var(--color-axa);\n fill: var(--color-axa);\n\n svg {\n width: common.rem(20);\n height: common.rem(20);\n aspect-ratio: 1;\n }\n\n &--openInNewTab {\n font-weight: 600;\n }\n\n &:has(svg) {\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: var(--color-blue-1);\n fill: var(--color-blue-1);\n }\n\n &:focus-visible {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n\n &:hover {\n color: var(--color-blue-1);\n fill: var(--color-blue-1);\n\n &:has(svg) {\n text-decoration: none;\n }\n }\n}\n","@use \"../common/common\" as common;\n\n.af-link {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n align-items: center;\n gap: common.rem(4);\n font-family: var(--font-family-base);\n text-decoration: underline;\n color: var(--color-axa);\n fill: var(--color-axa);\n\n svg {\n width: common.rem(20);\n height: common.rem(20);\n aspect-ratio: 1;\n }\n\n &--openInNewTab {\n font-weight: 600;\n }\n\n &:has(svg) {\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: var(--color-blue-1);\n fill: var(--color-blue-1);\n }\n\n &:focus-visible {\n outline: 2px solid var(--color-blue-3);\n outline-offset: 3px;\n }\n\n &:hover {\n color: var(--color-blue-1);\n fill: var(--color-blue-1);\n\n &:has(svg) {\n text-decoration: none;\n }\n }\n}\n"]}
@@ -1,47 +0,0 @@
1
- @use "../common/common" as common;
2
-
3
- .af-link {
4
- display: inline-flex;
5
- width: fit-content;
6
- height: fit-content;
7
- align-items: center;
8
- gap: common.rem(4);
9
- font-family: var(--font-family-base);
10
- text-decoration: underline;
11
- color: var(--color-axa);
12
- fill: var(--color-axa);
13
-
14
- svg {
15
- width: common.rem(20);
16
- height: common.rem(20);
17
- aspect-ratio: 1;
18
- }
19
-
20
- &--openInNewTab {
21
- font-weight: 600;
22
- }
23
-
24
- &:has(svg) {
25
- text-decoration: none;
26
- }
27
-
28
- &:active,
29
- &:focus {
30
- color: var(--color-blue-1);
31
- fill: var(--color-blue-1);
32
- }
33
-
34
- &:focus-visible {
35
- outline: 2px solid var(--color-blue-3);
36
- outline-offset: 3px;
37
- }
38
-
39
- &:hover {
40
- color: var(--color-blue-1);
41
- fill: var(--color-blue-1);
42
-
43
- &:has(svg) {
44
- text-decoration: none;
45
- }
46
- }
47
- }