funda-ui 1.0.295 → 1.0.300

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 (7) hide show
  1. package/Scrollbar/index.css +17 -9
  2. package/Scrollbar/index.js +12 -24
  3. package/lib/cjs/Scrollbar/index.js +12 -24
  4. package/lib/css/Scrollbar/index.css +17 -9
  5. package/lib/esm/Scrollbar/index.scss +15 -11
  6. package/lib/esm/Scrollbar/index.tsx +4 -4
  7. package/package.json +1 -1
package/Scrollbar/index.css CHANGED
@@ -33,9 +33,9 @@
33
33
  }
34
34
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar {
35
35
  display: grid;
36
- gap: var(--custom-scrollbar-arrow-gap) 0;
36
+ gap: 0 0;
37
37
  grid-auto-flow: row;
38
- grid-template: auto 1fr auto/1fr;
38
+ grid-template: calc(var(--custom-scrollbar-arrow-gap) * 1.5) 1fr calc(var(--custom-scrollbar-arrow-gap) / 2) 1rem/1fr;
39
39
  padding: 0;
40
40
  place-items: center;
41
41
  grid-area: right;
@@ -53,19 +53,23 @@
53
53
  box-shadow: none;
54
54
  border: none;
55
55
  cursor: pointer;
56
+ transition: 0.1s ease-in-out;
56
57
  }
57
58
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button.disabled {
58
59
  opacity: 0;
59
60
  pointer-events: none;
60
61
  }
61
62
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button svg path {
62
- stroke: var(--custom-scrollbars-thumb-bg);
63
+ fill: var(--custom-scrollbars-thumb-bg);
63
64
  }
64
65
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button i {
65
66
  color: var(--custom-scrollbars-thumb-bg);
66
67
  }
68
+ .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover {
69
+ transform: scale(1.3);
70
+ }
67
71
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover svg path {
68
- stroke: var(--custom-scrollbars-thumb-hover-bg);
72
+ fill: var(--custom-scrollbars-thumb-hover-bg);
69
73
  }
70
74
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover i {
71
75
  color: var(--custom-scrollbars-thumb-hover-bg);
@@ -97,9 +101,9 @@
97
101
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal {
98
102
  display: grid;
99
103
  grid-area: left2;
100
- gap: 0 var(--custom-scrollbar-arrow-gap);
104
+ gap: 0 0;
101
105
  grid-auto-flow: row;
102
- grid-template: auto 1fr auto/1rem 1fr 1rem;
106
+ grid-template: 1rem/var(--custom-scrollbar-arrow-gap) 1fr var(--custom-scrollbar-arrow-gap);
103
107
  padding: 0;
104
108
  place-items: center;
105
109
  }
@@ -116,19 +120,23 @@
116
120
  box-shadow: none;
117
121
  border: none;
118
122
  cursor: pointer;
123
+ transition: 0.1s ease-in-out;
119
124
  }
120
125
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button.disabled {
121
126
  opacity: 0;
122
127
  pointer-events: none;
123
128
  }
124
129
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button svg path {
125
- stroke: var(--custom-scrollbars-thumb-bg);
130
+ fill: var(--custom-scrollbars-thumb-bg);
126
131
  }
127
132
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button i {
128
133
  color: var(--custom-scrollbars-thumb-bg);
129
134
  }
135
+ .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover {
136
+ transform: scale(1.3);
137
+ }
130
138
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover svg path {
131
- stroke: var(--custom-scrollbars-thumb-hover-bg);
139
+ fill: var(--custom-scrollbars-thumb-hover-bg);
132
140
  }
133
141
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover i {
134
142
  color: var(--custom-scrollbars-thumb-hover-bg);
@@ -160,7 +168,7 @@
160
168
  }
161
169
  .custom-scrollbars__wrapper.arrow-disabled .custom-scrollbars__scrollbar {
162
170
  gap: 0 0 var(--custom-scrollbar-arrow-gap) 0;
163
- grid-template: 0 1fr 0/1fr;
171
+ grid-template: 0 1fr 1rem/1fr;
164
172
  }
