From 06b93b2703b65d54bbdeb0b4a02d6d280505714c Mon Sep 17 00:00:00 2001 From: Robert-Jan Bijl Date: Mon, 12 May 2014 15:34:40 +0200 Subject: [PATCH 1/3] 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 --- select2.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/select2.css b/select2.css index 34ed53bb..d1f56073 100644 --- a/select2.css +++ b/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; From fb91adaa57705efee1893cb236c574b3c0386e47 Mon Sep 17 00:00:00 2001 From: Robert-Jan Bijl Date: Tue, 13 May 2014 08:44:20 +0200 Subject: [PATCH 2/3] More RTL style fixes, now for the multiple select --- select2.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/select2.css b/select2.css index d1f56073..90c73aa1 100644 --- a/select2.css +++ b/select2.css @@ -499,6 +499,10 @@ disabled look for disabled choices in the results dropdown background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); } +html[dir="rtl"] .select2-container-multi .select2-choices { + padding: 0 0 0 5px; +} + .select2-locked { padding: 3px 5px 3px 5px !important; } @@ -582,8 +586,8 @@ html[dir="rtl"] .select2-container-multi .select2-choices li } html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice { - margin-left: 0; - margin-right: 5px; + margin: 3px 5px 3px 0; + padding: 3px 18px 3px 5px; } .select2-container-multi .select2-choices .select2-search-choice .select2-chosen { cursor: default; @@ -613,6 +617,11 @@ html[dir="rtl"] .select2-search-choice-close { left: 3px; } +html[dir="rtl"] .select2-container-multi .select2-search-choice-close { + left: auto; + right: 3px; +} + .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { background-position: right -11px; } From 5470a453f911cf2b71cc05ae52d86eddd1a43b5d Mon Sep 17 00:00:00 2001 From: Robert-Jan Bijl Date: Tue, 13 May 2014 09:05:37 +0200 Subject: [PATCH 3/3] Getting a few more pixels perfect in the RTL mode for multiple selects --- select2.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/select2.css b/select2.css index 90c73aa1..df8b9fcc 100644 --- a/select2.css +++ b/select2.css @@ -619,7 +619,7 @@ html[dir="rtl"] .select2-search-choice-close { html[dir="rtl"] .select2-container-multi .select2-search-choice-close { left: auto; - right: 3px; + right: 2px; } .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {