.switch { font-size: 1rem; position: relative; box-shadow: none; height: auto; background: inherit; } .switch input { position: absolute; height: 1px; width: 1px; background: 0 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; padding: 0 } .switch input + label { position: relative; min-width: calc(calc(2.375rem * .8) * 2); border-radius: calc(2.375rem * .8); height: calc(2.375rem * .8); line-height: calc(2.375rem * .8); display: inline-block; cursor: pointer; outline: 0; user-select: none; vertical-align: middle; text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem) } .switch input + label::after, .switch input + label::before { content: ''; position: absolute; top: 0; left: 0; width: calc(calc(2.375rem * .8) * 2); bottom: 0; display: block } .switch input + label::before { right: 0; background-color: #dee2e6; border-radius: calc(2.375rem * .8); transition: .2s all } .switch input + label::after { top: 2px; left: 2px; width: calc(calc(2.375rem * .8) - calc(2px * 2)); height: calc(calc(2.375rem * .8) - calc(2px * 2)); border-radius: 50%; background-color: #fff; transition: .2s all } .switch input:checked + label::before { background-color: #5f82a9 } .switch input:checked + label::after { margin-left: calc(2.375rem * .8) } .switch input:focus + label::before { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 136, 221, .25) } .switch input:disabled + label { color: #868e96; cursor: not-allowed } .switch input:disabled + label::before { background-color: #e9ecef } .switch.switch-sm { font-size: .875rem } .switch.switch-sm input + label { min-width: calc(calc(1.9375rem * .8) * 2); height: calc(1.9375rem * .8); line-height: calc(1.9375rem * .8); text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem) } .switch.switch-sm input + label::before { width: calc(calc(1.9375rem * .8) * 2) } .switch.switch-sm input + label::after { width: calc(calc(1.9375rem * .8) - calc(2px * 2)); height: calc(calc(1.9375rem * .8) - calc(2px * 2)) } .switch.switch-sm input:checked + label::after { margin-left: calc(1.9375rem * .8) } .switch.switch-lg { font-size: 1.25rem } .switch.switch-lg input + label { min-width: calc(calc(3rem * .8) * 2); height: calc(3rem * .8); line-height: calc(3rem * .8); text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem) } .switch.switch-lg input + label::before { width: calc(calc(3rem * .8) * 2) } .switch.switch-lg input + label::after { width: calc(calc(3rem * .8) - calc(2px * 2)); height: calc(calc(3rem * .8) - calc(2px * 2)) } .switch.switch-lg input:checked + label::after { margin-left: calc(3rem * .8) } .switch + .switch { margin-left: 1rem } .dropdown-menu { margin-top: .75rem }
Name | Type | Size | Permission | Actions |
---|---|---|---|---|
alert.css | File | 1.8 KB | 0644 |
|
alert.min.css | File | 1.36 KB | 0644 |
|
bootstrap-select.min.css | File | 10.5 KB | 0644 |
|
bootstrap.min.css | File | 154.66 KB | 0644 |
|
bootstrap.rtl.min.css | File | 134.93 KB | 0644 |
|
font-awesome.css | File | 37.64 KB | 0644 |
|
font-awesome.min.css | File | 30.05 KB | 0644 |
|
navbar.css | File | 35.86 KB | 0644 |
|
navbar.min.css | File | 29.49 KB | 0644 |
|
notice.css | File | 936 B | 0644 |
|
notice.min.css | File | 750 B | 0644 |
|
rtl.css | File | 707 B | 0644 |
|
rtl.min.css | File | 572 B | 0644 |
|
settings.css | File | 9.01 KB | 0644 |
|
settings.min.css | File | 6.73 KB | 0644 |
|
switchery.css | File | 2.89 KB | 0644 |
|
switchery.min.css | File | 2.27 KB | 0644 |
|