165
173
  .custom-scrollbars__wrapper.arrow-disabled .custom-scrollbars__scrollbar-horizontal {
166
174
  gap: 0;
package/Scrollbar/index.js CHANGED
@@ -174,47 +174,35 @@ var Scrollbar = function Scrollbar(props) {
174
174
  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
175
175
  var contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
176
176
  var icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
177
- width: "16px",
178
- height: "16px",
177
+ width: "10px",
178
+ height: "10px",
179
179
  viewBox: "0 0 24 24",
180
180
  fill: "none"
181
181
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
182
- d: "M12 5V19M12 5L6 11M12 5L18 11",
183
- strokeWidth: "2",
184
- strokeLinecap: "round",
185
- strokeLinejoin: "round"
182
+ d: "M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z"
186
183
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
187
- width: "16px",
188
- height: "16px",
184
+ width: "10px",
185
+ height: "10px",
189
186
  viewBox: "0 0 24 24",
190
187
  fill: "none"
191
188
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
192
- d: "M12 6V18M12 18L7 13M12 18L17 13",
193
- strokeWidth: "2",
194
- strokeLinecap: "round",
195
- strokeLinejoin: "round"
189
+ d: "M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"
196
190
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
197
- width: "16px",
198
- height: "16px",
191
+ width: "10px",
192
+ height: "10px",
199
193
  viewBox: "0 0 24 24",
200
194
  fill: "none",
201
195
  transform: "translate(0 -2)"
202
196
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
203
- d: "M6 12H18M6 12L11 7M6 12L11 17",
204
- strokeWidth: "2",
205
- strokeLinecap: "round",
206
- strokeLinejoin: "round"
197
+ d: "M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z"
207
198
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
208
- width: "16px",
209
- height: "16px",
199
+ width: "10px",
200
+ height: "10px",
210
201
  viewBox: "0 0 24 24",
211
202
  fill: "none",
212
203
  transform: "translate(0 -2)"
213
204
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
214
- d: "M6 12H18M18 12L13 7M18 12L13 17",
215
- strokeWidth: "2",
216
- strokeLinecap: "round",
217
- strokeLinejoin: "round"
205
+ d: "M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"
218
206
  }), " "))] : arrowIcons;
219
207
  var contentAreaScrollUpdate = (0,_utils_performance__WEBPACK_IMPORTED_MODULE_1__.throttle)(handleScrollEvent, 5);
220
208
 
package/lib/cjs/Scrollbar/index.js CHANGED
@@ -174,47 +174,35 @@ var Scrollbar = function Scrollbar(props) {
174
174
  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
175
175
  var contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
176
176
  var icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
177
- width: "16px",
178
- height: "16px",
177
+ width: "10px",
178
+ height: "10px",
179
179
  viewBox: "0 0 24 24",
180
180
  fill: "none"
181
181
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
182
- d: "M12 5V19M12 5L6 11M12 5L18 11",
183
- strokeWidth: "2",
184
- strokeLinecap: "round",
185
- strokeLinejoin: "round"
182
+ d: "M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z"
186
183
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
187
- width: "16px",
188
- height: "16px",
184
+ width: "10px",
185
+ height: "10px",
189
186
  viewBox: "0 0 24 24",
190
187
  fill: "none"
191
188
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
192
- d: "M12 6V18M12 18L7 13M12 18L17 13",
193
- strokeWidth: "2",
194
- strokeLinecap: "round",
195
- strokeLinejoin: "round"
189
+ d: "M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"
196
190
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
197
- width: "16px",
198
- height: "16px",
191
+ width: "10px",
192
+ height: "10px",
199
193
  viewBox: "0 0 24 24",
200
194
  fill: "none",
201
195
  transform: "translate(0 -2)"
202
196
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
203
- d: "M6 12H18M6 12L11 7M6 12L11 17",
204
- strokeWidth: "2",
205
- strokeLinecap: "round",
206
- strokeLinejoin: "round"
197
+ d: "M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z"
207
198
  }), " ")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
208
- width: "16px",
209
- height: "16px",
199
+ width: "10px",
200
+ height: "10px",
210
201
  viewBox: "0 0 24 24",
211
202
  fill: "none",
212
203
  transform: "translate(0 -2)"
213
204
  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
214
- d: "M6 12H18M18 12L13 7M18 12L13 17",
215
- strokeWidth: "2",
216
- strokeLinecap: "round",
217
- strokeLinejoin: "round"
205
+ d: "M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"
218
206
  }), " "))] : arrowIcons;
219
207
  var contentAreaScrollUpdate = (0,_utils_performance__WEBPACK_IMPORTED_MODULE_1__.throttle)(handleScrollEvent, 5);
220
208
 
