/* ------------------------------------------------------------------------------
*
* # Select2 selects
*
* Styles for select2.js - custom select plugin
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
/* # Single select
-------------------------------------------------- */
.select2-container {
width: 100%;
outline: 0;
position: relative;
display: inline-block;
vertical-align: middle;
color: @input-color;
text-align: left;
border-radius: @input-border-radius;
// Custom border color
&[class*=border-] {
.select2-choice,
&.select2-dropdown-open.select2-drop-above .select2-choice,
&.select2-dropdown-open.select2-drop-above .select2-choices {
border-color: inherit;
}
}
// Double border
&.border-lg {
.select2-choice,
.select2-choices {
border-width: 2px;
}
}
// Custom background color
&[class*=bg-] {
.select2-choice {
background-color: inherit;
border-color: inherit;
color: #fff;
}
// Darken on hover
.select2-choice:hover,
&.select2-dropdown-open .select2-choice {
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
}
// Disabled container
&.select2-container-disabled {
.select2-choice {
.box-shadow(none);
}
}
}
// Disabled container
&.select2-container-disabled {
.select2-choice {
cursor: @cursor-disabled;
background-color: @input-bg-disabled;
color: @gray-light;
.box-shadow(none);
abbr {
cursor: @cursor-disabled;
}
}
&[class*=bg-] {
border-color: fade(#fff, 40%);
.select2-choice {
background-color: fade(#fff, 40%);
color: fade(#fff, 80%);
}
}
}
}
// Choice field
// ------------------------------
// Choice
.select2-choice {
display: block;
background-color: #fff;
height: @input-height-base;
padding: @padding-base-vertical @padding-base-horizontal;
padding-left: (@padding-base-horizontal - 1);
padding-right: 0;
line-height: @line-height-base;
position: relative;
border: 1px solid @input-border;
white-space: nowrap;
border-radius: @input-border-radius;
background-clip: padding-box;
-webkit-touch-callout: none;
.user-select(none);
// Apply input color
&,
&:hover,
&:focus {
color: @input-color;
}
// Darken on hover
&:hover {
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
}
// Set border radius to the input
.select2-dropdown-open & {
border-radius: @input-border-radius @input-border-radius 0 0;
.box-shadow(0 0 0 100px fade(#000, 2%) inset);
}
.select2-drop-above & {
border-radius: 0 0 @input-border-radius @input-border-radius;
}
// Select line
.select2-chosen {
margin-right: ((@padding-base-horizontal * 2) + 4);
padding-left: 1px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: none;
width: auto;
// Icons
> i {
margin-right: 10px;
&.icon-undefined {
margin-right: 0;
}
}
}
}
// Clear button
.select2-choice {
abbr {
display: none;
position: absolute;
right: (@padding-base-horizontal - 3);
top: 50%;
margin-top: -(@icon-font-size / 2);
border: 0;
cursor: pointer;
outline: 0;
border-radius: @input-border-radius;
line-height: 1;
.opacity(0.8);
&:hover {
opacity: 1;
}
&:after {
content: '\ed6b';
font-family: 'icomoon';
display: inline-block;
font-size: @icon-font-size;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
// Clear button color in contextual colors
.select2-container[class*=bg-] & {
abbr,
abbr:hover {
color: #fff;
}
}
// Display button when item is chosen
.select2-allowclear & {
abbr {
display: inline-block;
}
}
}
// Dropdown arrow
.select2-choice {
// Arrow icon
.select2-arrow:after {
content: '\e9c5';
font-family: 'Icomoon';
display: inline-block;
position: absolute;
top: 50%;
right: @padding-base-horizontal;
width: @icon-font-size;
text-align: right;
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 open
.select2-dropdown-open & {
.select2-arrow:after {
content: '\e9c6';
}
}
// Hide arrow if clear button is shown
.select2-allowclear & {
.select2-arrow:after {
content: none;
}
}
}
// Select dropdown
// ------------------------------
// Mask
.select2-drop-mask {
border: 0;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
z-index: 9998;
background-color: #fff;
.opacity(0);
}
// Dropdown
.select2-drop {
width: 100%;
position: absolute;
z-index: 9999;
top: 100%;
background-color: #fff;
color: @text-color;
border: 1px solid @input-border;
border-top-width: 0;
border-radius: 0 0 @border-radius-base @border-radius-base;
}
// Specific dropup corrections
.select2-drop-above {
border-top-width: 1px;
border-bottom-width: 0;
border-radius: @border-radius-base @border-radius-base 0 0;
}
// Active dropdown border radius
.select2-drop-active {
border-radius: 0 0 @border-radius-base @border-radius-base;
.select2-drop.select2-drop-above& {
border-radius: @border-radius-base @border-radius-base 0 0;
}
}
// Auto width
.select2-drop-auto-width {
width: auto;
}
// Accessible info
.select2-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// Select search block and input
// ------------------------------
.select2-search {
display: block;
width: 100%;
margin: 0;
padding: @padding-base-horizontal;
padding-bottom: (@padding-base-horizontal - @list-spacing);
position: relative;
z-index: 10000;
white-space: nowrap;
// 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) - 2);
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.opacity(0.6);
}
// Input
input {
width: 100%;
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;
}
// Change input styles for colored dropdown
.select2-drop[class*=bg-] & {
input {
background-color: fade(#000, 20%);
border-color: transparent;
color: #fff;
}
}
}
// Select results
// ------------------------------
.select2-results {
max-height: 250px;
margin: 0;
padding: @list-spacing 0;
position: relative;
overflow-x: hidden;
overflow-y: auto;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
.select2-result-sub {
margin: 0;
padding-left: 0;
}
// Item
li {
list-style: none;
display: list-item;
em {
font-style: normal;
}
}
// Optgroups
li.select2-result-with-children {
> .select2-result-label {
font-size: @font-size-mini;
line-height: @line-height-mini;
text-transform: uppercase;
cursor: default;
font-weight: 500;
margin-top: 2px;
margin-bottom: 2px;
}
&:first-child > .select2-result-label {
margin-top: 0;
}
.select2-result > .select2-result-label {
padding-left: (@padding-base-horizontal * 2);
padding-right: (@padding-base-horizontal * 2);
}
}
// Show more results
.select2-more-results {
background: @dropdown-annotation-bg;
display: list-item;
}
// Labels
.select2-result-label {
padding: @padding-base-vertical @padding-base-horizontal;
margin: 0;
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
.user-select(none);
> i {
margin-right: 10px;
&.icon-undefined {
display: none;
}
}
> span {
left: 10px;
}
}
// Highlighted item
.select2-highlighted {
background-color: @dropdown-link-hover-bg;
ul {
background-color: #fff;
color: @text-color;
}
em {
background-color: transparent;
}
// Make suitable for all colors
.select2-drop[class*=bg-] & {
background-color: fade(#000, 10%);
}
}
// Alternative info
.select2-no-results,
.select2-searching,
.select2-selection-limit {
background-color: @dropdown-annotation-bg;
padding: @padding-base-vertical @padding-base-horizontal;
color: @gray-light;
border-top: 1px solid @dropdown-border;
margin-bottom: -(@list-spacing);
border-radius: 0;
.select2-drop[class*=bg-] & {
background-color: fade(#000, 10%);
border-color: fade(#fff, 10%);
color: #fff;
}
}
// Disabled
.select2-disabled {
color: @dropdown-link-disabled-color;
display: list-item;
.select2-result-label {
cursor: @cursor-disabled;
}
.select2-drop[class*=bg-] & {
color: #fff;
.opacity(0.5);
}
}
// Hide selected item
.select2-selected {
display: none;
}
}
// Sub results
// ------------------------------
.select2-results {
ul {
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 2);
}
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 3);
}
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 4);
}
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 5);
}
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 6);
}
ul {
> li .select2-result-label {
padding-left: (@padding-base-horizontal * 7);
}
}
}
}
}
}
}
}
}
/* # Multiple select
-------------------------------------------------- */
.select2-container-multi {
// Choices
.select2-choices {
margin: 0;
border-radius: @input-border-radius;
padding: 0 0 3px 0;
position: relative;
outline: 0;
border: 1px solid @input-border;
cursor: text;
overflow: hidden;
background-color: #fff;
// Clearing floats
&:after {
content: '';
display: table;
clear: both;
}
// Choice list item
li {
float: left;
list-style: none;
}
// Sortable cursor
&.ui-sortable > li {
cursor: move;
}
// Search field
.select2-search-field {
margin: 0;
padding: 0;
white-space: nowrap;
input {
padding: @padding-base-vertical @padding-base-horizontal;
margin-top: 3px;
color: @input-color;
outline: 0;
border: 0;
background: transparent !important;
}
}
// Result item
.select2-search-choice {
margin: 3px 0 0 3px;
position: relative;
cursor: default;
background-clip: padding-box;
-webkit-touch-callout: none;
border-radius: @border-radius-base;
.user-select(none);
// RTL
html[dir="rtl"] & {
margin-left: 0;
margin-right: 3px;
}
// Item
> div {
border-radius: @input-border-radius;
color: #fff;
padding: @padding-base-vertical @padding-base-horizontal;
padding-right: ((@padding-base-horizontal * 2.5));
background-color: @color-slate-700;
> i {
margin-right: 10px;
}
}
// Locked item
&.select2-locked > div {
padding: @padding-base-vertical @padding-base-horizontal;
}
// Inherit bg color in solid menu
&[class*=bg-] > div {
background-color: inherit;
}
// Change selected item cursor
.select2-chosen {
cursor: default;
}
}
// Close button
.select2-search-choice-close {
position: absolute;
right: (@padding-base-horizontal - 3);
top: 50%;
margin-top: -(@icon-font-size / 2);
line-height: 1;
.opacity(0.6);
// Hover state
&:hover {
.opacity(1);
}
// RTL
html[dir="rtl"] & {
right: auto;
left: (@padding-base-horizontal / 2);
}
// Cross icon
&:after {
content: '\ed6b';
font-family: 'icomoon';
display: block;
font-size: @icon-font-size;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
// Custom background color
&[class*=bg-] .select2-choices {
background-color: inherit;
border-color: inherit;
.select2-search-choice > div {
background-color: fade(#000, 30%);
}
}
// Custom border
&[class*=border-] .select2-choices {
border-color: inherit;
}
// Set dropdown border radius
&.select2-dropdown-open {
.select2-choices {
border-radius: @border-radius-base @border-radius-base 0 0;
}
&.select2-drop-above .select2-choices {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
// Placeholder
.select2-default {
&,
&:hover,
&:focus {
color: #999;
.select2-arrow {
color: @text-color;
}
}
}
// Disabled state
&.select2-container-disabled .select2-choices {
cursor: default;
background-color: @dropdown-annotation-bg;
.select2-search-choice {
color: #fff;
.opacity(0.6);
> div {
padding-right: 12px;
}
.select2-search-choice-close {
display: none;
}
}
}
}
/* # Additional sizing
-------------------------------------------------- */
// Large
.select-lg {
// Single
.select2-choice {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
padding-right: 0;
font-size: @font-size-large;
abbr,
.select2-arrow:after {
right: @padding-large-horizontal;
}
}
// Multiple
&.select2-container-multi {
.select2-choices {
.select2-search-choice > div {
padding: @padding-large-vertical @padding-large-horizontal;
padding-right: ((@padding-large-horizontal * 2.5));
font-size: @font-size-large;
}
// Update clear button position
.select2-search-choice-close {
right: (@padding-large-horizontal - 3);
html[dir="rtl"] & {
right: auto;
left: (@padding-large-horizontal - 3);
}
}
// Update input size
.select2-search-field input {
padding: @padding-large-vertical @padding-large-horizontal;
}
}
}
}
// Small
.select-sm {
// Single
.select2-choice {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
padding-right: 0;
abbr,
.select2-arrow:after {
right: @padding-small-horizontal;
}
}
// Multiple
&.select2-container-multi {
.select2-choices {
.select2-search-choice > div {
padding: @padding-small-vertical @padding-small-horizontal;
padding-right: ((@padding-small-horizontal * 2.5));
}
// Update clear button position
.select2-search-choice-close {
right: (@padding-small-horizontal - 3);
html[dir="rtl"] & {
right: auto;
left: (@padding-small-horizontal - 3);
}
}
// Update input size
.select2-search-field input {
padding: @padding-small-vertical @padding-small-horizontal;
}
}
}
}
// Mini
.select-xs {
// Single
.select2-choice {
height: @input-height-mini;
padding: @padding-xs-vertical @padding-xs-horizontal;
padding-right: 0;
font-size: @font-size-small;
line-height: @line-height-small;
abbr,
.select2-arrow:after {
right: @padding-xs-horizontal;
}
}
// Multiple
&.select2-container-multi {
.select2-choices {
.select2-search-choice > div {
padding: @padding-xs-vertical @padding-xs-horizontal;
padding-right: ((@padding-xs-horizontal * 2.5));
font-size: @font-size-small;
}
// Update clear button position
.select2-search-choice-close {
right: (@padding-xs-horizontal - 3);
html[dir="rtl"] & {
right: auto;
left: (@padding-xs-horizontal - 3);
}
}
// Update input size
.select2-search-field input {
padding: @padding-xs-vertical @padding-xs-horizontal;
font-size: @font-size-small;
}
}
}
}
/* # Other Select2 styles
-------------------------------------------------- */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
text-decoration: underline;
}
.select2-offscreen,
.select2-offscreen:focus {
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
outline: 0 !important;
left: 0px !important;
top: 0px !important;
}
.select2-display-none {
display: none;
}
.select2-measure-scrollbar {
position: absolute;
top: -10000px;
left: -10000px;
width: 100px;
height: 100px;
overflow: scroll;
}
// Demo styles for remote source table
.movie-title {
font-size: @font-size-h6;
font-weight: 500;
}
.movie-image img {
margin-right: 12px;
}