@@ -150,26 +150,26 @@ import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
150
150
## Styling with CSS vars
151
151
152
152
The following CSS variables can be used to customize the toggle button when using ` default.css ` :
153
- ``` CSS
154
- var( --toggle-width, 3rem) ;
155
- var( --toggle-height, 1.25rem ) ;
156
- var( --toggle-border, 0.125rem ) solid ;
157
- var( --toggle-font-size, 0.75rem ) ;
158
- var( --toggle-duration, 150ms) ;
159
- var( --toggle-bg-on, #10b981 ) ;
160
- var( --toggle-bg-off, #e5e7eb ) ;
161
- var( --toggle-bg-on-disabled, #d1d5db ) ;
162
- var( --toggle-bg-off-disabled, #e5e7eb ) ;
163
- var( --toggle-border-on, #10b981 ) ;
164
- var( --toggle-border-off, #e5e7eb ) ;
165
- var( --toggle-border-on-disabled, #d1d5db ) ;
166
- var( --toggle-border-off-disabled, #e5e7eb ) ;
167
- var( --toggle-text-on, #ffffff ) ;
168
- var( --toggle-text-off, #374151 ) ;
169
- var( --toggle-text-on-disabled, #9ca3af ) ;
170
- var( --toggle-text-off-disabled, #9ca3af ) ;
171
- var( --toggle-handle-enabled, #ffffff ) ;
172
- var( --toggle-handle-disabled, #f3f4f6 ) ;
153
+ ``` css
154
+ --toggle-width: 3rem;
155
+ --toggle-height: 1.25rem;
156
+ --toggle-border: 0.125rem;
157
+ --toggle-font-size: 0.75rem;
158
+ --toggle-duration: 150ms;
159
+ --toggle-bg-on: #10b981 ;
160
+ --toggle-bg-off: #e5e7eb;
161
+ --toggle-bg-on-disabled: #d1d5db;
162
+ --toggle-bg-off-disabled: #e5e7eb;
163
+ --toggle-border-on: #10b981 ;
164
+ --toggle-border-off: #e5e7eb;
165
+ --toggle-border-on-disabled: #d1d5db;
166
+ --toggle-border-off-disabled: #e5e7eb;
167
+ --toggle-text-on: #ffffff;
168
+ --toggle-text-off: #374151 ;
169
+ --toggle-text-on-disabled: #9ca3af ;
170
+ --toggle-text-off-disabled: #9ca3af ;
171
+ --toggle-handle-enabled: #ffffff;
172
+ --toggle-handle-disabled: #f3f4f6;
173
173
```
174
174
175
175
You might override them globally:
0 commit comments