Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-smart-filters   php

Repository URL to install this package:

Version: 2.2.1 

/ scss / filters / _checkboxes.scss

.jet-checkboxes-list {
	&-scroll {
		overflow-x: hidden;
		overflow-y: auto;
	}

	&-wrapper {
		margin: -3px;
	}

	&__row {
		margin: 3px;
		margin-top: 0;
		padding-top: 3px;
	}

	.jet-checkboxes-list__item {
		position: relative;
		display: inline-flex;
		align-items: center;
		cursor: pointer;

		.jet-checkboxes-list__input {
			outline: 0;
			visibility: hidden;
			margin: 0;
			float: left;
			font-size: inherit;
			width: 0;
			height: 0;
			display: none;

			&:checked {
				+ .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
					background: #ccc;

					.jet-checkboxes-list__checked-icon {
						opacity: 1;
					}
				}
			}
		}

		.jet-checkboxes-list__button {
			border-color: #ccc;
			border-width: 1px;
		}

		.jet-checkboxes-list__label {
			display: inline-block;
			vertical-align: middle;
		}

		.jet-checkboxes-list__decorator {
			position: relative;
			width: 14px;
			height: 14px;
			min-width: 14px;
			min-height: 14px;
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 3px;
			vertical-align: middle;
		}

		.jet-checkboxes-list__checked-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
			font-size: 10px;
			color: #fff;
		}
	}
}

.jet-list-tree {
	&__children {
		padding-left: 10px;
	}
}

.jet-checkboxes-search {
	position: relative;
	margin-bottom: 10px;

	&__input {
		width: 100%;
	}

	&__clear {
		cursor: pointer;

		display: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5px;
		padding: 5px;
		color: #777;
		font-family: FontAwesome;
		font-size: 16px;
		line-height: 1;

		&::before {
			content: "\f00d";
		}

		.jet-input-not-empty + & {
			display: block;
		}
	}
}

.jet-checkboxes-moreless {
	padding-top: 10px;

	&__toggle {
		cursor: pointer;
		display: inline-block;
	}
}

.jet-checkboxes-dropdown {
	position: relative;

	&__label {
		position: relative;
		user-select: none;

		padding: 8px 20px 8px 12px;
		border: 1px solid #ebeced;
		border-radius: 3px;
		background-color: #fff;

		&:after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 5px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 4px 4px 0 4px;
			border-color: currentColor transparent transparent transparent;
		}
	}

	&__active {
		display: flex;
		flex-wrap: wrap;
		margin: -3px;

		&__item {
			cursor: pointer;

			margin: 3px;
			padding: 1px 6px;
			border-radius: 3px;
			background-color: #eee;

			&__remove {
				margin-left: 5px;
			}
		}
	}

	&__body {
		display: none;
		overflow: hidden;
		position: absolute;
		z-index: 99;
		left: 0;
		right: 0;
		margin-top: 5px;

		border: 1px solid #ebeced;
		border-radius: 3px;
		background-color: #fff;
	}

	.jet-checkboxes-search {
		margin-bottom: 0px;

		&__input {
			border: none;
			border-bottom: 1px solid #ebeced;
			border-radius: initial;

			&:focus {
				outline: none;
				box-shadow: 0 5px 32px rgba(103, 122, 141, 0.17);
			}
		}
	}

	.jet-checkboxes-list-wrapper {
		padding: 5px 12px;
	}

	.jet-checkboxes-moreless {
		padding: 5px 12px;
		border-top: 1px solid #ebeced;
	}

	// open
	&.jet-dropdown-open &__label {
		&:after {
			border-width: 0 4px 4px 4px;
			border-color: transparent transparent currentColor transparent;
		}
	}
	&.jet-dropdown-open &__body {
		display: block;
	}
}