Fix feature pointer positioning issues for both LTR and RTL.

fixes #28062.
Built from https://develop.svn.wordpress.org/trunk@28897


git-svn-id: http://core.svn.wordpress.org/trunk@28696 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2014-06-29 16:06:14 +00:00
parent 548c41455a
commit ae0e22b61c
5 changed files with 50 additions and 46 deletions

View File

@ -1992,7 +1992,7 @@ final class WP_Internal_Pointers {
self::print_js( 'wp360_revisions', '.misc-pub-section.misc-pub-revisions', array( self::print_js( 'wp360_revisions', '.misc-pub-section.misc-pub-revisions', array(
'content' => $content, 'content' => $content,
'position' => array( 'edge' => is_rtl() ? 'left' : 'right', 'align' => 'center', 'my' => is_rtl() ? 'left' : 'right-14px' ), 'position' => array( 'edge' => is_rtl() ? 'left' : 'right', 'align' => 'center' ),
) ); ) );
} }
@ -2020,7 +2020,7 @@ final class WP_Internal_Pointers {
if ( 'themes' === get_current_screen()->id ) { if ( 'themes' === get_current_screen()->id ) {
$selector = '.theme.active .customize'; $selector = '.theme.active .customize';
$position = array( 'edge' => is_rtl() ? 'right' : 'left', 'align' => 'center', 'my' => is_rtl() ? 'right-13px' : '' ); $position = array( 'edge' => is_rtl() ? 'right' : 'left', 'align' => 'center' );
} else { } else {
$selector = 'a[href="customize.php"]'; $selector = 'a[href="customize.php"]';
if ( is_rtl() ) { if ( is_rtl() ) {

View File

@ -106,6 +106,7 @@
} }
.wp-pointer-bottom { .wp-pointer-bottom {
margin-top: -13px;
padding-bottom: 13px; padding-bottom: 13px;
} }
@ -115,6 +116,7 @@
} }
/* @noflip */ /* @noflip */
.wp-pointer-right { .wp-pointer-right {
margin-left: -13px;
padding-right: 13px; padding-right: 13px;
} }
@ -139,10 +141,11 @@
border-bottom-color: #3592b6; border-bottom-color: #3592b6;
} }
.wp-pointer-top .wp-pointer-arrow:before, .wp-pointer-top .wp-pointer-arrow-inner,
.wp-pointer-undefined .wp-pointer-arrow:before { .wp-pointer-undefined .wp-pointer-arrow-inner {
top: 1px;
margin-right: -13px; margin-right: -13px;
margin-top: -11px; margin-top: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-bottom-color: #2ea2cc; border-bottom-color: #2ea2cc;
display: block; display: block;
@ -155,9 +158,10 @@
border-top-color: #ccc; border-top-color: #ccc;
} }
.wp-pointer-bottom .wp-pointer-arrow:before { .wp-pointer-bottom .wp-pointer-arrow-inner {
bottom: 1px;
margin-right: -13px; margin-right: -13px;
margin-top: -14px; margin-bottom: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-top-color: #fff; border-top-color: #fff;
display: block; display: block;
@ -171,24 +175,10 @@
border-right-color: #ccc; border-right-color: #ccc;
} }
.wp-pointer-left .wp-pointer-arrow:before {
margin-right: -14px;
margin-top: -13px;
border: 13px solid transparent;
border-left-color: #fff;
display: block;
content: ' ';
}
/* @noflip */ /* @noflip */
.wp-pointer-right .wp-pointer-arrow { .wp-pointer-left .wp-pointer-arrow-inner {
right:0; left: 1px;
border-width: 13px 0 13px 13px; margin-left: -13px;
border-left-color: #ccc;
}
.wp-pointer-right .wp-pointer-arrow:before {
margin-right: -14px;
margin-top: -13px; margin-top: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-right-color: #fff; border-right-color: #fff;
@ -196,10 +186,22 @@
content: ' '; content: ' ';
} }
.rtl .wp-pointer-arrow:before { /* @noflip */
-webkit-transform: rotateY(180deg); .wp-pointer-right .wp-pointer-arrow {
-ms-transform: rotateY(180deg); right: 0;
transform: rotateY(180deg); border-width: 13px 0 13px 13px;
border-left-color: #ccc;
}
/* @noflip */
.wp-pointer-right .wp-pointer-arrow-inner {
right: 1px;
margin-right: -13px;
margin-top: -13px;
border: 13px solid transparent;
border-left-color: #fff;
display: block;
content: ' ';
} }
/* Disable pointers at responsive sizes */ /* Disable pointers at responsive sizes */

