sass.n2o.controls.InputSelect.scss Maven / Gradle / Ivy
The newest version!
.n2o-input-select {
display: inline-block;
position: relative;
white-space: nowrap;
> button {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border: none;
&:disabled {
pointer-events: none;
}
}
.selected-item {
display: flex;
padding: 2px 4px 2px 6px;
justify-content: center;
align-items: center;
> button {
font-size: inherit;
padding: inherit;
}
> img {
height: $image-selected-height !important;
padding-right: 5px;
}
> i {
display: flex;
padding-right: 5px;
}
max-width: $selected-item-width;
margin: $selected-item-margin-y $selected-item-margin-x;
}
.n2o-dropdown-control {
top: auto;
left: auto;
width: 100%;
max-height: $popup-height;
min-width: 38px;
border: 1px solid #cfd8dc;
overflow: auto;
> ul {
display: block;
}
> div > {
.dropdown-item {
padding: $input-select-item-padding;
&:focus {
color: inherit;
background-color: inherit;
}
&:hover,
&.active,
&:active {
color: #1c2429;
background-color: $gray-100;
}
&.selected {
color: #1c2429;
background-color: $gray-300 !important;
}
}
}
button > * {
margin-right: 10px;
}
> .dropdown-item > img {
height: $image-height;
}
.dropdown-divider:last-child {
display: none;
}
.custom-control {
min-height: 1.2rem;
}
.dropdown-header {
white-space: normal;
padding: $input-select-control-dropdown-header-padding;
}
&.n2o-pop-up {
user-select: none;
}
}
.n2o-dropdown-control.btn-sm {
height: 31px;
min-width: 31px;
}
.n2o-dropdown-control.btn-md {
height: 38px;
min-width: 38px;
}
.n2o-dropdown-control.btn-lg {
height: 48px;
min-width: 48px;
}
.n2o-select-pop-up {
width: 100%;
max-width: 600px;
padding: 0;
left: auto;
top: auto;
.n2o-dropdown-control {
height: auto;
}
}
.expandPopUp {
min-width: 100%;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.n2o-input-left {
border-left: 0;
padding-left: 0;
}
.n2o-eclipse-content {
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
outline: none;
.n2o-input-select__label {
overflow: hidden;
text-overflow: ellipsis;
}
&:disabled {
cursor: not-allowed;
}
}
.n2o-eclipse-content.with-status,
.n2o-eclipse-content.with-description {
display: flex;
}
.n2o-eclipse-content.with-description {
flex-direction: column;
align-items: flex-start;
}
.n2o-dropdown-control .n2o-eclipse-content__description {
padding: 0;
}
.n2o-dropdown-control .n2o-eclipse-content__description-with-icon {
padding: 0 0 0 2.2rem;
}
.n2o-dropdown-control .n2o-eclipse-content__description-with-checkbox {
padding: 0 0 0 1.5rem;
}
.n2o-dropdown-control .n2o-eclipse-content__description-with-icon-checkbox {
padding: 0 0 0 3.7rem;
}
.n2o-input-select__toggle {
width: 100%;
padding: 0;
border: none;
}
.n2o-input-select__menu {
max-width: 100%;
padding: 0;
margin: 0;
.n2o-input-select__menu--autosize {
max-width: none;
}
}
.n2o-inp.n2o-inp--multi {
resize: none;
overflow: hidden;
border: none;
}
.n2o-input-items > .valueText,
input {
padding: $input-select-padding;
padding-right: 65px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.n2o-input-items > .valueText,
input[disabled] {
padding-right: $input-padding-x;
}
.n2o-input-items > textarea,
input {
width: auto;
flex: 1;
min-width: 30%;
}
.n2o-input-items > input,
.n2o-input-items > textarea {
font-size: $input-select-font-size;
line-height: $input-line-height;
color: $input-select-font-color;
border-radius: $input-select-border-radius;
height: $input-min-height;
min-width: 10px;
border: none;
outline: none;
background: transparent;
text-overflow: ellipsis;
width: 100%;
}
.n2o-input-container {
background-color: #fff;
border-spacing: 0;
border-collapse: separate;
height: auto;
outline: none;
position: relative;
width: 100%;
display: flex;
flex: 1 100%;
flex-direction: row;
min-height: $input-min-height;
border: $input-select-border;
padding: 0;
&:hover {
border-color: $input-select-hover-border-color;
}
&.is-invalid,
&.is-invalid:hover {
border-color: $red;
}
&.disabled {
background-color: $input-disabled-bg;
}
> .n2o-input-items {
min-width: 10px;
display: inline-flex;
flex-wrap: wrap;
width: 100%;
}
&.focus {
// Хак, для обводки всего контейнера, когда input внутри в фокусе
// скопировано из @mixin form-control-focus()
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
}
@else {
box-shadow: $input-focus-box-shadow;
}
}
input,
textarea:focus {
box-shadow: none;
}
@include form-control-focus();
}
span > .n2o-item-delete {
margin-left: 4px;
display: flex;
> i {
font-size: 10px;
}
}
.n2o-multiselect {
background: $multiselect-item-color;
border: 1px solid #ccc;
z-index: 3;
}
.n2o-input-control {
height: auto;
display: flex;
align-items: center;
margin-left: auto;
justify-content: center;
padding: 0 10px;
cursor: $input-cursor;
z-index: 3;
> div {
margin: $input-control-padding;
> i {
font-size: $input-select-control-icon-size;
border-radius: 50%;
padding: 5px 5px 5px 5px;
transition: all $tree-animation-speed linear;
&:hover {
background-color: $icon-tree-hover-color;
}
}
}
> div.isExpanded {
> i {
transform: rotate(180deg);
transition: all $tree-animation-speed linear;
}
}
> .n2o-input-clear {
visibility: hidden;
margin: 0;
display: flex;
justify-content: center;
&.input-in-focus {
visibility: visible;
}
}
> .n2o-popup-control {
display: flex;
justify-content: start;
text-align: center;
margin: 0;
}
}
&:hover {
.n2o-input-clear {
visibility: visible !important;
}
}
}