@axa-fr/design-system-look-and-feel-css 1.0.5-ci.12 → 1.0.5-ci.121

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 (96) hide show
  1. package/dist/Accordion/Accordion.css +1 -1
  2. package/dist/Accordion/Accordion.css.map +1 -1
  3. package/dist/AccordionCore/AccordionCore.css +1 -1
  4. package/dist/AccordionCore/AccordionCore.css.map +1 -1
  5. package/dist/Alert/Alert.css +1 -1
  6. package/dist/Alert/Alert.css.map +1 -1
  7. package/dist/Alert/Alert.scss +6 -6
  8. package/dist/Card/Card.css +1 -1
  9. package/dist/Card/Card.css.map +1 -1
  10. package/dist/Form/Checkbox/Checkbox.css +1 -1
  11. package/dist/Form/Checkbox/Checkbox.css.map +1 -1
  12. package/dist/Form/Checkbox/Checkbox.scss +16 -5
  13. package/dist/Form/FileUpload/FileUpload.css +1 -1
  14. package/dist/Form/FileUpload/FileUpload.css.map +1 -1
  15. package/dist/Form/FileUpload/FileUpload.scss +9 -4
  16. package/dist/Form/InputError/InputError.css +1 -1
  17. package/dist/Form/InputError/InputError.css.map +1 -1
  18. package/dist/Form/InputError/InputError.scss +1 -1
  19. package/dist/Form/Radio/Radio.css +1 -1
  20. package/dist/Form/Radio/Radio.css.map +1 -1
  21. package/dist/Form/Radio/Radio.scss +17 -6
  22. package/dist/Form/Select/Select.css +1 -1
  23. package/dist/Form/Select/Select.css.map +1 -1
  24. package/dist/Form/Select/Select.scss +57 -88
  25. package/dist/Form/Text/Text.css +1 -1
  26. package/dist/Form/Text/Text.css.map +1 -1
  27. package/dist/Form/Text/Text.scss +64 -13
  28. package/dist/Form/TextArea/TextArea.css +1 -1
  29. package/dist/Form/TextArea/TextArea.css.map +1 -1
  30. package/dist/Form/TextArea/TextArea.scss +5 -1
  31. package/dist/Grid/Grid-demo-example-form.css +1 -1
  32. package/dist/Grid/Grid-demo-example-form.css.map +1 -1
  33. package/dist/Grid/Grid-demo-example-form.scss +20 -0
  34. package/dist/Grid/Grid-demo-wireframe.css +1 -1
  35. package/dist/Grid/Grid-demo-wireframe.css.map +1 -1
  36. package/dist/IconBg/IconBg.css +1 -1
  37. package/dist/IconBg/IconBg.css.map +1 -1
  38. package/dist/Layout/Footer/Footer.css +1 -1
  39. package/dist/Layout/Footer/Footer.css.map +1 -1
  40. package/dist/Layout/Header/BurgerMenu/BurgerMenu.css +1 -0
  41. package/dist/Layout/Header/BurgerMenu/BurgerMenu.css.map +1 -0
  42. package/dist/Layout/Header/BurgerMenu/BurgerMenu.scss +48 -0
  43. package/dist/Layout/Header/Header.css +1 -1
  44. package/dist/Layout/Header/Header.css.map +1 -1
  45. package/dist/Layout/Header/Header.scss +70 -62
  46. package/dist/Layout/Header/NavBar/NavBar.css +1 -1
  47. package/dist/Layout/Header/NavBar/NavBar.css.map +1 -1
  48. package/dist/Layout/Header/NavBar/NavBar.scss +35 -29
  49. package/dist/Layout/Header/PreviousLink/PreviousLink.css +1 -1
  50. package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -1
  51. package/dist/Layout/Header/PreviousLink/PreviousLink.scss +5 -7
  52. package/dist/Link/Link.css +1 -1
  53. package/dist/Link/Link.css.map +1 -1
  54. package/dist/List/ClickList/ClickList.css +1 -1
  55. package/dist/List/ClickList/ClickList.css.map +1 -1
  56. package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -1
  57. package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -1
  58. package/dist/List/ContentItemDuo/ContentItemDuo.scss +6 -0
  59. package/dist/Modal/Modal.css +1 -1
  60. package/dist/Modal/Modal.css.map +1 -1
  61. package/dist/Modal/Modal.scss +62 -89
  62. package/dist/Stepper/Stepper.css +1 -1
  63. package/dist/Stepper/Stepper.css.map +1 -1
  64. package/dist/Stepper/Stepper.scss +4 -3
  65. package/dist/Title/Title.css +1 -1
  66. package/dist/Title/Title.css.map +1 -1
  67. package/dist/common/common.scss +100 -2
  68. package/dist/common/reboot.css +1 -1
  69. package/dist/common/reboot.css.map +1 -1
  70. package/dist/common/tokens.css +1 -1
  71. package/dist/common/tokens.css.map +1 -1
  72. package/dist/common/tokens.scss +2 -0
  73. package/dist/look-and-feel.css +1 -1
  74. package/dist/look-and-feel.css.map +1 -1
  75. package/dist/look-and-feel.scss +2 -5
  76. package/package.json +27 -22
  77. package/dist/Button/Button.css +0 -1
  78. package/dist/Button/Button.css.map +0 -1
  79. package/dist/Button/Button.scss +0 -150
  80. package/dist/Grid/DebugGrid.css +0 -1
  81. package/dist/Grid/DebugGrid.css.map +0 -1
  82. package/dist/Grid/DebugGrid.scss +0 -92
  83. package/dist/Grid/Grid.css +0 -1
  84. package/dist/Grid/Grid.css.map +0 -1
  85. package/dist/Grid/Grid.scss +0 -71
  86. package/dist/Loader/Loader.css +0 -1
  87. package/dist/Loader/Loader.css.map +0 -1
  88. package/dist/Loader/Loader.scss +0 -39
  89. package/dist/common/glyphicons/icons.eot +0 -0
  90. package/dist/common/glyphicons/icons.svg +0 -918
  91. package/dist/common/glyphicons/icons.ttf +0 -0
  92. package/dist/common/glyphicons/icons.woff +0 -0
  93. package/dist/common/icons.css +0 -1
  94. package/dist/common/icons.css.map +0 -1
  95. package/dist/common/icons.scss +0 -1236
  96. /package/{dist/common → files}/assets/logo-axa.svg +0 -0
