@fast-simon/dashboard-utilities 1.0.139-beta.2 → 1.0.139-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/components/CheckboxFilter/Checkbox/styles.module.css +15 -40
  2. package/dist/components/FacetItem/styles.module.css +6 -4
  3. package/dist/components/FromToFilter/From/styles.module.css +24 -5
  4. package/dist/components/FromToFilter/To/styles.module.css +25 -6
  5. package/dist/components/FromToFilter/styles.module.css +34 -10
  6. package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.d.ts +0 -1
  7. package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.js +2 -9
  8. package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.js.map +1 -1
  9. package/dist/components/LastReceivedDateFilter/styles.module.css +21 -11
  10. package/dist/components/RadioFilter/Radio/styles.module.css +20 -36
  11. package/dist/components/RadioFilter/styles.module.css +1 -1
  12. package/dist/components/ReactDatePicker/styles.module.css +10 -2
  13. package/dist/components/SingleFilter/styles.module.css +3 -3
  14. package/package.json +1 -1
package/dist/components/CheckboxFilter/Checkbox/styles.module.css CHANGED
@@ -22,35 +22,6 @@
22
22
  width: 0;
23
23
  }
24
24
 
25
- .checkmark {
26
- min-height: 16px;
27
- min-width: 16px;
28
- background-color: #eee;
29
- margin-right: 10px;
30
- }
31
-
32
- .fsCheckbox:hover input ~ .checkmark {
33
- background-color: #d00202cf;
34
- }
35
-
36
- .fsCheckbox input:checked ~ .checkmark {
37
- background-color: white;
38
- }
39
-
40
- .fsCheckbox input:checked ~ .checkmark:after {
41
- display: block;
42
- }
43
-
44
- .fsCheckboxx .checkmark:after {
45
- left: 5px;
46
- width: 4px;
47
- height: 9px;
48
- border: solid white;
49
- border-width: 0 2px 2px 0;
50
- -webkit-transform: rotate(45deg);
51
- -ms-transform: rotate(45deg);
52
- transform: rotate(45deg);
53
- }
54
25
  .fsSelectedCheckboxTrue{}
55
26
  .fsSelectedCheckboxFalse{}
56
27
 
@@ -69,9 +40,6 @@
69
40
  .checkbox {
70
41
  display: flex;
71
42
  position: relative;
72
- padding: 0 5px 0 0;
73
- margin-top: 5px;
74
- margin-bottom: 5px;
75
43
  cursor: pointer;
76
44
  -webkit-user-select: none;
77
45
  -moz-user-select: none;
@@ -104,10 +72,13 @@
104
72
  }
105
73
 
106
74
  .checkmark {
107
- min-height: 16px;
108
- min-width: 16px;
109
- background-color: #eee;
75
+ min-height: 13px;
76
+ min-width: 13px;
77
+ border: #717788 2px solid;
78
+ background-color: unset;
79
+ border-radius: 4px;
110
80
  margin-right: 10px;
81
+ position: relative;
111
82
  }
112
83
 
113
84
  .checkbox:hover input ~ .checkmark {
@@ -115,7 +86,10 @@
115
86
  }
116
87
 
117
88
  .checkbox input:checked ~ .checkmark {
118
- background-color: #000000;
89
+ background-color: #4374f2;
90
+ border: none;
91
+ min-height: 17px;
92
+ min-width: 17px;
119
93
  }
120
94
 
121
95
  .checkmark:after {
@@ -129,9 +103,10 @@
129
103
  }
130
104
 
131
105
  .checkbox .checkmark:after {
132
- left: 5px;
133
- width: 4px;
134
- height: 9px;
106
+ left: 6px;
107
+ width: 3px;
108
+ height: 8px;
109
+ top: 2px;
135
110
  border: solid white;
136
111
  border-width: 0 2px 2px 0;
137
112
  -webkit-transform: rotate(45deg);
@@ -140,4 +115,4 @@
140
115
  }
141
116
  :global(.modal-mobile-filters .fs-serp-filter-count, .modal-mobile-filters .fsSerpCheckmark) {
142
117
  display: none;
143
- }
118
+ }
package/dist/components/FacetItem/styles.module.css CHANGED
@@ -8,13 +8,13 @@
8
8
  -webkit-font-smoothing: antialiased;
9
9
  -moz-osx-font-smoothing: grayscale;
10
10
  letter-spacing: .2px;