View File

@ -1 +1 @@
.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #dfdfdf;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.075);box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 60px 14px 18px;border:1px solid #3592b6;border-bottom:0;line-height:1.4em;font-size:14px;color:#fff;background:#2ea2cc}.wp-pointer-content h3:before{background:#fff;-webkit-border-radius:50%;border-radius:50%;color:#2ea2cc;content:'\f227';font:400 20px/1.6 dashicons;position:absolute;top:8px;right:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content p{padding:0 15px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:left;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-right:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#bbb;content:'\f153';display:block!important;font:400 13px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;right:-12px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{right:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow:before,.wp-pointer-undefined .wp-pointer-arrow:before{margin-right:-13px;margin-top:-11px;border:13px solid transparent;border-bottom-color:#2ea2cc;display:block;content:' '}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow:before{margin-right:-13px;margin-top:-14px;border:13px solid transparent;border-top-color:#fff;display:block;content:' '}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow:before{margin-right:-14px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:' '}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow:before{margin-right:-14px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:' '}.rtl .wp-pointer-arrow:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}@media screen and (max-width:782px){.wp-pointer{display:none}} .wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #dfdfdf;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.075);box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 60px 14px 18px;border:1px solid #3592b6;border-bottom:0;line-height:1.4em;font-size:14px;color:#fff;background:#2ea2cc}.wp-pointer-content h3:before{background:#fff;-webkit-border-radius:50%;border-radius:50%;color:#2ea2cc;content:'\f227';font:400 20px/1.6 dashicons;position:absolute;top:8px;right:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content p{padding:0 15px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:left;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-right:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#bbb;content:'\f153';display:block!important;font:400 13px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;right:-12px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{right:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#2ea2cc;display:block;content:' '}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-right:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:' '}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:' '}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:' '}@media screen and (max-width:782px){.wp-pointer{display:none}}

View File

@ -106,6 +106,7 @@
} }
.wp-pointer-bottom { .wp-pointer-bottom {
margin-top: -13px;
padding-bottom: 13px; padding-bottom: 13px;
} }
@ -115,6 +116,7 @@
} }
/* @noflip */ /* @noflip */
.wp-pointer-right { .wp-pointer-right {
margin-left: -13px;
padding-right: 13px; padding-right: 13px;
} }
@ -139,10 +141,11 @@
border-bottom-color: #3592b6; border-bottom-color: #3592b6;
} }
.wp-pointer-top .wp-pointer-arrow:before, .wp-pointer-top .wp-pointer-arrow-inner,
.wp-pointer-undefined .wp-pointer-arrow:before { .wp-pointer-undefined .wp-pointer-arrow-inner {
top: 1px;
margin-left: -13px; margin-left: -13px;
margin-top: -11px; margin-top: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-bottom-color: #2ea2cc; border-bottom-color: #2ea2cc;
display: block; display: block;
@ -155,9 +158,10 @@
border-top-color: #ccc; border-top-color: #ccc;
} }
.wp-pointer-bottom .wp-pointer-arrow:before { .wp-pointer-bottom .wp-pointer-arrow-inner {
bottom: 1px;
margin-left: -13px; margin-left: -13px;
margin-top: -14px; margin-bottom: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-top-color: #fff; border-top-color: #fff;
display: block; display: block;
@ -171,8 +175,10 @@
border-right-color: #ccc; border-right-color: #ccc;
} }
.wp-pointer-left .wp-pointer-arrow:before { /* @noflip */
margin-left: -14px; .wp-pointer-left .wp-pointer-arrow-inner {
left: 1px;
margin-left: -13px;
margin-top: -13px; margin-top: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-right-color: #fff; border-right-color: #fff;
@ -182,13 +188,15 @@
/* @noflip */ /* @noflip */
.wp-pointer-right .wp-pointer-arrow { .wp-pointer-right .wp-pointer-arrow {
right:0; right: 0;
border-width: 13px 0 13px 13px; border-width: 13px 0 13px 13px;
border-left-color: #ccc; border-left-color: #ccc;
} }
.wp-pointer-right .wp-pointer-arrow:before { /* @noflip */
margin-left: -14px; .wp-pointer-right .wp-pointer-arrow-inner {
right: 1px;
margin-right: -13px;
margin-top: -13px; margin-top: -13px;
border: 13px solid transparent; border: 13px solid transparent;
border-left-color: #fff; border-left-color: #fff;
@ -196,12 +204,6 @@
content: ' '; content: ' ';
} }
.rtl .wp-pointer-arrow:before {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Disable pointers at responsive sizes */ /* Disable pointers at responsive sizes */
@media screen and ( max-width: 782px ) { @media screen and ( max-width: 782px ) {
.wp-pointer { .wp-pointer {

View File

@ -1 +1 @@
.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #dfdfdf;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.075);box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 18px 14px 60px;border:1px solid #3592b6;border-bottom:0;line-height:1.4em;font-size:14px;color:#fff;background:#2ea2cc}.wp-pointer-content h3:before{background:#fff;-webkit-border-radius:50%;border-radius:50%;color:#2ea2cc;content:'\f227';font:400 20px/1.6 dashicons;position:absolute;top:8px;left:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content p{padding:0 15px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-left:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#bbb;content:'\f153';display:block!important;font:400 13px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;left:-12px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{left:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow:before,.wp-pointer-undefined .wp-pointer-arrow:before{margin-left:-13px;margin-top:-11px;border:13px solid transparent;border-bottom-color:#2ea2cc;display:block;content:' '}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow:before{margin-left:-13px;margin-top:-14px;border:13px solid transparent;border-top-color:#fff;display:block;content:' '}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow:before{margin-left:-14px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:' '}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow:before{margin-left:-14px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:' '}.rtl .wp-pointer-arrow:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}@media screen and (max-width:782px){.wp-pointer{display:none}} .wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border:1px solid #dfdfdf;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.075);box-shadow:0 3px 6px rgba(0,0,0,.075)}.wp-pointer-content h3{position:relative;margin:-1px -1px 5px;padding:15px 18px 14px 60px;border:1px solid #3592b6;border-bottom:0;line-height:1.4em;font-size:14px;color:#fff;background:#2ea2cc}.wp-pointer-content h3:before{background:#fff;-webkit-border-radius:50%;border-radius:50%;color:#2ea2cc;content:'\f227';font:400 20px/1.6 dashicons;position:absolute;top:8px;left:15px;speak:none;text-align:center;width:32px;height:32px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wp-pointer-content p{padding:0 15px}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none}.wp-pointer-buttons a.close{padding-left:3px;position:relative}.wp-pointer-buttons a.close:before{background:0 0;color:#bbb;content:'\f153';display:block!important;font:400 13px/1 dashicons;speak:none;margin:1px 0;text-align:center;-webkit-font-smoothing:antialiased!important;width:10px;height:100%;position:absolute;left:-12px;top:1px}.wp-pointer-buttons a.close:hover:before{color:#c00}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0}.wp-pointer-arrow{z-index:10;width:0;height:0;border:0 solid transparent}.wp-pointer-arrow-inner{z-index:20}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px}.wp-pointer-bottom{margin-top:-13px;padding-bottom:13px}.wp-pointer-left{padding-left:13px}.wp-pointer-right{margin-left:-13px;padding-right:13px}.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{left:50px}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:50%;margin-top:-15px}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;border-width:0 13px 13px;border-bottom-color:#3592b6}.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-undefined .wp-pointer-arrow-inner{top:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-bottom-color:#2ea2cc;display:block;content:' '}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;border-width:13px 13px 0;border-top-color:#ccc}.wp-pointer-bottom .wp-pointer-arrow-inner{bottom:1px;margin-left:-13px;margin-bottom:-13px;border:13px solid transparent;border-top-color:#fff;display:block;content:' '}.wp-pointer-left .wp-pointer-arrow{left:0;border-width:13px 13px 13px 0;border-right-color:#ccc}.wp-pointer-left .wp-pointer-arrow-inner{left:1px;margin-left:-13px;margin-top:-13px;border:13px solid transparent;border-right-color:#fff;display:block;content:' '}.wp-pointer-right .wp-pointer-arrow{right:0;border-width:13px 0 13px 13px;border-left-color:#ccc}.wp-pointer-right .wp-pointer-arrow-inner{right:1px;margin-right:-13px;margin-top:-13px;border:13px solid transparent;border-left-color:#fff;display:block;content:' '}@media screen and (max-width:782px){.wp-pointer{display:none}}