neo.mjs 6.0.4 → 6.1.0
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/apps/ServiceWorker.mjs +2 -2
- package/examples/ServiceWorker.mjs +2 -2
- package/package.json +1 -1
- package/resources/scss/src/form/field/CheckBox.scss +12 -11
- package/resources/scss/src/form/field/Switch.scss +65 -54
- package/resources/scss/theme-dark/form/field/Switch.scss +13 -5
- package/resources/scss/theme-light/form/field/Switch.scss +13 -5
- package/src/DefaultConfig.mjs +2 -2
- package/src/form/field/Switch.mjs +0 -1
package/apps/ServiceWorker.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
.neo-checkboxfield {
|
|
2
|
+
.neo-checkbox-icon {
|
|
3
|
+
color : var(--checkboxfield-color);
|
|
4
|
+
cursor : pointer;
|
|
5
|
+
display : inline-block;
|
|
6
|
+
font-family: var(--checkboxfield-icon-font-family);
|
|
7
|
+
font-size : var(--checkboxfield-icon-font-size);
|
|
8
|
+
margin : var(--checkboxfield-icon-margin);
|
|
9
|
+
width : 20px;
|
|
10
|
+
}
|
|
11
|
+
|
|
2
12
|
.neo-checkbox-input {
|
|
3
13
|
margin: 0;
|
|
4
14
|
width: 0; // using display: none would break the keynav
|
|
@@ -14,19 +24,10 @@
|
|
|
14
24
|
}
|
|
15
25
|
}
|
|
16
26
|
|
|
17
|
-
.neo-checkbox-icon {
|
|
18
|
-
color : var(--checkboxfield-color);
|
|
19
|
-
cursor : pointer;
|
|
20
|
-
display : inline-block;
|
|
21
|
-
font-family: var(--checkboxfield-icon-font-family);
|
|
22
|
-
font-size : var(--checkboxfield-icon-font-size);
|
|
23
|
-
margin : var(--checkboxfield-icon-margin);
|
|
24
|
-
width : 20px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
27
|
.neo-checkbox-label {
|
|
28
|
+
align-items: center;
|
|
28
29
|
color : var(--textfield-label-color);
|
|
29
|
-
display :
|
|
30
|
+
display : flex;
|
|
30
31
|
user-select: none;
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -1,75 +1,86 @@
|
|
|
1
1
|
.neo-switchfield {
|
|
2
|
-
@keyframes switch-off-transform {
|
|
3
|
-
0% {transform: translate(100%) scaleX(1)}
|
|
4
|
-
25% {transform: translate(100%) scaleX(1.33)}
|
|
5
|
-
100% {transform: translate(0) scaleX(1)}
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@keyframes switch-on-transform {
|
|
9
|
-
0% {transform: translate(0) scaleX(1)}
|
|
10
|
-
25% {transform: translate(0) scaleX(1.33)}
|
|
11
|
-
100% {transform: translate(100%) scaleX(1)}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
2
|
.neo-switchfield-input {
|
|
15
|
-
background-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color : var(--switchfield-inactive-color);
|
|
20
|
-
display : inline-block;
|
|
21
|
-
font-size : 1.5em;
|
|
22
|
-
height : 1.5em;
|
|
3
|
+
background-color: var(--switchfield-color-off-idle);
|
|
4
|
+
border-radius : 999px;
|
|
5
|
+
height : var(--switchfield-height);
|
|
6
|
+
margin : 0;
|
|
23
7
|
position : relative;
|
|
24
|
-
|
|
25
|
-
vertical-align : middle;
|
|
26
|
-
width : 3em;
|
|
8
|
+
width : var(--switchfield-width);
|
|
27
9
|
|
|
28
10
|
-webkit-appearance : none;
|
|
29
11
|
-webkit-tap-highlight-color: transparent;
|
|
30
12
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
font-weight : 900;
|
|
36
|
-
left : 0.5em;
|
|
37
|
-
letter-spacing: 1em;
|
|
38
|
-
line-height : 1.5;
|
|
39
|
-
position : absolute;
|
|
40
|
-
top : 0.15em;
|
|
41
|
-
z-index : 1;
|
|
13
|
+
&:after,
|
|
14
|
+
&:before {
|
|
15
|
+
content : "";
|
|
16
|
+
position: absolute;
|
|
42
17
|
}
|
|
43
18
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
border : 0.125em solid transparent;
|
|
49
|
-
border-radius : 100%;
|
|
50
|
-
bottom : 0;
|
|
51
|
-
content : "";
|
|
19
|
+
&:before {
|
|
20
|
+
background-color: var(--switchfield-color-knob);
|
|
21
|
+
border-radius : 50%;
|
|
22
|
+
height : var(--switchfield-knobsize);
|
|
52
23
|
left : 0;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
24
|
+
top : 1.5px;
|
|
25
|
+
transition : transform 150ms ease-out;
|
|
26
|
+
width : var(--switchfield-knobsize);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:after {
|
|
30
|
+
border : 1px solid var(--switchfield-color-knob);
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
bottom : 7px;
|
|
33
|
+
height : 8px;
|
|
34
|
+
right : 7px;
|
|
35
|
+
width : 8px;
|
|
58
36
|
}
|
|
59
37
|
|
|
60
38
|
&:checked {
|
|
61
|
-
background-color: var(--switchfield-
|
|
62
|
-
color : var(--switchfield-inactive-color);
|
|
39
|
+
background-color: var(--switchfield-color-on-idle);
|
|
63
40
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
41
|
+
&:before {
|
|
42
|
+
transform: translateX(100%);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:after {
|
|
46
|
+
background-color: var(--switchfield-color-knob);
|
|
47
|
+
border : 0;
|
|
48
|
+
bottom : 8px;
|
|
49
|
+
left : 9px;
|
|
50
|
+
right : auto;
|
|
51
|
+
width : 1px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:hover {
|
|
55
|
+
background-color: var(--switchfield-color-on-hovered);
|
|
67
56
|
}
|
|
68
57
|
}
|
|
69
58
|
|
|
70
59
|
&:focus {
|
|
71
|
-
|
|
72
|
-
|
|
60
|
+
outline: var(--switchfield-borderwidth-focused) solid var(--switchfield-bordercolor-focused);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:hover {
|
|
64
|
+
background-color: var(--switchfield-color-off-hovered);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.neo-checkbox-value-label {
|
|
69
|
+
margin-left: 1em;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.neo-disabled {
|
|
74
|
+
.neo-switchfield,
|
|
75
|
+
&.neo-switchfield {
|
|
76
|
+
opacity: var(--switchfield-opacity-disabled);
|
|
77
|
+
|
|
78
|
+
.neo-switchfield-input {
|
|
79
|
+
background-color: var(--switchfield-color-off-disabled);
|
|
80
|
+
|
|
81
|
+
&:checked {
|
|
82
|
+
background-color: var(--switchfield-color-on-disabled);
|
|
83
|
+
}
|
|
73
84
|
}
|
|
74
85
|
}
|
|
75
86
|
}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
:root .neo-theme-dark { // .neo-switchfield
|
|
2
|
-
--switchfield-
|
|
3
|
-
--switchfield-
|
|
4
|
-
--switchfield-
|
|
5
|
-
--switchfield-
|
|
6
|
-
--switchfield-
|
|
2
|
+
--switchfield-bordercolor-focused: #57B2EF;
|
|
3
|
+
--switchfield-borderwidth-focused: 4px;
|
|
4
|
+
--switchfield-color-knob : #fff;
|
|
5
|
+
--switchfield-color-off-disabled : #BDBDBD;
|
|
6
|
+
--switchfield-color-off-hovered : #9E9E9E;
|
|
7
|
+
--switchfield-color-off-idle : #BDBDBD;
|
|
8
|
+
--switchfield-color-on-disabled : #005A96;
|
|
9
|
+
--switchfield-color-on-hovered : #004C7E;
|
|
10
|
+
--switchfield-color-on-idle : #005A96;
|
|
11
|
+
--switchfield-height : 24px;
|
|
12
|
+
--switchfield-knobsize : 20px;
|
|
13
|
+
--switchfield-opacity-disabled : .5;
|
|
14
|
+
--switchfield-width : 40px;
|
|
7
15
|
}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
:root .neo-theme-light { // .neo-switchfield
|
|
2
|
-
--switchfield-
|
|
3
|
-
--switchfield-
|
|
4
|
-
--switchfield-
|
|
5
|
-
--switchfield-
|
|
6
|
-
--switchfield-
|
|
2
|
+
--switchfield-bordercolor-focused: #57B2EF;
|
|
3
|
+
--switchfield-borderwidth-focused: 4px;
|
|
4
|
+
--switchfield-color-knob : #fff;
|
|
5
|
+
--switchfield-color-off-disabled : #BDBDBD;
|
|
6
|
+
--switchfield-color-off-hovered : #9E9E9E;
|
|
7
|
+
--switchfield-color-off-idle : #BDBDBD;
|
|
8
|
+
--switchfield-color-on-disabled : #005A96;
|
|
9
|
+
--switchfield-color-on-hovered : #004C7E;
|
|
10
|
+
--switchfield-color-on-idle : #005A96;
|
|
11
|
+
--switchfield-height : 24px;
|
|
12
|
+
--switchfield-knobsize : 20px;
|
|
13
|
+
--switchfield-opacity-disabled : .5;
|
|
14
|
+
--switchfield-width : 40px;
|
|
7
15
|
}
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -236,12 +236,12 @@ const DefaultConfig = {
|
|
|
236
236
|
useVdomWorker: true,
|
|
237
237
|
/**
|
|
238
238
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
239
|
-
* @default '6.0
|
|
239
|
+
* @default '6.1.0'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '6.0
|
|
244
|
+
version: '6.1.0'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|