package/lib/css/Scrollbar/index.css CHANGED
@@ -33,9 +33,9 @@
33
33
  }
34
34
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar {
35
35
  display: grid;
36
- gap: var(--custom-scrollbar-arrow-gap) 0;
36
+ gap: 0 0;
37
37
  grid-auto-flow: row;
38
- grid-template: auto 1fr auto/1fr;
38
+ grid-template: calc(var(--custom-scrollbar-arrow-gap) * 1.5) 1fr calc(var(--custom-scrollbar-arrow-gap) / 2) 1rem/1fr;
39
39
  padding: 0;
40
40
  place-items: center;
41
41
  grid-area: right;
@@ -53,19 +53,23 @@
53
53
  box-shadow: none;
54
54
  border: none;
55
55
  cursor: pointer;
56
+ transition: 0.1s ease-in-out;
56
57
  }
57
58
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button.disabled {
58
59
  opacity: 0;
59
60
  pointer-events: none;
60
61
  }
61
62
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button svg path {
62
- stroke: var(--custom-scrollbars-thumb-bg);
63
+ fill: var(--custom-scrollbars-thumb-bg);
63
64
  }
64
65
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button i {
65
66
  color: var(--custom-scrollbars-thumb-bg);
66
67
  }
68
+ .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover {
69
+ transform: scale(1.3);
70
+ }
67
71
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover svg path {
68
- stroke: var(--custom-scrollbars-thumb-hover-bg);
72
+ fill: var(--custom-scrollbars-thumb-hover-bg);
69
73
  }
70
74
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar .custom-scrollbars__button:hover i {
71
75
  color: var(--custom-scrollbars-thumb-hover-bg);
@@ -97,9 +101,9 @@
97
101
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal {
98
102
  display: grid;
99
103
  grid-area: left2;
100
- gap: 0 var(--custom-scrollbar-arrow-gap);
104
+ gap: 0 0;
101
105
  grid-auto-flow: row;
102
- grid-template: auto 1fr auto/1rem 1fr 1rem;
106
+ grid-template: 1rem/var(--custom-scrollbar-arrow-gap) 1fr var(--custom-scrollbar-arrow-gap);
103
107
  padding: 0;
104
108
  place-items: center;
105
109
  }
@@ -116,19 +120,23 @@
116
120
  box-shadow: none;
117
121
  border: none;
118
122
  cursor: pointer;
123
+ transition: 0.1s ease-in-out;
119
124
  }
120
125
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button.disabled {
121
126
  opacity: 0;
122
127
  pointer-events: none;
123
128
  }
124
129
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button svg path {
125
- stroke: var(--custom-scrollbars-thumb-bg);
130
+ fill: var(--custom-scrollbars-thumb-bg);
126
131
  }
127
132
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button i {
128
133
  color: var(--custom-scrollbars-thumb-bg);
129
134
  }
135
+ .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover {
136
+ transform: scale(1.3);
137
+ }
130
138
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover svg path {
131
- stroke: var(--custom-scrollbars-thumb-hover-bg);
139
+ fill: var(--custom-scrollbars-thumb-hover-bg);
132
140
  }
133
141
  .custom-scrollbars__wrapper .custom-scrollbars__scrollbar-horizontal .custom-scrollbars__button:hover i {
134
142
  color: var(--custom-scrollbars-thumb-hover-bg);
@@ -160,7 +168,7 @@
160
168
  }
161
169
  .custom-scrollbars__wrapper.arrow-disabled .custom-scrollbars__scrollbar {
162
170
  gap: 0 0 var(--custom-scrollbar-arrow-gap) 0;
163
- grid-template: 0 1fr 0/1fr;
171
+ grid-template: 0 1fr 1rem/1fr;
164
172
  }
165
173
  .custom-scrollbars__wrapper.arrow-disabled .custom-scrollbars__scrollbar-horizontal {
166
174
  gap: 0;
package/lib/esm/Scrollbar/index.scss CHANGED
@@ -39,13 +39,13 @@
39
39
  display: none;
40
40
  }
41
41
  }
42
-
42
+
43
43
 
