diff --git a/HISTORY.md b/HISTORY.md index c0abf59..cd229ae 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,11 @@ # Release History +## 1.1.0 + +* Fixed keyboard accessibility +* Added required styling +* Added validation state styling + ## 1.0.12 * Upgraded to Bootstrap 4.3.1 diff --git a/bower.json b/bower.json index 2cb5a0d..9325fa8 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bootstrap4c-custom-switch", "description": "Bootstrap 4 Component - Custom switch", - "version": "1.0.12", + "version": "1.1.0", "license": "MIT", "authors": [ { "name": "Martin Haubek", "email": "haubek@gmail.com", "homepage": "https://haubek.github.io" } diff --git a/dist/css/component-custom-switch.css b/dist/css/component-custom-switch.css index c379a31..e3d9269 100644 --- a/dist/css/component-custom-switch.css +++ b/dist/css/component-custom-switch.css @@ -3,14 +3,16 @@ * * * Bootstrap 4 Component - Custom switch - * Version: 1.0.12 + * Version: 1.1.0 * Copyright (c) 2017-18 Martin Haubek * * * */ .custom-switch .custom-switch-input { - display: none; } + position: absolute; + z-index: -1; + opacity: 0; } .custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before, .custom-switch .custom-switch-input *, .custom-switch .custom-switch-input *:after, @@ -38,7 +40,7 @@ padding: 4px; background: #adb5bd; border-radius: 76px; - transition: all 200ms ease; } + transition: all 150ms ease; } .custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before { position: relative; display: block; @@ -49,7 +51,7 @@ left: 2px; border-radius: 50%; background: white; - transition: all 200ms ease; } + transition: all 150ms ease; } .custom-switch .custom-switch-input + .custom-switch-btn:before { display: none; } .custom-switch .custom-switch-input + .custom-switch-btn.text-hide { @@ -77,8 +79,10 @@ cursor: default; } .custom-switch .custom-switch-input[disabled]:checked + .custom-switch-btn { background: rgba(40, 167, 69, 0.4); } - .custom-switch .custom-switch-input:not([disabled]):active ~ .custom-switch-btn, .custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn, .custom-switch .custom-switch-input:not([disabled]):hover ~ .custom-switch-btn { + .custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(56, 123, 189, 0.25); } + .custom-switch .custom-switch-input[required] ~ .custom-switch-btn { + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.125rem rgba(220, 53, 69, 0.5); } .custom-switch .custom-switch-form-text { display: inline-block; @@ -205,3 +209,7 @@ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); } .custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after { left: 52px; } + +.is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn, +.was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn { + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem #dc3545; } diff --git a/dist/css/component-custom-switch.min.css b/dist/css/component-custom-switch.min.css index 3f4c40a..ab3fa26 100644 --- a/dist/css/component-custom-switch.min.css +++ b/dist/css/component-custom-switch.min.css @@ -1 +1 @@ -.custom-switch .custom-switch-input{display:none}.custom-switch .custom-switch-input,.custom-switch .custom-switch-input *,.custom-switch .custom-switch-input :after,.custom-switch .custom-switch-input :before,.custom-switch .custom-switch-input+.custom-switch-btn,.custom-switch .custom-switch-input:after,.custom-switch .custom-switch-input:before{box-sizing:border-box}.custom-switch .custom-switch-input :after:selection,.custom-switch .custom-switch-input :before:selection,.custom-switch .custom-switch-input :selection,.custom-switch .custom-switch-input+.custom-switch-btn:selection,.custom-switch .custom-switch-input:after:selection,.custom-switch .custom-switch-input:before:selection,.custom-switch .custom-switch-input:selection{background:0 0}.custom-switch .custom-switch-input+.custom-switch-btn{outline:0;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:68px;height:38px;margin:0;padding:4px;background:#adb5bd;border-radius:76px;transition:all .2s ease}.custom-switch .custom-switch-input+.custom-switch-btn:after,.custom-switch .custom-switch-input+.custom-switch-btn:before{position:relative;display:block;content:"";width:30px;height:30px}.custom-switch .custom-switch-input+.custom-switch-btn:after{left:2px;border-radius:50%;background:#fff;transition:all .2s ease}.custom-switch .custom-switch-input+.custom-switch-btn:before{display:none}.custom-switch .custom-switch-input+.custom-switch-btn.text-hide{top:-.8rem}.custom-switch .custom-switch-input:checked+.custom-switch-btn{background:#28a745}.custom-switch .custom-switch-input:checked+.custom-switch-btn:after{left:30px}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-checked{opacity:1;height:auto}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-unchecked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-checked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-unchecked{opacity:1;height:auto}.custom-switch .custom-switch-input[disabled]+.custom-switch-btn{background:rgba(173,181,189,.6);cursor:default}.custom-switch .custom-switch-input[disabled]:checked+.custom-switch-btn{background:rgba(40,167,69,.4)}.custom-switch .custom-switch-input:not([disabled]):active~.custom-switch-btn,.custom-switch .custom-switch-input:not([disabled]):focus~.custom-switch-btn,.custom-switch .custom-switch-input:not([disabled]):hover~.custom-switch-btn{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 .25rem rgba(56,123,189,.25)}.custom-switch .custom-switch-form-text{display:inline-block;height:38px;margin-left:.5rem;line-height:38px;vertical-align:top}.custom-switch.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='42.5' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:96px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:58px}.custom-switch-sm .custom-switch-input+.custom-switch-btn{width:60px;height:31px;padding:3.26316px;border-radius:62px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after,.custom-switch-sm .custom-switch-input+.custom-switch-btn:before{width:25px;height:25px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after{left:1px}.custom-switch-sm .custom-switch-input:checked+.custom-switch-btn:after{left:29px}.custom-switch-sm .custom-switch-form-text{height:31px;margin-left:.5rem;line-height:31px}.custom-switch-sm.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='37.5' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='16' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:88px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:57px}.custom-switch-xs .custom-switch-input+.custom-switch-btn{width:48px;height:24px;padding:2.52632px;border-radius:48px}.custom-switch-xs .custom-switch-input+.custom-switch-btn:after,.custom-switch-xs .custom-switch-input+.custom-switch-btn:before{width:18px;height:18px}.custom-switch-xs .custom-switch-input+.custom-switch-btn:after{left:1px}.custom-switch-xs .custom-switch-input:checked+.custom-switch-btn:after{left:24px}.custom-switch-xs .custom-switch-form-text{height:24px;margin-left:.5rem;line-height:24px}.custom-switch-xs.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='27.42857' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='12.8' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:76px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:52px} \ No newline at end of file +.custom-switch .custom-switch-input{position:absolute;z-index:-1;opacity:0}.custom-switch .custom-switch-input,.custom-switch .custom-switch-input *,.custom-switch .custom-switch-input :after,.custom-switch .custom-switch-input :before,.custom-switch .custom-switch-input+.custom-switch-btn,.custom-switch .custom-switch-input:after,.custom-switch .custom-switch-input:before{box-sizing:border-box}.custom-switch .custom-switch-input :after:selection,.custom-switch .custom-switch-input :before:selection,.custom-switch .custom-switch-input :selection,.custom-switch .custom-switch-input+.custom-switch-btn:selection,.custom-switch .custom-switch-input:after:selection,.custom-switch .custom-switch-input:before:selection,.custom-switch .custom-switch-input:selection{background:0 0}.custom-switch .custom-switch-input+.custom-switch-btn{outline:0;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;width:68px;height:38px;margin:0;padding:4px;background:#adb5bd;border-radius:76px;transition:all 150ms ease}.custom-switch .custom-switch-input+.custom-switch-btn:after,.custom-switch .custom-switch-input+.custom-switch-btn:before{position:relative;display:block;content:"";width:30px;height:30px}.custom-switch .custom-switch-input+.custom-switch-btn:after{left:2px;border-radius:50%;background:#fff;transition:all 150ms ease}.custom-switch .custom-switch-input+.custom-switch-btn:before{display:none}.custom-switch .custom-switch-input+.custom-switch-btn.text-hide{top:-.8rem}.custom-switch .custom-switch-input:checked+.custom-switch-btn{background:#28a745}.custom-switch .custom-switch-input:checked+.custom-switch-btn:after{left:30px}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-checked{opacity:1;height:auto}.custom-switch .custom-switch-input:checked+.custom-switch-btn~.custom-switch-content-unchecked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-checked{display:none;opacity:0;height:0}.custom-switch .custom-switch-input:not(:checked)+.custom-switch-btn~.custom-switch-content-unchecked{opacity:1;height:auto}.custom-switch .custom-switch-input[disabled]+.custom-switch-btn{background:rgba(173,181,189,.6);cursor:default}.custom-switch .custom-switch-input[disabled]:checked+.custom-switch-btn{background:rgba(40,167,69,.4)}.custom-switch .custom-switch-input:not([disabled]):focus~.custom-switch-btn{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 .25rem rgba(56,123,189,.25)}.custom-switch .custom-switch-input[required]~.custom-switch-btn{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 .125rem rgba(220,53,69,.5)}.custom-switch .custom-switch-form-text{display:inline-block;height:38px;margin-left:.5rem;line-height:38px;vertical-align:top}.custom-switch.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='42.5' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:96px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:58px}.custom-switch-sm .custom-switch-input+.custom-switch-btn{width:60px;height:31px;padding:3.26316px;border-radius:62px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after,.custom-switch-sm .custom-switch-input+.custom-switch-btn:before{width:25px;height:25px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after{left:1px}.custom-switch-sm .custom-switch-input:checked+.custom-switch-btn:after{left:29px}.custom-switch-sm .custom-switch-form-text{height:31px;margin-left:.5rem;line-height:31px}.custom-switch-sm.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='37.5' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='16' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:88px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:57px}.custom-switch-xs .custom-switch-input+.custom-switch-btn{width:48px;height:24px;padding:2.52632px;border-radius:48px}.custom-switch-xs .custom-switch-input+.custom-switch-btn:after,.custom-switch-xs .custom-switch-input+.custom-switch-btn:before{width:18px;height:18px}.custom-switch-xs .custom-switch-input+.custom-switch-btn:after{left:1px}.custom-switch-xs .custom-switch-input:checked+.custom-switch-btn:after{left:24px}.custom-switch-xs .custom-switch-form-text{height:24px;margin-left:.5rem;line-height:24px}.custom-switch-xs.custom-switch-label-io .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='27.42857' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-io .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='12.8' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-onoff .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-onoff .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-yesno .custom-switch-input+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-yesno .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input+.custom-switch-btn{width:76px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E")}.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked+.custom-switch-btn:after{left:52px}.is-invalid .custom-switch .custom-switch-input~.custom-switch-btn,.was-validated .custom-switch:invalid .custom-switch-input~.custom-switch-btn{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 .25rem #dc3545} \ No newline at end of file diff --git a/example.html b/example.html index 76852cc..a26600f 100644 --- a/example.html +++ b/example.html @@ -12,44 +12,58 @@
-
+
+
-
+ +
+
-
+ +
+
-
+ +
+
-
+ +
+
-
+ +

