$ibo-input-select--value--min-midth: 50px; $ibo-input-select-autocomplete--value--min-midth: 150px; $ibo-input-select-selectize--value--min-midth: 150px; $ibo-input-select-selectize--value--height: 100% !default; $ibo-input-select-selectize--value--line-height: $ibo-input--height !default; $ibo-input-select-wrapper--width: 100% !default; $ibo-input-select-wrapper--after--height: 28px !default; $ibo-input-select-wrapper--after--margin-left: -16px !default; $ibo-input-select-wrapper--after--margin-top: 1px !default; $ibo-input-select-wrapper--after--padding-top: 3px !default; $ibo-input-select-wrapper--after--background-color: inherit !default; $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default; $ibo-input-select--action-button--height: 28px !default; $ibo-input-select--action-button--width: 23px !default; $ibo-input-select--action-button--margin-top: 0px !default; $ibo-input-select--action-button--margin-right: 20px !default; $ibo-input-select--action-button--background-color: inherit !default; $ibo-input-select--action-button--color: $ibo-color-grey-800 !default; $ibo-input-select--action-button--padding-x: 2px !default; $ibo-input-select--action-button--padding-y: 0px !default; $ibo-input-select--action-button--padding-left: 5px !default; .ibo-input-select{ appearance: none; display: inline-block; min-width: $ibo-input-select--value--min-midth; &.ibo-input-selectize{ padding-right:0; padding-left:0; min-width: $ibo-input-select-selectize--value--min-midth !important; input{ border-width: 0px; border-color: white; padding-left:$ibo-input--padding-x; } >[data-value] { height: $ibo-input-select-selectize--value--height; line-height: $ibo-input-select-selectize--value--line-height; padding-left:$ibo-input--padding-x; } } } .ibo-input-select-autocomplete{ min-width: $ibo-input-select-autocomplete--value--min-midth !important; } .ibo-input-selectize { min-width: $ibo-input-select-selectize--value--min-midth !important; >div{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .ibo-input-select-wrapper{ position:relative; } .ibo-input-select-wrapper--with-buttons .selectize-control { display: inline-block; width: $ibo-input-select-wrapper--width; } .ibo-input-select-wrapper::after{ position: absolute; content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 600; height: $ibo-input-select-wrapper--after--height; margin-left: $ibo-input-select-wrapper--after--margin-left; margin-top: $ibo-input-select-wrapper--after--margin-top; padding-top: $ibo-input-select-wrapper--after--padding-top; background-color: $ibo-input-select-wrapper--after--background-color; color: $ibo-input-select-wrapper--after--color; pointer-events: none; } .ibo-input-select-wrapper--with-buttons{ position:relative; display:flex; >.selectize-control{ } } .ibo-input-select-container{ display: flex; } .ibo-input-select-wrapper--with-buttons::after{ position: static; content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 600; height: $ibo-input-select-wrapper--after--height; margin-left: $ibo-input-select-wrapper--after--margin-left; margin-top: $ibo-input-select-wrapper--after--margin-top; padding-top: $ibo-input-select-wrapper--after--padding-top; background-color: $ibo-input-select-wrapper--after--background-color; color: $ibo-input-select-wrapper--after--color; pointer-events: none; z-index: 100; } .ibo-input-select--action-buttons{ position: absolute; display: flex; height: $ibo-input-select--action-button--height; margin-top: $ibo-input-select--action-button--margin-top; margin-right: $ibo-input-select--action-button--margin-right; font-size: $ibo-font-size-100; background-color: $ibo-input-select--action-button--background-color; color: $ibo-input-select--action-button--color; padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x; text-align: right; bottom:0; top:0; right:0; } .ibo-input-select--action-button{ padding-left: $ibo-input-select--action-button--padding-left; float:right; } .selectize-dropdown{ z-index:2000; /* Note: This is not great as it does not take into account other elements z-index, but as selectize puts its dropdown under the tag, we cannot have a z-index relative to input container */ } .selectize-dropdown.ui-menu .ui-state-active { margin: unset; background-color: #f5fafd; color: #495c68; } //from jqueryui.css .ui-helper-hidden-accessible { // border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }