/* ------------------------------------------------------------------------------ * * # Select2 selects * * Styles for select2.js - custom select plugin * * Version: 1.3 * Latest update: Mar 10, 2016 * * ---------------------------------------------------------------------------- */ // Select base // ------------------------------ .select2-container { outline: 0; position: relative; display: inline-block; vertical-align: middle; text-align: left; } // Single select // ------------------------------ .select2-selection--single { cursor: pointer; outline: 0; display: block; height: @input-height-base; padding: @padding-base-vertical 0; line-height: @line-height-base; position: relative; border: 1px solid transparent; white-space: nowrap; border-radius: @input-border-radius; .user-select(none); // Darken on hover &:hover, &:focus, .select2-container--open & { .box-shadow(0 0 0 100px fade(#000, 1%) inset); } // Allow custom background color &:not([class*=bg-]) { background-color: @input-bg; color: @text-color; // Allow custom border color &:not([class*=border-]) { border-color: @input-border; } } // Apply darker hover color &[class*=bg-] { &:hover, &:focus, .select2-container--open & { .box-shadow(0 0 0 100px fade(#000, 2.5%) inset); } // Placeholder .select2-selection__placeholder { color: #fff; // In disabled mode .select2-container--disabled & { color: fade(#fff, 75%); } } } // Result text .select2-selection__rendered { display: block; padding-left: @padding-base-horizontal; padding-right: ((@padding-base-horizontal * 2) + @padding-base-vertical); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // Icons > i { margin-right: @content-padding-small; } } // Clear selection button .select2-selection__clear { position: relative; cursor: pointer; float: right; font-size: 0; line-height: 1; margin-top: ((@line-height-computed - @icon-font-size) / 2); margin-left: 5px; .opacity(0.75); // Add hover state effect &:hover { .opacity(1); } // Cross icon &:after { content: '\ed6b'; font-family: 'icomoon'; display: inline-block; font-size: @icon-font-size; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } // Placeholder .select2-selection__placeholder { color: @text-muted; } // Dropdown arrow .select2-selection__arrow { // Arrow icon &:after { content: '\e9c5'; font-family: 'Icomoon'; display: inline-block; position: absolute; top: 50%; right: @padding-base-horizontal; margin-top: -(@icon-font-size / 2); font-size: @icon-font-size; line-height: 1; color: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Change icon when menu is opened .select2-container--open &:after { content: '\e9c6'; } // Hide default arrow b { display: none; } } // Disabled menu .select2-container--disabled & { cursor: @cursor-disabled; .box-shadow(none); // Disabled state for container &:not([class*=bg-]) { background-color: @input-bg-disabled; color: @gray-light; } // Disabled state for custom colored container &[class*=bg-] { .box-shadow(0 0 0 100px fade(#fff, 25%) inset); } // Hide clear button .select2-selection__clear { display: none; } } } // Multiple select // ------------------------------ .select2-selection--multiple { display: block; border: 1px solid transparent; border-radius: @input-border-radius; cursor: text; outline: 0; .user-select(none); // Allow custom background color &:not([class*=bg-]) { background-color: @input-bg; // Allow custom border color &:not([class*=border-]) { border-color: @input-border; } } // Result text .select2-selection__rendered { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; list-style: none; margin: 0; padding: 0 @tags-spacing @tags-spacing @tags-spacing; width: 100%; } // Placeholder .select2-selection__placeholder { color: @text-muted; } // Disabled multiselect .select2-container--disabled & { // Disabled state for container &:not([class*=bg-]) { background-color: @input-bg-disabled; color: @gray-light; } // Disabled state for custom colored container &[class*=bg-] { .box-shadow(0 0 0 100px fade(#fff, 25%) inset); .select2-selection__choice { .opacity(0.9); } } // Apply disabled cursor for all elements &, .select2-selection__choice, .select2-search__field { cursor: @cursor-disabled; } } // Choices .select2-selection__choice { background-color: @color-slate-700; color: #fff; border-radius: @border-radius-base; cursor: default; float: left; margin-right: @tags-spacing; margin-top: @tags-spacing; padding: @padding-base-vertical @padding-base-horizontal; // Icons > i { margin-right: @content-padding-small; } // Remover .select2-selection__choice__remove { cursor: pointer; float: right; font-size: @font-size-large; margin-top: ((@line-height-computed - @font-size-large) / 2); line-height: 1; margin-left: @element-horizontal-spacing; .opacity(0.75); // Highlight on hover &:hover { .opacity(1); } } // Disable choice .select2-container--disabled & { .opacity(0.6); // Hide remover .select2-selection__choice__remove { display: none; } } } // Search .select2-search--inline { float: left; // Search field .select2-search__field { font-size: 100%; margin-top: @tags-spacing; padding: @padding-base-vertical 0; background-color: transparent; border: 0; outline: 0; margin-left: @padding-base-vertical; -webkit-appearance: textfield; // Cancel button &::-webkit-search-cancel-button { -webkit-appearance: none; } } } } // Select results // ------------------------------ // Dropdown .select2-dropdown { background-color: @dropdown-bg; color: @dropdown-link-color; border: 1px solid @dropdown-border; border-radius: @border-radius-base; display: block; position: absolute; left: -100000px; width: 100%; z-index: 9999; .box-shadow(0 1px 3px fade(#000, 10%)); } // Results container .select2-results { display: block; } // Options list .select2-results__options { list-style: none; margin: 0; padding: 0; // Add scrollbar to first level list .select2-results > & { padding-bottom: @list-spacing; max-height: 250px; overflow-y: auto; // Add top spacing if search is hidden .select2-search--hide + & { padding-top: @list-spacing; } } .select2-results:first-child > & { padding-top: @list-spacing; } } // Option .select2-results__option { padding: @padding-base-vertical @padding-base-horizontal; cursor: pointer; .user-select(none); // Add 1px gap between options & + & { margin-top: 1px; } // Icons i { margin-right: @content-padding-small; // Do not display empty icon &.icon-undefined { display: none; } } // Option group &[role=group] { padding: 0; } // Highlighted option (hover state) &.select2-results__option--highlighted { background-color: @dropdown-link-hover-bg; } // Disabled option &[aria-disabled=true] { color: @text-muted; cursor: @cursor-disabled; // In colored menu .select2-dropdown[class*=bg-] & { color: fade(#fff, 60%); } } // Selected option &[aria-selected=true] { background-color: @dropdown-link-active-bg; color: #fff; } // Add double horizontal spacing for nested options .select2-results__options--nested > & { padding-left: (@padding-base-horizontal * 2); padding-right: (@padding-base-horizontal * 2); } } // Option group title .select2-results__group { display: block; padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-mini; line-height: @line-height-mini; text-transform: uppercase; cursor: default; margin-top: @list-spacing; margin-bottom: @list-spacing; // Remove top spacing from the first group title .select2-results__option:first-child > & { margin-top: 0; } } // // Messages // // Results .select2-results__message { color: @text-muted; cursor: default; // Mute if in colored dropdown .select2-dropdown[class*=bg-] & { color: fade(#fff, 75%); } } // Loading .select2-results__option.loading-results { padding-top: 0; // Add extra top spacing + .select2-results__option { margin-top: @list-spacing; } } // Load more for infinite scroll .select2-results__option--load-more { text-align: center; margin-top: @list-spacing; cursor: default; } // // Opened dropdown // .select2-container--open { // Dropdown .select2-dropdown { left: 0; } // If opened above .select2-dropdown--above { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; // Add border for colored menu &[class*=bg-] { border-bottom: 1px solid fade(#fff, 20%); } } &.select2-container--above { .select2-selection--single, .select2-selection--multiple { .border-top-radius(0); } } // If opened below .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; // Add border for colored menu &[class*=bg-] { border-top: 1px solid fade(#fff, 20%); } } &.select2-container--below { .select2-selection--single, .select2-selection--multiple { .border-bottom-radius(0); } } } // // Search inside dropdown // .select2-search--dropdown { display: block; position: relative; padding: @padding-base-horizontal; // Add search icon &:after { content: '\e98e'; font-family: 'icomoon'; position: absolute; top: 50%; left: (@padding-base-horizontal * 2); color: inherit; display: block; font-size: @font-size-small; margin-top: -(@font-size-small / 2); line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .opacity(0.6); } // Remove top spacing from the results message + .select2-results .select2-results__message:first-child { padding-top: 0; } // Search field .select2-search__field { height: @input-height-base; padding: @padding-base-vertical @padding-base-horizontal; padding-left: ((@padding-base-horizontal * 2) + @font-size-small); border-radius: @input-border-radius; border: 1px solid @input-border; outline: 0; width: 100%; // Cancel button &::-webkit-search-cancel-button { -webkit-appearance: none; } } // Hidden search field &.select2-search--hide { display: none; } } // Optional sizing // ------------------------------ // Large .select-lg { // Single &.select2-selection--single { height: @input-height-large; padding: @padding-large-vertical 0; font-size: @font-size-large; .select2-selection__rendered { padding-left: @padding-large-horizontal; padding-right: ((@padding-large-horizontal * 2) + 4); } .select2-selection__arrow:after { right: @padding-large-horizontal; } } // Multiple &.select2-selection--multiple { .select2-selection__choice { padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; } .select2-search--inline .select2-search__field { padding: @padding-large-vertical 0; font-size: @font-size-large; } } } // Small .select-sm { // Single &.select2-selection--single { height: @input-height-small; padding: @padding-small-vertical 0; font-size: @font-size-small; line-height: @line-height-small; .select2-selection__rendered { padding-left: @padding-small-horizontal; padding-right: ((@padding-small-horizontal * 2) + 4); } .select2-selection__arrow:after { right: @padding-small-horizontal; } } // Multiple &.select2-selection--multiple { .select2-selection__choice { padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; line-height: @line-height-small; } .select2-search--inline .select2-search__field { padding: @padding-small-vertical 0; } } } // Mini .select-xs { // Single &.select2-selection--single { height: @input-height-mini; padding: @padding-xs-vertical 0; font-size: @font-size-small; line-height: @line-height-small; .select2-selection__rendered { padding-left: @padding-xs-horizontal; padding-right: ((@padding-xs-horizontal * 2) + 4); } .select2-selection__arrow:after { right: @padding-xs-horizontal; } } // Multiple &.select2-selection--multiple { .select2-selection__choice { padding: @padding-xs-vertical @padding-xs-horizontal; font-size: @font-size-small; line-height: @line-height-small; } .select2-search--inline .select2-search__field { padding: @padding-xs-vertical 0; font-size: @font-size-small; line-height: @line-height-small; } } } // Custom colors // ------------------------------ // Multiple selection choices .select2-selection--multiple[class*=bg-] { .select2-selection__choice { background-color: fade(#000, 25%); } } // Dropdown menu .select2-dropdown[class*=bg-] { // Search field .select2-search--dropdown .select2-search__field { background-color: fade(#000, 20%); border-color: transparent; color: #fff; } // Selected item .select2-results__option[aria-selected=true] { background-color: fade(#000, 20%); } // Hovered item .select2-results__option--highlighted { background-color: fade(#000, 10%); } } // Misc // ------------------------------ // Mask .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; z-index: 99; background-color: #fff; .opacity(0); } // Accessible .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: fixed !important; width: 1px !important; } // Loading remote data example demo // ------------------------------ // Results .select2-result-repository { padding-top: @padding-base-vertical; padding-bottom: @padding-base-vertical; } // Avatar .select2-result-repository__avatar { float: left; width: 60px; margin-right: @content-padding-base; img { width: 100%; height: auto; border-radius: 100px; } } // Meta .select2-result-repository__meta { margin-left: 70px; } // Title .select2-result-repository__title { font-weight: 500; word-wrap: break-word; margin-bottom: 2px; } // Data .select2-result-repository__forks, .select2-result-repository__stargazers, .select2-result-repository__watchers { display: inline-block; font-size: @font-size-small; } // Description .select2-result-repository__description { font-size: @font-size-small; } // Add spacing for data .select2-result-repository__forks, .select2-result-repository__stargazers { margin-right: @content-padding-base; }