From ae0e22b61c6592f69d9823ecb6a9dfc5d5eca676 Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Sun, 29 Jun 2014 16:06:14 +0000 Subject: [PATCH] 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 --- wp-admin/includes/template.php | 4 +- wp-includes/css/wp-pointer-rtl.css | 54 +++++++++++++------------- wp-includes/css/wp-pointer-rtl.min.css | 2 +- wp-includes/css/wp-pointer.css | 34 ++++++++-------- wp-includes/css/wp-pointer.min.css | 2 +- 5 files changed, 50 insertions(+), 46 deletions(-) diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index 95a3bf950d..b2a15d0d2c 100644 --- a/wp-admin/includes/template.php +++ b/wp-admin/includes/template.php @@ -1992,7 +1992,7 @@ final class WP_Internal_Pointers { self::print_js( 'wp360_revisions', '.misc-pub-section.misc-pub-revisions', array( '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 ) { $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 { $selector = 'a[href="customize.php"]'; if ( is_rtl() ) { diff --git a/wp-includes/css/wp-pointer-rtl.css b/wp-includes/css/wp-pointer-rtl.css index d6d0e33563..75088cb1d1 100644 --- a/wp-includes/css/wp-pointer-rtl.css +++ b/wp-includes/css/wp-pointer-rtl.css @@ -106,6 +106,7 @@ } .wp-pointer-bottom { + margin-top: -13px; padding-bottom: 13px; } @@ -115,6 +116,7 @@ } /* @noflip */ .wp-pointer-right { + margin-left: -13px; padding-right: 13px; } @@ -139,10 +141,11 @@ border-bottom-color: #3592b6; } -.wp-pointer-top .wp-pointer-arrow:before, -.wp-pointer-undefined .wp-pointer-arrow:before { +.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer-undefined .wp-pointer-arrow-inner { + top: 1px; margin-right: -13px; - margin-top: -11px; + margin-top: -13px; border: 13px solid transparent; border-bottom-color: #2ea2cc; display: block; @@ -155,9 +158,10 @@ border-top-color: #ccc; } -.wp-pointer-bottom .wp-pointer-arrow:before { +.wp-pointer-bottom .wp-pointer-arrow-inner { + bottom: 1px; margin-right: -13px; - margin-top: -14px; + margin-bottom: -13px; border: 13px solid transparent; border-top-color: #fff; display: block; @@ -171,24 +175,10 @@ 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 */ -.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; +.wp-pointer-left .wp-pointer-arrow-inner { + left: 1px; + margin-left: -13px; margin-top: -13px; border: 13px solid transparent; border-right-color: #fff; @@ -196,10 +186,22 @@ content: ' '; } -.rtl .wp-pointer-arrow:before { - -webkit-transform: rotateY(180deg); - -ms-transform: rotateY(180deg); - transform: rotateY(180deg); +/* @noflip */ +.wp-pointer-right .wp-pointer-arrow { + right: 0; + 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 */ diff --git a/wp-includes/css/wp-pointer-rtl.min.css b/wp-includes/css/wp-pointer-rtl.min.css index 732fd6fda2..161579d4c3 100644 --- a/wp-includes/css/wp-pointer-rtl.min.css +++ b/wp-includes/css/wp-pointer-rtl.min.css @@ -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}} \ No newline at end of file +.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}} \ No newline at end of file diff --git a/wp-includes/css/wp-pointer.css b/wp-includes/css/wp-pointer.css index 3aa0c8e030..1d69823f11 100644 --- a/wp-includes/css/wp-pointer.css +++ b/wp-includes/css/wp-pointer.css @@ -106,6 +106,7 @@ } .wp-pointer-bottom { + margin-top: -13px; padding-bottom: 13px; } @@ -115,6 +116,7 @@ } /* @noflip */ .wp-pointer-right { + margin-left: -13px; padding-right: 13px; } @@ -139,10 +141,11 @@ border-bottom-color: #3592b6; } -.wp-pointer-top .wp-pointer-arrow:before, -.wp-pointer-undefined .wp-pointer-arrow:before { +.wp-pointer-top .wp-pointer-arrow-inner, +.wp-pointer-undefined .wp-pointer-arrow-inner { + top: 1px; margin-left: -13px; - margin-top: -11px; + margin-top: -13px; border: 13px solid transparent; border-bottom-color: #2ea2cc; display: block; @@ -155,9 +158,10 @@ border-top-color: #ccc; } -.wp-pointer-bottom .wp-pointer-arrow:before { +.wp-pointer-bottom .wp-pointer-arrow-inner { + bottom: 1px; margin-left: -13px; - margin-top: -14px; + margin-bottom: -13px; border: 13px solid transparent; border-top-color: #fff; display: block; @@ -171,8 +175,10 @@ border-right-color: #ccc; } -.wp-pointer-left .wp-pointer-arrow:before { - margin-left: -14px; +/* @noflip */ +.wp-pointer-left .wp-pointer-arrow-inner { + left: 1px; + margin-left: -13px; margin-top: -13px; border: 13px solid transparent; border-right-color: #fff; @@ -182,13 +188,15 @@ /* @noflip */ .wp-pointer-right .wp-pointer-arrow { - right:0; + right: 0; border-width: 13px 0 13px 13px; border-left-color: #ccc; } -.wp-pointer-right .wp-pointer-arrow:before { - margin-left: -14px; +/* @noflip */ +.wp-pointer-right .wp-pointer-arrow-inner { + right: 1px; + margin-right: -13px; margin-top: -13px; border: 13px solid transparent; border-left-color: #fff; @@ -196,12 +204,6 @@ content: ' '; } -.rtl .wp-pointer-arrow:before { - -webkit-transform: rotateY(180deg); - -ms-transform: rotateY(180deg); - transform: rotateY(180deg); -} - /* Disable pointers at responsive sizes */ @media screen and ( max-width: 782px ) { .wp-pointer { diff --git a/wp-includes/css/wp-pointer.min.css b/wp-includes/css/wp-pointer.min.css index cd43edde59..24a81f04f4 100644 --- a/wp-includes/css/wp-pointer.min.css +++ b/wp-includes/css/wp-pointer.min.css @@ -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}} \ No newline at end of file +.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}} \ No newline at end of file