RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-30 00:26:03 +03:00
Code Issues Projects Releases Wiki Activity
eeba16b9c4
select2/dist/css/select2.css

487 lines
17 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;
padding-left: 8px;
padding-right: 20px;
Fix CSS text wrapping for single selects Select2 previously had an issue displaying the text of long values as it was not correctly wrapping the text. This was because the browser did not know that it couldn't wrap at whitespace, which has been fixed. Now Select2 should properly display an ellipsis for large text values instead of overflowing. This closes https://github.com/select2/select2/issues/2984.
2015-02-09 23:58:16 +03:00
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
Update version identifiers to 4.0.1-rc.1
2015-11-10 04:23:20 +03:00
.select2-container .select2-selection--single .select2-selection__clear {
position: relative; }
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[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;
word-wrap: nowrap styling Added `word-wrap: nowrap` to places it wasn’t explicit. Signed-off-by: Kevin Brown <kevin@kevinbrown.in>
2015-02-15 02:36:38 +03:00
text-overflow: ellipsis;
white-space: nowrap; }
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-search--inline {
float: left; }
.select2-container .select2-search--inline .select2-search__field {
Hide the search clear icon in webkit The search box previously displayed a clear icon on the far right side in webkit-based browsers, specifically Chrome and Safari. This hides the clear icon in those browsers, and also fixes a slight sizing issue, so it should no longer be displayed. This also disables autocorrect, autocompleted, as well as a few other automatic search corrections on the field, so mobile devices should have a better experience. This closes https://github.com/select2/select2/issues/3018.
2015-02-09 23:29:28 +03:00
box-sizing: border-box;
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
border: none;
font-size: 100%;
Rebuilt dist
2015-08-20 04:39:21 +03:00
margin-top: 5px;
padding: 0; }
Hide the search clear icon in webkit The search box previously displayed a clear icon on the far right side in webkit-based browsers, specifically Chrome and Safari. This hides the clear icon in those browsers, and also fixes a slight sizing issue, so it should no longer be displayed. This also disables autocorrect, autocompleted, as well as a few other automatic search corrections on the field, so mobile devices should have a better experience. This closes https://github.com/select2/select2/issues/3018.
2015-02-09 23:29:28 +03:00
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
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%;
Fix z-index for modals Select2 did not previously have a high enough `z-index` for it to be displayed over modals. The `z-index` has been raised to 1051, so now it should appear over the jQuery UI and Bootstrap modals. This closes https://github.com/select2/select2/issues/2958.
2015-01-27 22:27:18 +03:00
z-index: 1051; }
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;
Fix dropdown search sizing When Select2 is not used with a design that universally sets `box-sizing: border-box` to elements, the search box previously would take up more space than expected. This fixed the issue by adding the `box-sizing` rule to the search box. This closes https://github.com/select2/select2/issues/2978.
2015-01-27 22:09:52 +03:00
width: 100%;
box-sizing: border-box; }
Hide the search clear icon in webkit The search box previously displayed a clear icon on the far right side in webkit-based browsers, specifically Chrome and Safari. This hides the clear icon in those browsers, and also fixes a slight sizing issue, so it should no longer be displayed. This also disables autocorrect, autocompleted, as well as a few other automatic search corrections on the field, so mobile devices should have a better experience. This closes https://github.com/select2/select2/issues/3018.
2015-02-09 23:29:28 +03:00
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none; }
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); }
Render native select out of screen This closes https://github.com/select2/select2/issues/3065. Signed-off-by: Kevin Brown <kevin@kevinbrown.in>
2015-04-01 03:01:29 +03:00
.select2-hidden-accessible {
Add `!important` to `.select2-hidden-accessible`. `.select2-hidden-accessible` is the CSS class that is added to the original `<select>` element (that Select2 is initialized on) to hide it. In cases where the original `<select>` has other style declarations assigned which conflict with those of `.select2-hidden-accessible`, the latter styles may be overridden, possibly resulting in the original `<select>` element not being properly hidden. Similar to what https://github.com/select2/select2/pull/1549 did for Select2 v3's CSS, this adds the `!important` rule to all style declarations for `.select2-hidden-accessible` to make it exponentially harder to override them.
2015-04-30 20:09:18 +03:00
border: 0 !important;
clip: rect(0 0 0 0) !important;
compile+minify for 4.0.6-rc.0
2017-10-26 21:19:09 +03:00
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
Add `!important` to `.select2-hidden-accessible`. `.select2-hidden-accessible` is the CSS class that is added to the original `<select>` element (that Select2 is initialized on) to hide it. In cases where the original `<select>` has other style declarations assigned which conflict with those of `.select2-hidden-accessible`, the latter styles may be overridden, possibly resulting in the original `<select>` element not being properly hidden. Similar to what https://github.com/select2/select2/pull/1549 did for Select2 v3's CSS, this adds the `!important` rule to all style declarations for `.select2-hidden-accessible` to make it exponentially harder to override them.
2015-04-30 20:09:18 +03:00
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
compile+minify for 4.0.6-rc.0
2017-10-26 21:19:09 +03:00
width: 1px !important;
white-space: nowrap !important; }
Render native select out of screen This closes https://github.com/select2/select2/issues/3065. Signed-off-by: Kevin Brown <kevin@kevinbrown.in>
2015-04-01 03:01:29 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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__arrow {
left: 1px;
right: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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 {
Add `box-sizing` to another area This closes https://github.com/select2/select2/issues/3029.
2015-02-14 07:37:29 +03:00
box-sizing: border-box;
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%; }
Recompile dist with master
2016-04-24 19:21:53 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: 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
.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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
Recompile dist
2015-06-22 03:31:09 +03:00
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
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
float: right; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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 {
margin-left: 5px;
margin-right: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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__remove {
margin-left: 2px;
margin-right: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
Improved focus detection and key handling Now the focus of the selection container is correctly monitored so there is a consistent 1px black border on the default theme whenever it is focused. This requires `focusin`/`focusout` support, which is supported by all major browsers except for Firefox. In Firefox, the old focus appearance is still consistent and has not been broken by this update. The key handling has also been improved such that some of the logic detection that was previously done within the search handlers for multiple select searches is now pushed back to the base selection. This closes https://github.com/select2/select2/issues/2995.
2015-02-14 08:37:51 +03:00
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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--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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-container--default .select2-search--dropdown .select2-search__field {
Working on searching results
2014-10-16 04:51:29 +04:00
border: 1px solid #aaa; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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;
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
outline: 0;
Update version identifiers to 4.0.1-rc.1
2015-11-10 04:23:20 +03:00
box-shadow: none;
-webkit-appearance: textfield; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
Fix support for deep nesting While deep nesting will not work on a standard `<select>`, we can emulate it through data objects still, and just handle the display of the data in the results. This also means that the horrific deep-nested CSS is back to handle the padding. I hope that will get fixed over time. This also fixes one of the performance issues with adding array data, as options are added at the very end instead of one by one.
2015-01-10 04:34:49 +03:00
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em; }
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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 {
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
background-color: #f7f7f7;
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 #aaa;
border-radius: 4px;
outline: 0;
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
background-image: linear-gradient(to bottom, white 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;
Update Sass vertical gradient mixin to latest version from Bootstrap. As described in https://github.com/select2/select2/issues/3304#issuecomment-98395238, this updates the mixin to the latest stable version from Bootstrap Sass which adds Sass' http://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method to ensure that colors are converted "into the format understood by IE filters".
2015-05-02 23:38:18 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', 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;
Update Sass vertical gradient mixin to latest version from Bootstrap. As described in https://github.com/select2/select2/issues/3304#issuecomment-98395238, this updates the mixin to the latest stable version from Bootstrap Sass which adds Sass' http://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method to ensure that colors are converted "into the format understood by IE filters".
2015-05-02 23:38:18 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', 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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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__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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
background-image: linear-gradient(to bottom, white 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;
Update Sass vertical gradient mixin to latest version from Bootstrap. As described in https://github.com/select2/select2/issues/3304#issuecomment-98395238, this updates the mixin to the latest stable version from Bootstrap Sass which adds Sass' http://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method to ensure that colors are converted "into the format understood by IE filters".
2015-05-02 23:38:18 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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;
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
background-image: linear-gradient(to bottom, #eeeeee 50%, white 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;
Update Sass vertical gradient mixin to latest version from Bootstrap. As described in https://github.com/select2/select2/issues/3304#issuecomment-98395238, this updates the mixin to the latest stable version from Bootstrap Sass which adds Sass' http://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method to ensure that colors are converted "into the format understood by IE filters".
2015-05-02 23:38:18 +03:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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 {
margin-left: 5px;
margin-right: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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__remove {
margin-left: 2px;
margin-right: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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--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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic .select2-search--inline .select2-search__field {
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
outline: 0;
box-shadow: 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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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-dropdown--above {
border-bottom: none; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03:00
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-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; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-results__option[role=group] {
padding: 0; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-results__option[aria-disabled=true] {
color: grey; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-results__group {
cursor: default;
display: block;
padding: 6px; }
Upgraded dev dependency grunt-sass to "^1.0.0". Remove explicit node-sass dependency since it is included as part of grunt-sass.
2015-06-12 18:51:24 +03: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-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