wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-24 07:34:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make ':after' triangle larger so that the border of div is covered

Browse source 
When zooming in the border of the div is visible over the :after
pseudo element.
 - Update top and bottom triangle mixins to include @extra argument
 - Update pseudo elements to use the new mixin and position them
   correctly according the extra size

Bug: 73550
Change-Id: I05b9c74a675c69e407c4c78771504f447da754c5
This commit is contained in:
Prateek Saxena 2014-11-18 15:50:55 +05:30
parent 45172f1f7b
commit cbebde39b9
1 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
resources/ext.popups.core.less
View file

@ -4,23 +4,23 @@
* https://en.wikipedia.org/wiki/User:Yair_rand/NavPopupsRestyled.js
*/
.mwe-popups-border-triangle-top(@size, @left, @color) {
.mwe-popups-border-triangle-top(@size, @left, @color, @extra) {
content: '';
position: absolute;
border: @size solid transparent;
border: ( @size + @extra ) solid transparent;
border-top: 0;
border-bottom: @size solid @color;
border-bottom: ( @size + @extra ) solid @color;
top: -@size;
/* @noflip */
left: @left;
}
.mwe-popups-border-triangle-bottom(@size, @left, @color) {
.mwe-popups-border-triangle-bottom(@size, @left, @color, @extra) {
content: '';
position: absolute;
border: @size solid transparent;
border: ( @size + @extra ) solid transparent;
border-bottom: 0;
border-top: @size solid @color;
border-top: ( @size + @extra ) solid @color;
bottom: -@size;
/* @noflip */
left: @left;
@ -154,11 +154,11 @@
/* Triangles/Pokeys */
&.mwe-popups-no-image-tri {
&:after {
.mwe-popups-border-triangle-top( 7px, 11px, #fff);
.mwe-popups-border-triangle-top( 7px, 7px, #fff, 4px);
}
&:before {
.mwe-popups-border-triangle-top( 8px, 10px, #bbb);
.mwe-popups-border-triangle-top( 8px, 10px, #bbb, 0px);
}
}
@ -167,7 +167,7 @@
/* @noflip */
left: auto;
/* @noflip */
right: 11px;
right: 7px;
}
&:before {
@ -181,22 +181,22 @@
&.mwe-popups-image-tri {
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 9px, #bbb);
.mwe-popups-border-triangle-top(9px, 9px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-top(8px, 10px, #fff);
.mwe-popups-border-triangle-top(8px, 6px, #fff, 4px);
z-index: 112;
}
&.flipped_x {
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 273px, #bbb);
.mwe-popups-border-triangle-top(9px, 273px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-top(8px, 273px, #fff);
.mwe-popups-border-triangle-top(8px, 269px, #fff, 4px);
z-index: 112;
}
}
@ -220,7 +220,7 @@
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 420px, #bbb);
.mwe-popups-border-triangle-top(9px, 420px, #bbb, 0px);
}
> div > a > svg {
@ -237,11 +237,11 @@
&.flipped_x_y {
&:before {
z-index: 111;
.mwe-popups-border-triangle-bottom(9px, 272px, #bbb);
.mwe-popups-border-triangle-bottom(9px, 272px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-bottom(8px, 273px, #fff);
.mwe-popups-border-triangle-bottom(8px, 269px, #fff, 4px);
z-index: 112;
}
@ -250,12 +250,12 @@
&:after {
z-index: 112;
.mwe-popups-border-triangle-bottom(8px, 421px, #fff);
.mwe-popups-border-triangle-bottom(8px, 417px, #fff, 4px);
}
&:before {
z-index: 111;
.mwe-popups-border-triangle-bottom(9px, 420px, #bbb);
.mwe-popups-border-triangle-bottom(9px, 420px, #bbb, 0px);
}
> div > a > svg {
@ -271,11 +271,11 @@
&.flipped_y {
&:after {
.mwe-popups-border-triangle-bottom( 7px, 11px, #fff);
.mwe-popups-border-triangle-bottom( 7px, 7px, #fff, 4px );
}
&:before {
.mwe-popups-border-triangle-bottom( 8px, 10px, #bbb);
.mwe-popups-border-triangle-bottom( 8px, 10px, #bbb, 0px );
}
}
}