瀏覽代碼

Better support for RTL languages
CSS changes to better support RTL languages. Most notable is the positioning of the arrow on the left side of the select2 for RTL

Robert-Jan Bijl 11 年之前
父節點
當前提交
06b93b2703
共有 1 個文件被更改,包括 45 次插入0 次删除
  1. 45 0
      select2.css

+ 45 - 0
select2.css

@@ -56,6 +56,10 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     background-image: linear-gradient(to top, #eee 0%, #fff 50%);
 }
 
+html[dir="rtl"] .select2-container .select2-choice {
+    padding: 0 8px 0 0;
+}
+
 .select2-container.select2-drop-above .select2-choice {
     border-bottom-color: #aaa;
 
@@ -84,6 +88,11 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     width: auto;
 }
 
+html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
+    margin-left: 26px;
+    margin-right: 0;
+}
+
 .select2-container .select2-choice abbr {
     display: none;
     width: 12px;
@@ -196,6 +205,15 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
 }
 
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
+    left: 0;
+    right: auto;
+
+    border-left: none;
+    border-right: 1px solid #aaa;
+    border-radius: 4px 0 0 4px;
+}
+
 .select2-container .select2-choice .select2-arrow b {
     display: block;
     width: 100%;
@@ -203,6 +221,10 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     background: url('select2.png') no-repeat 0 1px;
 }
 
+html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
+    background-position: 2px 1px;
+}
+
 .select2-search {
     display: inline-block;
     width: 100%;
@@ -241,6 +263,16 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
 }
 
+html[dir="rtl"] .select2-search input {
+    padding: 4px 5px 4px 20px;
+
+    background: #fff url('select2.png') no-repeat -37px -22px;
+    background: url('select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
+    background: url('select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
+    background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
+}
+
 .select2-drop.select2-drop-above .select2-search input {
     margin-top: 4px;
 }
@@ -295,10 +327,18 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     border-left: none;
     filter: none;
 }
+html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
+    border-right: none;
+}
+
 .select2-dropdown-open .select2-choice .select2-arrow b {
     background-position: -18px 1px;
 }
 
+html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
+    background-position: -16px 1px;
+}
+
 .select2-hidden-accessible {
     border: 0;
     clip: rect(0 0 0 0);
@@ -321,6 +361,11 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+html[dir="rtl"] .select2-results {
+    padding: 0 4px 0 0;
+    margin: 4px 0 4px 4px;
+}
+
 .select2-results ul.select2-result-sub {
     margin: 0;
     padding-left: 0;