Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2287781 by alayham, herom: Fixed DropButton component does not look well in RTL page.

8.0.x
Alex Pott 2014-07-31 13:42:43 +01:00
parent 9e6dd21c89
commit ced85d104a
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/misc/dropbutton/dropbutton.css
View File

@ -39,10 +39,16 @@
display: block;
min-height: 2em;
position: relative;
padding-right: 10em;
margin-right: 2em;
padding-right: 10em; /* LTR */
margin-right: 2em; /* LTR */
max-width: 100%;
}
[dir="rtl"].js td .dropbutton-multiple {
padding-right: 0;
margin-right: 0;
padding-left: 10em;
margin-left: 2em;
}
.js td .dropbutton-multiple .dropbutton-action a,
.js td .dropbutton-multiple .dropbutton-action input,
.js td .dropbutton-multiple .dropbutton-action button {

40
core/themes/seven/css/components/dropbutton.component.css
View File

@ -32,7 +32,10 @@
box-shadow: none;
}
.dropbutton-multiple .dropbutton {
border-right: 0;
border-right: 0; /* LTR */
}
[dir="rtl"] .dropbutton-multiple .dropbutton {
border-left: 0;
}
/**
@ -54,11 +57,16 @@
.js .dropbutton-widget .dropbutton-action a,
.js .dropbutton-widget .dropbutton-action input,
.js .dropbutton-widget .dropbutton-action button {
border-radius: 20em 0 0 20em;
border-radius: 20em 0 0 20em; /* LTR */
padding: 4px 1.5em;
display: block;
width: 100%;
}
[dir="rtl"].js .dropbutton-widget .dropbutton-action a,
[dir="rtl"].js .dropbutton-widget .dropbutton-action input,
[dir="rtl"].js .dropbutton-widget .dropbutton-action button {
border-radius: 0 20em 20em 0;
}
.js .dropbutton-widget .dropbutton-action a:focus,
.js .dropbutton-widget .dropbutton-action input:focus,
.js .dropbutton-widget .dropbutton-action button:focus {
@ -70,11 +78,19 @@
}
.js .dropbutton-multiple.open .dropbutton-action:first-child a,
.js .dropbutton-multiple.open .dropbutton-action:first-child .button {
border-radius: 0.9em 0 0 0;
border-radius: 0.9em 0 0 0; /* LTR */
}
[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
border-radius: 0 0.9em 0 0;
}
.js .dropbutton-multiple.open .dropbutton-action:last-child a,
.js .dropbutton-multiple.open .dropbutton-action:last-child .button {
border-radius: 0 0 0 0.9em;
border-radius: 0 0 0 0.9em; /* LTR */
}
[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
border-radius: 0 0 0.9em 0;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
@ -164,14 +180,24 @@
* The dropdown trigger.
*/
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-left: 1px solid #a6a6a6;
border-left: 1px solid #a6a6a6; /* LTR */
outline: none;
}
[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-right: 1px solid #a6a6a6;
border-left: 0;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-radius: 0 20em 20em 0;
border-radius: 0 20em 20em 0; /* LTR */
}
[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
border-radius: 20em 0 0 20em;
}
.dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
border-radius: 0 1em 1em 0;
border-radius: 0 1em 1em 0; /* LTR */
}
[dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
border-radius: 1em 0 0 1em;
}
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
.js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {