API tools faq
paste
Sebuahhobi98

component-custom-switch.css

Sebuahhobi98
Jun 6th, 2020
348
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.38 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.  *
  3.  *
  4.  *
  5.  * Bootstrap 4 Component - Custom switch
  6.  * Version: 1.1.2
  7.  * Copyright (c) 2017-18 Martin Haubek
  8.  *
  9.  *
  10.  *
  11.  */
  12. .custom-switch {
  13.   line-height: 12px; }
  14.   .custom-switch .custom-switch-input {
  15.     position: absolute;
  16.     z-index: -1;
  17.     opacity: 0; }
  18.     .custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before,
  19.     .custom-switch .custom-switch-input *,
  20.     .custom-switch .custom-switch-input *:after,
  21.     .custom-switch .custom-switch-input *:before,
  22.     .custom-switch .custom-switch-input + .custom-switch-btn {
  23.       box-sizing: border-box; }
  24.       .custom-switch .custom-switch-input:selection, .custom-switch .custom-switch-input:after:selection, .custom-switch .custom-switch-input:before:selection,
  25.       .custom-switch .custom-switch-input *:selection,
  26.       .custom-switch .custom-switch-input *:after:selection,
  27.       .custom-switch .custom-switch-input *:before:selection,
  28.       .custom-switch .custom-switch-input + .custom-switch-btn:selection {
  29.         background: none; }
  30.     .custom-switch .custom-switch-input + .custom-switch-btn {
  31.       outline: 0;
  32.       display: inline-block;
  33.       position: relative;
  34.       -webkit-user-select: none;
  35.          -moz-user-select: none;
  36.           -ms-user-select: none;
  37.               user-select: none;
  38.       cursor: pointer;
  39.       width: 68px;
  40.       height: 38px;
  41.       margin: 0;
  42.       padding: 4px;
  43.       background: #adb5bd;
  44.       border-radius: 76px;
  45.       transition: all 150ms ease; }
  46.       .custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before {
  47.         position: relative;
  48.         display: block;
  49.         content: "";
  50.         width: 29px;
  51.         height: 29px; }
  52.       .custom-switch .custom-switch-input + .custom-switch-btn:after {
  53.         left: 2px;
  54.         border-radius: 50%;
  55.         background: white;
  56.         transition: all 150ms ease; }
  57.       .custom-switch .custom-switch-input + .custom-switch-btn:before {
  58.         display: none; }
  59.       .custom-switch .custom-switch-input + .custom-switch-btn.text-hide {
  60.         top: -.80rem; }
  61.     .custom-switch .custom-switch-input:checked + .custom-switch-btn {
  62.       background: #28a745; }
  63.       .custom-switch .custom-switch-input:checked + .custom-switch-btn:after {
  64.         left: 30px; }
  65.       .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-checked {
  66.         opacity: 1;
  67.         height: auto; }
  68.       .custom-switch .custom-switch-input:checked + .custom-switch-btn ~ .custom-switch-content-unchecked {
  69.         display: none;
  70.         opacity: 0;
  71.         height: 0; }
  72.     .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-checked {
  73.       display: none;
  74.       opacity: 0;
  75.       height: 0; }
  76.     .custom-switch .custom-switch-input:not(:checked) + .custom-switch-btn ~ .custom-switch-content-unchecked {
  77.       opacity: 1;
  78.       height: auto; }
  79.     .custom-switch .custom-switch-input[disabled] + .custom-switch-btn {
  80.       background: rgba(173, 181, 189, 0.6);
  81.       cursor: default; }
  82.     .custom-switch .custom-switch-input[disabled]:checked + .custom-switch-btn {
  83.       background: rgba(40, 167, 69, 0.4); }
  84.     .custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn {
  85.       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(56, 123, 189, 0.25); }
  86.     .custom-switch .custom-switch-input[required] ~ .custom-switch-btn {
  87.       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.125rem rgba(220, 53, 69, 0.5); }
  88.   .custom-switch .custom-switch-form-text {
  89.     display: inline-block;
  90.     height: 38px;
  91.     margin-left: .5rem;
  92.     line-height: 38px;
  93.     vertical-align: top; }
  94.   .custom-switch.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
  95.     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"); }
  96.   .custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
  97.     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"); }
  98.   .custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
  99.     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"); }
  100.   .custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
  101.     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"); }
  102.   .custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
  103.     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"); }
  104.   .custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
  105.     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"); }
  106.   .custom-switch.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
  107.     width: 96px;
  108.     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"); }
  109.   .custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
  110.     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"); }
  111.     .custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
  112.       left: 58px; }
  113.  
  114. .custom-switch-sm {
  115.   line-height: 11px; }
  116.   .custom-switch-sm .custom-switch-input + .custom-switch-btn {
  117.     width: 60px;
  118.     height: 31px;
  119.     padding: 3px;
  120.     border-radius: 62px; }
  121.     .custom-switch-sm .custom-switch-input + .custom-switch-btn:after, .custom-switch-sm .custom-switch-input + .custom-switch-btn:before {
  122.       width: 23px;
  123.       height: 23px; }
  124.     .custom-switch-sm .custom-switch-input + .custom-switch-btn:after {
  125.       left: 2px; }
  126.   .custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after {
  127.     left: 29px; }
  128.   .custom-switch-sm .custom-switch-form-text {
  129.     height: 31px;
  130.     margin-left: .5rem;
  131.     line-height: 31px; }
  132.   .custom-switch-sm.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
  133.     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"); }
  134.   .custom-switch-sm.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
  135.     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"); }
  136.   .custom-switch-sm.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
  137.     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"); }
  138.   .custom-switch-sm.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
  139.     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"); }
  140.   .custom-switch-sm.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
  141.     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"); }
  142.   .custom-switch-sm.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
  143.     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"); }
  144.   .custom-switch-sm.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
  145.     width: 88px;
  146.     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"); }
  147.   .custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
  148.     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"); }
  149.     .custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
  150.       left: 57px; }
  151.  
  152. .custom-switch-xs {
  153.   line-height: 10px; }
  154.   .custom-switch-xs .custom-switch-input + .custom-switch-btn {
  155.     width: 48px;
  156.     height: 24px;
  157.     padding: 3px;
  158.     border-radius: 48px; }
  159.     .custom-switch-xs .custom-switch-input + .custom-switch-btn:after, .custom-switch-xs .custom-switch-input + .custom-switch-btn:before {
  160.       width: 18px;
  161.       height: 18px; }
  162.     .custom-switch-xs .custom-switch-input + .custom-switch-btn:after {
  163.       left: 1px; }
  164.   .custom-switch-xs .custom-switch-input:checked + .custom-switch-btn:after {
  165.     left: 24px; }
  166.   .custom-switch-xs .custom-switch-form-text {
  167.     height: 24px;
  168.     margin-left: .5rem;
  169.     line-height: 24px; }
  170.   .custom-switch-xs.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
  171.     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"); }
  172.   .custom-switch-xs.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
  173.     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"); }
  174.   .custom-switch-xs.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
  175.     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"); }
  176.   .custom-switch-xs.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
  177.     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"); }
  178.   .custom-switch-xs.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
  179.     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"); }
  180.   .custom-switch-xs.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
  181.     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"); }
  182.   .custom-switch-xs.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
  183.     width: 76px;
  184.     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"); }
  185.   .custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
  186.     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"); }
  187.     .custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
  188.       left: 52px; }
  189.  
  190. .is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn,
  191. .was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn {
  192.   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem #dc3545; }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!