@steroidsjs/bootstrap 3.0.0-beta.20 → 3.0.0-beta.21
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 +3 -66
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-normal;
|
|
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.21",
|
|
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,66 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
$input-
|
|
3
|
-
|
|
4
|
-
$input-padding-x-sm: 12px;
|
|
5
|
-
$input-padding-y-sm: 5px;
|
|
6
|
-
|
|
7
|
-
$input-margin-bottom-sm: 20px;
|
|
8
|
-
$input-outline-width-sm: 4px;
|
|
9
|
-
$input-border-width-sm: 1px;
|
|
10
|
-
|
|
11
|
-
$input-icon-margin-right-sm: 12px;
|
|
12
|
-
$input-icon-close-margin-left-sm: 12px;
|
|
13
|
-
$input-icon-size-sm: 24px;
|
|
14
|
-
|
|
15
|
-
$input-message-margin-top-sm: 4px;
|
|
16
|
-
$input-message-icon-size-sm: 16px;
|
|
17
|
-
$input-message-icon-margin-right-sm: 4px;
|
|
18
|
-
|
|
19
|
-
//Medium
|
|
20
|
-
$input-label-margin-bottom-md: $input-label-margin-bottom-sm;
|
|
21
|
-
|
|
22
|
-
$input-padding-x-md: $input-padding-x-sm;
|
|
23
|
-
$input-padding-y-md: 11px;
|
|
24
|
-
|
|
25
|
-
$input-margin-bottom-md: $input-margin-bottom-sm;
|
|
26
|
-
$input-outline-width-md: $input-outline-width-sm;
|
|
27
|
-
$input-border-width-md: $input-border-width-sm;
|
|
28
|
-
|
|
29
|
-
$input-icon-margin-right-md: $input-icon-margin-right-sm;
|
|
30
|
-
$input-icon-close-margin-left-md: $input-icon-close-margin-left-sm;
|
|
31
|
-
$input-icon-size-md: $input-icon-size-sm;
|
|
32
|
-
|
|
33
|
-
$input-message-margin-top-md: $input-message-margin-top-sm;
|
|
34
|
-
$input-message-icon-size-md: $input-message-icon-size-sm;
|
|
35
|
-
$input-message-icon-margin-right-md: $input-message-icon-margin-right-sm;
|
|
36
|
-
|
|
37
|
-
//Large
|
|
38
|
-
$input-label-margin-bottom-lg: $input-label-margin-bottom-sm;
|
|
39
|
-
|
|
40
|
-
$input-padding-x-lg: $input-padding-x-sm;
|
|
41
|
-
$input-padding-y-lg: 16px;
|
|
42
|
-
|
|
43
|
-
$input-margin-bottom-lg: $input-margin-bottom-sm;
|
|
44
|
-
$input-outline-width-lg: $input-outline-width-sm;
|
|
45
|
-
$input-border-width-lg: $input-border-width-sm;
|
|
46
|
-
|
|
47
|
-
$input-icon-margin-right-lg: $input-icon-margin-right-sm;
|
|
48
|
-
$input-icon-close-margin-left-lg: $input-icon-close-margin-left-sm;
|
|
49
|
-
$input-icon-size-lg: $input-icon-size-sm;
|
|
50
|
-
|
|
51
|
-
$input-message-margin-top-lg: $input-message-margin-top-sm;
|
|
52
|
-
$input-message-icon-size-lg: $input-message-icon-size-sm;
|
|
53
|
-
$input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
$input-height-sm: 28px !default;
|
|
57
|
-
$input-height-md: 36px !default;
|
|
58
|
-
$input-height-lg: 46px !default;
|
|
59
|
-
|
|
60
|
-
$input-border: 1px solid $border-default !default;
|
|
61
|
-
$input-border-radius: 4px !default;
|
|
62
|
-
|
|
63
|
-
$input-padding-y: 0 !default;
|
|
64
|
-
$input-padding-x: 8px !default;
|
|
65
|
-
$input-addon-padding: 0.6rem !default;
|
|
66
|
-
$input-text-padding: 0.4rem !default;
|
|
1
|
+
$input-height-sm: 34px;
|
|
2
|
+
$input-height-md: 46px;
|
|
3
|
+
$input-height-lg: 56px;
|