@fast-simon/dashboard-utilities 1.0.139-beta.3 → 1.0.139-beta.5

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 (6) hide show
  1. package/dist/components/CheckboxFilter/Checkbox/styles.module.css +15 -40
  2. package/dist/components/LastReceivedDateFilter/styles.module.css +20 -10
  3. package/dist/components/RadioFilter/Radio/styles.module.css +20 -36
  4. package/dist/components/ReactDatePicker/styles.module.css +10 -2
  5. package/dist/components/SingleFilter/styles.module.css +1 -1
  6. 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/LastReceivedDateFilter/styles.module.css CHANGED
@@ -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/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,5 +1,5 @@
1
1
  .fsOptions {
2
- padding: 12px 0;
2
+ padding: 12px 24px;
3
3
  }
4
4
  .showMore {
5
5
  color: #4374f2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fast-simon/dashboard-utilities",
3
- "version": "1.0.139-beta.3",
3
+ "version": "1.0.139-beta.5",
4
4
  "scripts": {
5
5
  "dev": "vite",
6
6
  "preview": "vite preview",