RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 23:06:02 +03:00
Code Issues Projects Releases Wiki Activity
5c71e2da50
select2/dist/css/select2.css

391 lines
15 KiB
CSS
Raw Normal View History

More work on rendering Switched all of the divs to spans, as the container should not be a block by default.
2014-08-27 19:33:33 +04:00
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle; }
Fixed SASS error This fixes the SASS error caused by the `&[dir="rtl"]` selector in the `_single.scss` and `_multiple.scss` files. We were expecting these files to be nested within the `.select-container` class, which would have made this a non-error as the `&` would refer to the `.select2-container` class that was wrapping the `@import`. This moves the `@import` statements into the `.select2-container` class, so this no longer triggers an error in the Ruby version of SASS. This closes https://github.com/select2/select2/issues/2896
2015-01-07 01:50:44 +03:00
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
More work on rendering Switched all of the divs to spans, as the container should not be a block by default.
2014-08-27 19:33:33 +04:00
display: block;
Fixed SASS error This fixes the SASS error caused by the `&[dir="rtl"]` selector in the `_single.scss` and `_multiple.scss` files. We were expecting these files to be nested within the `.select-container` class, which would have made this a non-error as the `&` would refer to the `.select2-container` class that was wrapping the `@import`. This moves the `@import` statements into the `.select2-container` class, so this no longer triggers an error in the Ruby version of SASS. This closes https://github.com/select2/select2/issues/2896
2015-01-07 01:50:44 +03:00
height: 28px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
overflow: hidden;
padding-left: 8px;
padding-right: 20px;
text-overflow: ellipsis; }
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px; }
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis; }
.select2-container .select2-search--inline {
float: left; }
.select2-container .select2-search--inline .select2-search__field {
border: none;
font-size: 100%;
margin-top: 5px; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-dropdown {
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
width: 100%;
z-index: 100; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-results {
display: block; }
.select2-results__options {
list-style: none;
margin: 0;
padding: 0; }
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-results__option[aria-selected] {
cursor: pointer; }
.select2-container--open .select2-dropdown {
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
left: 0; }
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container--open .select2-dropdown--below {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
border-top: none;
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
border-top-left-radius: 0;
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
border-top-right-radius: 0; }
More work on rendering Switched all of the divs to spans, as the container should not be a block by default.
2014-08-27 19:33:33 +04:00
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-search--dropdown {
display: block;
padding: 4px; }
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%; }
Add `minimumResultsForSearch`
2014-12-11 02:46:05 +03:00
.select2-search--dropdown.select2-search--hide {
Fix hiding search When the dropdown is in the dropdown that is attached to the body, the call to `show` causes `display: inline` to be set directly on the search container. This causes rendering issues, so this change uses a class instead of calling `show` and `hide` directly. This is most likely a jQuery bug of some form, as it only happens when using the dropdown that is attached to the body.
2014-11-27 04:39:52 +03:00
display: none; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
Added support for a click mask In past versions of Select2, a mask was used to detect clicks outside of the dropdown. While this works with high accuracy, and avoid many of the click issues we had with modals, it is no longer the default close handler for Select2. It blocks any features on the container from working without a second click, and introduces odd edge cases that we cannot easily handle.
2014-12-06 06:44:41 +03:00
.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;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0); }
Start the switch to BEM This is inspired by https://github.com/ivaynberg/select2/issues/2826 and starts the general transition to using selectors with a lower specificity. This should make it considerably easier to override the styles in the long run. Unfortunately libsass does not support the SASS 3.3 style for BEM where we can just use `&__m` for defining sub-modules. For now we are still using a limited amount of nesting, but nowhere near as much as we did in the past.
2014-11-25 02:11:03 +03:00
.select2-container--default .select2-selection--single {
Added support for placeholders Placeholder support has been implemented as a separate module, so any selection container should be able to be decorated and get instant placeholder support. It hooks into the updating method of selections, and determines when to display the placeholder based on the options that are being updated. It works in the same way as the old placeholders. If no options are selected and being displayed, like in the case of a multiple select, then the placeholder will always be shown. If one option is being displayed, and the id of the placeholder matches the id of the selected element, then the placeholder will be shown. This is similar to the functionality that was present in Select2 2.x, where the placeholder could be passed in as an object that would be compared to the selection. This still requires that, for single selects, the first element must match the placeholder id. Because the default placeholder id is a blank string, this will maintain backwards compatibility with past versions where the first option should be blank. This can still be overridden to point at a different id, keeping support for systems where the placeholder doesn't use a blank value. **Note:** This does not hide the blank option for single selects, but that will still be maintained for backwards compatibility within the results module. It will not depend on a placeholder being present, but instead will hide any options with blank text.
2014-10-17 03:59:38 +04:00
background-color: #fff;
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
border: 1px solid #aaa;
border-radius: 4px; }
Start the switch to BEM This is inspired by https://github.com/ivaynberg/select2/issues/2826 and starts the general transition to using selectors with a lower specificity. This should make it considerably easier to override the styles in the long run. Unfortunately libsass does not support the SASS 3.3 style for BEM where we can just use `&__m` for defining sub-modules. For now we are still using a limited amount of nesting, but nowhere near as much as we did in the past.
2014-11-25 02:11:03 +03:00
.select2-container--default .select2-selection--single .select2-selection__rendered {
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
color: #444;
line-height: 28px; }
Added back the `allowClear` option
2014-11-25 04:43:15 +03:00
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
Automatically close on scroll This now matches how the browser works, where the dropdown is closed when the window scrolls. The arrow was also covering the clear placeholder icon, this has now been fixed and the clear icon is now placed correctly.
2014-11-27 06:30:31 +03:00
font-weight: bold; }
Start the switch to BEM This is inspired by https://github.com/ivaynberg/select2/issues/2826 and starts the general transition to using selectors with a lower specificity. This should make it considerably easier to override the styles in the long run. Unfortunately libsass does not support the SASS 3.3 style for BEM where we can just use `&__m` for defining sub-modules. For now we are still using a limited amount of nesting, but nowhere near as much as we did in the past.
2014-11-25 02:11:03 +03:00
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999; }
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
Added RTL support to Select2 This works in the same way as the `lang` option, which pulls directly from the `dir` property on DOM nodes.
2014-12-18 05:22:14 +03:00
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto; }
Respect the disabled attribute Added a disabled state for Select2. This will correctly listen to property changes (so when the disabled property is changed) and update the state of Select2 to reflect it. Added a utility function to find a method to a different context.
2014-12-17 06:44:11 +03:00
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default; }
Hide the `x` when the container is disabled This fixes an issue where the `x` in multiple selects (visible next to the option) would be visible even if the container was disabled. Because it was still accepting events as well, this would cause the underlying data to be changed, even though it was disabled. We now hide the icon using CSS so this issue doesn't occur. The same applies to the `x` for clearing a placeholder. https://github.com/select2/select2/issues/2903
2015-01-09 18:45:35 +03:00
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none; }
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
background-color: white;
border: 1px solid #aaa;
Automatically resize the search box Now the search box is automatically resized for placeholders to fit the available space, so we don't need to worry about the placeholder not being visible. When the placeholder doesn't need to be visible, the size of the search box is determined based on the length of the current search term.
2014-11-23 04:32:25 +03:00
border-radius: 4px;
cursor: text; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
list-style: none;
margin: 0;
Style clear icon in multiple selects The `AllowClear` decorator appears to work fine with multiple selects, so we've chosen to remove remove it. This adds some styling and fixes the check so it all works as expected. This closes https://github.com/select2/select2/issues/2903.
2015-01-09 19:01:34 +03:00
padding: 0 5px;
width: 100%; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left; }
Style clear icon in multiple selects The `AllowClear` decorator appears to work fine with multiple selects, so we've chosen to remove remove it. This adds some styling and fixes the check so it all works as expected. This closes https://github.com/select2/select2/issues/2903.
2015-01-09 19:01:34 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333; }
Added RTL support to Select2 This works in the same way as the `lang` option, which pulls directly from the `dir` property on DOM nodes.
2014-12-18 05:22:14 +03:00
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
float: right; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
Respect the disabled attribute Added a disabled state for Select2. This will correctly listen to property changes (so when the disabled property is changed) and update the state of Select2 to reflect it. Added a utility function to find a method to a different context.
2014-12-17 06:44:11 +03:00
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default; }
Hide the `x` when the container is disabled This fixes an issue where the `x` in multiple selects (visible next to the option) would be visible even if the container was disabled. Because it was still accepting events as well, this would cause the underlying data to be changed, even though it was disabled. We now hide the icon using CSS so this issue doesn't occur. The same applies to the `x` for clearing a placeholder. https://github.com/select2/select2/issues/2903
2015-01-09 18:45:35 +03:00
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none; }
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-search--dropdown .select2-search__field {
Working on searching results
2014-10-16 04:51:29 +04:00
border: 1px solid #aaa; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-search--inline .select2-search__field {
Respect the disabled attribute Added a disabled state for Select2. This will correctly listen to property changes (so when the disabled property is changed) and update the state of Select2 to reflect it. Added a utility function to find a method to a different context.
2014-12-17 06:44:11 +03:00
background: transparent;
Automatically resize the search box Now the search box is automatically resized for placeholders to fit the available space, so we don't need to worry about the placeholder not being visible. When the placeholder doesn't need to be visible, the size of the search box is determined based on the length of the current search term.
2014-11-23 04:32:25 +03:00
border: none;
outline: 0; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results > .select2-results__options {
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
max-height: 200px;
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
overflow-y: auto; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[role=group] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
padding: 0; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[aria-disabled=true] {
Better accessibility for results Options are correctly called out as focus moves around the results list.
2014-10-20 03:49:06 +04:00
color: #999; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[aria-selected=true] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
background-color: #ddd; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option--highlighted[aria-selected] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
background-color: #5897fb;
color: white; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-selection--single {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-color: #f6f6f6;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-repeat: repeat-x;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-selection--single:focus {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
border: 1px solid #5897fb; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-selection--single .select2-selection__rendered {
Work on the AMD scaffolding This will make it far easier to ensure that components are in their own modules as well as make it possible to have custom builds of Select2.
2014-08-27 02:01:42 +04:00
color: #444;
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
line-height: 28px; }
Added back the `allowClear` option
2014-11-25 04:43:15 +03:00
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; }
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
background-repeat: repeat-x;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); }
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0; }
Added RTL support to Select2 This works in the same way as the `lang` option, which pulls directly from the `dir` property on DOM nodes.
2014-12-18 05:22:14 +03:00
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left; }
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic.select2-container--open .select2-selection--single {
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none; }
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
background-repeat: repeat-x;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-repeat: repeat-x;
IE fixes and alt-arrow support alt-down/up is the standard way of opening a select when using a screen reader. This also fixes the gradient in IE, so now it displays the right colors. Also added a note about Placeholders.js, so the placeholders on multi-select boxes will work in IE 9 and below.
2014-12-18 03:06:13 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); }
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0; }
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px; }
Style clear icon in multiple selects The `AllowClear` decorator appears to work fine with multiple selects, so we've chosen to remove remove it. This adds some styling and fixes the check so it all works as expected. This closes https://github.com/select2/select2/issues/2903.
2015-01-09 19:01:34 +03:00
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none; }
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555; }
Added RTL support to Select2 This works in the same way as the `lang` option, which pulls directly from the `dir` property on DOM nodes.
2014-12-18 05:22:14 +03:00
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto; }
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto; }
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic.select2-container--open .select2-selection--multiple {
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
border: 1px solid #5897fb; }
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-dropdown {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-color: white;
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
border: 1px solid transparent; }
.select2-container--classic .select2-dropdown--above {
border-bottom: none; }
.select2-container--classic .select2-dropdown--below {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
border-top: none; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--classic .select2-results__option[role=group] {
padding: 0; }
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey; }
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white; }
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic.select2-container--open .select2-dropdown {
Allow the dropdown to point up Up until now, the container could only have a dropdown that was displayed below the container. While this worked well, there are some cases where the dropdown should be displayed above the container. Most notably, this is when the conatainer is displayed towards the bottom of the page, and displaying the dropdown would cause the page to be extended. Because we close the dropdown when the page is scrolled, the user would not be able to access any options that were displayed outside of the viewpoint. Because of the order that events are fired, we attach the handlers for repositioning the dropdown after results are displayed when the container is opened for the first time. This allows it to be registered after the results container registers their events, so the dropdown is repositioned after the results have been displayed. The logic for determining the direction that the dropdown will be shown in is very similar to the positioning code used in Select2 3.x. Unlike previous versions of Select2, a class is used to indicate the direction of the dropdown, even if it is displaying below the container. The themes provided with Select2 have been updated to correctly render the dropdown in both directions.
2014-12-06 04:06:20 +03:00
border-color: #5897fb; }
Reference in New Issue Copy Permalink