mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-09-24 10:49:37 +00:00
Create chevron using pseudo elements
IE8+ supports the pseudo element. The world will not explode if IE6 and 7 do not have the chevron. This simplifies code by dropping the use of the pokey element Note: I know we can drop using the image too but I decided not to do that in this patch. Change-Id: Ia9ac434461e63bc2cf8554060126995ac65a3531
This commit is contained in:
parent
bee2fe3af1
commit
106c2d2215
|
@ -30,9 +30,6 @@
|
|||
.hide()
|
||||
.appendTo( $( '#pt-notifications' ) );
|
||||
|
||||
// Create the pokey (aka chevron)
|
||||
$overlay.before( $( '<div>' ).addClass( 'mw-echo-overlay-pokey' ) );
|
||||
|
||||
mw.hook( 'ext.echo.overlay.beforeShowingOverlay' ).fire( $overlay );
|
||||
|
||||
// Show the notifications overlay
|
||||
|
@ -55,7 +52,7 @@
|
|||
} );
|
||||
|
||||
$( 'body' ).click( function ( e ) {
|
||||
if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, .mw-echo-overlay-pokey, #pt-notifications a' ) ) {
|
||||
if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, #pt-notifications a' ) ) {
|
||||
mw.echo.overlay.removeOverlay();
|
||||
}
|
||||
} );
|
||||
|
|
|
@ -402,7 +402,7 @@
|
|||
} );
|
||||
},
|
||||
removeOverlay: function () {
|
||||
$( '.mw-echo-overlay, .mw-echo-overlay-pokey' ).fadeOut( 'fast',
|
||||
$( '.mw-echo-overlay' ).fadeOut( 'fast',
|
||||
function () {
|
||||
$( this ).remove();
|
||||
}
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
@offset: 200px;
|
||||
.mw-echo-overlay {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -200px;
|
||||
left: -@offset;
|
||||
border: 1px solid silver;
|
||||
background-color: #fff;
|
||||
width: 450px;
|
||||
|
@ -10,17 +11,21 @@
|
|||
color: #6D6D6D;
|
||||
z-index: 100;
|
||||
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.35);
|
||||
}
|
||||
.mw-echo-overlay-pokey {
|
||||
/* @embed */
|
||||
background-image: url('PokeyNorth.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 21px;
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: 20px;
|
||||
left: -5px;
|
||||
|
||||
// IE8
|
||||
&:before,
|
||||
&::before {
|
||||
content: '';
|
||||
background-image: url('PokeyNorth.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 21px;
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: -11px;
|
||||
// subtract half the width from the offset and then add the left box shadow
|
||||
left: @offset - 10px + 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -9,9 +9,6 @@ body #p-personal {
|
|||
left: -20px;
|
||||
top: 31px;
|
||||
}
|
||||
#p-personal .mw-echo-overlay-pokey {
|
||||
left: -6px;
|
||||
}
|
||||
#p-personal #pt-notifications ul,
|
||||
#p-personal #pt-notifications li {
|
||||
text-transform: none;
|
||||
|
|
Loading…
Reference in a new issue