RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 23:06:02 +03:00
Code Issues Projects Releases Wiki Activity

Better support for RTL languages

Browse Source 
CSS changes to better support RTL languages. Most notable is the positioning of the arrow on the left side of the select2 for RTL
This commit is contained in:
Robert-Jan Bijl 2014-05-12 15:34:40 +02:00
parent 52425f93c8
commit 06b93b2703
1 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
select2.css
View File

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