You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
798 lines
18 KiB
798 lines
18 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # 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; |
|
}
|
|
|