I'm sm

+
-
+ +

I'm xs

+
-
+ +
@@ -59,25 +73,49 @@ I'm unchecked (click me!)
+
-
- + +
+
-
- +

I'm required

+ +
+ +
+
-

I'm disabled

+
+ + +
+

I'm disabled

+
+
-
I'm a form label:
-
- - +
I'm a <div> form label:
+
+ +
+
+ Validation +
+
+
+ + +
+
+
+

I'm invalid

+
diff --git a/package.json b/package.json index e9411f9..fd391d2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bootstrap4c-custom-switch", "description": "Bootstrap 4 Component - Custom switch", - "version": "1.0.12", + "version": "1.1.0", "license": "MIT", "author": { "name": "Martin Haubek", diff --git a/src/scss/_component-custom-switch.scss b/src/scss/_component-custom-switch.scss index 88b0f9d..459723f 100644 --- a/src/scss/_component-custom-switch.scss +++ b/src/scss/_component-custom-switch.scss @@ -1,6 +1,8 @@ .custom-switch { .custom-switch-input { - display: none; + position: absolute; + z-index: -1; + opacity: 0; &, &:after, &:before, @@ -83,14 +85,17 @@ } } &:not([disabled]) { - &:active, - &:focus, - &:hover { + &:focus { ~ .custom-switch-btn { box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .25rem rgba(56,123,189,.25); } } } + &[required] { + ~ .custom-switch-btn { + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .125rem rgba($switch-required-color,.5); + } + } } .custom-switch-form-text { display: inline-block; @@ -288,3 +293,10 @@ } } } + +// Validation + +.is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn, +.was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn { + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .25rem rgba($switch-invalid-color,1); +} diff --git a/src/scss/_component-variables.scss b/src/scss/_component-variables.scss index 99ace76..524623c 100644 --- a/src/scss/_component-variables.scss +++ b/src/scss/_component-variables.scss @@ -12,7 +12,9 @@ $switch-font-size: 12; $switch-font-size-sm: 11; $switch-font-size-xs: 10; $switch-font-family: $font-family-sans-serif; -$switch-duration: 200ms; +$switch-duration: 150ms; +$switch-required-color: $danger; +$switch-invalid-color: $form-feedback-invalid-color; $switch-checked-color: $white; $switch-checked-bg: $green; diff --git a/src/scss/build.scss b/src/scss/build.scss index e21469b..948a948 100644 --- a/src/scss/build.scss +++ b/src/scss/build.scss @@ -3,7 +3,7 @@ * * * Bootstrap 4 Component - Custom switch - * Version: 1.0.12 + * Version: 1.1.0 * Copyright (c) 2017-18 Martin Haubek * *