RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 06:46:04 +03:00
Code Issues Projects Releases Wiki Activity

Converted classic theme to BEM

Browse Source 
This should be the last of the changes.
This commit is contained in:
Kevin Brown 2014-11-24 19:11:02 -05:00
parent 3e54fc97e5
commit e686bce9d0
3 changed files with 89 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
dist/css/select2.css vendored
View File

@ -141,7 +141,7 @@
display: block;
padding: 6px; }
.select2-container.select2-theme-classic .selection .single-select {
.select2-container--classic .select2-selection--single {
background-color: #f6f6f6;
border: 1px solid #aaa;
border-radius: 4px;
@ -151,44 +151,44 @@
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 {
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb; }
.select2-container.select2-theme-classic .selection .single-select .rendered-selection {
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px; }
.select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder {
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999; }
.select2-container.select2-theme-classic.open .selection .single-select {
.select2-container--classic.select2-container--open .select2-selection--single {
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 {
.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--classic.select2-container--open .select2-selection--multiple {
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; }
.select2-container.select2-theme-classic .dropdown .select2-search input {
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0; }
.select2-container.select2-theme-classic .dropdown .results > .options {
.select2-container--classic .select2-dropdown {
background-color: white;
border-top: none; }
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto; }
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] {
.select2-container--classic .select2-results__option[role=group] {
padding: 0; }
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label {
.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.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 {
.select2-container--classic.select2-container--open .select2-dropdown {
border: 1px solid #5897fb;
border-top: none; }

2
dist/css/select2.min.css vendored
View File

File diff suppressed because one or more lines are too long

60
src/scss/theme/classic/layout.scss
View File

@ -1,9 +1,8 @@
@import "defaults";
@import "../../mixins/gradients";
.select2-container.select2-theme-classic {
.selection {
.single-select {
.select2-container--classic {
.select2-selection--single {
background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
border: 1px solid $border-color;
@ -17,77 +16,70 @@
border: 1px solid $focus-border-color;
}
.rendered-selection {
.select2-selection__rendered {
color: #444;
line-height: 28px;
}
.placeholder {
.select2-selection__placeholder {
color: #999;
}
}
}
}
&.open {
.selection {
.single-select {
&.select2-container--open {
.select2-selection--single {
border: 1px solid $focus-border-color;
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
}
.single-select,
.multiple-select {
.select2-selection--single,
.select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.dropdown {
background-color: $dropdown-bg-color;
border-top: none;
.select2-search {
input {
.select2-search--dropdown {
.select2-search__field {
border: 1px solid $border-color;
outline: 0;
}
}
.results {
&> .options {
.select2-dropdown {
background-color: $dropdown-bg-color;
border-top: none;
}
.select2-results > .select2-results__options {
max-height: $results-max-height;
overflow-y: auto;
}
.options {
.option {
.select2-results__option {
&[role=group] {
padding: 0;
.group-label {
cursor: default;
display: block;
padding: 6px;
}
}
&[aria-disabled=true] {
color: $results-choice-fg-unselectable-color;
}
}
&[aria-selected].highlighted {
.select2-results__option--highlighted[aria-selected] {
background-color: $results-choice-bg-hover-color;
color: $results-choice-fg-hover-color;
}
}
}
}
.select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
&.open .dropdown {
&.select2-container--open .select2-dropdown {
border: 1px solid $focus-border-color;
border-top: none;
}