11
- background-color: #fff0;
11
+ background-color: #f9fafb;
12
12
  border: none;
13
- width: 100%;
13
+ width: calc(100% - 48px);
14
14
  text-align: left;
15
- padding: 8px 0;
15
+ padding: 12px 24px;
16
16
  position: relative;
17
- border-radius: 8px;
17
+ border-radius: 0;
18
18
  transition: background-color .2s ease-out;
19
19
  cursor: pointer;
20
20
  color: #000;
@@ -23,6 +23,8 @@
23
23
  display: flex;
24
24
  gap: 10px;
25
25
  align-items: center;
26
+ border-top: solid 1px #dddfe4;
27
+ border-bottom: solid 1px #dddfe4;
26
28
  }
27
29
 
28
30
  .fsFacetContainer {
package/dist/components/FromToFilter/From/styles.module.css CHANGED
@@ -1,9 +1,28 @@
1
1
  .from {
2
- float: left;
3
- width: calc(50% - 20px);
4
- padding: 0 10px;
2
+ flex: 1;
3
+ display: flex;
4
+ }
5
+
6
+ .from > div:first-child {
7
+ width: 100%;
8
+ display: flex;
9
+ align-self: stretch;
10
+ flex-grow: 0;
11
+ flex-direction: row;
12
+ justify-content: flex-start;
13
+ align-items: stretch;
14
+ gap: 4px;
15
+ border-radius: 6px;
16
+ border: solid 1px #dddfe4;
5
17
  }
6
18
 
7
19
  .from > div > input {
8
- max-width: 100%;
9
- }
20
+ width: 100%;
21
+ border: none;
22
+ padding: 8px 12px;
23
+ outline: none;
24
+ background: transparent;
25
+ font-family: Assistant;
26
+ font-size: 14px;
27
+ color: #33394f;
28
+ }
package/dist/components/FromToFilter/To/styles.module.css CHANGED
@@ -1,9 +1,28 @@
1
1
  .to {
2
- float: left;
3
- width: calc(50% - 20px);
4
- padding: 0 10px;
2
+ flex: 1;
3
+ display: flex;
5
4
  }
6
5
 
7
- .to > div > input {
8
- max-width: 100%;
9
- }
6
+ .to > div {
7
+ width: 100%;
8
+ display: flex;
9
+ align-self: stretch;
10
+ flex-grow: 0;
11
+ flex-direction: row;
12
+ justify-content: flex-start;
13
+ align-items: stretch;
14
+ gap: 4px;
15
+ border-radius: 6px;
16
+ border: solid 1px #dddfe4;
17
+ }
18
+
19
+ .to > div > input {
20
+ width: 100%;
21
+ border: none;
22
+ outline: none;
23
+ padding: 8px 12px;
24
+ background: transparent;
25
+ font-family: Assistant;
26
+ font-size: 14px;
27
+ color: #33394f;
28
+ }
package/dist/components/FromToFilter/styles.module.css CHANGED
@@ -2,13 +2,12 @@
2
2
  -webkit-font-smoothing: antialiased;
3
3
  -moz-osx-font-smoothing: grayscale;
4
4
  letter-spacing: .2px;
5
- background-color: #fff0;
5
+ background-color: #f9fafb;
6
6
  border: none;
7
- width: 100%;
7
+ width: calc(100% - 48px);
8
8
  text-align: left;
9
- padding: 8px 0;
9
+ padding: 12px 24px;
10
10
  position: relative;
11
- border-radius: 8px;
12
11
  transition: background-color .2s ease-out;
13
12
  cursor: pointer;
14
13
  color: #000;
@@ -17,18 +16,43 @@
17
16
  display: flex;
18
17
  gap: 10px;
19
18
  align-items: center;
19
+ border-radius: 0;
20
+ border-top: solid 1px #dddfe4;
21
+ border-bottom: solid 1px #dddfe4;
22
+ }
23
+
24
+ .fromToContainer {
25
+ display: flex;
26
+ flex-direction: column;
20
27
  }
21
28
 
22
29
  .fsFacetContainer {
23
30
  display: flex;
24
31
  flex-direction: column;
25
32
  }
33
+
26
34
  .fsFacetOptions {
27
- width: 100%;
28
- margin: 0 -5px;
35
+ display: flex;
36
+ flex-direction: row;
37
+ padding: 16px 24px;
38
+ gap: 12px;
39
+ align-items: center;
29
40
  }
