bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correct the position the arrow of selector and add shadow

Browse Source 
The pointer arrow of the ULS was not aligned with the 'x more' trigger
and it missed shadow. This commit fixes it.

Notably, we replace the old arrow with a box rotated 45 degree so that
we can apply the shadow very easily.

Bug: T130633
Change-Id: I4d36f3ee9fcfea932e10208518a03e7b246a7abe
This commit is contained in:
Santhosh Thottingal
2016-04-05 11:48:42 +05:30
committed by Niklas Laxström
parent d013ae5ebf
commit d5f6930cb4
2 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/css/ext.uls.compactlinks.css
View File

@@ -13,28 +13,39 @@
background-image: url( ../images/compact-links-trigger.svg );
background-size: 17px;
background-repeat: no-repeat;
background-position: 9% 8%;
background-position: left 4px center;
margin: 4px 0;
text-align: left;
}
.interlanguage-uls-menu:after,
.interlanguage-uls-menu:before {
right: 100%;
content: " ";
background: none repeat scroll 0 0 #FCFCFC;
border-left: 1px solid rgba( 0, 0, 0, 0.2 );
border-top: 1px solid rgba( 0, 0, 0, 0.2 );
box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
content: "";
height: 24px;
width: 24px;
left: -13px;
position: absolute;
border: 1px solid black;
/* The dialog middle is positioned 250px away from the center of the trigger. Substract 12 for
* half of the box height to center middle of the box rather than the top. The remaining 2 are
* either for top-margin of the menu and border of this box, or because we use do not account
* for the margin of the trigger when we use $.fn.outerWidth without true as a parameter.
*/
top: 236px;
transform: rotate( -45deg );
-webkit-transform: rotate( -45deg );
-moz-transform: rotate( -45deg );
-o-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
background-clip: padding-box;
}
.interlanguage-uls-menu:after {
border-color: transparent;
border-right-color: #FCFCFC;
border-width: 20px;
top: 250px;
}
.interlanguage-uls-menu:before {
border-color: transparent;
border-right-color: #555555;
border-width: 20px;
top: 250px;
body.rtl .interlanguage-uls-menu:before {
transform: rotate( 45deg );
-webkit-transform: rotate( 45deg );
-moz-transform: rotate( 45deg );
-o-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
}