shopee-apps/assets/vendor/style-switcher/less/shared.less

/* Checkboxes */
html.dark .checkbox-primary,
.checkbox-primary {

	label:before {
		background: @skinColor;
		border-color: darken(@skinColor, 5%);
	}
}

html.dark .checkbox-text-primary,
.checkbox-text-primary {
	input[type="checkbox"]:checked + label:after {
		color: @skinColor;
	}
}

/* Radios */
html.dark .radio-primary,
.radio-primary {

	input[type="radio"]:checked + label:after {
		background: @skinColor;
		-webkit-box-shadow: 0px 0px 1px @skinColor;
		box-shadow: 0px 0px 1px @skinColor;
	}

}

/* Switch */
.switch {
	&.switch-primary {
		.ios-switch .on-background {
			background: @skinColor;
		}
	}
}

/* Progress Bar */
.progress-bar {
	background-color: @skinColor;
}

.progress {
	.progress-bar-primary {
		background-color: @skinColor;
	}
}

/* Slider */
.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background: @skinColor;
	}
}

.slider-gradient.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background-image: -webkit-linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
		background-image: linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
	}
}

.slider-gradient.ui-slider-vertical.slider-primary {
	.ui-slider-range,
	.ui-slider-handle {
		background-image: -webkit-linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
		background-image: linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
	}
}

/* DatePicker */
.datepicker {

	table {
		width: 100%;

		thead {
			tr {
				th {
					&.prev, &.next {
						&:hover {
							background: @skinColor;
						}
					}
				}

				&:first-child th:hover {
					background: @skinColor;
				}
			}
		}

		tr {
			td {
				span:hover {
					background: @skinColor;
				}

				&.day:hover {
					background: @skinColor;
				}
			}
		}

		tfoot tr th:hover {
			background: @skinColor;
		}
	}
}

/* DatePicker: Dark */
html.dark .datepicker.datepicker-primary,
.datepicker.datepicker-dark {
	table {
		thead {
			tr {
				th {
					&.prev, &.next {
						&:hover {
							background: @skinColor;
						}
					}
				}
			}
		}

		tbody {
			tr {
				td {
					&.day {
						&:hover {
							background: @skinColor;
						}
						&.active {
							background: @skinColor;
						}
					}
				}
			}
		}
	}
}

/* DatePicker: Primary */
.datepicker.datepicker-primary {
	table {
		thead {
			tr {
				&:first-child {
					background-color: @skinColor;

					th {
						&:hover {
							background-color: darken(@skinColor, 10%);
						}
					}
				}

				&:last-child {
					background-color: lighten(@skinColor, 5%);

					th:hover {
						background-color: @skinColor;
					}
				}
			}
		}
		tbody {
			tr {
				td {

					&.day {

						&:hover {
							background: @skinColor;
						}
						&.active {
							background: @skinColor;
						}

					}
				}
			}
		}
	}
}

/* Select 2 */
.select2-container-multi {
	.select2-choices .select2-search-choice {
		background: @skinColor;
	}
}

/* Wizard */
.wizard-steps {
	> li {

		&.active {

			.badge {
				background-color: @skinColor;
			}

			a {
				&,
				&:hover,
				&:focus {
					border-top-color: @skinColor;
				}
			}

		}

	}
}

.wizard-tabs {
	ul {
		> li {

			&.active {
				.badge {
					background-color: @skinColor;
				}
			}

		}
	}
}

html,
html.dark {
	.wizard-progress {

		.steps-progress {
			.progress-indicator {
				background: @skinColor;
			}
		}

		.wizard-steps {
			li {
				&.completed {
					a {
						span {
							border-color: @skinColor;
							background: @skinColor;
						}
					}
				}
				&.active {
					a {
						span {
							color: @skinColor;
							border-color: @skinColor;
						}
					}
				}
			}
		}
	}
}

/* Tables */
.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
	background-color: @skinColor;
}

/* Data Tables Loading */
.dataTables_processing {
	background-color: @skinColor;
}

/* Liquid Meter */
.liquid-meter-wrapper {
	.liquid-meter-selector {
		a {
			&.active {
				color: @skinColor;
			}
		}
	}
}