@steroidsjs/bootstrap 3.0.0-beta.60 → 3.0.0-beta.62

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 (8) hide show
  1. package/form/Button/ButtonView.scss +1 -1
  2. package/form/DropDownField/DropDownFieldView.js +5 -1
  3. package/form/DropDownFieldItem/DropDownFieldItemView.js +16 -13
  4. package/form/SliderField/SliderFieldView.js +1 -1
  5. package/form/SliderField/SliderFieldView.scss +336 -299
  6. package/modal/Modal/ModalView.js +1 -1
  7. package/modal/Modal/ModalView.scss +0 -1
  8. package/package.json +1 -1
package/form/Button/ButtonView.scss CHANGED
@@ -102,7 +102,7 @@ $btn-letter-spacing: 0.1em;
102
102
  background-color: transparent;
103
103
 
104
104
  &:focus-visible, &:focus {
105
- border: none;
105
+ box-shadow: none;
106
106
  }
107
107
 
108
108
  &:hover,&:active {
package/form/DropDownField/DropDownFieldView.js CHANGED
@@ -81,6 +81,10 @@ function DropDownFieldView(props) {
81
81
  }) },
82
82
  React.createElement(Icon_1["default"], { name: 'search', className: bem.element('search-icon') }),
83
83
  React.createElement("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem(bem.element('search-input'), props.searchInputProps.className) })))),
84
- React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return props.renderItem(item); }))))));
84
+ React.createElement("div", { className: bem.element('drop-down-list') },
85
+ props.multiple
86
+ && props.itemToSelectAll
87
+ && props.renderItem(props.itemToSelectAll),
88
+ props.items.map(function (item) { return props.renderItem(item); }))))));
85
89
  }
86
90
  exports["default"] = DropDownFieldView;
package/form/DropDownFieldItem/DropDownFieldItemView.js CHANGED
@@ -24,39 +24,42 @@ var RadioFieldView_1 = __importDefault(require("../RadioField/RadioFieldView"));
24
24
  function DropDownItemView(props) {
25
25
  var _a;
26
26
  var bem = (0, useBem_1["default"])('DropDownItemView');
27
+ var uniqItemId = props.item[props.primaryKey];
27
28
  var commonProps = {
28
29
  className: bem.element('option', {
29
- hover: props.hoveredId === props.item[props.primaryKey],
30
- select: props.selectedIds.includes(props.item[props.primaryKey]),
30
+ hover: props.hoveredId === uniqItemId,
31
+ select: props.isItemToSelectAll
32
+ ? props.isSelectedAll
33
+ : props.selectedIds.includes(uniqItemId),
31
34
  size: props.size
32
35
  }),
33
- onFocus: function () { return props.onItemHover(props.item[props.primaryKey]); },
34
- onMouseOver: function () { return props.onItemHover(props.item[props.primaryKey]); },
36
+ onFocus: function () { return props.onItemHover(uniqItemId); },
37
+ onMouseOver: function () { return props.onItemHover(uniqItemId); },
35
38
  onClick: function (e) {
36
39
  e.preventDefault();
37
- props.onItemSelect(props.item[props.primaryKey]);
40
+ props.onItemSelect(uniqItemId);
38
41
  }
39
42
  };
40
43
  switch (props.type) {
41
44
  case DropDownField_1.GROUP_CONTENT_TYPE:
42
- return (react_1["default"].createElement(AccordionItemView_1["default"], { isShowMore: props.isShowMore, childIndex: props.childIndex, toggleCollapse: props.toggleCollapse, toggleAccordion: function () { }, showIcon: true, title: props.item.label, position: "middle", key: props.item[props.primaryKey], className: bem.element('group', {
45
+ return (react_1["default"].createElement(AccordionItemView_1["default"], { isShowMore: props.isShowMore, childIndex: props.childIndex, toggleCollapse: props.toggleCollapse, toggleAccordion: function () { }, showIcon: true, title: props.item.label, position: "middle", key: uniqItemId, className: bem.element('group', {
43
46
  size: props.size
44
47
  }) }, (_a = props.item[props.groupAttribute]) === null || _a === void 0 ? void 0 : _a.map(function (subItem, itemIndex) { return (react_1["default"].createElement(DropDownItemView, __assign({}, props, { type: subItem.type ? subItem.type : props.itemsContent.type, key: itemIndex, item: subItem }))); })));
45
48
  case DropDownField_1.ICON_CONTENT_TYPE:
46
- return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
49
+ return (react_1["default"].createElement("div", __assign({}, commonProps, { key: uniqItemId }),
47
50
  (0, renderIcon_1["default"])(props.item.contentSrc, { className: bem.element('icon') }),
48
51
  react_1["default"].createElement("span", null, props.item.label)));
49
52
  case DropDownField_1.CHECKBOX_CONTENT_TYPE:
50
- return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
53
+ return (react_1["default"].createElement("div", __assign({}, commonProps, { key: uniqItemId }),
51
54
  react_1["default"].createElement(CheckboxFieldView_1["default"], { label: props.item.label, className: bem.element('checkbox'), size: props.size, inputProps: {
52
55
  disabled: false,
53
56
  name: props.item.label,
54
- checked: props.selectedIds.includes(props.item[props.primaryKey]),
57
+ checked: props.selectedIds.includes(uniqItemId),
55
58
  onChange: function () { },
56
59
  type: 'checkbox'
57
60
  } })));
58
61
  case DropDownField_1.RADIO_CONTENT_TYPE:
59
- return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
62
+ return (react_1["default"].createElement("div", __assign({}, commonProps, { key: uniqItemId }),
60
63
  react_1["default"].createElement(RadioFieldView_1["default"], { label: props.item.label, className: bem.element('radio', {
61
64
  size: props.size
62
65
  }), size: props.size, inputProps: {
@@ -65,14 +68,14 @@ function DropDownItemView(props) {
65
68
  checked: null,
66
69
  onChange: function () { },
67
70
  type: 'radio'
68
- }, checked: props.selectedIds.includes(props.item[props.primaryKey]) })));
71
+ }, checked: props.selectedIds.includes(uniqItemId) })));
69
72
  case DropDownField_1.IMG_CONTENT_TYPE:
70
- return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }),
73
+ return (react_1["default"].createElement("div", __assign({}, commonProps, { key: uniqItemId }),
71
74
  react_1["default"].createElement("span", { className: bem.element('img') },
72
75
  react_1["default"].createElement("img", { src: props.item.contentSrc, alt: "custom source for item" })),
73
76
  react_1["default"].createElement("span", null, props.item.label)));
74
77
  default:
75
- return (react_1["default"].createElement("div", __assign({}, commonProps, { key: props.item[props.primaryKey] }), props.item.label));
78
+ return (react_1["default"].createElement("div", __assign({}, commonProps, { key: uniqItemId }), props.item.label));
76
79
  }
77
80
  }
78
81
  exports["default"] = DropDownItemView;
package/form/SliderField/SliderFieldView.js CHANGED
@@ -66,6 +66,6 @@ function SliderFieldView(props) {
66
66
  };
67
67
  var RangeField = (React.createElement(RangeComponent, __assign({}, commonProps, { draggableTrack: true, areaDisabled: true, pushable: true })));
68
68
  var SliderField = (React.createElement(SliderComponent, __assign({}, commonProps)));
69
- return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.isRange ? RangeField : SliderField));
69
+ return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style }, props.isRange ? RangeField : SliderField));
70
70
  }
71
71
  exports["default"] = SliderFieldView;
package/form/SliderField/SliderFieldView.scss CHANGED
@@ -1,306 +1,343 @@
1
+ :root {
2
+ --slider-background: #dbe2e6;
3
+ --slider-handle-border-color: rgba(0, 0, 0, 0.1);
4
+ --slider-dot-background-color: #4B4E5E;
5
+ --slider-dot-border-color: rgba(255, 255, 255, 0.3);
6
+ --slider-dot-active-background-color: #CBD5DB;
7
+ --slider-dot-active-border-color: rgba(255, 255, 255, 0.3);
8
+ }
9
+
10
+ html[data-theme="dark"] {
11
+ --slider-background: #333646;
12
+ --slider-handle-border-color: transparent;
13
+ --slider-dot-background-color: #4B4E5E;
14
+ --slider-dot-border-color: rgba(255, 255, 255, 0.3);
15
+ --slider-dot-active-background-color: #CBD5DB;
16
+ --slider-dot-active-border-color: rgba(255, 255, 255, 0.3);
17
+ }
18
+
19
+ $slider-background: var(--slider-background);
20
+ $slider-handle-border-color: var(--slider-handle-border-color);
21
+ $slider-dot-background-color: var(--slider-dot-background-color);
22
+ $slider-dot-border-color: var(--slider-dot-border-color);
23
+ $slider-dot-active-background-color: var(--slider-dot-active-background-color);
24
+ $slider-dot-active-border-color: var(--slider-dot-active-border-color);
25
+
26
+
1
27
  .SliderFieldView {
2
- $root: &;
28
+ $root: &;
29
+ margin: 10px 0;
30
+
31
+ &_hidden {
32
+ display: unset;
33
+ }
34
+
35
+ .rc-slider {
36
+ position: relative;
37
+ height: 8px;
38
+ width: 100%;
39
+ border-radius: 6px;
40
+ background-color: $slider-background;
41
+ box-sizing: border-box;
42
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
43
+ }
44
+ .rc-slider-rail {
45
+ background-color: $primary;
46
+ }
47
+
48
+ .rc-slider * {
49
+ box-sizing: border-box;
50
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
51
+ }
52
+ .rc-slider-track {
53
+ position: absolute;
54
+ left: 0;
55
+ height: 8px;
56
+ border-radius: 6px;
57
+ background-color: $primary;
58
+ z-index: 1;
59
+ }
60
+ .rc-slider-handle {
61
+ position: absolute;
62
+ margin-left: 0;
63
+ margin-top: -8px;
64
+ width: 24px;
65
+ height: 24px;
66
+ cursor: pointer;
67
+ border-radius: 50%;
68
+ background-color: $primary;
69
+ z-index: 2;
70
+ outline: none;
3
71
 
4
- &_hidden {
5
- display: unset;
6
- }
72
+ border: 1px solid $slider-handle-border-color;
7
73
 
8
- .rc-slider {
9
- position: relative;
10
- height: 6px;
11
- width: 100%;
12
- border-radius: 6px;
13
- background-color: $primary-light;
14
- box-sizing: border-box;
15
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
16
- }
17
- .rc-slider-rail {
18
- background-color: $primary;
19
- }
74
+ &::before {
75
+ position: absolute;
76
+ content: "";
77
+ display: block;
78
+ width: 100%;
79
+ height: 100%;
80
+ top: 0;
81
+ left: 0;
82
+ right: 0;
83
+ bottom: 0;
84
+ border: 4px solid $primary-light;
85
+ transform: translate(-4px, -4px);
86
+ border-radius: 50%;
87
+ pointer-events: none;
88
+ opacity: 0;
89
+ transition: opacity 150ms ease-in-out;
90
+ }
20
91
 
21
- .rc-slider * {
22
- box-sizing: border-box;
23
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
24
- }
25
- .rc-slider-track {
26
- position: absolute;
27
- left: 0;
28
- height: 6px;
29
- border-radius: 6px;
30
- background-color: rgba($primary, .7);
31
- z-index: 1;
32
- }
33
- .rc-slider-handle {
34
- position: absolute;
35
- margin-left: 0;
36
- margin-top: -8px;
37
- width: 20px;
38
- height: 20px;
39
- cursor: pointer;
40
- border-radius: 50%;
41
- background-color: $primary;
42
- box-shadow: $primary-dark 0 0 5px;
43
- z-index: 2;
44
- transition: box-shadow 300ms;
45
- outline: none;
92
+ &-click-focused::before {
93
+ opacity: 1;
94
+ }
46
95
 
47
- &:hover {
48
- box-shadow: 0 0 0 10px rgba($primary-light, .3);
49
- }
50
- &:active {
51
- box-shadow: 0 0 0 15px rgba($primary, .3);
52
- }
53
- }
54
- .rc-slider-mark {
55
- position: absolute;
56
- top: 10px;
57
- left: 0;
58
- width: 100%;
59
- font-size: 12px;
60
- z-index: 3;
61
- }
62
- .rc-slider-mark-text {
63
- position: absolute;
64
- display: inline-block;
65
- vertical-align: middle;
66
- text-align: center;
67
- cursor: pointer;
68
- color: #999;
69
- }
70
- .rc-slider-mark-text-active {
71
- color: #666;
72
- }
73
- .rc-slider-step {
74
- position: absolute;
75
- width: 100%;
76
- height: 6px;
77
- background: transparent;
78
- z-index: 1;
79
- }
80
- .rc-slider-dot {
81
- position: absolute;
82
- bottom: -2px;
83
- margin-left: -4px;
84
- width: 8px;
85
- height: 8px;
86
- border: 2px solid #e9e9e9;
87
- background-color: #fff;
88
- cursor: pointer;
89
- border-radius: 50%;
90
- vertical-align: middle;
91
- }
92
- .rc-slider-dot:first-child {
93
- margin-left: -4px;
94
- }
95
- .rc-slider-dot:last-child {
96
- margin-left: -4px;
97
- }
98
- .rc-slider-dot-active {
99
- border-color: $primary;
100
- }
101
- .rc-slider-disabled {
102
- background-color: #e9e9e9;
96
+ &:active {
97
+ background-color: $primary-dark;
98
+ }
99
+ }
100
+ .rc-slider-mark {
101
+ position: absolute;
102
+ display: inline-block;
103
+ top: 20px;
104
+ left: 0;
105
+ width: 100%;
106
+ font-size: $font-size-xs;
107
+ line-height: $line-height-xs;
108
+ z-index: 3;
109
+ }
110
+ .rc-slider-mark-text {
111
+ padding: 4px;
112
+ position: absolute;
113
+ display: inline-block;
114
+ vertical-align: middle;
115
+ text-align: center;
116
+ cursor: pointer;
117
+ background-color: $element-background-color;
118
+ color: $text-color;
119
+ border: 1px solid $border-color;
120
+ border-radius: 21px;
121
+ }
122
+ .rc-slider-step {
123
+ position: absolute;
124
+ width: 100%;
125
+ height: 6px;
126
+ background: transparent;
127
+ z-index: 1;
128
+ }
129
+ .rc-slider-dot {
130
+ position: absolute;
131
+ bottom: 0px;
132
+ margin-left: -4px;
133
+ width: 4px;
134
+ height: 4px;
135
+ border: 1px solid $slider-dot-border-color;
136
+ background-color: $slider-dot-background-color;
137
+ cursor: pointer;
138
+ border-radius: 50%;
139
+ vertical-align: middle;
140
+ }
141
+ .rc-slider-dot:first-child {
142
+ margin-left: -4px;
143
+ }
144
+ .rc-slider-dot:last-child {
145
+ margin-left: -4px;
146
+ }
147
+ .rc-slider-dot-active {
148
+ background-color: $slider-dot-active-background-color;
149
+ border-color: $slider-dot-active-border-color;
150
+ }
151
+ .rc-slider-disabled {
152
+ background-color: $slider-background;
153
+
154
+ .rc-slider-handle,
155
+ .rc-slider-dot {
156
+ background-color: $slider-background;
157
+ }
158
+ }
159
+ .rc-slider-disabled .rc-slider-track {
160
+ background-color: $slider-background;
161
+ }
162
+ .rc-slider-disabled .rc-slider-handle,
163
+ .rc-slider-disabled .rc-slider-dot {
164
+ background-color: $slider-background;
165
+ cursor: not-allowed;
166
+ }
103
167
 
104
- .rc-slider-handle, .rc-slider-dot {
105
- box-shadow: 0 0 4px $border-default;
106
- background-color: #ccc;
107
- }
108
- }
109
- .rc-slider-disabled .rc-slider-track {
110
- background-color: #ccc;
111
- }
112
- .rc-slider-disabled .rc-slider-handle,
113
- .rc-slider-disabled .rc-slider-dot {
114
- border-color: #ccc;
115
- background-color: #fff;
116
- cursor: not-allowed;
117
- }
118
- .rc-slider-disabled .rc-slider-mark-text,
119
- .rc-slider-disabled .rc-slider-dot {
120
- cursor: not-allowed !important;
121
- }
122
- .rc-slider-vertical {
123
- width: 4px;
124
- height: 100%;
125
- }
126
- .rc-slider-vertical .rc-slider-track {
127
- bottom: 0;
128
- width: 4px;
129
- }
130
- .rc-slider-vertical .rc-slider-handle {
131
- position: absolute;
132
- margin-left: -5px;
133
- margin-bottom: -7px;
134
- }
135
- .rc-slider-vertical .rc-slider-mark {
136
- top: 0;
137
- left: 10px;
138
- height: 100%;
139
- }
140
- .rc-slider-vertical .rc-slider-step {
141
- height: 100%;
142
- width: 4px;
143
- }
144
- .rc-slider-vertical .rc-slider-dot {
145
- left: 2px;
146
- margin-bottom: -4px;
147
- }
148
- .rc-slider-vertical .rc-slider-dot:first-child {
149
- margin-bottom: -4px;
150
- }
151
- .rc-slider-vertical .rc-slider-dot:last-child {
152
- margin-bottom: -4px;
153
- }
154
- .rc-slider-tooltip-zoom-down-enter,
155
- .rc-slider-tooltip-zoom-down-appear {
156
- -webkit-animation-duration: .3s;
157
- animation-duration: .3s;
158
- -webkit-animation-fill-mode: both;
159
- animation-fill-mode: both;
160
- display: block !important;
161
- -webkit-animation-play-state: paused;
162
- animation-play-state: paused;
163
- }
164
- .rc-slider-tooltip-zoom-down-leave {
165
- -webkit-animation-duration: .3s;
166
- animation-duration: .3s;
167
- -webkit-animation-fill-mode: both;
168
- animation-fill-mode: both;
169
- display: block !important;
170
- -webkit-animation-play-state: paused;
171
- animation-play-state: paused;
172
- }
173
- .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
174
- .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
175
- -webkit-animation-name: rcSliderTooltipZoomDownIn;
176
- animation-name: rcSliderTooltipZoomDownIn;
177
- -webkit-animation-play-state: running;
178
- animation-play-state: running;
179
- }
180
- .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
181
- -webkit-animation-name: rcSliderTooltipZoomDownOut;
182
- animation-name: rcSliderTooltipZoomDownOut;
183
- -webkit-animation-play-state: running;
184
- animation-play-state: running;
185
- }
186
- .rc-slider-tooltip-zoom-down-enter,
187
- .rc-slider-tooltip-zoom-down-appear {
188
- -webkit-transform: scale(0, 0);
189
- transform: scale(0, 0);
190
- -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
191
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
192
- }
193
- .rc-slider-tooltip-zoom-down-leave {
194
- -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
195
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
196
- }
197
- @-webkit-keyframes rcSliderTooltipZoomDownIn {
198
- 0% {
199
- opacity: 0;
200
- -webkit-transform-origin: 50% 100%;
201
- transform-origin: 50% 100%;
202
- -webkit-transform: scale(0, 0);
203
- transform: scale(0, 0);
204
- }
205
- 100% {
206
- -webkit-transform-origin: 50% 100%;
207
- transform-origin: 50% 100%;
208
- -webkit-transform: scale(1, 1);
209
- transform: scale(1, 1);
210
- }
211
- }
212
- @keyframes rcSliderTooltipZoomDownIn {
213
- 0% {
214
- opacity: 0;
215
- -webkit-transform-origin: 50% 100%;
216
- transform-origin: 50% 100%;
217
- -webkit-transform: scale(0, 0);
218
- transform: scale(0, 0);
219
- }
220
- 100% {
221
- -webkit-transform-origin: 50% 100%;
222
- transform-origin: 50% 100%;
223
- -webkit-transform: scale(1, 1);
224
- transform: scale(1, 1);
225
- }
226
- }
227
- @-webkit-keyframes rcSliderTooltipZoomDownOut {
228
- 0% {
229
- -webkit-transform-origin: 50% 100%;
230
- transform-origin: 50% 100%;
231
- -webkit-transform: scale(1, 1);
232
- transform: scale(1, 1);
233
- }
234
- 100% {
235
- opacity: 0;
236
- -webkit-transform-origin: 50% 100%;
237
- transform-origin: 50% 100%;
238
- -webkit-transform: scale(0, 0);
239
- transform: scale(0, 0);
240
- }
241
- }
242
- @keyframes rcSliderTooltipZoomDownOut {
243
- 0% {
244
- -webkit-transform-origin: 50% 100%;
245
- transform-origin: 50% 100%;
246
- -webkit-transform: scale(1, 1);
247
- transform: scale(1, 1);
248
- }
249
- 100% {
250
- opacity: 0;
251
- -webkit-transform-origin: 50% 100%;
252
- transform-origin: 50% 100%;
253
- -webkit-transform: scale(0, 0);
254
- transform: scale(0, 0);
255
- }
256
- }
257
- .rc-slider-tooltip {
258
- display: inline-block;
259
- }
260
- .rc-slider-tooltip {
261
- position: absolute;
262
- left: -9999px;
263
- top: -9999px;
264
- z-index: 4;
265
- visibility: visible;
266
- box-sizing: border-box;
267
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
268
- }
269
- .rc-slider-tooltip * {
270
- box-sizing: border-box;
271
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
272
- }
273
- .rc-slider-tooltip-hidden {
274
- display: none;
275
- }
276
- .rc-slider-tooltip-placement-top {
277
- padding: 4px 0 8px 0;
278
- }
279
- .rc-slider-tooltip-inner {
280
- padding: 6px 2px;
281
- min-width: 24px;
282
- height: 24px;
283
- font-size: 12px;
284
- line-height: 1;
285
- color: #fff;
286
- text-align: center;
287
- text-decoration: none;
288
- background-color: #6c6c6c;
289
- border-radius: 6px;
290
- box-shadow: 0 0 4px #d9d9d9;
291
- }
292
- .rc-slider-tooltip-arrow {
293
- position: absolute;
294
- width: 0;
295
- height: 0;
296
- border-color: transparent;
297
- border-style: solid;
298
- }
299
- .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
300
- bottom: 4px;
301
- left: 50%;
302
- margin-left: -4px;
303
- border-width: 4px 4px 0;
304
- border-top-color: #6c6c6c;
305
- }
168
+ .rc-slider-disabled .rc-slider-handle-click-focused::before {
169
+ opacity: 0;
170
+ }
171
+ .rc-slider-disabled .rc-slider-mark-text,
172
+ .rc-slider-disabled .rc-slider-dot {
173
+ cursor: not-allowed !important;
174
+ }
175
+ .rc-slider-vertical {
176
+ width: 4px;
177
+ height: 100%;
178
+ }
179
+ .rc-slider-vertical .rc-slider-track {
180
+ bottom: 0;
181
+ width: 4px;
182
+ }
183
+ .rc-slider-vertical .rc-slider-handle {
184
+ position: absolute;
185
+ margin-left: -5px;
186
+ margin-bottom: -7px;
187
+ }
188
+ .rc-slider-vertical .rc-slider-mark {
189
+ top: 0;
190
+ left: 10px;
191
+ height: 100%;
192
+ }
193
+ .rc-slider-vertical .rc-slider-step {
194
+ height: 100%;
195
+ width: 4px;
196
+ }
197
+ .rc-slider-vertical .rc-slider-dot {
198
+ left: 2px;
199
+ margin-bottom: -4px;
200
+ }
201
+ .rc-slider-vertical .rc-slider-dot:first-child {
202
+ margin-bottom: -4px;
203
+ }
204
+ .rc-slider-vertical .rc-slider-dot:last-child {
205
+ margin-bottom: -4px;
206
+ }
207
+ .rc-slider-tooltip-zoom-down-enter,
208
+ .rc-slider-tooltip-zoom-down-appear {
209
+ -webkit-animation-duration: 0.3s;
210
+ animation-duration: 0.3s;
211
+ -webkit-animation-fill-mode: both;
212
+ animation-fill-mode: both;
213
+ display: block !important;
214
+ -webkit-animation-play-state: paused;
215
+ animation-play-state: paused;
216
+ }
217
+ .rc-slider-tooltip-zoom-down-leave {
218
+ -webkit-animation-duration: 0.3s;
219
+ animation-duration: 0.3s;
220
+ -webkit-animation-fill-mode: both;
221
+ animation-fill-mode: both;
222
+ display: block !important;
223
+ -webkit-animation-play-state: paused;
224
+ animation-play-state: paused;
225
+ }
226
+ .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
227
+ .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
228
+ -webkit-animation-name: rcSliderTooltipZoomDownIn;
229
+ animation-name: rcSliderTooltipZoomDownIn;
230
+ -webkit-animation-play-state: running;
231
+ animation-play-state: running;
232
+ }
233
+ .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
234
+ -webkit-animation-name: rcSliderTooltipZoomDownOut;
235
+ animation-name: rcSliderTooltipZoomDownOut;
236
+ -webkit-animation-play-state: running;
237
+ animation-play-state: running;
238
+ }
239
+ .rc-slider-tooltip-zoom-down-enter,
240
+ .rc-slider-tooltip-zoom-down-appear {
241
+ -webkit-transform: scale(0, 0);
242
+ transform: scale(0, 0);
243
+ -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
244
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
245
+ }
246
+ .rc-slider-tooltip-zoom-down-leave {
247
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
248
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
249
+ }
250
+ @-webkit-keyframes rcSliderTooltipZoomDownIn {
251
+ 0% {
252
+ opacity: 0;
253
+ -webkit-transform-origin: 50% 100%;
254
+ transform-origin: 50% 100%;
255
+ -webkit-transform: scale(0, 0);
256
+ transform: scale(0, 0);
257
+ }
258
+ 100% {
259
+ -webkit-transform-origin: 50% 100%;
260
+ transform-origin: 50% 100%;
261
+ -webkit-transform: scale(1, 1);
262
+ transform: scale(1, 1);
263
+ }
264
+ }
265
+ @keyframes rcSliderTooltipZoomDownIn {
266
+ 0% {
267
+ opacity: 0;
268
+ -webkit-transform-origin: 50% 100%;
269
+ transform-origin: 50% 100%;
270
+ -webkit-transform: scale(0, 0);
271
+ transform: scale(0, 0);
272
+ }
273
+ 100% {
274
+ -webkit-transform-origin: 50% 100%;
275
+ transform-origin: 50% 100%;
276
+ -webkit-transform: scale(1, 1);
277
+ transform: scale(1, 1);
278
+ }
279
+ }
280
+ @-webkit-keyframes rcSliderTooltipZoomDownOut {
281
+ 0% {
282
+ -webkit-transform-origin: 50% 100%;
283
+ transform-origin: 50% 100%;
284
+ -webkit-transform: scale(1, 1);
285
+ transform: scale(1, 1);
286
+ }
287
+ 100% {
288
+ opacity: 0;
289
+ -webkit-transform-origin: 50% 100%;
290
+ transform-origin: 50% 100%;
291
+ -webkit-transform: scale(0, 0);
292
+ transform: scale(0, 0);
293
+ }
294
+ }
295
+ @keyframes rcSliderTooltipZoomDownOut {
296
+ 0% {
297
+ -webkit-transform-origin: 50% 100%;
298
+ transform-origin: 50% 100%;
299
+ -webkit-transform: scale(1, 1);
300
+ transform: scale(1, 1);
301
+ }
302
+ 100% {
303
+ opacity: 0;
304
+ -webkit-transform-origin: 50% 100%;
305
+ transform-origin: 50% 100%;
306
+ -webkit-transform: scale(0, 0);
307
+ transform: scale(0, 0);
308
+ }
309
+ }
310
+ .rc-slider-tooltip {
311
+ display: inline-block;
312
+ }
313
+ .rc-slider-tooltip {
314
+ position: absolute;
315
+ left: -9999px;
316
+ top: -9999px;
317
+ z-index: 4;
318
+ visibility: visible;
319
+ box-sizing: border-box;
320
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
321
+ }
322
+ .rc-slider-tooltip * {
323
+ box-sizing: border-box;
324
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
325
+ }
326
+ .rc-slider-tooltip-hidden {
327
+ display: none;
328
+ }
329
+ .rc-slider-tooltip-placement-top {
330
+ padding: 4px 0 8px 0;
331
+ }
332
+ .rc-slider-tooltip-inner {
333
+ padding: 8px;
334
+ font-size: $font-size-lg;
335
+ line-height: $line-height-base;
336
+ color: $text-color;
337
+ border: 1px solid $gray;
338
+ text-align: center;
339
+ text-decoration: none;
340
+ background-color: $element-background-color;
341
+ border-radius: 21px;
342
+ }
306
343
  }
package/modal/Modal/ModalView.js CHANGED
@@ -49,7 +49,7 @@ function ModalView(props) {
49
49
  afterOpen: 'ModalView_overlay-after',
50
50
  beforeClose: 'ModalView_overlay-before'
51
51
  };
52
- return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem.element('body', { size: props.size }), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
52
+ return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem(bem.element('body', { size: props.size }), props.className), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
53
53
  React.createElement("div", { className: bem.element('header') },
54
54
  React.createElement("span", { className: bem.element('title') }, props.title),
55
55
  React.createElement(content_1.Icon, { name: 'cross_12x12', className: bem.element('close'), onClick: props.onClose })),
package/modal/Modal/ModalView.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  min-width: 300px;
4
4
 
5
5
  &_overlay {
6
- z-index: 100;
7
6
  position: fixed;
8
7
  top: 0;
9
8
  bottom: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.0-beta.60",
3
+ "version": "3.0.0-beta.62",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",