diff --git a/HISTORY.md b/HISTORY.md index 9a0647c..4235f5d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,9 @@ # Release History +## 1.1.2 + +* Improved `:before` and `:after` calculation + ## 1.1.1 * Fixed `line-height` issue diff --git a/bower.json b/bower.json index f950534..cfddbdf 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "bootstrap4c-custom-switch", "description": "Bootstrap 4 Component - Custom switch", - "version": "1.1.1", + "version": "1.1.2", "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 67360c5..a9d73a7 100644 --- a/dist/css/component-custom-switch.css +++ b/dist/css/component-custom-switch.css @@ -3,7 +3,7 @@ * * * Bootstrap 4 Component - Custom switch - * Version: 1.1.1 + * Version: 1.1.2 * Copyright (c) 2017-18 Martin Haubek * * @@ -47,8 +47,8 @@ position: relative; display: block; content: ""; - width: 30px; - height: 30px; } + width: 29px; + height: 29px; } .custom-switch .custom-switch-input + .custom-switch-btn:after { left: 2px; border-radius: 50%; @@ -116,13 +116,13 @@ .custom-switch-sm .custom-switch-input + .custom-switch-btn { width: 60px; height: 31px; - padding: 3.26316px; + padding: 3px; 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; } + width: 23px; + height: 23px; } .custom-switch-sm .custom-switch-input + .custom-switch-btn:after { - left: 1px; } + left: 2px; } .custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after { left: 29px; } .custom-switch-sm .custom-switch-form-text { @@ -154,7 +154,7 @@ .custom-switch-xs .custom-switch-input + .custom-switch-btn { width: 48px; height: 24px; - padding: 2.52632px; + padding: 3px; 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; diff --git a/dist/css/component-custom-switch.min.css b/dist/css/component-custom-switch.min.css index face4eb..32b02ad 100644 --- a/dist/css/component-custom-switch.min.css +++ b/dist/css/component-custom-switch.min.css @@ -1 +1 @@ -.custom-switch{line-height:12px}.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{line-height:11px}.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{line-height:10px}.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 +.custom-switch{line-height:12px}.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:29px;height:29px}.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{line-height:11px}.custom-switch-sm .custom-switch-input+.custom-switch-btn{width:60px;height:31px;padding:3px;border-radius:62px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after,.custom-switch-sm .custom-switch-input+.custom-switch-btn:before{width:23px;height:23px}.custom-switch-sm .custom-switch-input+.custom-switch-btn:after{left:2px}.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{line-height:10px}.custom-switch-xs .custom-switch-input+.custom-switch-btn{width:48px;height:24px;padding:3px;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/package.json b/package.json index 9a0c808..d4746c3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bootstrap4c-custom-switch", "description": "Bootstrap 4 Component - Custom switch", - "version": "1.1.1", + "version": "1.1.2", "license": "MIT", "author": { "name": "Martin Haubek", diff --git a/src/scss/_component-custom-switch.scss b/src/scss/_component-custom-switch.scss index c04fb16..edf166a 100644 --- a/src/scss/_component-custom-switch.scss +++ b/src/scss/_component-custom-switch.scss @@ -25,7 +25,7 @@ width: ($switch-width + $switch-unit); height: ($switch-height + $switch-unit); margin: 0; - padding: (($switch-height / 9.5) + $switch-unit); + padding: ((round(($switch-height - (round($switch-height * .75))) / 2) - 1) + $switch-unit); background: $switch-unchecked-bg; border-radius: (($switch-height * 2) + $switch-unit); transition: all $switch-duration ease; @@ -34,11 +34,11 @@ position: relative; display: block; content: ""; - width: (($switch-height - 8) + $switch-unit); - height: (($switch-height - 8) + $switch-unit); + width: (round($switch-height * .75) + $switch-unit); + height: (round($switch-height * .75) + $switch-unit); } &:after { - left: 2px; + left: ((round(($switch-height - (round($switch-height * .75))) / 2) - 3) + $switch-unit); border-radius: 50%; background: white; transition: all $switch-duration ease; @@ -156,15 +156,15 @@ + .custom-switch-btn { width: ($switch-width-sm + $switch-unit); height: ($switch-height-sm + $switch-unit); - padding: (($switch-height-sm / 9.5) + $switch-unit); + padding: ((round(($switch-height-sm - (round($switch-height-sm * .75))) / 2) - 1) + $switch-unit); border-radius: (($switch-height-sm * 2) + $switch-unit); &:after, &:before { - width: (($switch-height-sm - 6) + $switch-unit); - height: (($switch-height-sm - 6) + $switch-unit); + width: (round($switch-height-sm * .75) + $switch-unit); + height: (round($switch-height-sm * .75) + $switch-unit); } &:after { - left: 1px; + left: ((round(($switch-height-sm - (round($switch-height-sm * .75))) / 2) - 2) + $switch-unit); } } &:checked + .custom-switch-btn { @@ -229,15 +229,15 @@ + .custom-switch-btn { width: ($switch-width-xs + $switch-unit); height: ($switch-height-xs + $switch-unit); - padding: (($switch-height-xs / 9.5) + $switch-unit); + padding: ((round(($switch-height-xs - (round($switch-height-xs * .75))) / 2)) + $switch-unit); border-radius: (($switch-height-xs * 2) + $switch-unit); &:after, &:before { - width: (($switch-height-xs - 6) + $switch-unit); - height: (($switch-height-xs - 6) + $switch-unit); + width: (round($switch-height-xs * .75) + $switch-unit); + height: (round($switch-height-xs * .75) + $switch-unit); } &:after { - left: 1px; + left: ((round(($switch-height-xs - (round($switch-height-xs * .75))) / 2) - 2) + $switch-unit); } } &:checked + .custom-switch-btn { diff --git a/src/scss/_component-variables.scss b/src/scss/_component-variables.scss index 524623c..4542612 100644 --- a/src/scss/_component-variables.scss +++ b/src/scss/_component-variables.scss @@ -7,7 +7,7 @@ $switch-width-status-sm: 88; $switch-width-status-xs: 76; $switch-height: 38; // The default Bootstrap btn height in px $switch-height-sm: 31; // The default Bootstrap small btn height in px -$switch-height-xs: 24; // The default Bootstrap extra small btn height in px +$switch-height-xs: 24; // Extra small btn height in px $switch-font-size: 12; $switch-font-size-sm: 11; $switch-font-size-xs: 10; diff --git a/src/scss/build.scss b/src/scss/build.scss index 84cb484..88f6e5c 100644 --- a/src/scss/build.scss +++ b/src/scss/build.scss @@ -3,7 +3,7 @@ * * * Bootstrap 4 Component - Custom switch - * Version: 1.1.1 + * Version: 1.1.2 * Copyright (c) 2017-18 Martin Haubek * *