bootstrap-switch.css (6352B)
1 /** 2 * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. 3 * 4 * @version v3.3.4 5 * @homepage https://bttstrp.github.io/bootstrap-switch 6 * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) 7 * @license Apache-2.0 8 */ 9 10 .bootstrap-switch { 11 display: inline-block; 12 direction: ltr; 13 cursor: pointer; 14 border-radius: 4px; 15 border: 1px solid; 16 border-color: #ccc; 17 position: relative; 18 text-align: left; 19 overflow: hidden; 20 line-height: 8px; 21 z-index: 0; 22 -webkit-user-select: none; 23 -moz-user-select: none; 24 -ms-user-select: none; 25 user-select: none; 26 vertical-align: middle; 27 -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 28 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 29 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 30 } 31 .bootstrap-switch .bootstrap-switch-container { 32 display: inline-block; 33 top: 0; 34 border-radius: 4px; 35 -webkit-transform: translate3d(0, 0, 0); 36 transform: translate3d(0, 0, 0); 37 } 38 .bootstrap-switch .bootstrap-switch-handle-on, 39 .bootstrap-switch .bootstrap-switch-handle-off, 40 .bootstrap-switch .bootstrap-switch-label { 41 -webkit-box-sizing: border-box; 42 -moz-box-sizing: border-box; 43 box-sizing: border-box; 44 cursor: pointer; 45 display: table-cell; 46 vertical-align: middle; 47 padding: 6px 12px; 48 font-size: 14px; 49 line-height: 20px; 50 } 51 .bootstrap-switch .bootstrap-switch-handle-on, 52 .bootstrap-switch .bootstrap-switch-handle-off { 53 text-align: center; 54 z-index: 1; 55 } 56 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, 57 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { 58 color: #fff; 59 background: #337ab7; 60 } 61 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, 62 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { 63 color: #fff; 64 background: #5bc0de; 65 } 66 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, 67 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { 68 color: #fff; 69 background: #5cb85c; 70 } 71 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, 72 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { 73 background: #f0ad4e; 74 color: #fff; 75 } 76 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, 77 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { 78 color: #fff; 79 background: #d9534f; 80 } 81 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, 82 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { 83 color: #000; 84 background: #eeeeee; 85 } 86 .bootstrap-switch .bootstrap-switch-label { 87 text-align: center; 88 margin-top: -1px; 89 margin-bottom: -1px; 90 z-index: 100; 91 color: #333; 92 background: #fff; 93 } 94 .bootstrap-switch span::before { 95 content: "\200b"; 96 } 97 .bootstrap-switch .bootstrap-switch-handle-on { 98 border-bottom-left-radius: 3px; 99 border-top-left-radius: 3px; 100 } 101 .bootstrap-switch .bootstrap-switch-handle-off { 102 border-bottom-right-radius: 3px; 103 border-top-right-radius: 3px; 104 } 105 .bootstrap-switch input[type='radio'], 106 .bootstrap-switch input[type='checkbox'] { 107 position: absolute !important; 108 top: 0; 109 left: 0; 110 margin: 0; 111 z-index: -1; 112 opacity: 0; 113 filter: alpha(opacity=0); 114 visibility: hidden; 115 } 116 .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, 117 .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, 118 .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { 119 padding: 1px 5px; 120 font-size: 12px; 121 line-height: 1.5; 122 } 123 .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, 124 .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, 125 .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { 126 padding: 5px 10px; 127 font-size: 12px; 128 line-height: 1.5; 129 } 130 .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, 131 .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, 132 .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { 133 padding: 6px 16px; 134 font-size: 18px; 135 line-height: 1.3333333; 136 } 137 .bootstrap-switch.bootstrap-switch-disabled, 138 .bootstrap-switch.bootstrap-switch-readonly, 139 .bootstrap-switch.bootstrap-switch-indeterminate { 140 cursor: default !important; 141 } 142 .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, 143 .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, 144 .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, 145 .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, 146 .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, 147 .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, 148 .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, 149 .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, 150 .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { 151 opacity: 0.5; 152 filter: alpha(opacity=50); 153 cursor: default !important; 154 } 155 .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { 156 -webkit-transition: margin-left 0.5s; 157 -o-transition: margin-left 0.5s; 158 transition: margin-left 0.5s; 159 } 160 .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { 161 border-bottom-left-radius: 0; 162 border-top-left-radius: 0; 163 border-bottom-right-radius: 3px; 164 border-top-right-radius: 3px; 165 } 166 .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { 167 border-bottom-right-radius: 0; 168 border-top-right-radius: 0; 169 border-bottom-left-radius: 3px; 170 border-top-left-radius: 3px; 171 } 172 .bootstrap-switch.bootstrap-switch-focused { 173 border-color: #66afe9; 174 outline: 0; 175 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 176 box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 177 } 178 .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, 179 .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { 180 border-bottom-right-radius: 3px; 181 border-top-right-radius: 3px; 182 } 183 .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, 184 .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { 185 border-bottom-left-radius: 3px; 186 border-top-left-radius: 3px; 187 }