RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-18 13:03:14 +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; display: block;
padding: 6px; } padding: 6px; }
.select2-container.select2-theme-classic .selection .single-select { .select2-container--classic .select2-selection--single {
background-color: #f6f6f6; background-color: #f6f6f6;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
@ -151,44 +151,44 @@
background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%); background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); } 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; } 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; color: #444;
line-height: 28px; } 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; } color: #999; }
.select2-container.select2-theme-classic.open .selection .single-select { .select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb; border: 1px solid #5897fb;
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%); background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
background-image: -o-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-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); } 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: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
.select2-container.select2-theme-classic .dropdown { .select2-container--classic .select2-search--dropdown .select2-search__field {
background-color: white;
border-top: none; }
.select2-container.select2-theme-classic .dropdown .select2-search input {
border: 1px solid #aaa; border: 1px solid #aaa;
outline: 0; } 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; max-height: 200px;
overflow-y: auto; } overflow-y: auto; }
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] { .select2-container--classic .select2-results__option[role=group] {
padding: 0; } 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; cursor: default;
display: block; display: block;
padding: 6px; } padding: 6px; }
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true] { .select2-container--classic.select2-container--open .select2-dropdown {
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 {
border: 1px solid #5897fb; border: 1px solid #5897fb;
border-top: none; } 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 "defaults";
@import "../../mixins/gradients"; @import "../../mixins/gradients";
.select2-container.select2-theme-classic { .select2-container--classic {
.selection { .select2-selection--single {
.single-select {
background-color: mix($selection-bg-top-color, $selection-bg-bottom-color); background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
border: 1px solid $border-color; border: 1px solid $border-color;
@ -17,77 +16,70 @@
border: 1px solid $focus-border-color; border: 1px solid $focus-border-color;
} }
.rendered-selection { .select2-selection__rendered {
color: #444; color: #444;
line-height: 28px; line-height: 28px;
}
.placeholder { .select2-selection__placeholder {
color: #999; color: #999;
} }
} }
}
}
&.open { &.select2-container--open {
.selection { .select2-selection--single {
.single-select {
border: 1px solid $focus-border-color; border: 1px solid $focus-border-color;
@include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%); @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
} }
.single-select, .select2-selection--single,
.multiple-select { .select2-selection--multiple {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
}
.dropdown { .select2-search--dropdown {
background-color: $dropdown-bg-color; .select2-search__field {
border-top: none;
.select2-search {
input {
border: 1px solid $border-color; border: 1px solid $border-color;
outline: 0; outline: 0;
} }
} }
.results { .select2-dropdown {
&> .options { background-color: $dropdown-bg-color;
border-top: none;
}
.select2-results > .select2-results__options {
max-height: $results-max-height; max-height: $results-max-height;
overflow-y: auto; overflow-y: auto;
} }
.options { .select2-results__option {
.option {
&[role=group] { &[role=group] {
padding: 0; padding: 0;
.group-label {
cursor: default;
display: block;
padding: 6px;
}
} }
&[aria-disabled=true] { &[aria-disabled=true] {
color: $results-choice-fg-unselectable-color; color: $results-choice-fg-unselectable-color;
} }
}
&[aria-selected].highlighted { .select2-results__option--highlighted[aria-selected] {
background-color: $results-choice-bg-hover-color; background-color: $results-choice-bg-hover-color;
color: $results-choice-fg-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: 1px solid $focus-border-color;
border-top: none; border-top: none;
} }