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

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 éve
szülő
commit
06b93b2703
1 módosított fájl, 45 hozzáadás és 0 törlés
  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;