@steroidsjs/bootstrap 3.0.6 → 3.0.10
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/content/CalendarSystem/AsideCalendars/AsideCalendars.scss +2 -2
- package/content/CalendarSystem/AsideHeader/AsideHeader.scss +5 -5
- package/content/CalendarSystem/ContentHeader/ContentHeader.scss +3 -6
- package/content/CalendarSystem/MonthGrid/MonthGrid.scss +2 -2
- package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss +3 -3
- package/content/CalendarSystem/WeekGrid/WeekGrid.scss +1 -1
- package/form/CheckboxListField/CheckboxListFieldView.js +2 -2
- package/form/Form/FormView.scss +3 -0
- package/form/InputField/InputFieldView.js +2 -3
- package/form/InputField/InputFieldView.scss +18 -17
- package/form/RadioField/RadioFieldView.js +1 -1
- package/form/RadioListField/RadioListFieldView.js +1 -1
- package/index.scss +1 -0
- package/package.json +2 -2
|
@@ -77,9 +77,9 @@ $calendar-system-separator-color: var(--calendar-system-separator-color);
|
|
|
77
77
|
padding-top: 12px;
|
|
78
78
|
|
|
79
79
|
p {
|
|
80
|
-
font-size: variables.$font-size-
|
|
80
|
+
font-size: variables.$font-size-base;
|
|
81
81
|
font-weight: variables.$font-weight-lg;
|
|
82
|
-
line-height: variables.$line-height-
|
|
82
|
+
line-height: variables.$line-height-xl;
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: space-between;
|
|
7
|
-
|
|
7
|
+
|
|
8
8
|
&__title {
|
|
9
|
-
font-size: variables.$font-size-
|
|
9
|
+
font-size: variables.$font-size-xl;
|
|
10
10
|
font-weight: variables.$font-weight-lg;
|
|
11
|
-
line-height: variables.$line-height-
|
|
11
|
+
line-height: variables.$line-height-xl;
|
|
12
12
|
color: variables.$text-color;
|
|
13
13
|
margin-bottom: 0;
|
|
14
14
|
}
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
&__text {
|
|
27
|
-
font-size: variables.$font-size-
|
|
27
|
+
font-size: variables.$font-size-sm;
|
|
28
28
|
font-weight: variables.$font-weight-sm;
|
|
29
|
-
line-height: variables.$line-height-
|
|
29
|
+
line-height: variables.$line-height-lg;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&__icon {
|
|
@@ -19,9 +19,9 @@ $calendar-system-caption-arrow-background-color: var(--calendar-system-caption-a
|
|
|
19
19
|
|
|
20
20
|
&__month {
|
|
21
21
|
display: inline-block;
|
|
22
|
-
font-size: variables.$font-size-
|
|
22
|
+
font-size: variables.$font-size-xl;
|
|
23
23
|
font-weight: variables.$font-weight-lg;
|
|
24
|
-
line-height: variables.$line-height-
|
|
24
|
+
line-height: variables.$line-height-xl;
|
|
25
25
|
margin-right: 93px;
|
|
26
26
|
margin-bottom: 0;
|
|
27
27
|
width: 190px;
|
|
@@ -46,12 +46,9 @@ $calendar-system-caption-arrow-background-color: var(--calendar-system-caption-a
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
&-icon {
|
|
49
|
+
&-icon {
|
|
50
50
|
pointer-events: none;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
|
|
55
|
-
&__measures {
|
|
56
|
-
}
|
|
57
54
|
}
|
|
@@ -32,9 +32,9 @@ $month-day-color-text: var(--month-day-color-text);
|
|
|
32
32
|
|
|
33
33
|
&-day {
|
|
34
34
|
color: $month-day-color-text;
|
|
35
|
-
font-size: variables.$font-size-
|
|
35
|
+
font-size: variables.$font-size-sm;
|
|
36
36
|
font-weight: variables.$font-weight-md;
|
|
37
|
-
line-height: variables.$line-height-
|
|
37
|
+
line-height: variables.$line-height-sm;
|
|
38
38
|
padding: 8px 10px;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
@@ -22,7 +22,7 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
|
|
|
22
22
|
|
|
23
23
|
.MonthDay {
|
|
24
24
|
$dayRoot: &;
|
|
25
|
-
padding: 4px 8px
|
|
25
|
+
padding: 4px 8px 0 8px;
|
|
26
26
|
min-height: 80px;
|
|
27
27
|
border-radius: variables.$radius-large;
|
|
28
28
|
background-color: $month-day-background-color;
|
|
@@ -37,9 +37,9 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
|
|
|
37
37
|
display: inline-flex;
|
|
38
38
|
justify-content: center;
|
|
39
39
|
align-items: center;
|
|
40
|
-
font-size: variables.$font-size-
|
|
40
|
+
font-size: variables.$font-size-sm;
|
|
41
41
|
font-weight: variables.$font-weight-sm;
|
|
42
|
-
line-height: variables.$line-height-
|
|
42
|
+
line-height: variables.$line-height-sm;
|
|
43
43
|
color: $month-day-color-text;
|
|
44
44
|
width: 24px;
|
|
45
45
|
height: 24px;
|
|
@@ -44,7 +44,7 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
|
|
|
44
44
|
height: 24px;
|
|
45
45
|
border-radius: variables.$radius-small;
|
|
46
46
|
background-color: $calendar-system-time-background-color;
|
|
47
|
-
color:
|
|
47
|
+
color: var(--custom-text-color-base);
|
|
48
48
|
font-size: variables.$font-size-xs;
|
|
49
49
|
font-weight: variables.$font-weight-sm;
|
|
50
50
|
line-height: variables.$line-height-xs;
|
|
@@ -35,7 +35,7 @@ function CheckboxListFieldView(props) {
|
|
|
35
35
|
var prefix = (0, useUniqueId_1["default"])('checkbox');
|
|
36
36
|
return (React.createElement("div", { className: bem(bem.block((_a = {},
|
|
37
37
|
_a["".concat(props.orientation)] = !!props.orientation,
|
|
38
|
-
_a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
|
|
38
|
+
_a)), props.className), style: props.style }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
|
|
39
39
|
key: checkboxIndex,
|
|
40
40
|
id: "".concat(prefix, "_").concat(checkbox.id),
|
|
41
41
|
label: checkbox.label,
|
|
@@ -46,7 +46,7 @@ function CheckboxListFieldView(props) {
|
|
|
46
46
|
onChange: function () {
|
|
47
47
|
props.onItemSelect(checkbox.id);
|
|
48
48
|
},
|
|
49
|
-
disabled: props.disabled
|
|
49
|
+
disabled: props.disabled || checkbox.disabled
|
|
50
50
|
},
|
|
51
51
|
size: checkbox.size || props.size,
|
|
52
52
|
color: checkbox.color,
|
|
@@ -43,15 +43,14 @@ var hooks_1 = require("@steroidsjs/core/hooks");
|
|
|
43
43
|
var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
|
|
44
44
|
var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
|
|
45
45
|
function InputFieldView(props) {
|
|
46
|
-
var _a;
|
|
47
46
|
var bem = (0, hooks_1.useBem)('InputFieldView');
|
|
48
47
|
return (React.createElement("div", { className: bem(bem.block({
|
|
49
|
-
disabled:
|
|
48
|
+
disabled: props.disabled,
|
|
50
49
|
size: props.size,
|
|
51
50
|
hasError: !!props.errors,
|
|
52
51
|
hasLeadIcon: !!props.leadIcon,
|
|
53
52
|
hasClearIcon: props.showClear && !props.disabled,
|
|
54
|
-
filled: !!props.input.value,
|
|
53
|
+
filled: !!props.input.value || !!props.inputProps.value,
|
|
55
54
|
hasAddonAfter: !!props.addonAfter,
|
|
56
55
|
hasAddonBefore: !!props.addonBefore,
|
|
57
56
|
hasAddon: !!props.addonAfter || !!props.addonBefore,
|
|
@@ -60,9 +60,9 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
|
|
64
64
|
//Statements
|
|
65
|
-
&::before {
|
|
65
|
+
&::before {
|
|
66
66
|
content: '';
|
|
67
67
|
position: absolute;
|
|
68
68
|
z-index: 2;
|
|
@@ -85,11 +85,11 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
&:not(#{$root}_disabled):active {
|
|
88
|
-
#{$root}__input {
|
|
88
|
+
#{$root}__input {
|
|
89
89
|
border-color: transparent;
|
|
90
90
|
}
|
|
91
|
-
|
|
92
|
-
&::before {
|
|
91
|
+
|
|
92
|
+
&::before {
|
|
93
93
|
transform: none;
|
|
94
94
|
border: 1px solid variables.$primary;
|
|
95
95
|
opacity: 1;
|
|
@@ -97,9 +97,10 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
&_disabled {
|
|
100
|
-
#{$root}__input {
|
|
100
|
+
#{$root}__input {
|
|
101
101
|
background-color: variables.$element-background-color-disabled;
|
|
102
102
|
border-color: transparent;
|
|
103
|
+
cursor: not-allowed;
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
|
|
@@ -109,7 +110,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
109
110
|
}
|
|
110
111
|
|
|
111
112
|
|
|
112
|
-
&::before {
|
|
113
|
+
&::before {
|
|
113
114
|
border: 1px solid variables.$danger;
|
|
114
115
|
border-radius: 16px;
|
|
115
116
|
transform: translateX(-1px) translateY(-1px);
|
|
@@ -123,7 +124,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
123
124
|
color: variables.$text-color;
|
|
124
125
|
height: variables.$input-height-lg;
|
|
125
126
|
border-radius: variables.$radius-large;
|
|
126
|
-
|
|
127
|
+
|
|
127
128
|
#{$root}__input {
|
|
128
129
|
font-size: variables.$font-size-lg;
|
|
129
130
|
border-radius: variables.$radius-large;
|
|
@@ -138,7 +139,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
138
139
|
padding: 16px 3px;
|
|
139
140
|
}
|
|
140
141
|
|
|
141
|
-
&::before {
|
|
142
|
+
&::before {
|
|
142
143
|
border-radius: 14px;
|
|
143
144
|
}
|
|
144
145
|
}
|
|
@@ -147,7 +148,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
147
148
|
color: variables.$text-color;
|
|
148
149
|
height: variables.$input-height-md;
|
|
149
150
|
border-radius: variables.$radius-large;
|
|
150
|
-
|
|
151
|
+
|
|
151
152
|
#{$root}__input {
|
|
152
153
|
border-radius: variables.$radius-large;
|
|
153
154
|
font-size: variables.$font-size-base;
|
|
@@ -165,7 +166,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
165
166
|
padding: 11px 3px;
|
|
166
167
|
}
|
|
167
168
|
|
|
168
|
-
&::before {
|
|
169
|
+
&::before {
|
|
169
170
|
border-radius: 14px;
|
|
170
171
|
}
|
|
171
172
|
}
|
|
@@ -174,7 +175,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
174
175
|
color: variables.$text-color;
|
|
175
176
|
height: variables.$input-height-sm;
|
|
176
177
|
border-radius: variables.$radius-small;
|
|
177
|
-
|
|
178
|
+
|
|
178
179
|
#{$root}__input {
|
|
179
180
|
font-size: variables.$font-size-sm;
|
|
180
181
|
border-radius: variables.$radius-small;
|
|
@@ -190,7 +191,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
190
191
|
padding: 5px 3px;
|
|
191
192
|
}
|
|
192
193
|
|
|
193
|
-
&::before {
|
|
194
|
+
&::before {
|
|
194
195
|
border-radius: 10px;
|
|
195
196
|
}
|
|
196
197
|
}
|
|
@@ -270,7 +271,7 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
270
271
|
border-bottom-left-radius: 0;
|
|
271
272
|
border: none;
|
|
272
273
|
}
|
|
273
|
-
&::before {
|
|
274
|
+
&::before {
|
|
274
275
|
border: 1px solid variables.$element-border-color;
|
|
275
276
|
opacity: 1;
|
|
276
277
|
}
|
|
@@ -281,14 +282,14 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
281
282
|
border-top-right-radius: 0;
|
|
282
283
|
border-bottom-right-radius: 0;
|
|
283
284
|
}
|
|
284
|
-
&::before {
|
|
285
|
+
&::before {
|
|
285
286
|
border: 1px solid variables.$element-border-color;
|
|
286
287
|
opacity: 1;
|
|
287
288
|
}
|
|
288
289
|
}
|
|
289
290
|
|
|
290
291
|
&__text-before,
|
|
291
|
-
&__text-after {
|
|
292
|
+
&__text-after {
|
|
292
293
|
flex-shrink: 0;
|
|
293
294
|
}
|
|
294
295
|
|
|
@@ -309,4 +310,4 @@ $lead-icon-disabled-color: var(--lead-icon-disabled-color);
|
|
|
309
310
|
border-top-right-radius: inherit;
|
|
310
311
|
border-bottom-right-radius: inherit;
|
|
311
312
|
}
|
|
312
|
-
}
|
|
313
|
+
}
|
|
@@ -49,7 +49,7 @@ function RadioFieldView(props) {
|
|
|
49
49
|
}), props.className), onClick: props.onChange },
|
|
50
50
|
React.createElement("input", __assign({ className: bem(bem.element('input', {
|
|
51
51
|
checked: props.checked
|
|
52
|
-
})), id: props.id || id }, props.inputProps, {
|
|
52
|
+
})), id: props.id || id }, props.inputProps, { required: props.required })),
|
|
53
53
|
React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
|
|
54
54
|
React.createElement("span", { className: bem.element('ellipse') }),
|
|
55
55
|
props.label)));
|
package/index.scss
CHANGED
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
@include meta.load-css('form/ImageField/ImageFieldView');
|
|
54
54
|
@include meta.load-css('form/FileField/FileFieldItemView');
|
|
55
55
|
@include meta.load-css('form/FieldSet/FieldSetView');
|
|
56
|
+
@include meta.load-css('form/Form/FormView');
|
|
56
57
|
@include meta.load-css('form/WizardForm/WizardFormView');
|
|
57
58
|
@include meta.load-css('form/HtmlField/HtmlFieldView');
|
|
58
59
|
@include meta.load-css('form/InputField/InputFieldView');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steroidsjs/bootstrap",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Vladimir Kozhin <hello@kozhindev.com>",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-use": "^17.4.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@steroidsjs/core": "^3.0.
|
|
38
|
+
"@steroidsjs/core": "^3.0.11",
|
|
39
39
|
"@steroidsjs/eslint-config": "^2.1.6",
|
|
40
40
|
"@types/enzyme": "^3.10.8",
|
|
41
41
|
"@types/googlemaps": "^3.43.3",
|