Просмотр исходного кода

Added the arrow for the dropdown

Kevin Brown 10 лет назад
Родитель
Сommit
ac5d584f3d

+ 56 - 4
dist/css/select2.css

@@ -91,6 +91,26 @@
     margin-right: 10px; }
   .select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #999; }
+  .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; }
 .select2-container--default .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;
@@ -168,17 +188,49 @@
     margin-right: 10px; }
   .select2-container--classic .select2-selection--single .select2-selection__placeholder {
     color: #999; }
+  .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; }
 .select2-container--classic.select2-container--open .select2-selection--single {
   border: 1px solid #5897fb;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   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--classic.select2-container--open .select2-selection--single {
-  border-bottom: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0; }
+  .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; }
 .select2-container--classic .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
dist/css/select2.min.css


+ 3 - 0
dist/js/select2.amd.full.js

@@ -743,6 +743,9 @@ define('select2/selection/single',[
         ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
         ' aria-expanded="false">' +
         '<span class="select2-selection__rendered"></span>' +
+        '<span class="select2-selection__arrow" role="presentation">' +
+          '<b role="presentation"></b>' +
+        '</span>' +
       '</span>'
     );
 

+ 3 - 0
dist/js/select2.amd.js

@@ -743,6 +743,9 @@ define('select2/selection/single',[
         ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
         ' aria-expanded="false">' +
         '<span class="select2-selection__rendered"></span>' +
+        '<span class="select2-selection__arrow" role="presentation">' +
+          '<b role="presentation"></b>' +
+        '</span>' +
       '</span>'
     );
 

+ 3 - 0
dist/js/select2.full.js

@@ -10278,6 +10278,9 @@ define('select2/selection/single',[
         ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
         ' aria-expanded="false">' +
         '<span class="select2-selection__rendered"></span>' +
+        '<span class="select2-selection__arrow" role="presentation">' +
+          '<b role="presentation"></b>' +
+        '</span>' +
       '</span>'
     );
 

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
dist/js/select2.full.min.js


+ 3 - 0
dist/js/select2.js

@@ -1171,6 +1171,9 @@ define('select2/selection/single',[
         ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
         ' aria-expanded="false">' +
         '<span class="select2-selection__rendered"></span>' +
+        '<span class="select2-selection__arrow" role="presentation">' +
+          '<b role="presentation"></b>' +
+        '</span>' +
       '</span>'
     );
 

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
dist/js/select2.min.js


+ 3 - 0
src/js/select2/selection/single.js

@@ -15,6 +15,9 @@ define([
         ' role="combobox" aria-autocomplete="list" aria-haspopup="true"' +
         ' aria-expanded="false">' +
         '<span class="select2-selection__rendered"></span>' +
+        '<span class="select2-selection__arrow" role="presentation">' +
+          '<b role="presentation"></b>' +
+        '</span>' +
       '</span>'
     );
 

+ 50 - 4
src/scss/theme/classic/_single.scss

@@ -27,18 +27,64 @@
   .select2-selection__placeholder {
     color: #999;
   }
+
+  .select2-selection__arrow {
+    background-color: #ddd;
+
+    border: none;
+    border-left: 1px solid $border-color;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+
+    height: 26px;
+
+    position: absolute;
+
+    top: 1px;
+    right: 1px;
+
+    width: 20px;
+
+    @include gradient-vertical(#eee, #ccc, 50%, 100%);
+
+    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--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 {
     border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+
+    @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
+
+    .select2-selection__arrow {
+      background: transparent;
+
+      border: none;
+
+      b {
+        border-color: transparent transparent #888 transparent;
+        border-width: 0 4px 5px 4px;
+      }
+    }
   }
 }

+ 48 - 0
src/scss/theme/default/_multiple.scss

@@ -0,0 +1,48 @@
+.select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+
+  .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px;
+  }
+
+  .select2-selection__placeholder {
+    color: #999;
+
+    margin-top: 5px;
+
+    float: left;
+  }
+
+  .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-selection__choice__remove {
+    color: #999;
+    cursor: pointer;
+
+    display: inline-block;
+    font-weight: bold;
+
+    margin-right: 2px;
+
+    &:hover {
+      color: #333;
+    }
+  }
+}

+ 60 - 0
src/scss/theme/default/_single.scss

@@ -0,0 +1,60 @@
+.select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+
+  .select2-selection__rendered {
+    color: #444;
+    line-height: 28px;
+  }
+
+  .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px;
+  }
+
+  .select2-selection__placeholder {
+    color: #999;
+  }
+
+  .select2-selection__arrow {
+    height: 26px;
+
+    position: absolute;
+
+    top: 1px;
+    right: 1px;
+
+    width: 20px;
+
+    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--open {
+  .select2-selection--single {
+    .select2-selection__arrow {
+      b {
+        border-color: transparent transparent #888 transparent;
+        border-width: 0 4px 5px 4px;
+      }
+    }
+  }
+}

+ 2 - 70
src/scss/theme/default/layout.scss

@@ -1,74 +1,6 @@
 .select2-container--default {
-  .select2-selection--single {
-    background-color: #fff;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-
-    .select2-selection__rendered {
-      color: #444;
-      line-height: 28px;
-    }
-
-    .select2-selection__clear {
-      cursor: pointer;
-      float: right;
-      font-weight: bold;
-      margin-right: 10px;
-    }
-
-    .select2-selection__placeholder {
-      color: #999;
-    }
-  }
-
-  .select2-selection--multiple {
-    background-color: white;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    cursor: text;
-
-    .select2-selection__rendered {
-      list-style: none;
-      margin: 0;
-      padding: 0 5px;
-    }
-
-    .select2-selection__placeholder {
-      color: #999;
-
-      margin-top: 5px;
-
-      float: left;
-    }
-
-    .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-selection__choice__remove {
-      color: #999;
-      cursor: pointer;
-
-      display: inline-block;
-      font-weight: bold;
-
-      margin-right: 2px;
-
-      &:hover {
-        color: #333;
-      }
-    }
-  }
+  @import "single";
+  @import "multiple";
 
   &.select2-container--open {
     .select2-selection--single, .select2-selection--multiple {

Некоторые файлы не были показаны из-за большого количества измененных файлов