switch.css (2558B)
1 /* style switch 2 -----------------------------*/ 3 .rwmb-switch-label { 4 position: relative; 5 display: inline-block; 6 background-color: #ccc; 7 padding: 2px; 8 border-radius: 3px; 9 min-width: 40px; 10 height: 22px; 11 box-sizing: border-box; 12 } 13 14 .rwmb-switch.rwmb-switch { 15 display: none; 16 } 17 18 .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 19 background-color: #0073aa; 20 box-shadow: 0 0 1px #0073aa; 21 } 22 23 .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider:before { 24 left: calc(100% - 20px); 25 } 26 27 .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-off { 28 visibility: hidden; 29 display: none; 30 } 31 32 .rwmb-switch:not(:checked) + .rwmb-switch-status .rwmb-switch-on { 33 visibility: hidden; 34 display: none; 35 } 36 37 .rwmb-switch-slider { 38 position: absolute; 39 cursor: pointer; 40 top: 0; 41 left: 0; 42 right: 0; 43 bottom: 0; 44 z-index: 15; 45 -webkit-transition: .4s; 46 transition: .4s; 47 } 48 49 .rwmb-switch-slider:before { 50 position: absolute; 51 content: attr(title-before) ""; 52 height: 18px; 53 width: 18px; 54 left: 2px; 55 bottom: 2px; 56 z-index: 99; 57 background-color: white; 58 -webkit-transition: .4s; 59 transition: .4s; 60 border-radius: 2px; 61 } 62 63 .rwmb-switch-label--square .rwmb-switch-slider { 64 border-radius: 3px; 65 } 66 67 .rwmb-switch-label--rounded, 68 .rwmb-switch-label--rounded .rwmb-switch-slider { 69 border-radius: 34px; 70 } 71 72 .rwmb-switch-label--rounded .rwmb-switch-slider:before { 73 border-radius: 50%; 74 } 75 76 .rwmb-switch-on, 77 .rwmb-switch-off { 78 display: inline-block; 79 float: left; 80 margin: 0 4px; 81 color: #fff; 82 text-transform: uppercase; 83 font-size: 11px; 84 position: relative; 85 z-index: 20; 86 } 87 88 .rwmb-switch-on { 89 padding-right: 20px; 90 } 91 92 .rwmb-switch-off { 93 padding-left: 20px; 94 } 95 96 /* Admin color schemes */ 97 .admin-color-blue .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 98 background-color: #e1a948; 99 box-shadow: 0 0 1px #e1a948; 100 } 101 .admin-color-coffee .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 102 background-color: #c7a589; 103 box-shadow: 0 0 1px #c7a589; 104 } 105 .admin-color-ectoplasm .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 106 background-color: #a3b745; 107 box-shadow: 0 0 1px #a3b745; 108 } 109 .admin-color-midnight .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 110 background-color: #e14d43; 111 box-shadow: 0 0 1px #e14d43; 112 } 113 .admin-color-ocean .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 114 background-color: #9ebaa0; 115 box-shadow: 0 0 1px #9ebaa0; 116 } 117 .admin-color-sunrise .rwmb-switch:checked + .rwmb-switch-status .rwmb-switch-slider { 118 background-color: #dd823b; 119 box-shadow: 0 0 1px #dd823b; 120 }