github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/checkbox.less (about) 1 /*! 2 * # Semantic UI - Checkbox 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 /******************************* 13 Theme 14 *******************************/ 15 16 @type : 'module'; 17 @element : 'checkbox'; 18 19 @import (multiple) '../../theme.config'; 20 21 /******************************* 22 Checkbox 23 *******************************/ 24 25 26 /*-------------- 27 Content 28 ---------------*/ 29 30 .ui.checkbox { 31 position: relative; 32 display: inline-block; 33 34 min-height: @checkboxSize; 35 36 font-size: 1rem; 37 line-height: @checkboxLineHeight; 38 min-width: @checkboxSize; 39 backface-visibility: hidden; 40 41 outline: none; 42 vertical-align: middle; 43 } 44 .ui.checkbox input[type="checkbox"], 45 .ui.checkbox input[type="radio"] { 46 position: absolute; 47 top: 0px; 48 left: 0px; 49 opacity: 0 !important; 50 outline: none; 51 z-index: -1; 52 } 53 54 55 /*-------------- 56 Box 57 ---------------*/ 58 59 60 .ui.checkbox .box, 61 .ui.checkbox label { 62 display: block; 63 cursor: pointer; 64 padding-left: @labelPadding; 65 outline: none; 66 } 67 .ui.checkbox label { 68 font-size: @fontSize; 69 } 70 71 .ui.checkbox .box:before, 72 .ui.checkbox label:before { 73 position: absolute; 74 75 line-height: 1; 76 width: @checkboxSize; 77 height: @checkboxSize; 78 top: 0em; 79 left: 0em; 80 content: ''; 81 82 background: @checkboxBackground; 83 border-radius: @checkboxBorderRadius; 84 85 transition: @checkboxTransition; 86 border: @checkboxBorder; 87 } 88 89 /*-------------- 90 Checkmark 91 ---------------*/ 92 93 .ui.checkbox .box:after, 94 .ui.checkbox label:after { 95 position: absolute; 96 top: @checkboxCheckTop; 97 left: @checkboxCheckLeft; 98 line-height: @checkboxSize; 99 width: @checkboxSize; 100 height: @checkboxSize; 101 text-align: center; 102 103 opacity: 0; 104 color: @checkboxColor; 105 transition: all 0.1s ease; 106 } 107 108 /*-------------- 109 Label 110 ---------------*/ 111 112 /* Inside */ 113 .ui.checkbox label, 114 .ui.checkbox + label { 115 cursor: pointer; 116 color: @labelColor; 117 transition: color 0.2s ease; 118 user-select: none; 119 } 120 121 /* Outside */ 122 .ui.checkbox + label { 123 vertical-align: middle; 124 } 125 126 127 /******************************* 128 States 129 *******************************/ 130 131 132 /*-------------- 133 Hover 134 ---------------*/ 135 136 .ui.checkbox .box:hover::before, 137 .ui.checkbox label:hover::before { 138 background: @checkboxHoverBackground; 139 border: @checkboxHoverBorder; 140 } 141 .ui.checkbox label:hover, 142 .ui.checkbox + label:hover { 143 color: @labelHoverColor; 144 } 145 146 /*-------------- 147 Down 148 ---------------*/ 149 150 .ui.checkbox .box:active::before, 151 .ui.checkbox label:active::before { 152 background: @checkboxSelectedBackground; 153 border: 1px solid @checkboxSelectedBorder; 154 } 155 .ui.checkbox input[type="checkbox"]:active ~ label, 156 .ui.checkbox input[type="radio"]:active ~ label { 157 color: @labelSelectedColor; 158 } 159 160 /*-------------- 161 Focus 162 ---------------*/ 163 164 .ui.checkbox input[type="checkbox"]:focus ~ .box:before, 165 .ui.checkbox input[type="checkbox"]:focus ~ label:before, 166 .ui.checkbox input[type="radio"]:focus ~ .box:before, 167 .ui.checkbox input[type="radio"]:focus ~ label:before { 168 background: @checkboxSelectedBackground; 169 border: 1px solid @checkboxSelectedBorder; 170 } 171 .ui.checkbox input[type="checkbox"]:focus ~ label, 172 .ui.checkbox input[type="radio"]:focus ~ label { 173 color: @labelSelectedColor; 174 } 175 176 177 /*-------------- 178 Active 179 ---------------*/ 180 181 .ui.checkbox input[type="checkbox"]:checked ~ .box:after, 182 .ui.checkbox input[type="checkbox"]:checked ~ label:after, 183 .ui.checkbox input[type="radio"]:checked ~ .box:after, 184 .ui.checkbox input[type="radio"]:checked ~ label:after { 185 opacity: 1; 186 } 187 188 /*-------------- 189 Read-Only 190 ---------------*/ 191 192 .ui.read-only.checkbox, 193 .ui.read-only.checkbox label { 194 cursor: default; 195 } 196 197 198 /*-------------- 199 Disabled 200 ---------------*/ 201 202 .ui.disabled.checkbox .box:after, 203 .ui.disabled.checkbox label, 204 .ui.checkbox input[type="checkbox"][disabled] ~ .box:after, 205 .ui.checkbox input[type="checkbox"][disabled] ~ label, 206 .ui.checkbox input[type="radio"][disabled] ~ .box:after, 207 .ui.checkbox input[type="radio"][disabled] ~ label { 208 cursor: default; 209 opacity: @disabledCheckboxOpacity; 210 color: @disabledCheckboxLabelColor; 211 } 212 213 214 /******************************* 215 Types 216 *******************************/ 217 218 219 /*-------------- 220 Radio 221 ---------------*/ 222 223 .ui.radio.checkbox { 224 min-height: @checkboxRadioSize; 225 } 226 227 /* Box */ 228 .ui.radio.checkbox .box:before, 229 .ui.radio.checkbox label:before { 230 width: @checkboxRadioSize; 231 height: @checkboxRadioSize; 232 border-radius: @circularRadius; 233 top: @checkboxRadioTop; 234 left: @checkboxRadioLeft; 235 transform: none; 236 } 237 238 /* Circle */ 239 .ui.radio.checkbox .box:after, 240 .ui.radio.checkbox label:after { 241 border: none; 242 width: @checkboxRadioSize; 243 height: @checkboxRadioSize; 244 line-height: @checkboxRadioSize; 245 top: @checkboxRadioTop; 246 left: @checkboxRadioLeft; 247 font-size: @checkboxRadioCircleSize; 248 } 249 /* Radio Checkbox */ 250 .ui.radio.checkbox .box:after, 251 .ui.radio.checkbox label:after { 252 width: @checkboxRadioSize; 253 height: @checkboxRadioSize; 254 border-radius: @checkboxBulletRadius; 255 transform: scale(@checkboxBulletScale); 256 background-color: @checkboxBulletColor; 257 } 258 259 260 /*-------------- 261 Slider 262 ---------------*/ 263 264 .ui.slider.checkbox { 265 cursor: pointer; 266 min-height: @sliderHeight; 267 } 268 269 .ui.slider.checkbox .box, 270 .ui.slider.checkbox label { 271 padding-left: @sliderLabelDistance; 272 line-height: @sliderLabelLineHeight; 273 color: @sliderOffLabelColor; 274 } 275 276 /* Line */ 277 .ui.slider.checkbox .box:before, 278 .ui.slider.checkbox label:before { 279 cursor: pointer; 280 display: block; 281 282 position: absolute; 283 content: ''; 284 top: @sliderLineVerticalOffset; 285 left: 0em; 286 z-index: 1; 287 border: none !important; 288 289 background-color: @sliderLineColor; 290 width: @sliderLineWidth; 291 height: @sliderLineHeight; 292 293 transform: none; 294 border-radius: @sliderLineRadius; 295 transition: 296 background 0.3s ease 297 ; 298 } 299 300 /* Handle */ 301 .ui.slider.checkbox .box:after, 302 .ui.slider.checkbox label:after { 303 background: @handleBackground; 304 position: absolute; 305 content: ''; 306 opacity: 1; 307 z-index: 2; 308 309 border: none; 310 box-shadow: @handleBoxShadow; 311 width: @sliderHandleSize; 312 height: @sliderHandleSize; 313 top: @sliderHandleOffset; 314 left: 0em; 315 transform: none; 316 317 border-radius: @circularRadius; 318 transition: 319 left 0.3s ease 0s 320 ; 321 } 322 323 /* Focus */ 324 .ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before, 325 .ui.slider.checkbox input[type="checkbox"]:focus ~ label:before, 326 .ui.slider.checkbox input[type="radio"]:focus ~ .box:before, 327 .ui.slider.checkbox input[type="radio"]:focus ~ label:before { 328 background-color: @toggleFocusColor; 329 border: none; 330 } 331 332 /* Hover */ 333 .ui.slider.checkbox .box:hover, 334 .ui.slider.checkbox label:hover { 335 color: @sliderHoverLabelColor; 336 } 337 .ui.slider.checkbox .box:hover::before, 338 .ui.slider.checkbox label:hover::before { 339 background: @sliderHoverLaneBackground; 340 } 341 342 /* Active */ 343 .ui.slider.checkbox input[type="checkbox"]:checked ~ .box, 344 .ui.slider.checkbox input[type="checkbox"]:checked ~ label, 345 .ui.slider.checkbox input[type="radio"]:checked ~ .box, 346 .ui.slider.checkbox input[type="radio"]:checked ~ label { 347 color: @sliderOnLabelColor; 348 } 349 .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before, 350 .ui.slider.checkbox input[type="checkbox"]:checked ~ label:before, 351 .ui.slider.checkbox input[type="radio"]:checked ~ .box:before, 352 .ui.slider.checkbox input[type="radio"]:checked ~ label:before { 353 background-color: @sliderOnLineColor; 354 } 355 .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after, 356 .ui.slider.checkbox input[type="checkbox"]:checked ~ label:after, 357 .ui.slider.checkbox input[type="radio"]:checked ~ .box:after, 358 .ui.slider.checkbox input[type="radio"]:checked ~ label:after { 359 left: @sliderTravelDistance; 360 } 361 362 363 /*-------------- 364 Toggle 365 ---------------*/ 366 367 .ui.toggle.checkbox { 368 cursor: pointer; 369 min-height: @toggleHeight; 370 } 371 372 .ui.toggle.checkbox .box, 373 .ui.toggle.checkbox label { 374 min-height: @toggleHandleSize; 375 padding-left: @toggleLabelDistance; 376 color: @toggleOffLabelColor; 377 } 378 .ui.toggle.checkbox label { 379 padding-top: @toggleLabelOffset; 380 } 381 382 /* Switch */ 383 .ui.toggle.checkbox .box:before, 384 .ui.toggle.checkbox label:before { 385 cursor: pointer; 386 display: block; 387 388 position: absolute; 389 content: ''; 390 391 top: @toggleLaneVerticalOffset; 392 z-index: 1; 393 border: none; 394 395 background-color: @neutralCheckbox; 396 width: @toggleLaneWidth; 397 height: @toggleLaneHeight; 398 border-radius: @toggleHandleRadius; 399 } 400 401 /* Handle */ 402 .ui.toggle.checkbox .box:after, 403 .ui.toggle.checkbox label:after { 404 background: @handleBackground; 405 position: absolute; 406 content: ''; 407 opacity: 1; 408 z-index: 2; 409 410 border: none; 411 box-shadow: @handleBoxShadow; 412 width: @toggleHandleSize; 413 height: @toggleHandleSize; 414 top: @toggleHandleOffset; 415 left: 0em; 416 417 border-radius: @circularRadius; 418 transition: 419 background 0.3s ease 0s, 420 left 0.3s ease 0s 421 ; 422 } 423 424 .ui.toggle.checkbox input[type="checkbox"] ~ .box:after, 425 .ui.toggle.checkbox input[type="checkbox"] ~ label:after, 426 .ui.toggle.checkbox input[type="radio"] ~ .box:after, 427 .ui.toggle.checkbox input[type="radio"] ~ label:after { 428 left: @toggleOffOffset; 429 } 430 431 /* Focus */ 432 .ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before, 433 .ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before, 434 .ui.toggle.checkbox input[type="radio"]:focus ~ .box:before, 435 .ui.toggle.checkbox input[type="radio"]:focus ~ label:before { 436 background-color: @toggleFocusColor; 437 border: none; 438 } 439 440 /* Hover */ 441 .ui.toggle.checkbox .box:hover::before, 442 .ui.toggle.checkbox label:hover::before { 443 background-color: @toggleHoverColor; 444 border: none; 445 } 446 447 /* Active */ 448 .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box, 449 .ui.toggle.checkbox input[type="checkbox"]:checked ~ label, 450 .ui.toggle.checkbox input[type="radio"]:checked ~ .box, 451 .ui.toggle.checkbox input[type="radio"]:checked ~ label { 452 color: @toggleOnLabelColor; 453 } 454 .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before, 455 .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before, 456 .ui.toggle.checkbox input[type="radio"]:checked ~ .box:before, 457 .ui.toggle.checkbox input[type="radio"]:checked ~ label:before { 458 background-color: @toggleOnLaneColor; 459 } 460 .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after, 461 .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after, 462 .ui.toggle.checkbox input[type="radio"]:checked ~ .box:after, 463 .ui.toggle.checkbox input[type="radio"]:checked ~ label:after { 464 left: @toggleOnOffset; 465 } 466 467 /******************************* 468 Variations 469 *******************************/ 470 471 /*-------------- 472 Fitted 473 ---------------*/ 474 475 .ui.fitted.checkbox .box, 476 .ui.fitted.checkbox label { 477 padding-left: 0em !important; 478 } 479 480 .ui.fitted.toggle.checkbox, 481 .ui.fitted.toggle.checkbox { 482 width: @toggleWidth; 483 } 484 485 .ui.fitted.slider.checkbox, 486 .ui.fitted.slider.checkbox { 487 width: @sliderWidth; 488 } 489 490 .loadUIOverrides();