RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 14:56:07 +03:00
Code Issues Projects Releases Wiki Activity
217cd4cfd0
select2/dist/css/select2.css

183 lines
7.0 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; }
.select2-container .selection .single-select {
box-sizing: border-box;
cursor: pointer;
display: block;
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
height: 28px;
user-select: none;
-webkit-user-select: none; }
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 .selection .single-select .rendered-selection {
display: block;
overflow: hidden;
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
padding-left: 8px;
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
text-overflow: ellipsis; }
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
.select2-container .selection .multiple-select {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .selection .multiple-select .rendered-selection {
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
display: inline-block;
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis; }
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
.select2-container .select2-search-inline {
float: left; }
.select2-container .select2-search-inline input {
border: none;
font-size: 100%;
margin-top: 5px; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
.select2-container .dropdown {
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; }
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
.select2-container .dropdown .results {
display: block; }
.select2-container .dropdown .results .options {
list-style: none;
margin: 0;
padding: 0; }
.select2-container .dropdown .results .options .option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
Working on accessibility This makes quite a few changes, one of the major ones being the removal of classes for marking options as selected or selectable, and instead using the ARIA attributes which should already be present.
2014-10-18 18:49:51 +04:00
.select2-container .dropdown .results .options .option[aria-selected] {
cursor: pointer; }
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
.select2-container .select2-search {
display: block;
padding: 4px; }
.select2-container .select2-search input {
padding: 4px;
width: 100%; }
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
.select2-container.open .dropdown {
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;
border-top-right-radius: 0;
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
left: 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
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
.select2-container.select2-theme-default .selection .single-select {
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; }
.select2-container.select2-theme-default .selection .single-select .rendered-selection {
color: #444;
line-height: 28px; }
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
.select2-container.select2-theme-default .selection .single-select .rendered-selection .placeholder {
color: #999; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
.select2-container.select2-theme-default .selection .multiple-select {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
list-style: none;
margin: 0;
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
padding: 0 5px; }
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
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
color: #999;
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
margin-top: 5px;
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
float: left; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
float: left;
margin-right: 5px;
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
margin-top: 5px;
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
padding: 0 5px; }
Added remove button on multiple select choices
2014-10-17 04:32:08 +04:00
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
color: #999;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
color: #333; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
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; }
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
.select2-container.select2-theme-default .select2-search input {
Working on searching results
2014-10-16 04:51:29 +04:00
border: 1px solid #aaa; }
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
.select2-container.select2-theme-default .dropdown .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; }
Accessibility matches better Now the accessibility for the single select box better matches what is picked up for a native select. This fixes an issue with us always setting `aria-activedescendant`, which caused Orca to always say the full path to the selected result, instead of saying that the box was a combobox with a selection. This means that the `aria-activedescendant` attribute will now only be set when the dropdown is open. This also switches the results list from a listbox to a tree, which is what Firefox tells screen readers that a standard select is. Combined with a change to use `role=group` and `aria-label` for option group labels, screen readers will now announce the group that they are in as well.
2014-10-20 04:40:45 +04:00
.select2-container.select2-theme-default .dropdown .results .options .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; }
Accessibility matches better Now the accessibility for the single select box better matches what is picked up for a native select. This fixes an issue with us always setting `aria-activedescendant`, which caused Orca to always say the full path to the selected result, instead of saying that the box was a combobox with a selection. This means that the `aria-activedescendant` attribute will now only be set when the dropdown is open. This also switches the results list from a listbox to a tree, which is what Firefox tells screen readers that a standard select is. Combined with a change to use `role=group` and `aria-label` for option group labels, screen readers will now announce the group that they are in as well.
2014-10-20 04:40:45 +04:00
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
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
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .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; }
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
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
background-color: #5897fb;
color: white; }
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
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
.select2-container.select2-theme-classic .selection .single-select {
background-color: #f6f6f6;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%);
background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%);
background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
.select2-container.select2-theme-classic .selection .single-select:focus {
border: 1px solid #5897fb; }
.select2-container.select2-theme-classic .selection .single-select .rendered-selection {
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; }
.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder {
color: #999; }
.select2-container.select2-theme-classic.open .selection .single-select {
border: 1px solid #5897fb;
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
.select2-container.select2-theme-classic.open .selection .single-select, .select2-container.select2-theme-classic.open .selection .multiple-select {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container.select2-theme-classic .dropdown {
background-color: white;
border-top: none; }
Added inline searching for multiple selects This adds a search box to the main container for multiple select boxes, similar to the what the old version had. This can still be swapped out such that the search box displays above the results like it previously did. The placeholder for multiple selects will also now use the input attribute of the search box instead of generating a custom element. This also changes the selector for the search container to `.select2-search`, which is consistent with the old class and reduces the complexity of the selectors. This fixes an issue with how decorators worked, where the constructor from the parent class would clobber the custom constructor that is generated for the new decorated class. This has been fixed by excluding the constructor from the list of fields which are transferred when decorating classes.
2014-11-23 03:21:46 +03:00
.select2-container.select2-theme-classic .dropdown .select2-search input {
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;
outline: 0; }
.select2-container.select2-theme-classic .dropdown .results > .options {
max-height: 200px;
overflow-y: auto; }
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] {
padding: 0; }
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label {
cursor: default;
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
display: block;
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
padding: 6px; }
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true] {
color: grey; }
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted {
background-color: #3875d7;
color: white; }
.select2-container.select2-theme-classic.open .dropdown {
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
border: 1px solid #5897fb;
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; }
Reference in New Issue Copy Permalink