@@ -1,14 +1,10 @@
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";
7
4
  @use "Card/Card";
8
5
  @use "Divider/Divider";
9
6
  @use "Layout/Footer/Footer";
10
7
  @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";
@@ -22,7 +18,6 @@
22
18
  @use "Pagination/Pagination";
23
19
  @use "Pagination/PaginationDesktop";
24
20
  @use "Pagination/PaginationMobile";
25
- @use "Loader/Loader";
26
21
  @use "./List/List";
27
22
  @use "List/ClickList/ClickList";
28
23
  @use "./List/ContentItemDuo/ContentItemDuo";
@@ -30,6 +25,8 @@
30
25
  @use "Tag/Tag";
31
26
  @use "Form/InputError/InputError";
32
27
  @use "IconBg/IconBg";
28
+ @use "Layout/Header/BurgerMenu/BurgerMenu";
29
+ @use "Layout/Header/Header";
33
30
  @use "Layout/Header/NavBar/NavBar";
34
31
  @use "Layout/Header/PreviousLink/PreviousLink";
35
32
  @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.5-ci.12",
3
+ "version": "1.0.5-ci.121",
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 --env development_client --config ../../../config/postcss.config.js",
12
- "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production_client --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"
@@ -58,12 +62,13 @@
58
62
  ]
59
63
  },
60
64
  "lint-staged": {
61
- "*.(js|jsx|ts|tsx)": "eslint --fix",
62
- "*.(ts|tsx)": "tsc-files --noEmit",
63
- "*.(scss|css)": "stylelint --fix",
64
- "*.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"
65
70
  },
66
71
  "volta": {
67
72
  "extends": "../../../package.json"
68
73
  }
69
- }
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;-moz-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:transparent;color:var(--color-axa);gap:.25rem;min-height:auto;min-width:auto;padding:0}.af-btn-client--ghost:hover{background-color:transparent;color:var(--color-blue-1)}.af-btn-client--ghost:active,.af-btn-client--ghost:focus{background-color:transparent;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:transparent;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,qBAAA,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,4BAAA,CADA,sBAAA,CADA,UAAA,CAFA,eAAA,CADA,cAAA,CAEA,SCFJ,CDOI,4BAEE,4BAAA,CADA,yBCJN,CDQI,yDAGE,4BAAA,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,wBAAA,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-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-loader__container{align-items:center;animation:spin 2s linear infinite;border-top:1px solid var(--color-gray-200);border:1px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-axa);container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}.af-loader__container--blue{border:solid color-mix(in srgb,var(--color-axa),transparent 80%);border-top:solid var(--color-axa)}.af-loader__container--gray{border:solid color-mix(in srgb,var(--color-gray),transparent 80%);border-top:solid var(--color-gray)}.af-loader__container--white{border:solid color-mix(in srgb,var(--color-white),transparent 80%);border-top:solid var(--color-white)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Loader/Loader.scss%23sass","../../src/Loader/Loader.scss"],"names":[],"mappings":"AACE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCOJ,CDEI,4BACE,gEAAA,CACA,iCCAN,CDGI,4BACE,iEAAA,CACA,kCCDN,CDII,6BACE,kEAAA,CACA,mCCFN,CDOA,gBACE,GCJA,sBACF,CDOE,GCLF,uBACE,CACF","file":"Loader.css","sourcesContent":[".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n",".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"]}
@@ -1,39 +0,0 @@
1
- .af-loader {
2
- &__container {
3
- display: flex;
4
- container-type: inline-size;
5
- margin: auto;
6
- border: 1px solid var(--color-gray-200);
7
- border-top: 1px solid var(--color-axa);
8
- border-radius: 50%;
9
- flex-direction: column;
10
- align-items: center;
11
- justify-content: center;
12
- animation: spin 2s linear infinite;
13
-
14
- &--blue {
15
- border: solid color-mix(in srgb, var(--color-axa), transparent 80%);
16
- border-top: solid var(--color-axa);
17
- }
18
-
19
- &--gray {
20
- border: solid color-mix(in srgb, var(--color-gray), transparent 80%);
21
- border-top: solid var(--color-gray);
22
- }
23
-
24
- &--white {
25
- border: solid color-mix(in srgb, var(--color-white), transparent 80%);
26
- border-top: solid var(--color-white);
27
- }
28
- }
29
- }
30
-
31
- @keyframes spin {
32
- 0% {
33
- transform: rotate(0deg);
34
- }
35
-
36
- 100% {
37
- transform: rotate(360deg);
38
- }
39
- }
Binary file