Forráskód Böngészése

Converted classic theme to BEM

This should be the last of the changes.
Kevin Brown 10 éve
szülő
commit
e686bce9d0
3 módosított fájl, 84 hozzáadás és 92 törlés
  1. 26 26
      dist/css/select2.css
  2. 0 0
      dist/css/select2.min.css
  3. 58 66
      src/scss/theme/classic/layout.scss

+ 26 - 26
dist/css/select2.css

@@ -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 {
-      color: #999; }
-.select2-container.select2-theme-classic.open .selection .single-select {
+  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+.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 {
+.select2-container--classic .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+  outline: 0; }
+.select2-container--classic .select2-dropdown {
   background-color: white;
   border-top: none; }
-  .select2-container.select2-theme-classic .dropdown .select2-search input {
-    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;
-      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-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 {
   border: 1px solid #5897fb;
   border-top: none; }

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
dist/css/select2.min.css


+ 58 - 66
src/scss/theme/classic/layout.scss

@@ -1,93 +1,85 @@
 @import "defaults";
 @import "../../mixins/gradients";
 
-.select2-container.select2-theme-classic {
-  .selection {
-      .single-select {
-          background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
+.select2-container--classic {
+  .select2-selection--single {
+    background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
 
-          border: 1px solid $border-color;
-          border-radius: $border-radius;
+    border: 1px solid $border-color;
+    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 {
-            border: 1px solid $focus-border-color;
-          }
+    &:focus {
+      border: 1px solid $focus-border-color;
+    }
 
-          .rendered-selection {
-            color: #444;
-            line-height: 28px;
+    .select2-selection__rendered {
+      color: #444;
+      line-height: 28px;
+    }
 
-            .placeholder {
-              color: #999;
-            }
-          }
-      }
+    .select2-selection__placeholder {
+      color: #999;
+    }
   }
 
-  &.open {
-    .selection {
-      .single-select {
-        border: 1px solid $focus-border-color;
+  &.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%);
-      }
+      @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;
+    }
+  }
 
-      .single-select,
-      .multiple-select {
-        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;
     }
   }
 
-  .dropdown {
+  .select2-dropdown {
     background-color: $dropdown-bg-color;
     border-top: none;
+  }
+
+  .select2-results > .select2-results__options {
+    max-height: $results-max-height;
+    overflow-y: auto;
+  }
 
-    .select2-search {
-      input {
-        border: 1px solid $border-color;
-        outline: 0;
-      }
+  .select2-results__option {
+    &[role=group] {
+      padding: 0;
     }
 
-    .results {
-      &> .options {
-        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;
-          }
-        }
-      }
+    &[aria-disabled=true] {
+      color: $results-choice-fg-unselectable-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-top: none;
   }

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott