RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-23 13:36:01 +03:00
Code Issues Projects Releases Wiki Activity
16e565e28e
select2/dist/css/select2.css

293 lines
10 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; }
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-selection--single {
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
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; }
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-selection--single .select2-selection__rendered {
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;
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
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-selection--multiple {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: 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-selection--multiple .select2-selection__rendered {
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; }
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--inline {
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
float: left; }
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--inline .select2-search__field {
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
border: none;
font-size: 100%;
margin-top: 5px; }
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-dropdown {
Basic dropdown is in place
2014-08-28 04:18:17 +04:00
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
width: 100%;
z-index: 100; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-results {
display: block; }
.select2-results__options {
list-style: none;
margin: 0;
padding: 0; }
.select2-results__option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-results__option[aria-selected] {
cursor: pointer; }
.select2-container--open .select2-dropdown {
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
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-search--dropdown {
display: block;
padding: 4px; }
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%; }
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;
font-weight: bold;
margin-right: 10px; }
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; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
background-color: white;
border: 1px solid #aaa;
Automatically resize the search box Now the search box is automatically resized for placeholders to fit the available space, so we don't need to worry about the placeholder not being visible. When the placeholder doesn't need to be visible, the size of the search box is determined based on the length of the current search term.
2014-11-23 04:32:25 +03:00
border-radius: 4px;
cursor: text; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
Basic multiple select implementation
2014-08-29 19:31:18 +04:00
list-style: none;
margin: 0;
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; }
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; }
.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; }
Finished switching main container to BEM
2014-11-25 02:38:58 +03:00
.select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple {
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-search--dropdown .select2-search__field {
Working on searching results
2014-10-16 04:51:29 +04:00
border: 1px solid #aaa; }
Switch the multiple selection container This switches the container to use BEM for the class naming.
2014-11-25 02:30:58 +03:00
.select2-container--default .select2-search--inline .select2-search__field {
Automatically resize the search box Now the search box is automatically resized for placeholders to fit the available space, so we don't need to worry about the placeholder not being visible. When the placeholder doesn't need to be visible, the size of the search box is determined based on the length of the current search term.
2014-11-23 04:32:25 +03:00
border: none;
outline: 0; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results > .select2-results__options {
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
max-height: 200px;
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
overflow-y: auto; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[role=group] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
padding: 0; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[aria-disabled=true] {
Better accessibility for results Options are correctly called out as focus moves around the results list.
2014-10-20 03:49:06 +04:00
color: #999; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option[aria-selected=true] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
background-color: #ddd; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__option--highlighted[aria-selected] {
Fixed keyboard scrolling Now when scrolling through results with the keyboard, the highlighted option will always be visible.
2014-10-20 01:04:57 +04:00
background-color: #5897fb;
color: white; }
Finish the core switch to BEM This switches all of the dropdown components to use BEM.
2014-11-25 02:59:19 +03:00
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
Added Utils.Decorate and tests This adds decorator support in a very basic way, but enough that it doesn't take a lot of effort to get it implemented. This also starts work on splitting things out for theming.
2014-08-29 03:54:01 +04:00
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-selection--single {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-color: #f6f6f6;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
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); }
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;
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); }
.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; }
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 {
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;
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;
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-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); }
Added the arrow for the dropdown
2014-11-25 05:33:22 +03:00
.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; }
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; }
.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; }
.select2-container--classic.select2-container--open .select2-selection--multiple {
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-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
Working on the classic theme
2014-11-25 04:08:24 +03:00
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-dropdown {
Started work on the classic theme Some people like the old theme, so we're going to also include that one as well as the easier-to-extend flat theme.
2014-11-19 22:26:52 +03:00
background-color: white;
border-top: none; }
Converted classic theme to BEM This should be the last of the changes.
2014-11-25 03:11:02 +03:00
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container--classic .select2-results__option[role=group] {
padding: 0; }
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey; }
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white; }
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px; }
.select2-container--classic.select2-container--open .select2-dropdown {
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