@decidables/decidables-elements 0.5.6 → 0.6.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/CHANGELOG.md +22 -0
- package/lib/decidablesElements.esm.js +150 -201
- package/lib/decidablesElements.esm.js.map +1 -1
- package/lib/decidablesElements.esm.min.js +169 -204
- package/lib/decidablesElements.esm.min.js.map +1 -1
- package/lib/decidablesElements.umd.js +150 -201
- package/lib/decidablesElements.umd.js.map +1 -1
- package/lib/decidablesElements.umd.min.js +161 -196
- package/lib/decidablesElements.umd.min.js.map +1 -1
- package/package.json +4 -3
- package/src/button.js +14 -5
- package/src/decidables-element.js +4 -30
- package/src/slider.js +47 -145
- package/src/spinner.js +56 -15
- package/src/switch.js +11 -10
- package/src/toggle-option.js +19 -7
package/src/toggle-option.js
CHANGED
|
@@ -64,39 +64,46 @@ export default class DecidablesToggleOption extends DecidablesElement {
|
|
|
64
64
|
|
|
65
65
|
width: 1px;
|
|
66
66
|
height: 1px;
|
|
67
|
+
|
|
67
68
|
padding: 0;
|
|
68
69
|
margin: -1px;
|
|
70
|
+
|
|
69
71
|
overflow: hidden;
|
|
70
72
|
|
|
71
73
|
white-space: nowrap;
|
|
72
74
|
|
|
73
75
|
border: 0;
|
|
76
|
+
|
|
74
77
|
clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
input[type=radio] + label {
|
|
78
81
|
width: 100%;
|
|
82
|
+
|
|
79
83
|
padding: 0.375rem 0.75rem;
|
|
80
84
|
|
|
81
85
|
font-family: var(---font-family-base);
|
|
82
86
|
font-size: 1.125rem;
|
|
87
|
+
|
|
83
88
|
line-height: 1.5;
|
|
89
|
+
|
|
84
90
|
color: var(---color-text-inverse);
|
|
91
|
+
|
|
85
92
|
text-align: center;
|
|
86
93
|
|
|
87
94
|
cursor: pointer;
|
|
95
|
+
outline: none;
|
|
88
96
|
|
|
89
97
|
background-color: var(---color-element-enabled);
|
|
90
98
|
border: 0;
|
|
91
99
|
border-radius: 0;
|
|
92
|
-
outline: none;
|
|
93
|
-
|
|
94
100
|
box-shadow: var(---shadow-2);
|
|
95
101
|
}
|
|
96
102
|
|
|
97
103
|
input[type=radio]:checked + label {
|
|
98
|
-
background-color: var(---color-element-selected);
|
|
99
104
|
outline: none;
|
|
105
|
+
|
|
106
|
+
background-color: var(---color-element-selected);
|
|
100
107
|
box-shadow: var(---shadow-2);
|
|
101
108
|
}
|
|
102
109
|
|
|
@@ -104,6 +111,7 @@ export default class DecidablesToggleOption extends DecidablesElement {
|
|
|
104
111
|
z-index: 1;
|
|
105
112
|
|
|
106
113
|
outline: none;
|
|
114
|
+
|
|
107
115
|
box-shadow: var(---shadow-4);
|
|
108
116
|
}
|
|
109
117
|
|
|
@@ -111,6 +119,7 @@ export default class DecidablesToggleOption extends DecidablesElement {
|
|
|
111
119
|
z-index: 2;
|
|
112
120
|
|
|
113
121
|
outline: none;
|
|
122
|
+
|
|
114
123
|
box-shadow: var(---shadow-8);
|
|
115
124
|
}
|
|
116
125
|
|
|
@@ -124,25 +133,28 @@ export default class DecidablesToggleOption extends DecidablesElement {
|
|
|
124
133
|
border-bottom-left-radius: 0.25rem;
|
|
125
134
|
}
|
|
126
135
|
|
|
127
|
-
|
|
136
|
+
input[type=radio]:focus-visible + label {
|
|
128
137
|
z-index: 1;
|
|
129
138
|
|
|
130
139
|
outline: none;
|
|
140
|
+
|
|
131
141
|
box-shadow: var(---shadow-4);
|
|
132
142
|
}
|
|
133
143
|
|
|
134
|
-
|
|
144
|
+
input[type=radio]:focus-visible:checked + label {
|
|
135
145
|
z-index: 1;
|
|
136
146
|
|
|
137
|
-
background-color: var(---color-element-selected);
|
|
138
147
|
outline: none;
|
|
148
|
+
|
|
149
|
+
background-color: var(---color-element-selected);
|
|
139
150
|
box-shadow: var(---shadow-4);
|
|
140
151
|
}
|
|
141
152
|
|
|
142
|
-
|
|
153
|
+
input[type=radio]:focus-visible + label:active {
|
|
143
154
|
z-index: 2;
|
|
144
155
|
|
|
145
156
|
outline: none;
|
|
157
|
+
|
|
146
158
|
box-shadow: var(---shadow-8);
|
|
147
159
|
}
|
|
148
160
|
`,
|