RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-16 20:13:16 +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

52
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 {
border: 1px solid #aaa;
outline: 0; }
.select2-container--classic .select2-dropdown {
background-color: white; background-color: white;
border-top: none; } border-top: none; }
.select2-container.select2-theme-classic .dropdown .select2-search input { .select2-container--classic .select2-results > .select2-results__options {
border: 1px solid #aaa; max-height: 200px;
outline: 0; } overflow-y: auto; }
.select2-container.select2-theme-classic .dropdown .results > .options { .select2-container--classic .select2-results__option[role=group] {
max-height: 200px; padding: 0; }
overflow-y: auto; } .select2-container--classic .select2-results__option[aria-disabled=true] {
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] { color: grey; }
padding: 0; } .select2-container--classic .select2-results__option--highlighted[aria-selected] {
.select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label { background-color: #3875d7;
cursor: default; color: white; }
display: block; .select2-container--classic .select2-results__group {
padding: 6px; } cursor: default;
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true] { display: block;
color: grey; } padding: 6px; }
.select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted { .select2-container--classic.select2-container--open .select2-dropdown {
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

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

@ -1,93 +1,85 @@
@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;
border-radius: $border-radius; border-radius: $border-radius;
outline: 0; outline: 0;
@include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%); @include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%);
&:focus { &:focus {
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 {
.selection {
.single-select {
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 {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
} }
} }
.dropdown { &.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%);
}
.select2-selection--single,
.select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.select2-search--dropdown {
.select2-search__field {
border: 1px solid $border-color;
outline: 0;
}
}
.select2-dropdown {
background-color: $dropdown-bg-color; background-color: $dropdown-bg-color;
border-top: none; border-top: none;
}
.select2-search { .select2-results > .select2-results__options {
input { max-height: $results-max-height;
border: 1px solid $border-color; overflow-y: auto;
outline: 0; }
}
.select2-results__option {
&[role=group] {
padding: 0;
} }
.results { &[aria-disabled=true] {
&> .options { color: $results-choice-fg-unselectable-color;
max-height: $results-max-height;
overflow-y: auto;
}
.options {
.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 {
background-color: $results-choice-bg-hover-color;
color: $results-choice-fg-hover-color;
}
}
}
} }
} }
&.open .dropdown { .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;
}
&.select2-container--open .select2-dropdown {
border: 1px solid $focus-border-color; border: 1px solid $focus-border-color;
border-top: none; border-top: none;
} }