@steroidsjs/bootstrap 3.0.0-beta.20 → 3.0.0-beta.22
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/README.md +1 -2
- package/content/Calendar/CaptionElement.scss +2 -0
- package/form/Button/ButtonView.js +2 -1
- package/form/DropDownField/DropDownFieldView.scss +3 -0
- package/form/InputField/InputFieldView.scss +5 -4
- package/form/NumberField/NumberFieldView.scss +0 -1
- package/form/PasswordField/PasswordFieldView.js +10 -10
- package/form/PasswordField/PasswordFieldView.scss +221 -63
- package/icons/index.js +2 -0
- package/icons/svgs/crossed-out-eye.svg +5 -0
- package/icons/svgs/visible-eye.svg +4 -0
- package/layout/Header/HeaderView.scss +3 -3
- package/list/Grid/GridView.scss +28 -30
- package/nav/Tree/TreeView.scss +9 -10
- package/package.json +2 -3
- package/scss/variables/common/colors.scss +51 -37
- package/scss/variables/common/typography.scss +15 -15
- package/scss/variables/components/input.scss +6 -5
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
#
|
|
2
|
+
# Web views for Steroids
|
|
3
3
|
|
|
4
4
|
Эта библиотека содержит представления (views) для компонентов из [Steroids](https://github.com/steroids/react/),
|
|
5
|
-
стилизованные под UI-фреймворк [Bootstrap](https://getbootstrap.com/).
|
|
6
5
|
|
|
7
6
|
Подробнее о том как создавать и использовать эти view-файлы можно узнать в [документации Steroids](https://github.com/steroids/react/blob/master/docs/index.md)
|
|
@@ -44,8 +44,9 @@ function ButtonView(props) {
|
|
|
44
44
|
props.children))));
|
|
45
45
|
};
|
|
46
46
|
var renderBadge = function () {
|
|
47
|
-
if (!props.badge || !props.badge.enable)
|
|
47
|
+
if (!props.badge || !props.badge.enable) {
|
|
48
48
|
return null;
|
|
49
|
+
}
|
|
49
50
|
return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-".concat(props.badge.color), bem.element('badge'), props.badge.className) }, props.badge.value));
|
|
50
51
|
};
|
|
51
52
|
var className = bem(bem.block((_a = {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$input-border-color: transparent;
|
|
2
|
+
|
|
1
3
|
.InputFieldView {
|
|
2
4
|
$root: &;
|
|
3
5
|
|
|
@@ -5,7 +7,6 @@
|
|
|
5
7
|
flex-flow: row nowrap;
|
|
6
8
|
align-items: stretch;
|
|
7
9
|
padding: 0;
|
|
8
|
-
border: $input-border;
|
|
9
10
|
border-radius: $input-border-radius;
|
|
10
11
|
|
|
11
12
|
&_size {
|
|
@@ -100,7 +101,7 @@
|
|
|
100
101
|
&__addon-before, &__addon-after {
|
|
101
102
|
display: flex;
|
|
102
103
|
align-items: center;
|
|
103
|
-
padding: 0 $input-addon-padding;
|
|
104
|
+
// padding: 0 $input-addon-padding;
|
|
104
105
|
|
|
105
106
|
color: rgba(0, 0, 0, .85);
|
|
106
107
|
text-align: center;
|
|
@@ -124,11 +125,11 @@
|
|
|
124
125
|
}
|
|
125
126
|
|
|
126
127
|
&__text-before {
|
|
127
|
-
padding-left: $input-text-padding;
|
|
128
|
+
// padding-left: $input-text-padding;
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
&__text-after {
|
|
131
|
-
padding-right: $input-text-padding;
|
|
132
|
+
// padding-right: $input-text-padding;
|
|
132
133
|
}
|
|
133
134
|
|
|
134
135
|
}
|
|
@@ -42,15 +42,15 @@ var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
|
|
|
42
42
|
var hooks_1 = require("@steroidsjs/core/hooks");
|
|
43
43
|
function PasswordFieldView(props) {
|
|
44
44
|
var bem = (0, hooks_1.useBem)('PasswordFieldView');
|
|
45
|
-
return (React.createElement("div", { className: bem(bem.block(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
props.
|
|
53
|
-
React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? '
|
|
54
|
-
props.
|
|
45
|
+
return (React.createElement("div", { className: bem(bem.block({
|
|
46
|
+
size: props.size,
|
|
47
|
+
filled: !!props.inputProps.value,
|
|
48
|
+
disabled: props.inputProps.disabled
|
|
49
|
+
}), props.className) },
|
|
50
|
+
React.createElement("div", { className: bem.element('container') },
|
|
51
|
+
React.createElement("input", __assign({ className: bem.element('input') }, props.inputProps)),
|
|
52
|
+
props.showSecurityIcon && (React.createElement("span", { className: bem(bem.element('icon-eye')), onMouseDown: props.onShowPassword, onMouseUp: props.onHidePassword },
|
|
53
|
+
React.createElement(Icon_1["default"], { name: props.inputProps.type === 'password' ? 'crossed-out-eye' : 'visible-eye' })))),
|
|
54
|
+
props.showSecurityBar && (React.createElement("div", { className: bem.element('security-bar', props.securityLevel) }))));
|
|
55
55
|
}
|
|
56
56
|
exports["default"] = PasswordFieldView;
|
|
@@ -1,76 +1,234 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--security-bar-background: #eef1f2;
|
|
3
|
+
--eye-default-color: #eef1f2;
|
|
4
|
+
--eye-filled-color: #323232;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html[data-theme="dark"] {
|
|
8
|
+
--security-bar-background: #5b5c6b;
|
|
9
|
+
--eye-default-color: #5b5c6b;
|
|
10
|
+
--eye-filled-color: #ffffff;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
$security-bar-background: var(--security-bar-background);
|
|
14
|
+
$eye-default-color: var(--eye-default-color);
|
|
15
|
+
$eye-filled-color: var(--eye-filled-color);
|
|
16
|
+
|
|
1
17
|
.PasswordFieldView {
|
|
18
|
+
$root: &;
|
|
19
|
+
|
|
20
|
+
position: relative;
|
|
21
|
+
width: 200px;
|
|
22
|
+
|
|
23
|
+
line-height: 24px;
|
|
24
|
+
font-weight: $font-weight-sm;
|
|
25
|
+
|
|
26
|
+
&__container {
|
|
27
|
+
position: relative;
|
|
28
|
+
width: 200px;
|
|
29
|
+
height: 34px;
|
|
2
30
|
|
|
31
|
+
&::before {
|
|
32
|
+
position: absolute;
|
|
33
|
+
content: "";
|
|
34
|
+
width: 101.6666666667%;
|
|
35
|
+
height: 111.7647058824%;
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 0;
|
|
3
38
|
|
|
4
|
-
|
|
5
|
-
display: flex;
|
|
6
|
-
flex-flow: row nowrap;
|
|
7
|
-
align-items: stretch;
|
|
8
|
-
padding: 0;
|
|
39
|
+
border-radius: $radius-small;
|
|
9
40
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
41
|
+
border: 4px solid $primary-light;
|
|
42
|
+
transition: opacity 150ms ease-in-out;
|
|
43
|
+
opacity: 0;
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
transform: translate(-0.8333333334%, -5.8823529412%);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:focus-within:not(:active)::before {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
}
|
|
14
51
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
52
|
+
|
|
53
|
+
&__input {
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: 100%;
|
|
56
|
+
border-radius: $radius-small;
|
|
57
|
+
border: 1px solid $border-color;
|
|
58
|
+
outline: none;
|
|
59
|
+
padding-left: 8px;
|
|
60
|
+
padding-right: 42px;
|
|
61
|
+
|
|
62
|
+
&::placeholder {
|
|
63
|
+
color: $placeholder-color;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:hover {
|
|
67
|
+
border: 1px solid $border-color-hover;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:not(:disabled):active {
|
|
71
|
+
border: 1px solid $primary;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&:disabled {
|
|
75
|
+
border: none;
|
|
76
|
+
background-color: $background-disabled-color;
|
|
77
|
+
}
|
|
18
78
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
79
|
+
|
|
80
|
+
&_size {
|
|
81
|
+
&_lg {
|
|
82
|
+
#{$root}__container {
|
|
83
|
+
height: 56px;
|
|
84
|
+
|
|
85
|
+
&::before {
|
|
86
|
+
border-radius: $radius-large;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
#{$root}__input {
|
|
91
|
+
border-radius: $radius-large;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
font-size: $font-size-lg;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&_md {
|
|
98
|
+
#{$root}__container {
|
|
99
|
+
height: 46px;
|
|
100
|
+
|
|
101
|
+
&::before {
|
|
102
|
+
border-radius: $radius-large;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
#{$root}__input {
|
|
107
|
+
border-radius: $radius-large;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
font-size: $font-size-base;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&_sm {
|
|
114
|
+
#{$root}__container {
|
|
115
|
+
height: $input-height-sm;
|
|
116
|
+
|
|
117
|
+
&::before {
|
|
118
|
+
border-radius: $radius-small;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
#{$root}__input {
|
|
123
|
+
border-radius: $radius-small;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
font-size: $font-size-sm;
|
|
127
|
+
}
|
|
26
128
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
129
|
+
|
|
130
|
+
&__security-bar {
|
|
131
|
+
position: relative;
|
|
132
|
+
width: 100%;
|
|
133
|
+
height: 4px;
|
|
134
|
+
border-radius: 4px;
|
|
135
|
+
margin-top: 8px;
|
|
136
|
+
|
|
137
|
+
background-color: $security-bar-background;
|
|
138
|
+
|
|
139
|
+
&::before {
|
|
140
|
+
content: "";
|
|
141
|
+
position: absolute;
|
|
142
|
+
width: 0%;
|
|
143
|
+
height: 4px;
|
|
144
|
+
border-radius: 4px;
|
|
145
|
+
transition: width 1s ease-in-out;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&_danger::before {
|
|
149
|
+
width: 33%;
|
|
150
|
+
background-color: $danger;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&_warning::before {
|
|
154
|
+
width: 66%;
|
|
155
|
+
background-color: $warning;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&_success::before {
|
|
159
|
+
width: 100%;
|
|
160
|
+
background-color: $success;
|
|
161
|
+
}
|
|
48
162
|
}
|
|
49
163
|
|
|
50
|
-
&
|
|
51
|
-
|
|
52
|
-
|
|
164
|
+
&__icon-eye {
|
|
165
|
+
outline: none;
|
|
166
|
+
border: none;
|
|
167
|
+
|
|
168
|
+
position: absolute;
|
|
169
|
+
right: 8px;
|
|
170
|
+
top: 50%;
|
|
171
|
+
transform: translateY(-50%);
|
|
53
172
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
173
|
+
|
|
174
|
+
&__icon-eye {
|
|
175
|
+
svg {
|
|
176
|
+
path {
|
|
177
|
+
fill: $eye-default-color;
|
|
178
|
+
|
|
179
|
+
&:last-child {
|
|
180
|
+
stroke: $eye-default-color;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&:active {
|
|
186
|
+
svg {
|
|
187
|
+
path {
|
|
188
|
+
fill: inherit;
|
|
189
|
+
stroke: $eye-default-color;
|
|
190
|
+
}
|
|
191
|
+
circle {
|
|
192
|
+
stroke: $eye-default-color;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
66
196
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
197
|
+
|
|
198
|
+
&_filled {
|
|
199
|
+
#{$root}__icon-eye {
|
|
200
|
+
svg {
|
|
201
|
+
path {
|
|
202
|
+
fill: $eye-filled-color;
|
|
203
|
+
|
|
204
|
+
&:last-child {
|
|
205
|
+
stroke: $eye-filled-color;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&:active {
|
|
211
|
+
svg {
|
|
212
|
+
path {
|
|
213
|
+
fill: inherit;
|
|
214
|
+
stroke: $eye-filled-color;
|
|
215
|
+
}
|
|
216
|
+
circle {
|
|
217
|
+
stroke: $eye-filled-color;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
70
222
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
223
|
+
|
|
224
|
+
&_disabled {
|
|
225
|
+
#{$root}__icon-eye,
|
|
226
|
+
#{$root}__security-bar {
|
|
227
|
+
opacity: 0;
|
|
228
|
+
|
|
229
|
+
&::before {
|
|
230
|
+
opacity: 0;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
74
233
|
}
|
|
75
|
-
|
|
76
|
-
}
|
|
234
|
+
}
|
package/icons/index.js
CHANGED
|
@@ -251,6 +251,8 @@ exports["default"] = (function () {
|
|
|
251
251
|
'badge-close',
|
|
252
252
|
'loader',
|
|
253
253
|
'accordion-chevron',
|
|
254
|
+
'visible-eye',
|
|
255
|
+
'crossed-out-eye',
|
|
254
256
|
];
|
|
255
257
|
steroidsIcons.forEach(function (iconName) {
|
|
256
258
|
icons[iconName] = require("./svgs/".concat(iconName, ".svg"));
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9202 13.2867C15.9725 13.0286 16 12.7615 16 12.4879C16 10.2788 14.2091 8.48792 12 8.48792C11.7264 8.48792 11.4593 8.51538 11.2012 8.56769L12.7295 10.096C13.5236 10.3379 14.15 10.9643 14.3919 11.7584L15.9202 13.2867ZM9.76246 11.3716C9.5945 11.7076 9.5 12.0867 9.5 12.4879C9.5 13.8686 10.6193 14.9879 12 14.9879C12.4012 14.9879 12.7803 14.8934 13.1163 14.7255L14.212 15.8212C13.5784 16.2424 12.8179 16.4879 12 16.4879C9.79086 16.4879 8 14.6971 8 12.4879C8 11.67 8.24547 10.9095 8.66676 10.2759L9.76246 11.3716Z" fill="#323232"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7369 16.1634C19.5861 15.3972 20.278 14.625 20.7677 14.0304C20.7902 14.0031 20.8132 13.9755 20.8363 13.9476C21.1563 13.5626 21.521 13.1236 21.521 12.4879C21.521 11.8522 21.1563 11.4133 20.8363 11.0282C20.8132 11.0003 20.7902 10.9727 20.7677 10.9454C20.0353 10.0562 18.8506 8.7695 17.3636 7.6997C15.8826 6.63415 14.0377 5.73792 12.0007 5.73792C10.9236 5.73792 9.90014 5.98854 8.95578 6.3823L10.1221 7.5486C10.7332 7.35097 11.3622 7.23792 12.0007 7.23792C13.5996 7.23792 15.1386 7.94675 16.4876 8.91731C17.8307 9.88361 18.9222 11.0641 19.6099 11.899C19.8177 12.1514 19.92 12.2787 19.9814 12.3815C20.0213 12.4484 20.0212 12.4674 20.021 12.485L20.021 12.4879L20.021 12.4908C20.0212 12.5084 20.0213 12.5274 19.9814 12.5944C19.92 12.6971 19.8177 12.8245 19.6099 13.0768C19.1383 13.6493 18.4769 14.3843 17.6748 15.1013L18.7369 16.1634ZM8.64801 8.19585C8.25778 8.41127 7.87887 8.65471 7.51387 8.91731C6.17077 9.88361 5.07931 11.0641 4.39163 11.899C4.18379 12.1514 4.08145 12.2787 4.02013 12.3815C3.98021 12.4484 3.98034 12.4674 3.98046 12.485L3.98047 12.4879L3.98046 12.4908C3.98034 12.5084 3.98021 12.5274 4.02013 12.5944C4.08145 12.6971 4.18379 12.8245 4.39163 13.0768C5.0793 13.9117 6.17077 15.0922 7.51387 16.0585C8.86289 17.0291 10.4019 17.7379 12.0007 17.7379C13.5996 17.7379 15.1386 17.0291 16.4876 16.0585C16.4921 16.0553 16.4966 16.0521 16.501 16.0489L17.574 17.1219C17.5046 17.1737 17.4345 17.2252 17.3636 17.2761C15.8826 18.3417 14.0377 19.2379 12.0007 19.2379C9.96383 19.2379 8.11889 18.3417 6.63785 17.2761C5.15089 16.2063 3.96621 14.9197 3.2338 14.0304C3.21126 14.0031 3.18833 13.9755 3.16516 13.9476C2.8452 13.5626 2.48047 13.1236 2.48047 12.4879C2.48047 11.8522 2.8452 11.4133 3.16516 11.0282L3.16527 11.0281C3.1884 11.0003 3.21129 10.9727 3.2338 10.9454C3.96621 10.0562 5.15089 8.7695 6.63785 7.6997C6.92832 7.49072 7.23278 7.28825 7.54995 7.09778L8.64801 8.19585Z" fill="#323232"/>
|
|
4
|
+
<path d="M5 2.48792L21 18.4879" stroke="#323232"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="12" cy="12.4879" r="3.25" stroke="#323232" stroke-width="1.5"/>
|
|
3
|
+
<path d="M20.188 11.4222C20.5762 11.8935 20.7703 12.1291 20.7703 12.4879C20.7703 12.8467 20.5762 13.0824 20.188 13.5536C18.7679 15.2778 15.6357 18.4879 12 18.4879C8.36427 18.4879 5.23206 15.2778 3.81197 13.5536C3.42381 13.0824 3.22973 12.8467 3.22973 12.4879C3.22973 12.1291 3.42381 11.8935 3.81197 11.4222C5.23206 9.69805 8.36427 6.48792 12 6.48792C15.6357 6.48792 18.7679 9.69805 20.188 11.4222Z" stroke="#323232" stroke-width="1.5"/>
|
|
4
|
+
</svg>
|
package/list/Grid/GridView.scss
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import '~bootstrap/scss/mixins/_breakpoints.scss';
|
|
2
|
-
|
|
3
1
|
.GridView {
|
|
4
2
|
opacity: 1;
|
|
5
3
|
transition: opacity .2s;
|
|
@@ -9,34 +7,34 @@
|
|
|
9
7
|
}
|
|
10
8
|
|
|
11
9
|
//adaptive styles
|
|
12
|
-
@include media-breakpoint-down(sm) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
10
|
+
// @include media-breakpoint-down(sm) {
|
|
11
|
+
// thead, tbody, th, tr {
|
|
12
|
+
// display: block;
|
|
13
|
+
// }
|
|
14
|
+
|
|
15
|
+
// thead tr {
|
|
16
|
+
// position: absolute;
|
|
17
|
+
// top: -9999px;
|
|
18
|
+
// left: -9999px;
|
|
19
|
+
// }
|
|
20
|
+
|
|
21
|
+
// td {
|
|
22
|
+
// position: relative;
|
|
23
|
+
// width: 100% !important;
|
|
24
|
+
// text-align: left !important;
|
|
25
|
+
|
|
26
|
+
// display: flex;
|
|
27
|
+
// align-items: center;
|
|
28
|
+
// white-space: pre-wrap;
|
|
29
|
+
// }
|
|
30
|
+
|
|
31
|
+
// td:before {
|
|
32
|
+
// padding-right: 1rem;
|
|
33
|
+
// width: 50%;
|
|
34
|
+
// flex-shrink: 0;
|
|
35
|
+
// content: attr(data-label);
|
|
36
|
+
// }
|
|
37
|
+
// }
|
|
40
38
|
|
|
41
39
|
&__sort-button {
|
|
42
40
|
opacity: 0.5;
|
package/nav/Tree/TreeView.scss
CHANGED
|
@@ -17,22 +17,22 @@
|
|
|
17
17
|
padding: 5px 10px;
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: row;
|
|
20
|
-
color: $
|
|
21
|
-
background-color: $
|
|
20
|
+
color: $text-color;
|
|
21
|
+
background-color: $background-color;
|
|
22
22
|
|
|
23
|
-
&:hover {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
23
|
+
// &:hover {
|
|
24
|
+
// color: $list-group-action-hover-color;
|
|
25
|
+
// background-color: $list-group-hover-bg;
|
|
26
|
+
// }
|
|
27
27
|
|
|
28
28
|
&, &:hover {
|
|
29
29
|
text-decoration: none !important;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
&__item_selected &__item-label {
|
|
33
|
-
background-color: $
|
|
33
|
+
background-color: $secondary;
|
|
34
34
|
&, &::before {
|
|
35
|
-
color: $
|
|
35
|
+
color: $text-color;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
&__item-label::before {
|
|
@@ -43,9 +43,8 @@
|
|
|
43
43
|
height: 20px;
|
|
44
44
|
font-size: 12px;
|
|
45
45
|
font-weight: bold;
|
|
46
|
-
font-family: $font-family-monospace;
|
|
47
46
|
margin-left: 10px;
|
|
48
|
-
color: $
|
|
47
|
+
color: $text-color;
|
|
49
48
|
position: relative;
|
|
50
49
|
top: 3px;
|
|
51
50
|
left: 3px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steroidsjs/bootstrap",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.22",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "Vladimir Kozhin <hello@kozhindev.com>",
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@ckeditor/ckeditor5-react": "^3.0.2",
|
|
22
22
|
"@steroidsjs/ckeditor5": "^27.0.2-rc.2",
|
|
23
|
-
"bootstrap": "^4.5.2",
|
|
24
23
|
"date-fns": "^2.29.3",
|
|
25
24
|
"lodash": "^4.17.20",
|
|
26
25
|
"lodash-es": "^4.17.20",
|
|
@@ -36,7 +35,7 @@
|
|
|
36
35
|
},
|
|
37
36
|
"devDependencies": {
|
|
38
37
|
"@steroidsjs/core": "^3.0 || >=3.0.0-beta.9",
|
|
39
|
-
"@steroidsjs/eslint-config": "^2.1.
|
|
38
|
+
"@steroidsjs/eslint-config": "^2.1.4",
|
|
40
39
|
"@types/enzyme": "^3.10.8",
|
|
41
40
|
"@types/googlemaps": "^3.43.3",
|
|
42
41
|
"@types/jest": "^26.0.22",
|
|
@@ -26,6 +26,11 @@
|
|
|
26
26
|
--text-color: #312C3A;
|
|
27
27
|
--background-color: #fff;
|
|
28
28
|
--is-dark: 'false';
|
|
29
|
+
--border-color: #eef1f2;
|
|
30
|
+
--border-color-hover: #e5e9eb;
|
|
31
|
+
--placeholder-color: rgba(0, 0, 0, 0.3);
|
|
32
|
+
--placeholder-disabled-color: rgba(0, 0, 0, 0.3);
|
|
33
|
+
--background-disabled-color: #eef1f2;
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
html[data-theme="dark"] {
|
|
@@ -54,57 +59,66 @@ html[data-theme="dark"] {
|
|
|
54
59
|
--dark: #6b6477;
|
|
55
60
|
--light: #b7afc7;
|
|
56
61
|
--text-color: #FFFFFF;
|
|
57
|
-
--background-color: #414141;
|
|
58
62
|
--is-dark: 'true';
|
|
63
|
+
--border-color: #eef1f2;
|
|
64
|
+
--border-color-hover: #4e4f57;
|
|
65
|
+
--placeholder-color: rgba(255, 255, 255, 0.3);
|
|
66
|
+
--placeholder-disabled-color: rgba(255, 255, 255, 0.1);
|
|
67
|
+
--background-disabled-color: #5b5c6b;
|
|
59
68
|
}
|
|
60
69
|
|
|
61
70
|
/*
|
|
62
71
|
* SCSS variables implementation
|
|
63
72
|
*/
|
|
64
|
-
$primary: var(--primary);
|
|
65
|
-
$primary-dark: var(--primary-dark);
|
|
66
|
-
$primary-light: var(--primary-light);
|
|
67
|
-
$secondary: var(--secondary);
|
|
68
|
-
$secondary-dark: var(--secondary-dark);
|
|
69
|
-
$secondary-light: var(--secondary-light);
|
|
70
|
-
$success: var(--success);
|
|
71
|
-
$success-dark: var(--success-dark);
|
|
72
|
-
$success-light: var(--success-light);
|
|
73
|
-
$danger: var(--danger);
|
|
74
|
-
$danger-dark: var(--danger-dark);
|
|
75
|
-
$danger-light: var(--danger-light);
|
|
76
|
-
$info: var(--info);
|
|
77
|
-
$info-dark: var(--info-dark);
|
|
78
|
-
$info-light: var(--info-light);
|
|
79
|
-
$warning: var(--warning);
|
|
80
|
-
$warning-dark: var(--warning-dark);
|
|
81
|
-
$warning-light: var(--warning-light);
|
|
82
|
-
$graphite: var(--graphite);
|
|
83
|
-
$gray-dark: var(--gray-dark);
|
|
84
|
-
$gray: var(--gray);
|
|
85
|
-
$light-gray: var(--light-gray);
|
|
86
|
-
$dark: var(--dark);
|
|
87
|
-
$light: var(--light);
|
|
88
|
-
$text-color: var(--text-color);
|
|
89
|
-
$background-color: var(--background-color);
|
|
90
|
-
$is-dark: var(--is-dark);
|
|
73
|
+
$primary: var(--primary) !default;
|
|
74
|
+
$primary-dark: var(--primary-dark) !default;
|
|
75
|
+
$primary-light: var(--primary-light) !default;
|
|
76
|
+
$secondary: var(--secondary) !default;
|
|
77
|
+
$secondary-dark: var(--secondary-dark) !default;
|
|
78
|
+
$secondary-light: var(--secondary-light) !default;
|
|
79
|
+
$success: var(--success) !default;
|
|
80
|
+
$success-dark: var(--success-dark) !default;
|
|
81
|
+
$success-light: var(--success-light) !default;
|
|
82
|
+
$danger: var(--danger) !default;
|
|
83
|
+
$danger-dark: var(--danger-dark) !default;
|
|
84
|
+
$danger-light: var(--danger-light) !default;
|
|
85
|
+
$info: var(--info) !default;
|
|
86
|
+
$info-dark: var(--info-dark) !default;
|
|
87
|
+
$info-light: var(--info-light) !default;
|
|
88
|
+
$warning: var(--warning) !default;
|
|
89
|
+
$warning-dark: var(--warning-dark) !default;
|
|
90
|
+
$warning-light: var(--warning-light) !default;
|
|
91
|
+
$graphite: var(--graphite) !default;
|
|
92
|
+
$gray-dark: var(--gray-dark) !default;
|
|
93
|
+
$gray: var(--gray) !default;
|
|
94
|
+
$light-gray: var(--light-gray) !default;
|
|
95
|
+
$dark: var(--dark) !default;
|
|
96
|
+
$light: var(--light) !default;
|
|
97
|
+
$text-color: var(--text-color) !default;
|
|
98
|
+
$background-color: var(--background-color) !default;
|
|
99
|
+
$is-dark: var(--is-dark) !default;
|
|
100
|
+
$border-color: var(--border-color) !default;
|
|
101
|
+
$border-color-hover: var(--border-color-hover) !default;
|
|
102
|
+
$placeholder-color: var(--placeholder-color) !default;
|
|
103
|
+
$placeholder-disabled-color: var(--placeholder-disabled-color) !default;
|
|
104
|
+
$background-disabled-color: var(--background-disabled-color) !default;
|
|
91
105
|
|
|
92
106
|
/*
|
|
93
107
|
* Common colors
|
|
94
108
|
*/
|
|
95
109
|
|
|
96
|
-
$black: rgba(#000, 1);
|
|
97
|
-
$black-60: rgba(#000, 0.6);
|
|
98
|
-
$black-30: rgba(#000, 0.3);
|
|
99
|
-
$black-10: rgba(#000, 0.1);
|
|
100
|
-
$black-4: rgba(#000, 0.04);
|
|
101
|
-
$white: #fff;
|
|
110
|
+
$black: rgba(#000, 1) !default;
|
|
111
|
+
$black-60: rgba(#000, 0.6) !default;
|
|
112
|
+
$black-30: rgba(#000, 0.3) !default;
|
|
113
|
+
$black-10: rgba(#000, 0.1) !default;
|
|
114
|
+
$black-4: rgba(#000, 0.04) !default;
|
|
115
|
+
$white: #fff !default;
|
|
102
116
|
|
|
103
|
-
$link-color: #2ba3fb;
|
|
117
|
+
$link-color: #2ba3fb !default;
|
|
104
118
|
|
|
105
|
-
$gradient-blue: linear-gradient(180deg, #651FFF, #BA9BFF);
|
|
119
|
+
$gradient-blue: linear-gradient(180deg, #651FFF, #BA9BFF) !default;
|
|
106
120
|
|
|
107
|
-
$color-themes: ();
|
|
121
|
+
$color-themes: () !default;
|
|
108
122
|
$color-themes: map-merge(
|
|
109
123
|
(
|
|
110
124
|
"basic": (
|
|
@@ -4,23 +4,23 @@
|
|
|
4
4
|
|
|
5
5
|
$font-family-nunito: "Nunito", sans-serif;
|
|
6
6
|
|
|
7
|
-
$font-size-xs: 12px;
|
|
8
|
-
$font-size-sm: 14px;
|
|
9
|
-
$font-size-base: 16px;
|
|
10
|
-
$font-size-lg: 18px;
|
|
11
|
-
$font-size-xl: 24px;
|
|
12
|
-
$font-size-2xl: 32px;
|
|
7
|
+
$font-size-xs: 12px !default;
|
|
8
|
+
$font-size-sm: 14px !default;
|
|
9
|
+
$font-size-base: 16px !default;
|
|
10
|
+
$font-size-lg: 18px !default;
|
|
11
|
+
$font-size-xl: 24px !default;
|
|
12
|
+
$font-size-2xl: 32px !default;
|
|
13
13
|
|
|
14
|
-
$line-height-xs: 17px;
|
|
15
|
-
$line-height-sm: 20px;
|
|
16
|
-
$line-height-base: 22px;
|
|
17
|
-
$line-height-lg: 25px;
|
|
18
|
-
$line-height-xl: 34px;
|
|
19
|
-
$line-height-2xl: 45px;
|
|
14
|
+
$line-height-xs: 17px !default;
|
|
15
|
+
$line-height-sm: 20px !default;
|
|
16
|
+
$line-height-base: 22px !default;
|
|
17
|
+
$line-height-lg: 25px !default;
|
|
18
|
+
$line-height-xl: 34px !default;
|
|
19
|
+
$line-height-2xl: 45px !default;
|
|
20
20
|
|
|
21
|
-
$font-weight-sm: 400;
|
|
22
|
-
$font-weight-md: 500;
|
|
23
|
-
$font-weight-lg: 700;
|
|
21
|
+
$font-weight-sm: 400 !default;
|
|
22
|
+
$font-weight-md: 500 !default;
|
|
23
|
+
$font-weight-lg: 700 !default;
|
|
24
24
|
|
|
25
25
|
$title-types: () !default;
|
|
26
26
|
$title-types: map-merge(
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
$input-height-sm: 34px;
|
|
2
|
+
$input-height-md: 46px;
|
|
3
|
+
$input-height-lg: 56px;
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
//remove after ready all inputs
|
|
1
7
|
//Small
|
|
2
8
|
$input-label-margin-bottom-sm: 4px;
|
|
3
9
|
|
|
@@ -52,11 +58,6 @@ $input-message-margin-top-lg: $input-message-margin-top-sm;
|
|
|
52
58
|
$input-message-icon-size-lg: $input-message-icon-size-sm;
|
|
53
59
|
$input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
|
|
54
60
|
|
|
55
|
-
|
|
56
|
-
$input-height-sm: 28px !default;
|
|
57
|
-
$input-height-md: 36px !default;
|
|
58
|
-
$input-height-lg: 46px !default;
|
|
59
|
-
|
|
60
61
|
$input-border: 1px solid $border-default !default;
|
|
61
62
|
$input-border-radius: 4px !default;
|
|
62
63
|
|