@axa-fr/design-system-apollo-css 1.0.3-alpha.219 → 1.0.3-alpha.221
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/ClickIcon/ClickIconApollo.css +1 -0
- package/dist/ClickIcon/ClickIconApollo.css.map +1 -0
- package/dist/ClickIcon/ClickIconApollo.scss +25 -0
- package/dist/ClickIcon/ClickIconCommon.css +1 -0
- package/dist/ClickIcon/ClickIconCommon.css.map +1 -0
- package/dist/ClickIcon/ClickIconCommon.scss +23 -0
- package/dist/ClickIcon/ClickIconLF.css +1 -0
- package/dist/ClickIcon/ClickIconLF.css.map +1 -0
- package/dist/ClickIcon/ClickIconLF.scss +23 -0
- package/dist/Form/Select/SelectApollo.css +1 -0
- package/dist/Form/Select/SelectApollo.css.map +1 -0
- package/dist/Form/Select/SelectApollo.scss +60 -0
- package/dist/Form/Select/SelectCommon.css +1 -0
- package/dist/Form/Select/SelectCommon.css.map +1 -0
- package/dist/Form/Select/SelectCommon.scss +69 -0
- package/dist/Form/Select/SelectLF.css +1 -0
- package/dist/Form/Select/SelectLF.css.map +1 -0
- package/dist/Form/Select/SelectLF.scss +59 -0
- package/dist/Icon/IconApollo.css +1 -1
- package/dist/Icon/IconApollo.css.map +1 -1
- package/dist/Icon/IconApollo.scss +2 -2
- package/dist/Icon/IconCommon.css +1 -1
- package/dist/Icon/IconCommon.css.map +1 -1
- package/dist/Icon/IconCommon.scss +3 -6
- package/dist/Icon/IconLF.css +1 -1
- package/dist/Icon/IconLF.css.map +1 -1
- package/dist/Icon/IconLF.scss +1 -1
- package/dist/apollo.css +1 -1
- package/dist/apollo.css.map +1 -1
- package/dist/apollo.scss +2 -0
- package/dist/common/tokens.css +1 -1
- package/dist/common/tokens.css.map +1 -1
- package/dist/common/tokens.scss +1 -3
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/dist/look-and-feel.scss +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-click-icon{background-color:var(--click-icon-background-color);border:0;border-radius:100vmax;cursor:pointer;display:grid;padding:calc(8/var(--font-size-base)*1rem);width:fit-content}.af-click-icon svg{fill:var(--click-icon-svg-fill,var(--icon-fill))}.af-click-icon:disabled{pointer-events:none}.af-click-icon:focus,.af-click-icon:focus-visible{outline:2px solid var(--click-icon-outline-color,#0000);outline-offset:2px}.af-click-icon{--click-icon-background-color:var(--axa-blue-8)}.af-click-icon:hover{--click-icon-background-color:var(--axa-blue-120);--click-icon-svg-fill:var(--white)}.af-click-icon:active{--click-icon-background-color:var(--axa-blue-80);--click-icon-svg-fill:var(--white)}.af-click-icon:disabled{--click-icon-background-color:var(--neutral-5);--click-icon-svg-fill:var(--neutral-50)}.af-click-icon:focus,.af-click-icon:focus-visible{--click-icon-outline-color:var(--axa-blue-100)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ClickIcon/ClickIconCommon.scss","../../src/ClickIcon/ClickIconApollo.scss","../../src/ClickIcon/ClickIconApollo.scss%23sass"],"names":[],"mappings":"AAAA,eAME,mDAAA,CAFA,QAAA,CACA,qBAAA,CAEA,cAAA,CANA,YAAA,CAEA,0CAAA,CCDF,iBAMA,CDCE,mBACE,gDCCJ,CDEE,wBACE,mBCAJ,CDGE,kDAEE,uDAAA,CACA,kBCFJ,CChBA,eACE,+CDmBF,CCjBE,qBDmBF,iDAAA,CCjBI,kCDmBJ,CChBE,sBACE,gDAAA,CACA,kCDkBJ,CCfE,wBACE,8CAAA,CACA,uCDiBJ,CCdE,kDAEE,8CDeJ","file":"ClickIconApollo.css","sourcesContent":[".af-click-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: calc(8 / var(--font-size-base) * 1rem);\r\n border: 0;\r\n border-radius: 100vmax;\r\n background-color: var(--click-icon-background-color);\r\n cursor: pointer;\r\n\r\n svg {\r\n fill: var(--click-icon-svg-fill, var(--icon-fill));\r\n }\r\n\r\n &:disabled {\r\n pointer-events: none;\r\n }\r\n\r\n &:focus-visible,\r\n &:focus {\r\n outline: 2px solid var(--click-icon-outline-color, transparent);\r\n outline-offset: 2px;\r\n }\r\n}\r\n","@use \"./ClickIconCommon\";\r\n\r\n.af-click-icon {\r\n --click-icon-background-color: var(--axa-blue-8);\r\n\r\n &:hover {\r\n --click-icon-background-color: var(--axa-blue-120);\r\n --click-icon-svg-fill: var(--white);\r\n }\r\n\r\n &:active {\r\n --click-icon-background-color: var(--axa-blue-80);\r\n --click-icon-svg-fill: var(--white);\r\n }\r\n\r\n &:disabled {\r\n --click-icon-background-color: var(--neutral-5);\r\n --click-icon-svg-fill: var(--neutral-50);\r\n }\r\n\r\n &:focus,\r\n &:focus-visible {\r\n --click-icon-outline-color: var(--axa-blue-100);\r\n }\r\n}\r\n","@use \"./ClickIconCommon\";\r\n\r\n.af-click-icon {\r\n --click-icon-background-color: var(--axa-blue-8);\r\n\r\n &:hover {\r\n --click-icon-background-color: var(--axa-blue-120);\r\n --click-icon-svg-fill: var(--white);\r\n }\r\n\r\n &:active {\r\n --click-icon-background-color: var(--axa-blue-80);\r\n --click-icon-svg-fill: var(--white);\r\n }\r\n\r\n &:disabled {\r\n --click-icon-background-color: var(--neutral-5);\r\n --click-icon-svg-fill: var(--neutral-50);\r\n }\r\n\r\n &:focus,\r\n &:focus-visible {\r\n --click-icon-outline-color: var(--axa-blue-100);\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use "./ClickIconCommon";
|
|
2
|
+
|
|
3
|
+
.af-click-icon {
|
|
4
|
+
--click-icon-background-color: var(--axa-blue-8);
|
|
5
|
+
|
|
6
|
+
&:hover {
|
|
7
|
+
--click-icon-background-color: var(--axa-blue-120);
|
|
8
|
+
--click-icon-svg-fill: var(--white);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&:active {
|
|
12
|
+
--click-icon-background-color: var(--axa-blue-80);
|
|
13
|
+
--click-icon-svg-fill: var(--white);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&:disabled {
|
|
17
|
+
--click-icon-background-color: var(--neutral-5);
|
|
18
|
+
--click-icon-svg-fill: var(--neutral-50);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:focus,
|
|
22
|
+
&:focus-visible {
|
|
23
|
+
--click-icon-outline-color: var(--axa-blue-100);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-click-icon{background-color:var(--click-icon-background-color);border:0;border-radius:100vmax;cursor:pointer;display:grid;padding:calc(8/var(--font-size-base)*1rem);width:fit-content}.af-click-icon svg{fill:var(--click-icon-svg-fill,var(--icon-fill))}.af-click-icon:disabled{pointer-events:none}.af-click-icon:focus,.af-click-icon:focus-visible{outline:2px solid var(--click-icon-outline-color,#0000);outline-offset:2px}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ClickIcon/ClickIconCommon.scss%23sass","../../src/ClickIcon/ClickIconCommon.scss"],"names":[],"mappings":"AAAA,eAME,mDAAA,CAFA,QAAA,CACA,qBAAA,CAEA,cAAA,CANA,YAAA,CAEA,0CAAA,CADA,iBCMF,CDCE,mBACE,gDCCJ,CDEE,wBACE,mBCAJ,CDGE,kDAEE,uDAAA,CACA,kBCFJ","file":"ClickIconCommon.css","sourcesContent":[".af-click-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: calc(8 / var(--font-size-base) * 1rem);\r\n border: 0;\r\n border-radius: 100vmax;\r\n background-color: var(--click-icon-background-color);\r\n cursor: pointer;\r\n\r\n svg {\r\n fill: var(--click-icon-svg-fill, var(--icon-fill));\r\n }\r\n\r\n &:disabled {\r\n pointer-events: none;\r\n }\r\n\r\n &:focus-visible,\r\n &:focus {\r\n outline: 2px solid var(--click-icon-outline-color, transparent);\r\n outline-offset: 2px;\r\n }\r\n}\r\n",".af-click-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: calc(8 / var(--font-size-base) * 1rem);\r\n border: 0;\r\n border-radius: 100vmax;\r\n background-color: var(--click-icon-background-color);\r\n cursor: pointer;\r\n\r\n svg {\r\n fill: var(--click-icon-svg-fill, var(--icon-fill));\r\n }\r\n\r\n &:disabled {\r\n pointer-events: none;\r\n }\r\n\r\n &:focus-visible,\r\n &:focus {\r\n outline: 2px solid var(--click-icon-outline-color, transparent);\r\n outline-offset: 2px;\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.af-click-icon {
|
|
2
|
+
display: grid;
|
|
3
|
+
width: fit-content;
|
|
4
|
+
padding: calc(8 / var(--font-size-base) * 1rem);
|
|
5
|
+
border: 0;
|
|
6
|
+
border-radius: 100vmax;
|
|
7
|
+
background-color: var(--click-icon-background-color);
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
svg {
|
|
11
|
+
fill: var(--click-icon-svg-fill, var(--icon-fill));
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&:disabled {
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:focus-visible,
|
|
19
|
+
&:focus {
|
|
20
|
+
outline: 2px solid var(--click-icon-outline-color, transparent);
|
|
21
|
+
outline-offset: 2px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-click-icon{background-color:var(--click-icon-background-color);border:0;border-radius:100vmax;cursor:pointer;display:grid;padding:calc(8/var(--font-size-base)*1rem);width:fit-content}.af-click-icon svg{fill:var(--click-icon-svg-fill,var(--icon-fill))}.af-click-icon:disabled{pointer-events:none}.af-click-icon:focus,.af-click-icon:focus-visible{outline:2px solid var(--click-icon-outline-color,#0000);outline-offset:2px}.af-click-icon{--click-icon-background-color:var(--color-btn-tertiary-bg)}.af-click-icon:hover{--click-icon-background-color:var(--color-btn-tertiary-bg-darker)}.af-click-icon:active{--click-icon-background-color:var(--color-btn-tertiary-bg-lighter)}.af-click-icon:disabled{--click-icon-background-color:var(--color-gray-200);--click-icon-svg-fill:var(--color-gray-500)}.af-click-icon:focus,.af-click-icon:focus-visible{--click-icon-outline-color:var(--color-focus)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ClickIcon/ClickIconCommon.scss","../../src/ClickIcon/ClickIconLF.scss","../../src/ClickIcon/ClickIconLF.scss%23sass"],"names":[],"mappings":"AAAA,eAME,mDAAA,CAFA,QAAA,CACA,qBAAA,CAEA,cAAA,CANA,YAAA,CAEA,0CAAA,CCDF,iBAMA,CDCE,mBACE,gDCCJ,CDEE,wBACE,mBCAJ,CDGE,kDAEE,uDAAA,CACA,kBCFJ,CChBA,eACE,0DDmBF,CCjBE,qBACE,iEDmBJ,CChBE,sBACE,kEDkBJ,CCfE,wBACE,mDAAA,CACA,2CDiBJ,CCdE,kDAEE,6CDeJ","file":"ClickIconLF.css","sourcesContent":[".af-click-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: calc(8 / var(--font-size-base) * 1rem);\r\n border: 0;\r\n border-radius: 100vmax;\r\n background-color: var(--click-icon-background-color);\r\n cursor: pointer;\r\n\r\n svg {\r\n fill: var(--click-icon-svg-fill, var(--icon-fill));\r\n }\r\n\r\n &:disabled {\r\n pointer-events: none;\r\n }\r\n\r\n &:focus-visible,\r\n &:focus {\r\n outline: 2px solid var(--click-icon-outline-color, transparent);\r\n outline-offset: 2px;\r\n }\r\n}\r\n","@use \"./ClickIconCommon\";\r\n\r\n.af-click-icon {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg);\r\n\r\n &:hover {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg-darker);\r\n }\r\n\r\n &:active {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg-lighter);\r\n }\r\n\r\n &:disabled {\r\n --click-icon-background-color: var(--color-gray-200);\r\n --click-icon-svg-fill: var(--color-gray-500);\r\n }\r\n\r\n &:focus,\r\n &:focus-visible {\r\n --click-icon-outline-color: var(--color-focus);\r\n }\r\n}\r\n","@use \"./ClickIconCommon\";\r\n\r\n.af-click-icon {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg);\r\n\r\n &:hover {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg-darker);\r\n }\r\n\r\n &:active {\r\n --click-icon-background-color: var(--color-btn-tertiary-bg-lighter);\r\n }\r\n\r\n &:disabled {\r\n --click-icon-background-color: var(--color-gray-200);\r\n --click-icon-svg-fill: var(--color-gray-500);\r\n }\r\n\r\n &:focus,\r\n &:focus-visible {\r\n --click-icon-outline-color: var(--color-focus);\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@use "./ClickIconCommon";
|
|
2
|
+
|
|
3
|
+
.af-click-icon {
|
|
4
|
+
--click-icon-background-color: var(--color-btn-tertiary-bg);
|
|
5
|
+
|
|
6
|
+
&:hover {
|
|
7
|
+
--click-icon-background-color: var(--color-btn-tertiary-bg-darker);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&:active {
|
|
11
|
+
--click-icon-background-color: var(--color-btn-tertiary-bg-lighter);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&:disabled {
|
|
15
|
+
--click-icon-background-color: var(--color-gray-200);
|
|
16
|
+
--click-icon-svg-fill: var(--color-gray-500);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:focus,
|
|
20
|
+
&:focus-visible {
|
|
21
|
+
--click-icon-outline-color: var(--color-focus);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__select-label{color:var(--select-placeholder-color);display:inline-block;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-bottom:calc(8/var(--font-size-base)*1rem)}.af-form__select-input{-webkit-appearance:none;appearance:none;background:var(--select-background);background-color:#fff;background-position-x:calc(100% - 1rem);border:1px solid var(--select-border-color);border-radius:var(--select-border-radius);box-shadow:var(--select-box-shadow);color:var(--select-color);display:block;margin:calc(10/var(--font-size-base)*1rem) 0;padding:calc(21/var(--font-size-base)*1rem);text-overflow:ellipsis;white-space:nowrap;width:100%}.af-form__select-input option{border:1px solid var(--select-border-color);color:var(--select-color)}.af-form__select-input:open{background-image:var(--select-background-open)}.af-form__select-input:focus-visible{box-shadow:0 0 0 2px var(--select-box-shadow) inset;outline:2px;outline-offset:2px}.af-form__select-input:disabled{border:1px solid var(--select-border-color);color:var(--select-color);cursor:not-allowed}.af-form__select-input:not(:disabled):active,.af-form__select-input:not(:disabled):hover{border:var(--select-border-radius) solid var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}.af-form__select-input-placeholder{color:var(--select-color)}.af-form__select-input--error{border:2px solid var(--select-border-color)}.af-form__select-input--error,.af-form__select-input--error:not(:disabled):active,.af-form__select-input--error:not(:disabled):hover{border-color:var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}.af-form__select-label{--select-placeholder-color:var(--neutral-80)}.af-form__select-input{--select-border-color:var(--axa-blue-65);--select-border-radius:var(--radius-4);--select-background:url(@material-symbols/svg-400/outlined/keyboard_arrow_down.svg) no-repeat right 1rem center/1.5rem 1.5rem}.af-form__select-input:open{background-image:url(@material-symbols/svg-400/outlined/keyboard_arrow_up.svg)}.af-form__select-input option{--select-option-color:var(--neutral-100)}.af-form__select-input option:disabled{--select-option-disabled-color:var(--neutral-50)}.af-form__select-input:focus-visible{--select-border-color:var(--axa-blue-100)}.af-form__select-input:disabled{--select-bg-color-disabled:var(--neutral-50);--select-border-color:var(--neutral-50)}.af-form__select-input-placeholder{--select-placeholder-color:var(--neutral-80)}.af-form__select-input:not(:disabled):active,.af-form__select-input:not(:disabled):hover{--select-border-radius:2px;--select-border-color:var(--axa-blue-100);--select-box-shadow:var(--axa-blue-100)}.af-form__select-input--error{--select-border-color:var(--red-alert-100)}.af-form__select-input--error:focus-visible{--select-box-shadow-color:var(--red-alert-100)}.af-form__select-input--error:not(:disabled):active,.af-form__select-input--error:not(:disabled):hover{--select-border-color:var(--red-alert-100);--select-box-shadow-color:var(--red-alert-100)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Select/SelectCommon.scss","../../../src/Form/Select/SelectApollo.scss","../../../src/Form/Select/SelectApollo.scss%23sass"],"names":[],"mappings":"AACE,uBAKE,qCAAA,CAJA,oBAAA,CAEA,6CAAA,CACA,eAAA,CCHJ,gDAIA,CDGE,uBAcE,uBAAA,CAAA,eAAA,CAJA,mCAAA,CACA,qBAAA,CACA,uCAAA,CAPA,2CAAA,CACA,yCAAA,CAOA,mCAAA,CAJA,yBAAA,CARA,aAAA,CAEA,4CAAA,CACA,2CAAA,CAGA,sBAAA,CACA,kBAAA,CANA,UCWJ,CDGI,8BACE,2CAAA,CACA,yBCDN,CDII,4BACE,8CCFN,CDKI,qCACE,mDAAA,CACA,WAAA,CACA,kBCHN,CDMI,gCACE,2CAAA,CACA,yBAAA,CACA,kBCJN,CDOI,yFAEE,mEAAA,CACA,mDCNN,CDSI,mCACE,yBCPN,CDUI,8BACE,2CCNN,CDUM,qIAHA,uCAAA,CACA,mDCJN,CCpDE,uBACE,4CDuDJ,CCpDE,uBACE,wCAAA,CACA,sCAAA,CACA,6HDuDJ,CCpDI,4BACE,8EDsDN,CCnDI,8BACE,wCDqDN,CCnDM,uCACE,gDDqDR,CCjDI,qCACE,yCDmDN,CChDI,gCACE,4CAAA,CACA,uCDkDN,CC/CI,mCACE,4CDiDN,CC9CI,yFAEE,0BAAA,CACA,yCAAA,CACA,uCD+CN,CC5CI,8BACE,0CD8CN,CC5CM,4CACE,8CD8CR,CC3CM,uGAEE,0CAAA,CACA,8CD4CR","file":"SelectApollo.css","sourcesContent":[".af-form__select {\n &-label {\n display: inline-block;\n margin-bottom: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--select-placeholder-color);\n }\n\n &-input {\n display: block;\n width: 100%;\n margin: calc(10 / var(--font-size-base) * 1rem) 0;\n padding: calc(21 / var(--font-size-base) * 1rem);\n border: 1px solid var(--select-border-color);\n border-radius: var(--select-border-radius);\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--select-color);\n background: var(--select-background);\n background-color: white;\n background-position-x: calc(100% - 1rem);\n box-shadow: var(--select-box-shadow);\n appearance: none;\n\n option {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n }\n\n &:open {\n background-image: var(--select-background-open);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--select-box-shadow) inset;\n outline: 2px;\n outline-offset: 2px;\n }\n\n &:disabled {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border: var(--select-border-radius) solid var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n\n &-placeholder {\n color: var(--select-color);\n }\n\n &--error {\n border: 2px solid var(--select-border-color);\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n }\n }\n}\n","@use \"./SelectCommon\";\n\n.af-form__select {\n &-label {\n --select-placeholder-color: var(--neutral-80);\n }\n\n &-input {\n --select-border-color: var(--axa-blue-65);\n --select-border-radius: var(--radius-4);\n --select-background: url(\"@material-symbols/svg-400/outlined/keyboard_arrow_down.svg\")\n no-repeat right 1rem center / 1.5rem 1.5rem;\n\n &:open {\n background-image: url(\"@material-symbols/svg-400/outlined/keyboard_arrow_up.svg\");\n }\n\n option {\n --select-option-color: var(--neutral-100);\n\n &:disabled {\n --select-option-disabled-color: var(--neutral-50);\n }\n }\n\n &:focus-visible {\n --select-border-color: var(--axa-blue-100);\n }\n\n &:disabled {\n --select-bg-color-disabled: var(--neutral-50);\n --select-border-color: var(--neutral-50);\n }\n\n &-placeholder {\n --select-placeholder-color: var(--neutral-80);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-radius: 2px;\n --select-border-color: var(--axa-blue-100);\n --select-box-shadow: var(--axa-blue-100);\n }\n\n &--error {\n --select-border-color: var(--red-alert-100);\n\n &:focus-visible {\n --select-box-shadow-color: var(--red-alert-100);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-color: var(--red-alert-100);\n --select-box-shadow-color: var(--red-alert-100);\n }\n }\n }\n}\n","@use \"./SelectCommon\";\n\n.af-form__select {\n &-label {\n --select-placeholder-color: var(--neutral-80);\n }\n\n &-input {\n --select-border-color: var(--axa-blue-65);\n --select-border-radius: var(--radius-4);\n --select-background: url(\"@material-symbols/svg-400/outlined/keyboard_arrow_down.svg\")\n no-repeat right 1rem center / 1.5rem 1.5rem;\n\n &:open {\n background-image: url(\"@material-symbols/svg-400/outlined/keyboard_arrow_up.svg\");\n }\n\n option {\n --select-option-color: var(--neutral-100);\n\n &:disabled {\n --select-option-disabled-color: var(--neutral-50);\n }\n }\n\n &:focus-visible {\n --select-border-color: var(--axa-blue-100);\n }\n\n &:disabled {\n --select-bg-color-disabled: var(--neutral-50);\n --select-border-color: var(--neutral-50);\n }\n\n &-placeholder {\n --select-placeholder-color: var(--neutral-80);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-radius: 2px;\n --select-border-color: var(--axa-blue-100);\n --select-box-shadow: var(--axa-blue-100);\n }\n\n &--error {\n --select-border-color: var(--red-alert-100);\n\n &:focus-visible {\n --select-box-shadow-color: var(--red-alert-100);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-color: var(--red-alert-100);\n --select-box-shadow-color: var(--red-alert-100);\n }\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@use "./SelectCommon";
|
|
2
|
+
|
|
3
|
+
.af-form__select {
|
|
4
|
+
&-label {
|
|
5
|
+
--select-placeholder-color: var(--neutral-80);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&-input {
|
|
9
|
+
--select-border-color: var(--axa-blue-65);
|
|
10
|
+
--select-border-radius: var(--radius-4);
|
|
11
|
+
--select-background: url("@material-symbols/svg-400/outlined/keyboard_arrow_down.svg")
|
|
12
|
+
no-repeat right 1rem center / 1.5rem 1.5rem;
|
|
13
|
+
|
|
14
|
+
&:open {
|
|
15
|
+
background-image: url("@material-symbols/svg-400/outlined/keyboard_arrow_up.svg");
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
option {
|
|
19
|
+
--select-option-color: var(--neutral-100);
|
|
20
|
+
|
|
21
|
+
&:disabled {
|
|
22
|
+
--select-option-disabled-color: var(--neutral-50);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:focus-visible {
|
|
27
|
+
--select-border-color: var(--axa-blue-100);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:disabled {
|
|
31
|
+
--select-bg-color-disabled: var(--neutral-50);
|
|
32
|
+
--select-border-color: var(--neutral-50);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&-placeholder {
|
|
36
|
+
--select-placeholder-color: var(--neutral-80);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:not(:disabled):hover,
|
|
40
|
+
&:not(:disabled):active {
|
|
41
|
+
--select-border-radius: 2px;
|
|
42
|
+
--select-border-color: var(--axa-blue-100);
|
|
43
|
+
--select-box-shadow: var(--axa-blue-100);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&--error {
|
|
47
|
+
--select-border-color: var(--red-alert-100);
|
|
48
|
+
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
--select-box-shadow-color: var(--red-alert-100);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:not(:disabled):hover,
|
|
54
|
+
&:not(:disabled):active {
|
|
55
|
+
--select-border-color: var(--red-alert-100);
|
|
56
|
+
--select-box-shadow-color: var(--red-alert-100);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__select-label{color:var(--select-placeholder-color);display:inline-block;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-bottom:calc(8/var(--font-size-base)*1rem)}.af-form__select-input{-webkit-appearance:none;appearance:none;background:var(--select-background);background-color:#fff;background-position-x:calc(100% - 1rem);border:1px solid var(--select-border-color);border-radius:var(--select-border-radius);box-shadow:var(--select-box-shadow);color:var(--select-color);display:block;margin:calc(10/var(--font-size-base)*1rem) 0;padding:calc(21/var(--font-size-base)*1rem);text-overflow:ellipsis;white-space:nowrap;width:100%}.af-form__select-input option{border:1px solid var(--select-border-color);color:var(--select-color)}.af-form__select-input:open{background-image:var(--select-background-open)}.af-form__select-input:focus-visible{box-shadow:0 0 0 2px var(--select-box-shadow) inset;outline:2px;outline-offset:2px}.af-form__select-input:disabled{border:1px solid var(--select-border-color);color:var(--select-color);cursor:not-allowed}.af-form__select-input:not(:disabled):active,.af-form__select-input:not(:disabled):hover{border:var(--select-border-radius) solid var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}.af-form__select-input-placeholder{color:var(--select-color)}.af-form__select-input--error{border:2px solid var(--select-border-color)}.af-form__select-input--error,.af-form__select-input--error:not(:disabled):active,.af-form__select-input--error:not(:disabled):hover{border-color:var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Select/SelectCommon.scss%23sass","../../../src/Form/Select/SelectCommon.scss"],"names":[],"mappings":"AACE,uBAKE,qCAAA,CAJA,oBAAA,CAEA,6CAAA,CACA,eAAA,CAFA,gDCGJ,CDGE,uBAcE,uBAAA,CAAA,eAAA,CAJA,mCAAA,CACA,qBAAA,CACA,uCAAA,CAPA,2CAAA,CACA,yCAAA,CAOA,mCAAA,CAJA,yBAAA,CARA,aAAA,CAEA,4CAAA,CACA,2CAAA,CAGA,sBAAA,CACA,kBAAA,CANA,UCWJ,CDGI,8BACE,2CAAA,CACA,yBCDN,CDII,4BACE,8CCFN,CDKI,qCACE,mDAAA,CACA,WAAA,CACA,kBCHN,CDMI,gCACE,2CAAA,CACA,yBAAA,CACA,kBCJN,CDOI,yFAEE,mEAAA,CACA,mDCNN,CDSI,mCACE,yBCPN,CDUI,8BACE,2CCNN,CDUM,qIAHA,uCAAA,CACA,mDCJN","file":"SelectCommon.css","sourcesContent":[".af-form__select {\n &-label {\n display: inline-block;\n margin-bottom: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--select-placeholder-color);\n }\n\n &-input {\n display: block;\n width: 100%;\n margin: calc(10 / var(--font-size-base) * 1rem) 0;\n padding: calc(21 / var(--font-size-base) * 1rem);\n border: 1px solid var(--select-border-color);\n border-radius: var(--select-border-radius);\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--select-color);\n background: var(--select-background);\n background-color: white;\n background-position-x: calc(100% - 1rem);\n box-shadow: var(--select-box-shadow);\n appearance: none;\n\n option {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n }\n\n &:open {\n background-image: var(--select-background-open);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--select-box-shadow) inset;\n outline: 2px;\n outline-offset: 2px;\n }\n\n &:disabled {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border: var(--select-border-radius) solid var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n\n &-placeholder {\n color: var(--select-color);\n }\n\n &--error {\n border: 2px solid var(--select-border-color);\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n }\n }\n}\n",".af-form__select {\n &-label {\n display: inline-block;\n margin-bottom: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--select-placeholder-color);\n }\n\n &-input {\n display: block;\n width: 100%;\n margin: calc(10 / var(--font-size-base) * 1rem) 0;\n padding: calc(21 / var(--font-size-base) * 1rem);\n border: 1px solid var(--select-border-color);\n border-radius: var(--select-border-radius);\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--select-color);\n background: var(--select-background);\n background-color: white;\n background-position-x: calc(100% - 1rem);\n box-shadow: var(--select-box-shadow);\n appearance: none;\n\n option {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n }\n\n &:open {\n background-image: var(--select-background-open);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--select-box-shadow) inset;\n outline: 2px;\n outline-offset: 2px;\n }\n\n &:disabled {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border: var(--select-border-radius) solid var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n\n &-placeholder {\n color: var(--select-color);\n }\n\n &--error {\n border: 2px solid var(--select-border-color);\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
.af-form__select {
|
|
2
|
+
&-label {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
margin-bottom: calc(8 / var(--font-size-base) * 1rem);
|
|
5
|
+
font-size: calc(18 / var(--font-size-base) * 1rem);
|
|
6
|
+
font-weight: 600;
|
|
7
|
+
color: var(--select-placeholder-color);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&-input {
|
|
11
|
+
display: block;
|
|
12
|
+
width: 100%;
|
|
13
|
+
margin: calc(10 / var(--font-size-base) * 1rem) 0;
|
|
14
|
+
padding: calc(21 / var(--font-size-base) * 1rem);
|
|
15
|
+
border: 1px solid var(--select-border-color);
|
|
16
|
+
border-radius: var(--select-border-radius);
|
|
17
|
+
text-overflow: ellipsis;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
color: var(--select-color);
|
|
20
|
+
background: var(--select-background);
|
|
21
|
+
background-color: white;
|
|
22
|
+
background-position-x: calc(100% - 1rem);
|
|
23
|
+
box-shadow: var(--select-box-shadow);
|
|
24
|
+
appearance: none;
|
|
25
|
+
|
|
26
|
+
option {
|
|
27
|
+
border: 1px solid var(--select-border-color);
|
|
28
|
+
color: var(--select-color);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:open {
|
|
32
|
+
background-image: var(--select-background-open);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:focus-visible {
|
|
36
|
+
box-shadow: 0 0 0 2px var(--select-box-shadow) inset;
|
|
37
|
+
outline: 2px;
|
|
38
|
+
outline-offset: 2px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:disabled {
|
|
42
|
+
border: 1px solid var(--select-border-color);
|
|
43
|
+
color: var(--select-color);
|
|
44
|
+
cursor: not-allowed;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:not(:disabled):hover,
|
|
48
|
+
&:not(:disabled):active {
|
|
49
|
+
border: var(--select-border-radius) solid var(--select-border-color);
|
|
50
|
+
box-shadow: 0 0 0 1px var(--select-box-shadow) inset;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&-placeholder {
|
|
54
|
+
color: var(--select-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&--error {
|
|
58
|
+
border: 2px solid var(--select-border-color);
|
|
59
|
+
border-color: var(--select-border-color);
|
|
60
|
+
box-shadow: 0 0 0 1px var(--select-box-shadow) inset;
|
|
61
|
+
|
|
62
|
+
&:not(:disabled):hover,
|
|
63
|
+
&:not(:disabled):active {
|
|
64
|
+
border-color: var(--select-border-color);
|
|
65
|
+
box-shadow: 0 0 0 1px var(--select-box-shadow) inset;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.af-form__select-label{color:var(--select-placeholder-color);display:inline-block;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-bottom:calc(8/var(--font-size-base)*1rem)}.af-form__select-input{-webkit-appearance:none;appearance:none;background:var(--select-background);background-color:#fff;background-position-x:calc(100% - 1rem);border:1px solid var(--select-border-color);border-radius:var(--select-border-radius);box-shadow:var(--select-box-shadow);color:var(--select-color);display:block;margin:calc(10/var(--font-size-base)*1rem) 0;padding:calc(21/var(--font-size-base)*1rem);text-overflow:ellipsis;white-space:nowrap;width:100%}.af-form__select-input option{border:1px solid var(--select-border-color);color:var(--select-color)}.af-form__select-input:open{background-image:var(--select-background-open)}.af-form__select-input:focus-visible{box-shadow:0 0 0 2px var(--select-box-shadow) inset;outline:2px;outline-offset:2px}.af-form__select-input:disabled{border:1px solid var(--select-border-color);color:var(--select-color);cursor:not-allowed}.af-form__select-input:not(:disabled):active,.af-form__select-input:not(:disabled):hover{border:var(--select-border-radius) solid var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}.af-form__select-input-placeholder{color:var(--select-color)}.af-form__select-input--error{border:2px solid var(--select-border-color)}.af-form__select-input--error,.af-form__select-input--error:not(:disabled):active,.af-form__select-input--error:not(:disabled):hover{border-color:var(--select-border-color);box-shadow:0 0 0 1px var(--select-box-shadow) inset}.af-form__select-input{--select-placeholder-color:var(--color-gray-700);--select-border-radius:var(--default-border-radius);--select-border-color:var(--color-gray-700);--select-background:url(@material-symbols/svg-400/outlined/arrow_drop_down.svg) no-repeat right 1rem center/1.5rem 1.5rem}.af-form__select-input:open{--select-background-open:url(@material-symbols/svg-400/outlined/arrow_drop_up.svg)}.af-form__select-input option{--select-option-color:var(--color-black)}.af-form__select-input option:disabled{--select-option-disabled-color:var(--color-gray-500)}.af-form__select-input:focus-visible{--select-border-color:var(--color-axa)}.af-form__select-input:disabled{--select-bg-color-disabled:var(--color-gray-500);--select-border-color:var(--color-gray-400)}.af-form__select-input-placeholder{--select-placeholder-color:var(--color-gray-700)}.af-form__select-input:not(:disabled):active,.af-form__select-input:not(:disabled):hover{--select-border-radius:1px;--select-border-color:var(--color-axa);--select-box-shadow:var(--color-axa)}.af-form__select-input--error{--select-border-color:var(--color-red)}.af-form__select-input--error:focus-visible{--select-box-shadow:var(--color-red);outline:none}.af-form__select-input--error:not(:disabled):active,.af-form__select-input--error:not(:disabled):hover{--select-border-color:var(--color-red);--select-box-shadow:0 0 0 1px var(--color-red) inset}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Form/Select/SelectCommon.scss","../../../src/Form/Select/SelectLF.scss","../../../src/Form/Select/SelectLF.scss%23sass"],"names":[],"mappings":"AACE,uBAKE,qCAAA,CAJA,oBAAA,CAEA,6CAAA,CACA,eAAA,CCHJ,gDAIA,CDGE,uBAcE,uBAAA,CAAA,eAAA,CAJA,mCAAA,CACA,qBAAA,CACA,uCAAA,CAPA,2CAAA,CACA,yCAAA,CAOA,mCAAA,CAJA,yBAAA,CARA,aAAA,CAEA,4CAAA,CACA,2CAAA,CAGA,sBAAA,CACA,kBAAA,CANA,UCWJ,CDGI,8BACE,2CAAA,CACA,yBCDN,CDII,4BACE,8CCFN,CDKI,qCACE,mDAAA,CACA,WAAA,CACA,kBCHN,CDMI,gCACE,2CAAA,CACA,yBAAA,CACA,kBCJN,CDOI,yFAEE,mEAAA,CACA,mDCNN,CDSI,mCACE,yBCPN,CDUI,8BACE,2CCNN,CDUM,qIAHA,uCAAA,CACA,mDCJN,CCpDE,uBDuDF,gDAAA,CCrDI,mDAAA,CACA,2CAAA,CACA,yHDwDJ,CCrDI,4BACE,kFDuDN,CCpDI,8BACE,wCDsDN,CCpDM,uCACE,oDDsDR,CClDI,qCACE,sCDoDN,CCjDI,gCACE,gDAAA,CACA,2CDmDN,CChDI,mCACE,gDDkDN,CC/CI,yFAEE,0BAAA,CACA,sCAAA,CACA,oCDgDN,CC7CI,8BACE,sCD+CN,CC7CM,4CACE,oCAAA,CAEA,YD8CR,CC3CM,uGAEE,sCAAA,CACA,oDD4CR","file":"SelectLF.css","sourcesContent":[".af-form__select {\n &-label {\n display: inline-block;\n margin-bottom: calc(8 / var(--font-size-base) * 1rem);\n font-size: calc(18 / var(--font-size-base) * 1rem);\n font-weight: 600;\n color: var(--select-placeholder-color);\n }\n\n &-input {\n display: block;\n width: 100%;\n margin: calc(10 / var(--font-size-base) * 1rem) 0;\n padding: calc(21 / var(--font-size-base) * 1rem);\n border: 1px solid var(--select-border-color);\n border-radius: var(--select-border-radius);\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--select-color);\n background: var(--select-background);\n background-color: white;\n background-position-x: calc(100% - 1rem);\n box-shadow: var(--select-box-shadow);\n appearance: none;\n\n option {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n }\n\n &:open {\n background-image: var(--select-background-open);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--select-box-shadow) inset;\n outline: 2px;\n outline-offset: 2px;\n }\n\n &:disabled {\n border: 1px solid var(--select-border-color);\n color: var(--select-color);\n cursor: not-allowed;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border: var(--select-border-radius) solid var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n\n &-placeholder {\n color: var(--select-color);\n }\n\n &--error {\n border: 2px solid var(--select-border-color);\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n border-color: var(--select-border-color);\n box-shadow: 0 0 0 1px var(--select-box-shadow) inset;\n }\n }\n }\n}\n","@use \"./SelectCommon\";\n\n.af-form__select {\n &-input {\n --select-placeholder-color: var(--color-gray-700);\n --select-border-radius: var(--default-border-radius);\n --select-border-color: var(--color-gray-700);\n --select-background: url(\"@material-symbols/svg-400/outlined/arrow_drop_down.svg\")\n no-repeat right 1rem center / 1.5rem 1.5rem;\n\n &:open {\n --select-background-open: url(\"@material-symbols/svg-400/outlined/arrow_drop_up.svg\");\n }\n\n option {\n --select-option-color: var(--color-black);\n\n &:disabled {\n --select-option-disabled-color: var(--color-gray-500);\n }\n }\n\n &:focus-visible {\n --select-border-color: var(--color-axa);\n }\n\n &:disabled {\n --select-bg-color-disabled: var(--color-gray-500);\n --select-border-color: var(--color-gray-400);\n }\n\n &-placeholder {\n --select-placeholder-color: var(--color-gray-700);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-radius: 1px;\n --select-border-color: var(--color-axa);\n --select-box-shadow: var(--color-axa);\n }\n\n &--error {\n --select-border-color: var(--color-red);\n\n &:focus-visible {\n --select-box-shadow: var(--color-red);\n\n outline: none;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-color: var(--color-red);\n --select-box-shadow: 0 0 0 1px var(--color-red) inset;\n }\n }\n }\n}\n","@use \"./SelectCommon\";\n\n.af-form__select {\n &-input {\n --select-placeholder-color: var(--color-gray-700);\n --select-border-radius: var(--default-border-radius);\n --select-border-color: var(--color-gray-700);\n --select-background: url(\"@material-symbols/svg-400/outlined/arrow_drop_down.svg\")\n no-repeat right 1rem center / 1.5rem 1.5rem;\n\n &:open {\n --select-background-open: url(\"@material-symbols/svg-400/outlined/arrow_drop_up.svg\");\n }\n\n option {\n --select-option-color: var(--color-black);\n\n &:disabled {\n --select-option-disabled-color: var(--color-gray-500);\n }\n }\n\n &:focus-visible {\n --select-border-color: var(--color-axa);\n }\n\n &:disabled {\n --select-bg-color-disabled: var(--color-gray-500);\n --select-border-color: var(--color-gray-400);\n }\n\n &-placeholder {\n --select-placeholder-color: var(--color-gray-700);\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-radius: 1px;\n --select-border-color: var(--color-axa);\n --select-box-shadow: var(--color-axa);\n }\n\n &--error {\n --select-border-color: var(--color-red);\n\n &:focus-visible {\n --select-box-shadow: var(--color-red);\n\n outline: none;\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):active {\n --select-border-color: var(--color-red);\n --select-box-shadow: 0 0 0 1px var(--color-red) inset;\n }\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@use "./SelectCommon";
|
|
2
|
+
|
|
3
|
+
.af-form__select {
|
|
4
|
+
&-input {
|
|
5
|
+
--select-placeholder-color: var(--color-gray-700);
|
|
6
|
+
--select-border-radius: var(--default-border-radius);
|
|
7
|
+
--select-border-color: var(--color-gray-700);
|
|
8
|
+
--select-background: url("@material-symbols/svg-400/outlined/arrow_drop_down.svg")
|
|
9
|
+
no-repeat right 1rem center / 1.5rem 1.5rem;
|
|
10
|
+
|
|
11
|
+
&:open {
|
|
12
|
+
--select-background-open: url("@material-symbols/svg-400/outlined/arrow_drop_up.svg");
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
option {
|
|
16
|
+
--select-option-color: var(--color-black);
|
|
17
|
+
|
|
18
|
+
&:disabled {
|
|
19
|
+
--select-option-disabled-color: var(--color-gray-500);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:focus-visible {
|
|
24
|
+
--select-border-color: var(--color-axa);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:disabled {
|
|
28
|
+
--select-bg-color-disabled: var(--color-gray-500);
|
|
29
|
+
--select-border-color: var(--color-gray-400);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&-placeholder {
|
|
33
|
+
--select-placeholder-color: var(--color-gray-700);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:not(:disabled):hover,
|
|
37
|
+
&:not(:disabled):active {
|
|
38
|
+
--select-border-radius: 1px;
|
|
39
|
+
--select-border-color: var(--color-axa);
|
|
40
|
+
--select-box-shadow: var(--color-axa);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--error {
|
|
44
|
+
--select-border-color: var(--color-red);
|
|
45
|
+
|
|
46
|
+
&:focus-visible {
|
|
47
|
+
--select-box-shadow: var(--color-red);
|
|
48
|
+
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:not(:disabled):hover,
|
|
53
|
+
&:not(:disabled):active {
|
|
54
|
+
--select-border-color: var(--color-red);
|
|
55
|
+
--select-box-shadow: 0 0 0 1px var(--color-red) inset;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
package/dist/Icon/IconApollo.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content
|
|
1
|
+
.af-icon{background-color:var(--icon-background-color,#0000);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content}.af-icon svg{height:var(--icon-size,calc(24/var(--font-size-base)*1rem));width:var(--icon-size,calc(24/var(--font-size-base)*1rem));fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-100)}.af-icon--small.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--axa-blue-100)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--white);--icon-background-color:var(--axa-blue-100)}.af-icon--secondary{--icon-fill:var(--white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--axa-blue-100);--icon-background-color:var(--axa-blue-4);--icon-outline-color:var(--axa-blue-4)}.af-icon--disabled{--icon-fill:var(--neutral-50)}.af-icon--disabled.af-icon--has-background{--icon-background-color:var(--neutral-5)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/IconCommon.scss","../../src/Icon/IconApollo.scss","../../src/Icon/IconApollo.scss%23sass"],"names":[],"mappings":"AAAA,SAKE,
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/IconCommon.scss","../../src/Icon/IconApollo.scss","../../src/Icon/IconApollo.scss%23sass"],"names":[],"mappings":"AAAA,SAKE,mDAAA,CADA,uCAAA,CAHA,YAAA,CAKA,uCAAA,CAHA,2BAAA,CCDF,iBAKA,CDCE,aAEE,2DAAA,CADA,0DAAA,CAEA,qBCCJ,CDGI,oBACE,+CCDN,CDII,wCACE,kDCFN,CDOI,qBACE,+CCLN,CDQI,yCACE,kDCNN,CDWI,oBACE,gDCTN,CDcI,0BACE,+CCZN,CDeI,8CACE,iDCbN,CDkBI,4CACE,mBAAA,CACA,iBChBN,CCnCA,SACE,sCDsCF,CCnCI,wCACE,kDDqCN,CCjCE,kBACE,+BDmCJ,CCjCI,0CACE,wBAAA,CACA,2CDmCN,CC/BE,oBACE,wBDiCJ,CC/BI,4CACE,+BAAA,CACA,yCAAA,CACA,sCDiCN,CC7BE,mBACE,6BD+BJ,CC7BI,2CACE,wCD+BN","file":"IconApollo.css","sourcesContent":[".af-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: var(--icon-padding);\r\n border-radius: var(--icon-border-radius);\r\n background-color: var(--icon-background-color, transparent);\r\n outline-color: var(--icon-outline-color);\r\n\r\n svg {\r\n width: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n height: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n fill: var(--icon-fill);\r\n }\r\n\r\n &--large {\r\n svg {\r\n --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--medium {\r\n svg {\r\n --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--small {\r\n svg {\r\n --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--extra-small {\r\n svg {\r\n --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--secondary {\r\n &.af-icon--has-background {\r\n outline-style: solid;\r\n outline-width: 1px;\r\n }\r\n }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n --icon-border-radius: var(--radius-100);\r\n\r\n &--small {\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--primary {\r\n --icon-fill: var(--axa-blue-100);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--white);\r\n --icon-background-color: var(--axa-blue-100);\r\n }\r\n }\r\n\r\n &--secondary {\r\n --icon-fill: var(--white);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--axa-blue-100);\r\n --icon-background-color: var(--axa-blue-4);\r\n --icon-outline-color: var(--axa-blue-4);\r\n }\r\n }\r\n\r\n &--disabled {\r\n --icon-fill: var(--neutral-50);\r\n\r\n &.af-icon--has-background {\r\n --icon-background-color: var(--neutral-5);\r\n }\r\n }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n --icon-border-radius: var(--radius-100);\r\n\r\n &--small {\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--primary {\r\n --icon-fill: var(--axa-blue-100);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--white);\r\n --icon-background-color: var(--axa-blue-100);\r\n }\r\n }\r\n\r\n &--secondary {\r\n --icon-fill: var(--white);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--axa-blue-100);\r\n --icon-background-color: var(--axa-blue-4);\r\n --icon-outline-color: var(--axa-blue-4);\r\n }\r\n }\r\n\r\n &--disabled {\r\n --icon-fill: var(--neutral-50);\r\n\r\n &.af-icon--has-background {\r\n --icon-background-color: var(--neutral-5);\r\n }\r\n }\r\n}\r\n"]}
|
package/dist/Icon/IconCommon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content
|
|
1
|
+
.af-icon{background-color:var(--icon-background-color,#0000);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content}.af-icon svg{height:var(--icon-size,calc(24/var(--font-size-base)*1rem));width:var(--icon-size,calc(24/var(--font-size-base)*1rem));fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/IconCommon.scss%23sass","../../src/Icon/IconCommon.scss"],"names":[],"mappings":"AAAA,SAKE,
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/IconCommon.scss%23sass","../../src/Icon/IconCommon.scss"],"names":[],"mappings":"AAAA,SAKE,mDAAA,CADA,uCAAA,CAHA,YAAA,CAKA,uCAAA,CAHA,2BAAA,CADA,iBCKF,CDCE,aAEE,2DAAA,CADA,0DAAA,CAEA,qBCCJ,CDGI,oBACE,+CCDN,CDII,wCACE,kDCFN,CDOI,qBACE,+CCLN,CDQI,yCACE,kDCNN,CDWI,oBACE,gDCTN,CDcI,0BACE,+CCZN,CDeI,8CACE,iDCbN,CDkBI,4CACE,mBAAA,CACA,iBChBN","file":"IconCommon.css","sourcesContent":[".af-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: var(--icon-padding);\r\n border-radius: var(--icon-border-radius);\r\n background-color: var(--icon-background-color, transparent);\r\n outline-color: var(--icon-outline-color);\r\n\r\n svg {\r\n width: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n height: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n fill: var(--icon-fill);\r\n }\r\n\r\n &--large {\r\n svg {\r\n --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--medium {\r\n svg {\r\n --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--small {\r\n svg {\r\n --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--extra-small {\r\n svg {\r\n --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--secondary {\r\n &.af-icon--has-background {\r\n outline-style: solid;\r\n outline-width: 1px;\r\n }\r\n }\r\n}\r\n",".af-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: var(--icon-padding);\r\n border-radius: var(--icon-border-radius);\r\n background-color: var(--icon-background-color, transparent);\r\n outline-color: var(--icon-outline-color);\r\n\r\n svg {\r\n width: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n height: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n fill: var(--icon-fill);\r\n }\r\n\r\n &--large {\r\n svg {\r\n --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--medium {\r\n svg {\r\n --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--small {\r\n svg {\r\n --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--extra-small {\r\n svg {\r\n --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--secondary {\r\n &.af-icon--has-background {\r\n outline-style: solid;\r\n outline-width: 1px;\r\n }\r\n }\r\n}\r\n"]}
|
|
@@ -3,15 +3,12 @@
|
|
|
3
3
|
width: fit-content;
|
|
4
4
|
padding: var(--icon-padding);
|
|
5
5
|
border-radius: var(--icon-border-radius);
|
|
6
|
-
background-color: var(--icon-background-color);
|
|
6
|
+
background-color: var(--icon-background-color, transparent);
|
|
7
7
|
outline-color: var(--icon-outline-color);
|
|
8
8
|
|
|
9
|
-
--icon-background-color: transparent;
|
|
10
|
-
--icon-size: calc(24 / var(--font-size-base) * 1rem);
|
|
11
|
-
|
|
12
9
|
svg {
|
|
13
|
-
width: var(--icon-size);
|
|
14
|
-
height: var(--icon-size);
|
|
10
|
+
width: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));
|
|
11
|
+
height: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));
|
|
15
12
|
fill: var(--icon-fill);
|
|
16
13
|
}
|
|
17
14
|
|
package/dist/Icon/IconLF.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content
|
|
1
|
+
.af-icon{background-color:var(--icon-background-color,#0000);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content}.af-icon svg{height:var(--icon-size,calc(24/var(--font-size-base)*1rem));width:var(--icon-size,calc(24/var(--font-size-base)*1rem));fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-12)}.af-icon--small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--color-axa)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--color-white);--icon-background-color:var(--color-axa)}.af-icon--secondary{--icon-fill:var(--color-white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--color-axa);--icon-background-color:var(--color-white);--icon-outline-color:var(--color-gray-300)}.af-icon--disabled{--icon-fill:var(--color-gray-500)}.af-icon--disabled.af-icon--has-background{--icon-background-color:var(--color-gray-200)}
|
package/dist/Icon/IconLF.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/IconCommon.scss","../../src/Icon/IconLF.scss","../../src/Icon/IconLF.scss%23sass"],"names":[],"mappings":"AAAA,SAKE,
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/IconCommon.scss","../../src/Icon/IconLF.scss","../../src/Icon/IconLF.scss%23sass"],"names":[],"mappings":"AAAA,SAKE,mDAAA,CADA,uCAAA,CAHA,YAAA,CAKA,uCAAA,CAHA,2BAAA,CCDF,iBAKA,CDCE,aAEE,2DAAA,CADA,0DAAA,CAEA,qBCCJ,CDGI,oBACE,+CCDN,CDII,wCACE,kDCFN,CDOI,qBACE,+CCLN,CDQI,yCACE,kDCNN,CDWI,oBACE,gDCTN,CDcI,0BACE,+CCZN,CDeI,8CACE,iDCbN,CDkBI,4CACE,mBAAA,CACA,iBChBN,CCnCA,SACE,qCDsCF,CCnCI,wCACE,iDDqCN,CCjCE,kBACE,4BDmCJ,CCjCI,0CACE,8BAAA,CACA,wCDmCN,CC/BE,oBACE,8BDiCJ,CC/BI,4CACE,4BAAA,CACA,0CAAA,CACA,0CDiCN,CC7BE,mBACE,iCD+BJ,CC7BI,2CACE,6CD+BN","file":"IconLF.css","sourcesContent":[".af-icon {\r\n display: grid;\r\n width: fit-content;\r\n padding: var(--icon-padding);\r\n border-radius: var(--icon-border-radius);\r\n background-color: var(--icon-background-color, transparent);\r\n outline-color: var(--icon-outline-color);\r\n\r\n svg {\r\n width: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n height: var(--icon-size, calc(24 / var(--font-size-base) * 1rem));\r\n fill: var(--icon-fill);\r\n }\r\n\r\n &--large {\r\n svg {\r\n --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--medium {\r\n svg {\r\n --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--small {\r\n svg {\r\n --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--extra-small {\r\n svg {\r\n --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n }\r\n\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--secondary {\r\n &.af-icon--has-background {\r\n outline-style: solid;\r\n outline-width: 1px;\r\n }\r\n }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n --icon-border-radius: var(--radius-12);\r\n\r\n &--small {\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--primary {\r\n --icon-fill: var(--color-axa);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--color-white);\r\n --icon-background-color: var(--color-axa);\r\n }\r\n }\r\n\r\n &--secondary {\r\n --icon-fill: var(--color-white);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--color-axa);\r\n --icon-background-color: var(--color-white);\r\n --icon-outline-color: var(--color-gray-300);\r\n }\r\n }\r\n\r\n &--disabled {\r\n --icon-fill: var(--color-gray-500);\r\n\r\n &.af-icon--has-background {\r\n --icon-background-color: var(--color-gray-200);\r\n }\r\n }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n --icon-border-radius: var(--radius-12);\r\n\r\n &--small {\r\n &.af-icon--has-background {\r\n --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n }\r\n }\r\n\r\n &--primary {\r\n --icon-fill: var(--color-axa);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--color-white);\r\n --icon-background-color: var(--color-axa);\r\n }\r\n }\r\n\r\n &--secondary {\r\n --icon-fill: var(--color-white);\r\n\r\n &.af-icon--has-background {\r\n --icon-fill: var(--color-axa);\r\n --icon-background-color: var(--color-white);\r\n --icon-outline-color: var(--color-gray-300);\r\n }\r\n }\r\n\r\n &--disabled {\r\n --icon-fill: var(--color-gray-500);\r\n\r\n &.af-icon--has-background {\r\n --icon-background-color: var(--color-gray-200);\r\n }\r\n }\r\n}\r\n"]}
|