sass.n2o.controls.InputTreeSelect.scss Maven / Gradle / Ivy
The newest version!
.is-invalid,
.is-invalid:hover {
border-color: $red;
}
.n2o-rc-tree-indent {
.n2o-rc-tree-indent-unit-start,
.n2o-rc-tree-indent-unit-end {
margin-left: 15px;
}
}
/* активные элементы при навигации с помощью клавиш */
.n2o-select-tree-tree-treenode-active {
.n2o-select-tree-tree-node-content-wrapper {
background-color: #dce3e7;
}
}
/* Костыль n2o-select-tree рисует заглушку с классом n2o-select-tree-selection-item */
/* Плейсхолдер появляется отдельным блоком рядом с селектом */
.n2o-select-tree-container.empty {
.n2o-select-tree-selector {
.n2o-select-tree-selection-placeholder {
color: $gray;
font-size: 16px;
position: absolute;
left: 12px;
}
}
.n2o-select-tree-selection-overflow {
.n2o-select-tree-selection-overflow-item {
.n2o-select-tree-selection-item {
display: none !important;
}
}
}
}
.n2o-select-tree-tree-treenode-checkbox-indeterminate {
.custom-control-label::before {
color: $custom-checkbox-indicator-indeterminate-bg;
background-color: $checkbox-background-color-checked;
border-color: $checkbox-border-color-checked;
}
.custom-control-label::after {
background-image: $custom-checkbox-indicator-icon-indeterminate;
left: -1.2rem;
}
}
.n2o-select-tree-container {
width: 100%;
min-height: calc(2.25rem + 2px);
.n2o-select-tree-arrow {
position: absolute;
top: 10px;
right: 10px;
transition: 0.2s;
pointer-events: none;
}
.n2o-select-tree-open {
.n2o-select-tree-arrow {
top: 12px;
transform: rotate(180deg);
}
}
.n2o-select-tree-tree-node-content-wrapper {
padding: 2px;
}
.n2o-select-tree-multiple {
.n2o-select-tree-tree-treenode-disabled {
.n2o-select-tree-content-wrapper {
opacity: 0.65;
}
.n2o-select-tree-tree-node-content-wrapper:hover {
cursor: default;
background-color: white;
}
.custom-control-label::before {
user-select: none;
background-color: $gray-100;
border: $checkbox-border;
box-shadow: none;
}
}
}
.n2o-select-tree-tree-node-content-wrapper-normal,
.n2o-select-tree-tree-node-content-wrapper-open,
.n2o-select-tree-tree-node-content-wrapper-close {
width: 100%;
cursor: pointer;
}
.n2o-select-tree-tree-node-content-wrapper-normal:hover,
.n2o-select-tree-tree-node-content-wrapper-open:hover,
.n2o-select-tree-tree-node-content-wrapper-close:hover {
background-color: #dce3e7;
}
.n2o-select-tree.n2o-select-tree-single {
.n2o-select-tree-content-wrapper {
width: 100%;
display: flex;
align-items: center;
font-size: 16px;
}
.n2o-select-tree-tree-treenode.filter-node {
background-color: $primary;
color: white;
}
.n2o-select-tree-tree-treenode.filter-node:hover {
.n2o-select-tree-content-wrapper {
background-color: $primary;
color: white;
}
}
}
.n2o-select-tree-image-tree-wrapper {
img {
max-height: 50px;
}
}
.n2o-badge {
margin-left: 5px;
}
.n2o-select-tree {
display: inline-block;
font-size: 12px;
width: 100%;
min-height: calc(2.25rem + 2px);
position: relative;
border: 1px solid #cfd8dc;
background-color: #fff;
.n2o-select-tree-tree-title {
width: 100%;
display: block;
}
.n2o-select-tree-selector {
display: flex;
flex-wrap: wrap;
min-height: calc(2.25rem + 2px);
align-items: center;
.n2o-select-tree-dropdown {
display: block;
position: absolute;
padding: 5px;
background-color: #fff;
border: 1px solid #cfd8dc;
z-index: 100;
overflow-y: auto;
.n2o-select-tree-tree {
.n2o-select-tree-tree-list {
.n2o-select-tree-tree-list-scrollbar.n2o-select-tree-tree-list-scrollbar-show {
background-color: #f1f1f1 !important;
.n2o-select-tree-tree-list-scrollbar-thumb {
border-radius: 0 !important;
background-color: #a8a8a8 !important;
}
}
.n2o-select-tree-tree-list-holder {
.n2o-select-tree-tree-list-holder-inner {
.n2o-select-tree-tree-treenode {
width: 100%;
padding: 2px;
// WARNING переопределение отступа ломает внутреннюю логику построения листа
//margin: 5px 0 0 0;
display: flex;
align-items: center;
line-height: 1.2;
.n2o-select-tree-tree-checkbox {
height: 100%;
display: flex;
align-items: center;
padding-left: 5px;
}
.n2o-select-tree-tree-checkbox-checked {
.custom-control-label::before {
color: $white;
background-color: $checkbox-background-color-checked;
border-color: $checkbox-border-color-checked;
}
.custom-control-label::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
.n2o-select-tree-tree-checkbox-checked-indeterminate {
.custom-control-label::before {
color: $custom-checkbox-indicator-indeterminate-bg;
background-color: $checkbox-background-color-checked;
border-color: $checkbox-border-color-checked;
}
.custom-control-label::after {
background-image: $custom-checkbox-indicator-icon-indeterminate;
left: -1.2rem;
}
}
.n2o-badge {
font-size: 12px;
}
}
.n2o-icon {
//padding: 0;
}
.n2o-select-tree-tree-switcher {
cursor: pointer;
}
//.n2o-select-tree-tree-treenode.n2o-select-tree-tree-treenode-switcher-close
.n2o-select-tree-tree-treenode.n2o-select-tree-tree-treenode-switcher-open {
.n2o-select-tree-tree-switcher_open {
.n2o-icon {
transform: rotate(90deg);
transition: all $tree-animation-speed linear;
}
}
}
}
}
.n2o-select-tree-label {
font-size: 16px;
display: block;
}
}
}
}
.n2o-select-tree-dropdown.n2o-select-tree-dropdown-hidden {
display: none;
}
.n2o-select-tree-selection-overflow {
display: flex;
flex-wrap: wrap;
padding-right: 50px;
max-width: 100%;
.n2o-select-tree-selection-overflow-item {
flex: none;
max-width: 100%;
.n2o-select-tree-selection-item {
padding: 0 5px;
margin: 2px;
display: flex;
border: 1px solid #ccc;
font-size: 16px;
border-radius: 0;
background: transparent;
.n2o-select-tree-selection-item-content {
box-sizing: border-box;
}
.n2o-select-tree-selection-item-remove {
font-size: 12px;
cursor: pointer;
i {
height: 100%;
display: flex;
align-items: center;
}
}
}
}
.n2o-select-tree-selection-overflow-item-suffix {
flex: none;
// для ввода в поиске, если неограничить контрол будет расширяться
max-width: 200px;
overflow: hidden;
.n2o-select-tree-selection-search {
position: relative;
height: 100%;
display: block;
min-width: 40px;
margin-left: 10px;
.n2o-select-tree-selection-search-input {
border: none;
outline: none;
font-size: 16px;
width: 100%;
min-width: 40px;
}
.n2o-select-tree-selection-search-mirror {
position: absolute;
z-index: 999;
white-space: nowrap;
left: 0;
top: 0;
visibility: hidden;
font-size: 16px;
height: 100%;
padding: 1px;
}
}
}
}
}
.n2o-select-tree-tree-indent-unit {
display: inline-block;
width: 32px;
}
.n2o-select-tree-clear {
position: absolute;
right: 30px;
top: 10px;
cursor: pointer;
}
.n2o-select-tree-clear:hover {
background-color: $gray-100;
border-radius: 50%;
}
}
.n2o-select-tree-dropdown-hidden {
display: none;
}
}
.n2o-select-tree-container.is-invalid {
.n2o-select-tree {
border-color: $red;
}
}
.n2o-select-tree-container.single {
.n2o-select-tree.n2o-select-tree-single {
.n2o-select-tree-selector {
width: 100%;
min-height: calc(2.25rem + 2px);
flex-flow: column-reverse;
.n2o-select-tree-selection-search {
display: none;
width: 100%;
.n2o-select-tree-selection-search-input {
width: 100%;
}
}
.n2o-select-tree-tree-node-content-wrapper {
width: 100%;
display: flex;
align-items: center;
font-size: 16px;
}
.n2o-select-tree-tree-node-content-wrapper:hover {
cursor: pointer;
background-color: $gray-100;
}
.n2o-select-tree-tree-treenode-disabled {
.n2o-select-tree-content-wrapper {
opacity: 0.65;
}
.n2o-select-tree-tree-node-content-wrapper:hover {
cursor: default;
background-color: white;
}
}
.n2o-select-tree-tree-title {
width: 100%;
}
.n2o-select-tree-selection-placeholder,
.n2o-select-tree-selection-item {
height: 100%;
width: 100%;
padding-left: 10px;
min-height: calc(2.25rem + 2px);
display: flex;
align-items: center;
align-self: flex-start;
font-size: 16px;
visibility: visible !important;
}
}
}
.n2o-select-tree.n2o-select-tree-single.n2o-select-tree-open {
.n2o-select-tree-selector {
.n2o-select-tree-selection-search {
display: block;
.n2o-select-tree-selection-search-input {
height: 38px;
padding: 5px 40px 5px 12px;
outline: none;
font-size: 16px;
}
.n2o-select-tree-selection-search-input::-ms-clear {
display: none;
width: 0;
height: 0;
}
}
}
}
.n2o-select-tree-tree-iconEle {
display: none;
}
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.n2o-select-tree-empty {
font-size: 14px;
}