@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.
- package/dist/Accordion/Accordion.css +1 -1
- package/dist/Accordion/Accordion.css.map +1 -1
- package/dist/AccordionCore/AccordionCore.css +1 -1
- package/dist/AccordionCore/AccordionCore.css.map +1 -1
- package/dist/Alert/Alert.css +1 -1
- package/dist/Alert/Alert.css.map +1 -1
- package/dist/Alert/Alert.scss +6 -6
- package/dist/Card/Card.css +1 -1
- package/dist/Card/Card.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox.css +1 -1
- package/dist/Form/Checkbox/Checkbox.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox.scss +16 -5
- package/dist/Form/FileUpload/FileUpload.css +1 -1
- package/dist/Form/FileUpload/FileUpload.css.map +1 -1
- package/dist/Form/FileUpload/FileUpload.scss +9 -4
- package/dist/Form/InputError/InputError.css +1 -1
- package/dist/Form/InputError/InputError.css.map +1 -1
- package/dist/Form/InputError/InputError.scss +1 -1
- package/dist/Form/Radio/Radio.css +1 -1
- package/dist/Form/Radio/Radio.css.map +1 -1
- package/dist/Form/Radio/Radio.scss +17 -6
- package/dist/Form/Select/Select.css +1 -1
- package/dist/Form/Select/Select.css.map +1 -1
- package/dist/Form/Select/Select.scss +57 -88
- package/dist/Form/Text/Text.css +1 -1
- package/dist/Form/Text/Text.css.map +1 -1
- package/dist/Form/Text/Text.scss +64 -13
- package/dist/Form/TextArea/TextArea.css +1 -1
- package/dist/Form/TextArea/TextArea.css.map +1 -1
- package/dist/Form/TextArea/TextArea.scss +5 -1
- package/dist/Grid/Grid-demo-example-form.css +1 -1
- package/dist/Grid/Grid-demo-example-form.css.map +1 -1
- package/dist/Grid/Grid-demo-example-form.scss +20 -0
- package/dist/Grid/Grid-demo-wireframe.css +1 -1
- package/dist/Grid/Grid-demo-wireframe.css.map +1 -1
- package/dist/IconBg/IconBg.css +1 -1
- package/dist/IconBg/IconBg.css.map +1 -1
- package/dist/Layout/Footer/Footer.css +1 -1
- package/dist/Layout/Footer/Footer.css.map +1 -1
- package/dist/Layout/Header/BurgerMenu/BurgerMenu.css +1 -0
- package/dist/Layout/Header/BurgerMenu/BurgerMenu.css.map +1 -0
- package/dist/Layout/Header/BurgerMenu/BurgerMenu.scss +48 -0
- package/dist/Layout/Header/Header.css +1 -1
- package/dist/Layout/Header/Header.css.map +1 -1
- package/dist/Layout/Header/Header.scss +70 -62
- package/dist/Layout/Header/NavBar/NavBar.css +1 -1
- package/dist/Layout/Header/NavBar/NavBar.css.map +1 -1
- package/dist/Layout/Header/NavBar/NavBar.scss +35 -29
- package/dist/Layout/Header/PreviousLink/PreviousLink.css +1 -1
- package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -1
- package/dist/Layout/Header/PreviousLink/PreviousLink.scss +5 -7
- package/dist/Link/Link.css +1 -1
- package/dist/Link/Link.css.map +1 -1
- package/dist/List/ClickList/ClickList.css +1 -1
- package/dist/List/ClickList/ClickList.css.map +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuo.scss +6 -0
- package/dist/Modal/Modal.css +1 -1
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.scss +62 -89
- package/dist/Stepper/Stepper.css +1 -1
- package/dist/Stepper/Stepper.css.map +1 -1
- package/dist/Stepper/Stepper.scss +4 -3
- package/dist/Title/Title.css +1 -1
- package/dist/Title/Title.css.map +1 -1
- package/dist/common/common.scss +100 -2
- package/dist/common/reboot.css +1 -1
- package/dist/common/reboot.css.map +1 -1
- package/dist/common/tokens.css +1 -1
- package/dist/common/tokens.css.map +1 -1
- package/dist/common/tokens.scss +2 -0
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +2 -5
- package/package.json +27 -22
- package/dist/Button/Button.css +0 -1
- package/dist/Button/Button.css.map +0 -1
- package/dist/Button/Button.scss +0 -150
- package/dist/Grid/DebugGrid.css +0 -1
- package/dist/Grid/DebugGrid.css.map +0 -1
- package/dist/Grid/DebugGrid.scss +0 -92
- package/dist/Grid/Grid.css +0 -1
- package/dist/Grid/Grid.css.map +0 -1
- package/dist/Grid/Grid.scss +0 -71
- package/dist/Loader/Loader.css +0 -1
- package/dist/Loader/Loader.css.map +0 -1
- package/dist/Loader/Loader.scss +0 -39
- package/dist/common/glyphicons/icons.eot +0 -0
- package/dist/common/glyphicons/icons.svg +0 -918
- package/dist/common/glyphicons/icons.ttf +0 -0
- package/dist/common/glyphicons/icons.woff +0 -0
- package/dist/common/icons.css +0 -1
- package/dist/common/icons.css.map +0 -1
- package/dist/common/icons.scss +0 -1236
- /package/{dist/common → files}/assets/logo-axa.svg +0 -0
package/dist/look-and-feel.scss
CHANGED
@@ -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.
|
3
|
+
"version": "1.0.5-ci.121",
|
4
4
|
"description": "",
|
5
|
-
"
|
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
|
-
"
|
12
|
-
"
|
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
|
-
"
|
26
|
-
"
|
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
|
-
"*.(
|
62
|
-
|
63
|
-
|
64
|
-
|
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
|
+
}
|
package/dist/Button/Button.css
DELETED
@@ -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"]}
|
package/dist/Button/Button.scss
DELETED
@@ -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
|
-
}
|
package/dist/Grid/DebugGrid.css
DELETED
@@ -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"]}
|
package/dist/Grid/DebugGrid.scss
DELETED
@@ -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
|
-
}
|
package/dist/Grid/Grid.css
DELETED
@@ -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)}
|
package/dist/Grid/Grid.css.map
DELETED
@@ -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"]}
|
package/dist/Grid/Grid.scss
DELETED
@@ -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
|
-
}
|
package/dist/Loader/Loader.css
DELETED
@@ -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"]}
|
package/dist/Loader/Loader.scss
DELETED
@@ -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
|