neo.mjs 4.6.2 → 4.6.4
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/examples/toast/MainContainer.mjs +12 -7
- package/examples/toast/MainContainerController.mjs +2 -2
- package/package.json +1 -1
- package/resources/scss/src/{dialog → component}/Toast.scss +39 -38
- package/resources/scss/src/form/field/Text.scss +92 -24
- package/resources/scss/theme-dark/component/Toast.scss +21 -0
- package/resources/scss/theme-dark/form/field/Text.scss +11 -1
- package/resources/scss/theme-light/component/Toast.scss +21 -0
- package/resources/scss/theme-light/form/field/Text.scss +10 -0
- package/src/collection/Base.mjs +0 -1
- package/src/component/Toast.mjs +282 -0
- package/src/form/field/Text.mjs +31 -21
- package/src/manager/Toast.mjs +119 -74
- package/resources/scss/theme-dark/dialog/Toast.scss +0 -13
- package/resources/scss/theme-light/dialog/Toast.scss +0 -25
- package/src/dialog/Toast.mjs +0 -212
|
@@ -33,7 +33,7 @@ class MainContainer extends Viewport {
|
|
|
33
33
|
maxValue : 4000,
|
|
34
34
|
style : {marginLeft: '10px'},
|
|
35
35
|
useSpinButtons: false,
|
|
36
|
-
width :
|
|
36
|
+
width : 200
|
|
37
37
|
},
|
|
38
38
|
|
|
39
39
|
items: [{
|
|
@@ -44,7 +44,7 @@ class MainContainer extends Viewport {
|
|
|
44
44
|
style : {paddingBottom: '40px', marginLeft: '10px'}
|
|
45
45
|
}, {
|
|
46
46
|
module : TextField,
|
|
47
|
-
labelText: '
|
|
47
|
+
labelText: 'title',
|
|
48
48
|
name : 'title'
|
|
49
49
|
}, {
|
|
50
50
|
module : TextField,
|
|
@@ -52,27 +52,32 @@ class MainContainer extends Viewport {
|
|
|
52
52
|
name : 'iconCls'
|
|
53
53
|
}, {
|
|
54
54
|
module : SelectField,
|
|
55
|
-
labelText: 'position',
|
|
55
|
+
labelText: 'position = tr',
|
|
56
56
|
name : 'position',
|
|
57
57
|
store : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
|
|
58
58
|
}, {
|
|
59
59
|
module : SelectField,
|
|
60
|
-
labelText: 'slideDirection',
|
|
60
|
+
labelText: 'slideDirection = right',
|
|
61
61
|
name : 'slideDirection',
|
|
62
62
|
store : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
|
|
63
63
|
}, {
|
|
64
64
|
module : SelectField,
|
|
65
|
-
labelText: 'ui',
|
|
65
|
+
labelText: 'ui = info',
|
|
66
66
|
name : 'ui',
|
|
67
67
|
store : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]}
|
|
68
68
|
}, {
|
|
69
69
|
module : NumberField,
|
|
70
|
-
labelText: 'minHeight',
|
|
70
|
+
labelText: 'minHeight = 50',
|
|
71
71
|
name : 'minHeight'
|
|
72
72
|
}, {
|
|
73
73
|
module : NumberField,
|
|
74
|
-
labelText: 'maxWidth',
|
|
74
|
+
labelText: 'maxWidth = 250',
|
|
75
75
|
name : 'maxWidth'
|
|
76
|
+
}, {
|
|
77
|
+
module : NumberField,
|
|
78
|
+
labelText: 'timeout = 3000',
|
|
79
|
+
name : 'timeout',
|
|
80
|
+
maxValue : 99999
|
|
76
81
|
}, {
|
|
77
82
|
module : CheckBox,
|
|
78
83
|
labelText : 'Closable',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import ComponentController from '../../src/controller/Component.mjs';
|
|
2
|
-
import Toast from '../../src/
|
|
2
|
+
import Toast from '../../src/component/Toast.mjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* @class Neo.examples.toast.MainContainerController
|
|
@@ -62,7 +62,7 @@ class MainContainerController extends ComponentController {
|
|
|
62
62
|
let me = this,
|
|
63
63
|
form = me.getReference('form'),
|
|
64
64
|
values = form.getValues(),
|
|
65
|
-
clear = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable'];
|
|
65
|
+
clear = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
|
|
66
66
|
|
|
67
67
|
// use the defaults from toast if not set
|
|
68
68
|
clear.forEach(item => {
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.neo-toast {
|
|
2
|
+
z-index : 20; // ensure to be on top of table headers
|
|
2
3
|
align-items : center;
|
|
3
4
|
background-color: v(toast-background-color);
|
|
4
5
|
border-radius : 0.5rem;
|
|
@@ -6,59 +7,58 @@
|
|
|
6
7
|
color : v(toast-color);
|
|
7
8
|
display : flex;
|
|
8
9
|
position : fixed;
|
|
10
|
+
transition : bottom .3s ease-out, top .3s ease-out;
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
.neo-toast-inner {
|
|
14
|
-
align-items: center;
|
|
15
|
-
display : flex;
|
|
16
|
-
|
|
17
|
-
&.neo-toast-has-title {
|
|
18
|
-
.neo-toast-text {
|
|
19
|
-
text-align: left;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
12
|
+
.neo-toast-inner {
|
|
13
|
+
align-items: center;
|
|
14
|
+
display : flex;
|
|
22
15
|
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
&.neo-toast-has-title {
|
|
17
|
+
.neo-toast-text {
|
|
18
|
+
text-align: left;
|
|
25
19
|
}
|
|
20
|
+
}
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
font-size : 1.5em;
|
|
31
|
-
}
|
|
22
|
+
& > div {
|
|
23
|
+
padding: 0.25em 0.5em;
|
|
24
|
+
}
|
|
32
25
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
.neo-toast-icon {
|
|
27
|
+
border-right: 2px solid v(toast-color);
|
|
28
|
+
flex : 1;
|
|
29
|
+
font-size : 1.5em;
|
|
30
|
+
}
|
|
36
31
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
.neo-toast-text {
|
|
33
|
+
padding : 0.25em 1em;
|
|
34
|
+
text-align: center;
|
|
40
35
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
36
|
+
.neo-toast-msg {
|
|
37
|
+
font-size: 0.8em;
|
|
44
38
|
}
|
|
45
39
|
|
|
46
|
-
.neo-toast-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
color : inherit;
|
|
50
|
-
cursor : pointer;
|
|
51
|
-
font-size : 1.5rem;
|
|
52
|
-
line-height: 1.5;
|
|
53
|
-
margin-left: auto;
|
|
40
|
+
.neo-toast-title {
|
|
41
|
+
padding-bottom: 0.2em;
|
|
42
|
+
text-transform: uppercase;
|
|
54
43
|
}
|
|
55
44
|
}
|
|
45
|
+
|
|
46
|
+
.neo-toast-close {
|
|
47
|
+
background : transparent;
|
|
48
|
+
border : 0;
|
|
49
|
+
color : inherit;
|
|
50
|
+
cursor : pointer;
|
|
51
|
+
font-size : 1.5rem;
|
|
52
|
+
line-height: 1.5;
|
|
53
|
+
margin-left: auto;
|
|
54
|
+
}
|
|
56
55
|
}
|
|
57
56
|
}
|
|
57
|
+
|
|
58
58
|
// ui: danger
|
|
59
59
|
.neo-toast-danger {
|
|
60
60
|
background-color: v(toast-danger-background-color);
|
|
61
|
-
color
|
|
61
|
+
color: v(toast-danger-color);
|
|
62
62
|
|
|
63
63
|
& > div {
|
|
64
64
|
|
|
@@ -70,10 +70,11 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
+
|
|
73
74
|
// ui: success
|
|
74
75
|
.neo-toast-success {
|
|
75
76
|
background-color: v(toast-success-background-color);
|
|
76
|
-
color
|
|
77
|
+
color: v(toast-success-color);
|
|
77
78
|
|
|
78
79
|
& > div {
|
|
79
80
|
|
|
@@ -11,13 +11,44 @@
|
|
|
11
11
|
border-color: v(textfield-border-color-active) !important;
|
|
12
12
|
outline : v(textfield-outline-active);
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
.neo-label-wrapper { // labelPosition: inline
|
|
16
|
+
.neo-textfield-input {
|
|
17
|
+
border-color: transparent;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.neo-textfield-input {
|
|
22
|
+
border-color: v(textfield-border-color-active);
|
|
23
|
+
outline : v(textfield-outline-active);
|
|
24
|
+
}
|
|
14
25
|
}
|
|
15
26
|
|
|
16
27
|
&.neo-hovered {
|
|
17
28
|
&:not(&.neo-focus) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
29
|
+
&:not(&.label-inline) {
|
|
30
|
+
.neo-input-wrapper {
|
|
31
|
+
border-color: v(textfield-border-color-hovered) !important;
|
|
32
|
+
outline : v(textfield-outline-hovered);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.neo-label-wrapper {
|
|
37
|
+
.neo-center-border, .neo-left-border, .neo-right-border {
|
|
38
|
+
border-bottom-color: v(textfield-border-color-hovered);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.neo-left-border, .neo-right-border {
|
|
42
|
+
border-top-color: v(textfield-border-color-hovered);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.neo-left-border {
|
|
46
|
+
border-left-color: v(textfield-border-color-hovered);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.neo-right-border {
|
|
50
|
+
border-right-color: v(textfield-border-color-hovered);
|
|
51
|
+
}
|
|
21
52
|
}
|
|
22
53
|
}
|
|
23
54
|
}
|
|
@@ -54,6 +85,44 @@
|
|
|
54
85
|
}
|
|
55
86
|
}
|
|
56
87
|
|
|
88
|
+
&.neo-disabled {
|
|
89
|
+
opacity: v(textfield-opacity-disabled);
|
|
90
|
+
|
|
91
|
+
&.label-inline {
|
|
92
|
+
.neo-label-wrapper {
|
|
93
|
+
.neo-center-border, .neo-left-border, .neo-right-border {
|
|
94
|
+
border-bottom-color: v(textfield-border-color-disabled);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.neo-left-border, .neo-right-border {
|
|
98
|
+
border-top-color: v(textfield-border-color-disabled);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.neo-left-border {
|
|
102
|
+
border-left-color: v(textfield-border-color-disabled);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.neo-right-border {
|
|
106
|
+
border-right-color: v(textfield-border-color-disabled);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.neo-input-wrapper {
|
|
112
|
+
background-color: v(textfield-input-background-color-disabled);
|
|
113
|
+
border-color : v(textfield-border-color-disabled);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.neo-textfield-input {
|
|
117
|
+
background-color: v(textfield-input-background-color-disabled);
|
|
118
|
+
color : v(textfield-input-color-disabled);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.neo-textfield-label {
|
|
122
|
+
color: v(textfield-label-color-disabled);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
57
126
|
&.neo-readonly {
|
|
58
127
|
opacity: v(textfield-opacity-readonly);
|
|
59
128
|
|
|
@@ -133,7 +202,7 @@
|
|
|
133
202
|
|
|
134
203
|
.neo-textfield-label {
|
|
135
204
|
color : v(textfield-border-color-active) !important;
|
|
136
|
-
transform: translateX(4px) translateY(-
|
|
205
|
+
transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
|
|
137
206
|
}
|
|
138
207
|
}
|
|
139
208
|
|
|
@@ -144,7 +213,7 @@
|
|
|
144
213
|
|
|
145
214
|
.neo-textfield-label {
|
|
146
215
|
color : #777;
|
|
147
|
-
transform: translateX(4px) translateY(-
|
|
216
|
+
transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
|
|
148
217
|
}
|
|
149
218
|
}
|
|
150
219
|
|
|
@@ -158,27 +227,31 @@
|
|
|
158
227
|
|
|
159
228
|
.neo-label-wrapper {
|
|
160
229
|
display : flex;
|
|
161
|
-
height :
|
|
230
|
+
height : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
|
|
162
231
|
position: absolute;
|
|
163
232
|
width : 100%;
|
|
164
233
|
|
|
165
234
|
.neo-center-border {
|
|
166
|
-
border-bottom:
|
|
167
|
-
border-top :
|
|
235
|
+
border-bottom: v(textfield-border-width) solid v(textfield-border-color);
|
|
236
|
+
border-top : v(textfield-border-width) solid v(textfield-border-color);
|
|
168
237
|
flex : 0 0 auto;
|
|
169
238
|
}
|
|
170
239
|
|
|
171
240
|
.neo-left-border {
|
|
172
|
-
border
|
|
173
|
-
border-
|
|
174
|
-
|
|
175
|
-
|
|
241
|
+
border : v(textfield-border-width) solid v(textfield-border-color);
|
|
242
|
+
border-bottom-left-radius: v(textfield-border-radius);
|
|
243
|
+
border-right : 0;
|
|
244
|
+
border-top-left-radius : v(textfield-border-radius);
|
|
245
|
+
flex : 0 0 auto;
|
|
246
|
+
width : calc(11px + v(textfield-border-width));
|
|
176
247
|
}
|
|
177
248
|
|
|
178
249
|
.neo-right-border {
|
|
179
|
-
border
|
|
180
|
-
border-
|
|
181
|
-
|
|
250
|
+
border : v(textfield-border-width) solid v(textfield-border-color);
|
|
251
|
+
border-bottom-right-radius: v(textfield-border-radius);
|
|
252
|
+
border-left : 0;
|
|
253
|
+
border-top-right-radius : v(textfield-border-radius);
|
|
254
|
+
flex : 1 0 auto;
|
|
182
255
|
}
|
|
183
256
|
}
|
|
184
257
|
|
|
@@ -188,10 +261,6 @@
|
|
|
188
261
|
margin : 0; // important for Safari => #1125
|
|
189
262
|
padding-left : 16px;
|
|
190
263
|
z-index : 1;
|
|
191
|
-
|
|
192
|
-
&:focus{ // todo: switch to .neo-focus
|
|
193
|
-
border-color: transparent;
|
|
194
|
-
}
|
|
195
264
|
}
|
|
196
265
|
|
|
197
266
|
.neo-textfield-label {
|
|
@@ -239,7 +308,7 @@
|
|
|
239
308
|
flex-grow : 1;
|
|
240
309
|
flex-shrink : 1;
|
|
241
310
|
margin : 0; // important for Safari => #1125
|
|
242
|
-
min-height :
|
|
311
|
+
min-height : v(textfield-input-height);
|
|
243
312
|
width : 30px;
|
|
244
313
|
}
|
|
245
314
|
}
|
|
@@ -254,7 +323,7 @@
|
|
|
254
323
|
|
|
255
324
|
.neo-textfield-input {
|
|
256
325
|
background-color: v(textfield-input-background-color);
|
|
257
|
-
border :
|
|
326
|
+
border : v(textfield-border-width) solid v(textfield-border-color);
|
|
258
327
|
border-radius : v(textfield-border-radius);
|
|
259
328
|
color : v(textfield-input-color);
|
|
260
329
|
font : v(textfield-input-font);
|
|
@@ -263,9 +332,8 @@
|
|
|
263
332
|
transition : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
|
|
264
333
|
width : 140px;
|
|
265
334
|
|
|
266
|
-
&:focus{
|
|
267
|
-
|
|
268
|
-
outline : none;
|
|
335
|
+
&:focus {
|
|
336
|
+
outline: none;
|
|
269
337
|
}
|
|
270
338
|
|
|
271
339
|
&::-webkit-input-placeholder {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'toast-background-color' : lightblue,
|
|
3
|
+
'toast-color' : #083741,
|
|
4
|
+
'toast-danger-background-color' : #e6adad,
|
|
5
|
+
'toast-danger-color' : #410808,
|
|
6
|
+
'toast-shadow-color' : rgba(255, 255, 255, 0.15),
|
|
7
|
+
'toast-success-background-color': #b7e6ad,
|
|
8
|
+
'toast-success-color' : #124108
|
|
9
|
+
));
|
|
10
|
+
|
|
11
|
+
@if $useCssVars == true {
|
|
12
|
+
:root .neo-theme-dark { // .neo-toast
|
|
13
|
+
--toast-background-color : #{neo(toast-background-color)};
|
|
14
|
+
--toast-color : #{neo(toast-color)};
|
|
15
|
+
--toast-shadow-color : #{neo(toast-shadow-color)};
|
|
16
|
+
--toast-danger-background-color : #{neo(toast-danger-background-color)};
|
|
17
|
+
--toast-danger-color : #{neo(toast-danger-color)};
|
|
18
|
+
--toast-success-background-color: #{neo(toast-success-background-color)};
|
|
19
|
+
--toast-success-color : #{neo(toast-success-color)};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
2
|
'textfield-border-color' : #424242,
|
|
3
3
|
'textfield-border-color-active' : #5d83a7,
|
|
4
|
+
'textfield-border-color-disabled' : #424242,
|
|
4
5
|
'textfield-border-color-hovered' : #424242,
|
|
5
6
|
'textfield-border-color-invalid' : brown,
|
|
6
7
|
'textfield-border-color-readonly' : #424242,
|
|
7
8
|
'textfield-border-radius' : 0,
|
|
8
9
|
'textfield-border-width' : 1px,
|
|
9
10
|
'textfield-input-background-color' : #2b2b2b,
|
|
11
|
+
'textfield-input-background-color-disabled': #2b2b2b,
|
|
10
12
|
'textfield-input-background-color-readonly': #222,
|
|
11
13
|
'textfield-input-color' : #ccc,
|
|
14
|
+
'textfield-input-color-disabled' : #ccc,
|
|
12
15
|
'textfield-input-color-readonly' : #ccc,
|
|
13
16
|
'textfield-input-font' : 400 13px/17px Arial,
|
|
14
17
|
'textfield-input-height' : 25px,
|
|
@@ -16,8 +19,10 @@ $neoMap: map-merge($neoMap, (
|
|
|
16
19
|
'textfield-input-placeholder-color' : #ccc,
|
|
17
20
|
'textfield-input-placeholder-opacity' : 0.6,
|
|
18
21
|
'textfield-label-color' : #bbb,
|
|
19
|
-
'textfield-label-color-
|
|
22
|
+
'textfield-label-color-disabled' : #bbb,
|
|
23
|
+
'textfield-label-color-readonly' : #bbb,
|
|
20
24
|
'textfield-label-top-margin' : 0 0 3px,
|
|
25
|
+
'textfield-opacity-disabled' : #{neo(neo-disabled-opacity)},
|
|
21
26
|
'textfield-opacity-readonly' : 1,
|
|
22
27
|
'textfield-outline-active' : none,
|
|
23
28
|
'textfield-outline-hovered' : none
|
|
@@ -27,14 +32,17 @@ $neoMap: map-merge($neoMap, (
|
|
|
27
32
|
:root .neo-theme-dark { // .neo-textfield
|
|
28
33
|
--textfield-border-color : #{neo(textfield-border-color)};
|
|
29
34
|
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
35
|
+
--textfield-border-color-disabled : #{neo(textfield-border-color-disabled)};
|
|
30
36
|
--textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
|
|
31
37
|
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
32
38
|
--textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
|
|
33
39
|
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
34
40
|
--textfield-border-width : #{neo(textfield-border-width)};
|
|
35
41
|
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
42
|
+
--textfield-input-background-color-disabled: #{neo(textfield-input-background-color-disabled)};
|
|
36
43
|
--textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
|
|
37
44
|
--textfield-input-color : #{neo(textfield-input-color)};
|
|
45
|
+
--textfield-input-color-disabled : #{neo(textfield-input-color-disabled)};
|
|
38
46
|
--textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
|
|
39
47
|
--textfield-input-font : #{neo(textfield-input-font)};
|
|
40
48
|
--textfield-input-height : #{neo(textfield-input-height)};
|
|
@@ -42,8 +50,10 @@ $neoMap: map-merge($neoMap, (
|
|
|
42
50
|
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
43
51
|
--textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
|
|
44
52
|
--textfield-label-color : #{neo(textfield-label-color)};
|
|
53
|
+
--textfield-label-color-disabled : #{neo(textfield-label-color-disabled)};
|
|
45
54
|
--textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
|
|
46
55
|
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
56
|
+
--textfield-opacity-disabled : #{neo(textfield-opacity-disabled)};
|
|
47
57
|
--textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
|
|
48
58
|
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
49
59
|
--textfield-outline-hovered : #{neo(textfield-outline-hovered)};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'toast-background-color' : lightblue,
|
|
3
|
+
'toast-color' : #083741,
|
|
4
|
+
'toast-danger-background-color' : #e6adad,
|
|
5
|
+
'toast-danger-color' : #410808,
|
|
6
|
+
'toast-shadow-color' : rgba(0, 0, 0, 0.15),
|
|
7
|
+
'toast-success-background-color': #b7e6ad,
|
|
8
|
+
'toast-success-color' : #124108
|
|
9
|
+
));
|
|
10
|
+
|
|
11
|
+
@if $useCssVars == true {
|
|
12
|
+
:root .neo-theme-light { // .neo-toast
|
|
13
|
+
--toast-background-color : #{neo(toast-background-color)};
|
|
14
|
+
--toast-color : #{neo(toast-color)};
|
|
15
|
+
--toast-shadow-color : #{neo(toast-shadow-color)};
|
|
16
|
+
--toast-danger-background-color : #{neo(toast-danger-background-color)};
|
|
17
|
+
--toast-danger-color : #{neo(toast-danger-color)};
|
|
18
|
+
--toast-success-background-color: #{neo(toast-success-background-color)};
|
|
19
|
+
--toast-success-color : #{neo(toast-success-color)};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
2
|
'textfield-border-color' : #ddd,
|
|
3
3
|
'textfield-border-color-active' : #1c60a0,
|
|
4
|
+
'textfield-border-color-disabled' : #ddd,
|
|
4
5
|
'textfield-border-color-hovered' : #ddd,
|
|
5
6
|
'textfield-border-color-invalid' : brown,
|
|
6
7
|
'textfield-border-color-readonly' : #ddd,
|
|
7
8
|
'textfield-border-radius' : 3px,
|
|
8
9
|
'textfield-border-width' : 1px,
|
|
9
10
|
'textfield-input-background-color' : #fff,
|
|
11
|
+
'textfield-input-background-color-disabled': #fff,
|
|
10
12
|
'textfield-input-background-color-readonly': #fbfbfb,
|
|
11
13
|
'textfield-input-color' : #000,
|
|
14
|
+
'textfield-input-color-disabled' : #000,
|
|
12
15
|
'textfield-input-color-readonly' : #000,
|
|
13
16
|
'textfield-input-font' : 400 13px/17px Arial,
|
|
14
17
|
'textfield-input-height' : 25px,
|
|
@@ -16,8 +19,10 @@ $neoMap: map-merge($neoMap, (
|
|
|
16
19
|
'textfield-input-placeholder-color' : #333,
|
|
17
20
|
'textfield-input-placeholder-opacity' : 0.6,
|
|
18
21
|
'textfield-label-color' : #666,
|
|
22
|
+
'textfield-label-color-disabled' : #666,
|
|
19
23
|
'textfield-label-color-readonly' : #666,
|
|
20
24
|
'textfield-label-top-margin' : 0 0 3px,
|
|
25
|
+
'textfield-opacity-disabled' : #{neo(neo-disabled-opacity)},
|
|
21
26
|
'textfield-opacity-readonly' : 1,
|
|
22
27
|
'textfield-outline-active' : none,
|
|
23
28
|
'textfield-outline-hovered' : none
|
|
@@ -27,14 +32,17 @@ $neoMap: map-merge($neoMap, (
|
|
|
27
32
|
:root .neo-theme-light { // .neo-textfield
|
|
28
33
|
--textfield-border-color : #{neo(textfield-border-color)};
|
|
29
34
|
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
35
|
+
--textfield-border-color-disabled : #{neo(textfield-border-color-disabled)};
|
|
30
36
|
--textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
|
|
31
37
|
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
32
38
|
--textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
|
|
33
39
|
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
34
40
|
--textfield-border-width : #{neo(textfield-border-width)};
|
|
35
41
|
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
42
|
+
--textfield-input-background-color-disabled: #{neo(textfield-input-background-color-disabled)};
|
|
36
43
|
--textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
|
|
37
44
|
--textfield-input-color : #{neo(textfield-input-color)};
|
|
45
|
+
--textfield-input-color-disabled : #{neo(textfield-input-color-disabled)};
|
|
38
46
|
--textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
|
|
39
47
|
--textfield-input-font : #{neo(textfield-input-font)};
|
|
40
48
|
--textfield-input-height : #{neo(textfield-input-height)};
|
|
@@ -42,8 +50,10 @@ $neoMap: map-merge($neoMap, (
|
|
|
42
50
|
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
43
51
|
--textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
|
|
44
52
|
--textfield-label-color : #{neo(textfield-label-color)};
|
|
53
|
+
--textfield-label-color-disabled : #{neo(textfield-label-color-disabled)};
|
|
45
54
|
--textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
|
|
46
55
|
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
56
|
+
--textfield-opacity-disabled : #{neo(textfield-opacity-disabled)};
|
|
47
57
|
--textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
|
|
48
58
|
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
49
59
|
--textfield-outline-hovered : #{neo(textfield-outline-hovered)};
|