Repository URL to install this package:
.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;
}
}