41
+
30
42
  .fsFacetOptions:after {
31
- content: "";
32
- display: table;
33
- clear: both;
34
- }
43
+ content: "";
44
+ display: table;
45
+ clear: both;
46
+ }
47
+
48
+ .toText {
49
+ font-family: Assistant;
50
+ font-size: 14px;
51
+ font-weight: normal;
52
+ font-stretch: normal;
53
+ font-style: normal;
54
+ line-height: normal;
55
+ letter-spacing: normal;
56
+ text-align: left;
57
+ color: #717788;
58
+ }
package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.d.ts CHANGED
@@ -5,7 +5,6 @@ export interface Props {
5
5
  narrow: Narrow;
6
6
  onNarrowChange: (narrow: any) => void;
7
7
  onPageChange: (page: number) => void;
8
- onSearchChange?: (query: string) => void;
9
8
  }
10
9
  declare const InStoreFiltersMenu: React.FC<Props>;
11
10
  export default InStoreFiltersMenu;
package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.js CHANGED
@@ -3,20 +3,13 @@ import React, { useEffect } from 'react';
3
3
  import classes from './styles.module.css';
4
4
  import { FacetItem } from "../FacetItem/FacetItem";
5
5
  import { NarrowParser } from "@fast-simon/utilities";
6
- import Input from "../Input";
7
- const InStoreFiltersMenu = ({ facets, narrow, onNarrowChange, onPageChange, onSearchChange }) => {
6
+ const InStoreFiltersMenu = ({ facets, narrow, onNarrowChange, onPageChange }) => {
8
7
  const filtersRef = React.createRef();
9
8
  useEffect(() => {
10
9
  if (filtersRef.current && !filtersRef.current.style.height) {
11
10
  filtersRef.current.style.height = `calc(100vh - ${filtersRef.current.getBoundingClientRect().top + 20}px)`;
12
11
  }
13
12
  }, [filtersRef]);
14
- const onInputChanged = (input) => {
15
- };
16
- const onChangeCompleted = (input) => {
17
- onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(input);
18
- onPageChange(1);
19
- };
20
13
  const handleNarrowChange = (facetName, narrowName, updateSingleNarrow) => {
21
14
  let newNarrow = {};
22
15
  if (updateSingleNarrow) {
@@ -32,7 +25,7 @@ const InStoreFiltersMenu = ({ facets, narrow, onNarrowChange, onPageChange, onSe
32
25
  onNarrowChange({});
33
26
  onPageChange(1);
34
27
  };
35
- return (_jsxs("div", Object.assign({ className: classes.filtersContainer, ref: filtersRef }, { children: [_jsxs("div", Object.assign({ className: classes.headerContainer }, { children: [_jsx("h2", Object.assign({ className: classes.title }, { children: "In Store Filters" })), _jsxs("div", Object.assign({ className: classes.clearAllButton, onClick: clearAll }, { children: [_jsx("span", { className: `ph ph-eraser`, style: { fontSize: '20px' } }), _jsx("span", Object.assign({ className: classes.clearAllText }, { children: "Clear all" }))] }))] })), _jsx(Input, { initialInput: '', onChange: onInputChanged, onCompleted: onChangeCompleted, debounceTime: 750, placeholder: 'Search within results' }), facets.map(facet => {
28
+ return (_jsxs("div", Object.assign({ className: classes.filtersContainer, ref: filtersRef }, { children: [_jsxs("div", Object.assign({ className: classes.headerContainer }, { children: [_jsx("h2", Object.assign({ className: classes.title }, { children: "In Store Filters" })), _jsxs("div", Object.assign({ className: classes.clearAllButton, onClick: clearAll }, { children: [_jsx("span", { className: `ph ph-eraser`, style: { fontSize: '20px' } }), _jsx("span", Object.assign({ className: classes.clearAllText }, { children: "Clear all" }))] }))] })), facets.map(facet => {
36
29
  return (_jsx(FacetItem, { narrow: narrow[((facet === null || facet === void 0 ? void 0 : facet.meta) && narrow[((facet === null || facet === void 0 ? void 0 : facet.name) + "_from_to")]) ? ((facet === null || facet === void 0 ? void 0 : facet.name) + "_from_to") : facet === null || facet === void 0 ? void 0 : facet.name], facet: facet, onChange: handleNarrowChange, onNarrowChange: onNarrowChange, onPageChange: onPageChange }, "fs-filters" + facet.id.toString()));
37
30
  })] })));
38
31
  };
package/dist/components/InStoreFiltersMenu/InStoreFiltersMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InStoreFiltersMenu.js","sourceRoot":"","sources":["../../../src/components/InStoreFiltersMenu/InStoreFiltersMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useEffect} from 'react';\nimport classes from './styles.module.css';\nimport {FacetItem} from \"../FacetItem/FacetItem\";\nimport { NarrowParser, Narrow, Facet } from \"@fast-simon/utilities\";\nimport Input from \"../Input\";\n\nexport interface Props {\n facets: Facet[];\n narrow: Narrow;\n onNarrowChange: (narrow: any) => void;\n onPageChange: (page: number) => void;\n onSearchChange?: (query: string) => void;\n}\n\nconst InStoreFiltersMenu: React.FC<Props> = ({facets, narrow, onNarrowChange, onPageChange, onSearchChange}) => {\n const filtersRef = React.createRef<HTMLDivElement>();\n\n useEffect(() => {\n if(filtersRef.current && !filtersRef.current.style.height) {\n filtersRef.current.style.height = `calc(100vh - ${filtersRef.current.getBoundingClientRect().top+20}px)`;\n }\n }, [filtersRef]);\n\n const onInputChanged = (input: string) => {\n }\n\n const onChangeCompleted = (input: string) => {\n onSearchChange?.(input);\n onPageChange(1);\n }\n\n const handleNarrowChange = (facetName: string, narrowName: string, updateSingleNarrow?: boolean) => {\n let newNarrow: Narrow = {};\n if(updateSingleNarrow) {\n newNarrow = NarrowParser.updateSingleNarrow(narrow, facetName, narrowName);\n } else {\n newNarrow = NarrowParser.updateNarrow(narrow, facetName, narrowName);\n }\n onNarrowChange(newNarrow);\n onPageChange(1);\n }\n const clearAll = () => {\n onNarrowChange({});\n onPageChange(1);\n }\n\n return (\n <div className={classes.filtersContainer} ref={filtersRef}>\n <div className={classes.headerContainer}>\n <h2 className={classes.title}>In Store Filters</h2>\n <div className={classes.clearAllButton} onClick={clearAll}>\n <span className={`ph ph-eraser`} style={{fontSize: '20px'}}/>\n <span className={classes.clearAllText}>Clear all</span>\n </div>\n </div>\n <Input initialInput={''} onChange={onInputChanged} onCompleted={onChangeCompleted} debounceTime={750} placeholder={'Search within results'}/>\n {\n facets.map(facet => {\n return (\n <FacetItem key={\"fs-filters\"+facet.id.toString()}\n narrow={narrow[(facet?.meta && narrow[(facet?.name + \"_from_to\")]) ? (facet?.name + \"_from_to\") : facet?.name]}\n facet={facet}\n onChange={handleNarrowChange}\n onNarrowChange={onNarrowChange}\n onPageChange={onPageChange}></FacetItem>\n )\n })\n }\n </div>\n )\n};\n\nexport default InStoreFiltersMenu;"]}
1
+ {"version":3,"file":"InStoreFiltersMenu.js","sourceRoot":"","sources":["../../../src/components/InStoreFiltersMenu/InStoreFiltersMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACvC,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAiB,MAAM,uBAAuB,CAAC;AASpE,MAAM,kBAAkB,GAAoB,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAC,EAAE,EAAE;IAC3F,MAAM,UAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACX,IAAG,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE;YACvD,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAC,EAAE,KAAK,CAAC;SAC5G;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,UAAkB,EAAE,kBAA4B,EAAE,EAAE;QAC/F,IAAI,SAAS,GAAW,EAAE,CAAC;QAC3B,IAAG,kBAAkB,EAAE;YAClB,SAAS,GAAG,YAAY,CAAC,kBAAkB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;SAC/E;aAAM;YACF,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;SACzE;QACD,cAAc,CAAC,SAAS,CAAC,CAAC;QAC1B,YAAY,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAA;IACD,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,YAAY,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,CAAA;IAED,OAAO,CACH,6BAAK,SAAS,EAAE,OAAO,CAAC,gBAAgB,EAAE,GAAG,EAAE,UAAU,iBACrD,6BAAK,SAAS,EAAE,OAAO,CAAC,eAAe,iBACnC,2BAAI,SAAS,EAAE,OAAO,CAAC,KAAK,sCAAuB,EACnD,6BAAK,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,OAAO,EAAE,QAAQ,iBACrD,eAAM,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,GAAG,EAC7D,6BAAM,SAAS,EAAE,OAAO,CAAC,YAAY,+BAAkB,KACrD,KACJ,EAEF,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;gBACf,OAAO,CACJ,KAAC,SAAS,IACC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,KAAI,MAAM,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,IAAG,UAAU,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,IAAG,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,EAC/G,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,kBAAkB,EAC5B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IALrB,YAAY,GAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,CAKG,CACrD,CAAA;YACL,CAAC,CAAC,KAEJ,CACT,CAAA;AACL,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import React, {useEffect} from 'react';\nimport classes from './styles.module.css';\nimport {FacetItem} from \"../FacetItem/FacetItem\";\nimport { NarrowParser, Narrow, Facet } from \"@fast-simon/utilities\";\n\nexport interface Props {\n facets: Facet[];\n narrow: Narrow;\n onNarrowChange: (narrow: any) => void;\n onPageChange: (page: number) => void;\n}\n\nconst InStoreFiltersMenu: React.FC<Props> = ({facets, narrow, onNarrowChange, onPageChange}) => {\n const filtersRef = React.createRef<HTMLDivElement>();\n\n useEffect(() => {\n if(filtersRef.current && !filtersRef.current.style.height) {\n filtersRef.current.style.height = `calc(100vh - ${filtersRef.current.getBoundingClientRect().top+20}px)`;\n }\n }, [filtersRef]);\n\n const handleNarrowChange = (facetName: string, narrowName: string, updateSingleNarrow?: boolean) => {\n let newNarrow: Narrow = {};\n if(updateSingleNarrow) {\n newNarrow = NarrowParser.updateSingleNarrow(narrow, facetName, narrowName);\n } else {\n newNarrow = NarrowParser.updateNarrow(narrow, facetName, narrowName);\n }\n onNarrowChange(newNarrow);\n onPageChange(1);\n }\n const clearAll = () => {\n onNarrowChange({});\n onPageChange(1);\n }\n\n return (\n <div className={classes.filtersContainer} ref={filtersRef}>\n <div className={classes.headerContainer}>\n <h2 className={classes.title}>In Store Filters</h2>\n <div className={classes.clearAllButton} onClick={clearAll}>\n <span className={`ph ph-eraser`} style={{fontSize: '20px'}}/>\n <span className={classes.clearAllText}>Clear all</span>\n </div>\n </div>\n {\n facets.map(facet => {\n return (\n <FacetItem key={\"fs-filters\"+facet.id.toString()}\n narrow={narrow[(facet?.meta && narrow[(facet?.name + \"_from_to\")]) ? (facet?.name + \"_from_to\") : facet?.name]}\n facet={facet}\n onChange={handleNarrowChange}\n onNarrowChange={onNarrowChange}\n onPageChange={onPageChange}></FacetItem>\n )\n })\n }\n </div>\n )\n};\n\nexport default InStoreFiltersMenu;"]}
package/dist/components/LastReceivedDateFilter/styles.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .fsOptions {
2
- padding: 0 0 8px 8px;
2
+ padding: 12px 24px;
3
3
  }
4
4
  .showMore {
5
5
  color: #737373;
@@ -21,21 +21,31 @@
21
21
  -webkit-transform: rotate(45deg);
22
22
  margin-bottom: 2px;
23
23
  }
24
+
24
25
  .fsFacetContainer {
25
26
  display: flex;
26
27
  flex-direction: row;
27
- padding: 0pc 2px;
28
- width: calc(100% - 4px);
28
+ gap: 12px;
29
+ padding: 8px 0 4px;
30
+ align-items: center;
29
31
  }
32
+
30
33
  .fsFacetOptions {
31
- width: calc(50% - 12px);
32
- padding: 0px 6px;
34
+ flex: 1;
35
+ display: flex;
36
+ flex-direction: row;
37
+ justify-content: flex-start;
38
+ align-items: stretch;
39
+ border-radius: 6px;
40
+ border: solid 1px #dddfe4;
33
41
  }
42
+
34
43
  .fsFacetOptions:after {
35
- content: "";
36
- display: table;
37
- clear: both;
44
+ content: "";
45
+ display: table;
46
+ clear: both;
47
+ }
48
+
49
+ .fsFacetOptions > .react-datepicker-wrapper {
50
+ width: 100%;
38
51
  }
39
- .fsFacetOptions>.react-datepicker-wrapper {
40
- width: calc(100% - 6px)!important;
41
- }
package/dist/components/RadioFilter/Radio/styles.module.css CHANGED
@@ -1,56 +1,31 @@
1
1
  .fsCheckbox {
2
2
  display: flex;
3
3
  position: relative;
4
- padding: 0 5px 0 0;
5
- margin-top: 5px;
6
- margin-bottom: 5px;
4
+ padding: 8px 0;
7
5
  cursor: pointer;
8
6
  -webkit-user-select: none;
9
7
  -moz-user-select: none;
10
8
  -ms-user-select: none;
11
9
  user-select: none;
12
- font-family: Arial, serif;
13
- animation: growDown 300ms ease forwards;
10
+ font-family: Assistant, sans-serif;
14
11
  align-items: center;
12
+ gap: 8px;
15
13
  }
16
14
 
17
15
  .fsCheckbox input {
18
- position: fixed;
19
- opacity: 0;
16
+ position: relative !important;
17
+ opacity: 1 !important;
20
18
  cursor: pointer;
21
- height: 0;
22
- width: 0;
19
+ width: 16px !important;
20
+ height: 16px !important;
21
+ margin: 0;
22
+ accent-color: #4374f2;
23
23
  }
24
24
 
25
25
  .checkmark {
26
- min-height: 16px;
27
- min-width: 16px;
28
- background-color: #eee;
29
- margin-right: 10px;
26
+ display: none;
30
27
  }
31
28
 
32
- .fsCheckbox:hover input ~ .checkmark {
33
- background-color: #d00202cf;
34
- }
35
-
36
- .fsCheckbox input:checked ~ .checkmark {
37
- background-color: white;
38
- }
39
-
40
- .fsCheckbox input:checked ~ .checkmark:after {
41
- display: block;
42
- }
43
-
44
- .fsCheckboxx .checkmark:after {
45
- left: 5px;
46
- width: 4px;
47
- height: 9px;
48
- border: solid white;
49
- border-width: 0 2px 2px 0;
50
- -webkit-transform: rotate(45deg);
51
- -ms-transform: rotate(45deg);
52
- transform: rotate(45deg);
53
- }
54
29
  .fsSelectedCheckboxTrue{}
55
30
  .fsSelectedCheckboxFalse{}
56
31
 
@@ -95,6 +70,15 @@
95
70
  overflow: hidden;
96
71
  }
97
72
 
73
+ .fsCheckboxLabel {
74
+ font-family: Assistant, sans-serif;
75
+ font-size: 14px;
76
+ font-weight: normal;
77
+ color: #33394f;
78
+ line-height: 20px;
79
+ cursor: pointer;
80
+ }
81
+
98
82
  .checkbox input {
99
83
  position: fixed;
100
84
  opacity: 0;
@@ -142,4 +126,4 @@
142
126
  }
143
127
  :global(.modal-mobile-filters .fs-serp-filter-count, .modal-mobile-filters .fsSerpCheckmark) {
144
128
  display: none;
145
- }
129
+ }
package/dist/components/RadioFilter/styles.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .fsOptions {
2
- padding: 0 0 8px 8px;
2
+ padding: 12px 24px;
3
3
  }
4
4
  .showMore {
5
5
  color: #737373;
package/dist/components/ReactDatePicker/styles.module.css CHANGED
@@ -1,3 +1,11 @@
1
- .fullWidthInput{
1
+ .fullWidthInput {
2
2
  width: 100%;
3
- }
3
+ border: none;
4
+ padding: 8px 12px;
5
+ outline: none;
6
+ background: transparent;
7
+ font-family: Assistant;
8
+ font-size: 14px;
9
+ color: #33394f;
10
+ border-radius: 6px;
11
+ }
package/dist/components/SingleFilter/styles.module.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .fsOptions {
2
- padding: 0 5px 8px 8px;
2
+ padding: 12px 0;
3
3
  }
4
4
  .showMore {
5
- color: #737373;
5
+ color: #4374f2;
6
6
  }
7
7
 
8
8
  .showMore:hover {
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .arrow {
13
- border: solid #636363;
13
+ border: solid #4374f2;
14
14
  border-width: 0 1.5px 1.5px 0;
15
15
  display: inline-block;
16
16
  padding: 3px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fast-simon/dashboard-utilities",
3
- "version": "1.0.139-beta.2",
3
+ "version": "1.0.139-beta.4",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "preview": "vite preview",