sense-on-off-switch/src/lib/less/styles.less

Set a variable in Qlik Sense to true/false using an on-off switch.

// Main Styles (included in _root.less)

// http://codepen.io/anon/pen/NPXbwe?editors=110
// *************************************
//
//   Toggle (tgl)
//   Created by Pete Lada of Guidebook (guidebook.com)
//   http://petelada.com

// *************************************
// Mixins
// -------------------------------------
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow: @string;
	box-shadow: @string;
}

.transform(@string) {
	-webkit-transform: @string;
	-moz-transform: @string;
	-ms-transform: @string;
	-o-transform: @string;
}

.transition(...) {
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	-o-transition: @arguments;
	transition: @arguments;
}

//   VARIABLES
// -------------------------------------

@toggle-height: 30px;
@toggle-width: 80px;
@switch-size: 30px;

@anim-slight-bounce: cubic-bezier(0.34, 1.61, 0.7, 1);
@anim-speed-normal: 250ms;

@border-color: #dadde1;

//	STYLES
@default: #ccc;
@primary: #337AB7;
@success: #5CB85C;
@info: #5BC0DE;
@warning: #F0AD4E;
@danger: #D9534F;

//   BASE
// -------------------------------------

.container {
	padding: 8px;
}

.tgl {

	position: relative;
	display: inline-block;
	height: @toggle-height;
	cursor: pointer;

	> input {
		position: absolute;
		opacity: 0;
		z-index: -1; /* Put the input behind the label so it doesn't overlay text */
		visibility: hidden;
	}

	.tgl_body {
		width: @toggle-width;
		height: @toggle-height;
		background: white;
		border: 1px solid @border-color;
		display: inline-block;
		position: relative;
		border-radius: 50px;
	}

	.tgl_switch {
		width: @toggle-height;
		height: @toggle-height;
		display: inline-block;
		background-color: white;
		position: absolute;
		left: -1px;
		top: -1px;
		border-radius: 50%;
		border: 1px solid darken(@border-color, 5%);
		.box-shadow(0 2px 2px rgba(0, 0, 0, .13));
		.transition(left @anim-slight-bounce @anim-speed-normal, transform @anim-slight-bounce @anim-speed-normal;);
		z-index: 1;
	}

	.tgl_track {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		border-radius: 50px;
	}

	.tgl_bgd {
		position: absolute;
		right: -10px; // 10 compensates for animation bounce
		top: 0;
		bottom: 0;
		width: @toggle-width - (@switch-size / 2) + 10; // 10 compensates for animation bounce
		.transition(left @anim-slight-bounce @anim-speed-normal, right @anim-slight-bounce @anim-speed-normal;);
		background: @default url('/extensions/swr-on-off-switch/lib/images/tgl_check.png') center center no-repeat;

		&.default {
			background-color: @default !important;
		}
		&.primary {
			background-color: @primary !important;
		}
		&.success {
			background-color: @success !important;
		}
		&.info {
			background-color: @info !important;
		}
		&.warning {
			background-color: @warning !important;
		}
		&.danger {
			background-color: @danger !important;
		}
	}

	.tgl_bgd-negative {
		right: auto;
		left: -(@toggle-width - (@switch-size / 2));
		background: white url('/extensions/swr-on-off-switch/lib/images/tgl_x.png') center center no-repeat;
	}

	&:hover {
		.tgl_switch {
			border-color: darken(@border-color, 13%);
			.transform(scale(1.06));
		}
	}

	&:active {
		.tgl_switch {
			.transform(scale(.95));
		}
	}

	> :not(:checked) ~ .tgl_body {

		> .tgl_switch {
			left: @toggle-width - @switch-size;
		}

		.tgl_bgd {
			right: -(@toggle-width - (@switch-size / 2));

			&.tgl_bgd-negative {
				right: auto;
				left: -10px;
			}
		}
	}

}