44
44
  .custom-scrollbars__scrollbar {
45
45
  display: grid;
46
- gap: var(--custom-scrollbar-arrow-gap) 0;
46
+ gap: 0 0;
47
47
  grid-auto-flow: row;
48
- grid-template: auto 1fr auto / 1fr;
48
+ grid-template: calc(var(--custom-scrollbar-arrow-gap) * 1.5) 1fr calc(var(--custom-scrollbar-arrow-gap) / 2) 1rem / 1fr;
49
49
  padding: 0;
50
50
  place-items: center;
51
51
  grid-area: right;
@@ -66,6 +66,7 @@
66
66
  box-shadow: none;
67
67
  border: none;
68
68
  cursor: pointer;
69
+ transition: .1s ease-in-out;
69
70
 
70
71
  &.disabled {
71
72
  opacity: 0;
@@ -74,15 +75,16 @@
74
75
 
75
76
 
76
77
  svg path {
77
- stroke: var(--custom-scrollbars-thumb-bg);
78
+ fill: var(--custom-scrollbars-thumb-bg);
78
79
  }
79
80
 
80
81
  i {
81
82
  color: var(--custom-scrollbars-thumb-bg);
82
83
  }
83
84
  &:hover {
85
+ transform: scale(1.3);
84
86
  svg path {
85
- stroke: var(--custom-scrollbars-thumb-hover-bg);
87
+ fill: var(--custom-scrollbars-thumb-hover-bg);
86
88
  }
87
89
 
88
90
  i {
@@ -119,13 +121,13 @@
119
121
  }
120
122
  }
121
123
 
122
-
124
+
123
125
  .custom-scrollbars__scrollbar-horizontal {
124
126
  display: grid;
125
127
  grid-area: left2;
126
- gap: 0 var(--custom-scrollbar-arrow-gap);
128
+ gap: 0 0;
127
129
  grid-auto-flow: row;
128
- grid-template: auto 1fr auto / 1rem 1fr 1rem;
130
+ grid-template: 1rem / var(--custom-scrollbar-arrow-gap) 1fr var(--custom-scrollbar-arrow-gap);
129
131
  padding: 0;
130
132
  place-items: center;
131
133
 
@@ -144,6 +146,7 @@
144
146
  box-shadow: none;
145
147
  border: none;
146
148
  cursor: pointer;
149
+ transition: .1s ease-in-out;
147
150
 
148
151
  &.disabled {
149
152
  opacity: 0;
@@ -151,15 +154,16 @@
151
154
  }
152
155
 
153
156
  svg path {
154
- stroke: var(--custom-scrollbars-thumb-bg);
157
+ fill: var(--custom-scrollbars-thumb-bg);
155
158
  }
156
159
 
157
160
  i {
158
161
  color: var(--custom-scrollbars-thumb-bg);
159
162
  }
160
163
  &:hover {
164
+ transform: scale(1.3);
161
165
  svg path {
162
- stroke: var(--custom-scrollbars-thumb-hover-bg);
166
+ fill: var(--custom-scrollbars-thumb-hover-bg);
163
167
  }
164
168
 
165
169
  i {
@@ -201,7 +205,7 @@
201
205
 
202
206
  .custom-scrollbars__scrollbar {
203
207
  gap: 0 0 var(--custom-scrollbar-arrow-gap) 0;
204
- grid-template: 0 1fr 0 / 1fr;
208
+ grid-template: 0 1fr 1rem / 1fr;
205
209
 
206
210
  }
207
211
 
package/lib/esm/Scrollbar/index.tsx CHANGED
@@ -37,10 +37,10 @@ const Scrollbar = (props: ScrollbarProps) => {
37
37
  const rootRef = useRef<HTMLDivElement>(null);
38
38
  const contentRef = useRef<HTMLDivElement>(null);
39
39
  const icons = typeof arrowIcons === 'undefined' || !arrowIcons ? [
40
- <><svg width="16px" height="16px" viewBox="0 0 24 24" fill="none"> <path d="M12 5V19M12 5L6 11M12 5L18 11" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg></>,
41
- <><svg width="16px" height="16px" viewBox="0 0 24 24" fill="none"> <path d="M12 6V18M12 18L7 13M12 18L17 13" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg></>,
42
- <><svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M6 12H18M6 12L11 7M6 12L11 17" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg></>,
43
- <><svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M6 12H18M18 12L13 7M18 12L13 17" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg></>
40
+ <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z"/> </svg></>,
41
+ <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none"> <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" /> </svg></>,
42
+ <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z"/> </svg></>,
43
+ <><svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" transform="translate(0 -2)"> <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" /> </svg></>
44
44
  ] : arrowIcons;
45
45
 
46
46
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "1.0.295",
5
+ "version": "1.0.300",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",