fuelux/less/checkbox.less

Base Fuel UX styles and controls

.fuelux {

	.checkbox {

		&.highlight {

			// padding: 4px;

			& + .checkbox.highlight {
				margin-top: -5px;
			}

			& label.checkbox-custom {
				padding: 4px 4px 4px 24px;
				//margin-left: -8px;
			}

			&.checked label.checkbox-custom, label.checked.checkbox-custom {
				background: @gray90;
				border-radius: @baseBorderRadius;
			}
		}

		/* for keyboard tabbing */
		input[type="checkbox"]:focus + .checkbox-label,
		input[type="checkbox"]:hover + .checkbox-label,
		.checkbox-label:hover
		 {
			color: @gray60;
		}

		input[type="checkbox"]:disabled:focus + .checkbox-label,
		input[type="checkbox"]:disabled:hover + .checkbox-label,
		&.disabled label:hover
		 {
			color: inherit;
		}

	}

	.form-horizontal .checkbox-inline {
		padding-top: 0;
	}

	.input-group-addon.checkbox-custom.checkbox-inline:before {
		left: 11px;
		top: 9px;
	}

	.checkbox-custom {
		position: relative;

		&:before {
			#fuelux > .icon-base-styles("Glyphicons Halflings");
			border: 1px solid @gray67;
			border-radius: @baseBorderRadius;
			color: @true-white;
			content: " ";
			font-size: 9px;
			height: 14px;
			left: 0px;
			padding: 1px 0 0 1px;
			position: absolute;
			top: 3px;
			width: 14px;
		}

		/* for keyboard tabbing */
		&:active:before, &:focus:before {
			color: @focusColor;
			cursor: pointer;
			box-shadow: inset 0px 0px 2px 1px @focusColor, 0px 0px 5px 0px @focusColor;
		}

		&.highlight {
			&:before {
				left: 4px;
				top: 6px;
			}
		}

		&.checked {
			&:before {
				background: @checkboxPrimaryColor;
				border-color: @checkboxPrimaryColor;
				content: "\e013";
			}
		}

		&.disabled {
			cursor: not-allowed;
			opacity: .65;

			&:before
			{
				cursor: not-allowed;
				opacity: .65;
			}
		}

		&.checkbox-inline {
			&:before {
				left: 0;
				top: 3px;
			}

			&.highlight {
				padding: 4px 4px 4px 24px;
				left: -4px;

				&:before {
					left: 4px;
					top: 7px;
				}

				&.checked {
					background: @gray90;
					border-radius: @baseBorderRadius;
				}
			}
		}


		/* for keyboard tabbing */
		input[type="checkbox"]:focus + .checkbox-label {
			color: @gray60;
		}

	}

	label.checkbox-custom.checkbox-inline {
		padding-left: 20px;
	}

}