Scope button classes so they can be used on the frontend without interfering with theme styles.

Props helenyhou, koopersmith
fixes #22644


git-svn-id: http://core.svn.wordpress.org/trunk@22948 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ryan Boren 2012-11-30 13:40:59 +00:00
parent c7c590ce3c
commit d4abd95449
21 changed files with 111 additions and 109 deletions

View File

@ -97,7 +97,7 @@ $admin_body_class .= ' no-customize-support';
?>
</head>
<body class="wp-admin no-js <?php echo apply_filters( 'admin_body_class', '' ) . " $admin_body_class"; ?>">
<body class="wp-admin wp-core-ui no-js <?php echo apply_filters( 'admin_body_class', '' ) . " $admin_body_class"; ?>">
<script type="text/javascript">
document.body.className = document.body.className.replace('no-js','js');
</script>

View File

@ -25,10 +25,6 @@
width: 35%;
}
.welcome-panel .welcome-button {
padding: 0 16px;
}
#wp-fullscreen-title {
width: 97%;
}

View File

@ -226,7 +226,11 @@ TABLE OF CONTENTS:
.hidden,
.js .closed .inside,
.js .hide-if-js,
.no-js .hide-if-no-js {
.no-js .hide-if-no-js,
.js.wp-core-ui .hide-if-js,
.js .wp-core-ui .hide-if-js,
.no-js.wp-core-ui .hide-if-no-js,
.no-js .wp-core-ui .hide-if-no-js {
display: none;
}
@ -2293,12 +2297,8 @@ html.wp-toolbar {
background-position: 100% 17%;
}
.welcome-panel .welcome-button {
font: normal 15px sans-serif;
height: 46px;
line-height: 44px;
.wp-core-ui .welcome-panel .button.button-hero {
margin: 15px 0 3px;
padding: 0 36px;
}
.welcome-panel-content {
@ -2377,11 +2377,6 @@ html.wp-toolbar {
}
@media screen and (max-width: 870px) {
.welcome-button {
font-size: 14px;
padding: 1em 2.3em;
}
.welcome-panel .welcome-panel-column,
.welcome-panel .welcome-panel-column:first-child {
display: block;
@ -5683,7 +5678,11 @@ body.full-overlay-active {
------------------------------------------------------------------------------*/
.no-customize-support .hide-if-no-customize,
.customize-support .hide-if-customize {
.customize-support .hide-if-customize,
.no-customize-support.wp-core-ui .hide-if-no-customize,
.no-customize-support .wp-core-ui .hide-if-no-customize,
.customize-support.wp-core-ui .hide-if-customize,
.customize-support .wp-core-ui .hide-if-customize {
display: none;
}

View File

@ -44,7 +44,7 @@ do_action( 'customize_controls_enqueue_scripts' );
wp_user_settings();
_wp_admin_html_begin();
$body_class = '';
$body_class = 'wp-core-ui';
if ( wp_is_mobile() ) :
$body_class .= ' mobile';

View File

@ -1244,8 +1244,8 @@ function wp_welcome_panel() {
<div class="welcome-panel-column-container">
<div class="welcome-panel-column">
<h4><?php _e( 'Get Started' ); ?></h4>
<a class="button-primary welcome-button load-customize hide-if-no-customize" href="<?php echo wp_customize_url(); ?>"><?php _e( 'Customize Your Site' ); ?></a>
<a class="button-primary welcome-button hide-if-customize" href="<?php echo admin_url( 'themes.php' ); ?>"><?php _e( 'Customize Your Site' ); ?></a>
<a class="button button-primary button-hero load-customize hide-if-no-customize" href="<?php echo wp_customize_url(); ?>"><?php _e( 'Customize Your Site' ); ?></a>
<a class="button button-primary button-hero hide-if-customize" href="<?php echo admin_url( 'themes.php' ); ?>"><?php _e( 'Customize Your Site' ); ?></a>
<?php if ( current_user_can( 'install_themes' ) || ( current_user_can( 'switch_themes' ) && count( wp_get_themes( array( 'allowed' => true ) ) ) > 1 ) ) : ?>
<p class="hide-if-no-customize"><?php printf( __( 'or, <a href="%s">change your theme completely</a>' ), admin_url( 'themes.php' ) ); ?></p>
<?php endif; ?>

View File

@ -358,7 +358,7 @@ if ( is_string($content_func) )
do_action( "admin_head_{$content_func}" );
?>
</head>
<body<?php if ( isset($GLOBALS['body_id']) ) echo ' id="' . $GLOBALS['body_id'] . '"'; ?> class="no-js">
<body<?php if ( isset($GLOBALS['body_id']) ) echo ' id="' . $GLOBALS['body_id'] . '"'; ?> class="wp-core-ui no-js">
<script type="text/javascript">
document.body.className = document.body.className.replace('no-js', 'js');
</script>

View File

@ -1389,7 +1389,7 @@ do_action('admin_head');
$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
?>
</head>
<body<?php if ( isset($GLOBALS['body_id']) ) echo ' id="' . $GLOBALS['body_id'] . '"'; ?> class="wp-admin no-js iframe <?php echo apply_filters( 'admin_body_class', '' ) . ' ' . $admin_body_class; ?>">
<body<?php if ( isset($GLOBALS['body_id']) ) echo ' id="' . $GLOBALS['body_id'] . '"'; ?> class="wp-admin wp-core-ui no-js iframe <?php echo apply_filters( 'admin_body_class', '' ) . ' ' . $admin_body_class; ?>">
<script type="text/javascript">
//<![CDATA[
(function(){

View File

@ -15,7 +15,7 @@ if ( false ) {
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Error: PHP is not running</title>
</head>
<body>
<body class="wp-core-ui">
<h1 id="logo"><a href="http://wordpress.org/">WordPress</a></h1>
<h2>Error: PHP is not running</h2>
<p>WordPress requires that your web server is running PHP. Your server does not have PHP installed, or PHP is turned off.</p>
@ -62,7 +62,7 @@ function display_header() {
wp_admin_css( 'install', true );
?>
</head>
<body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
<body class="wp-core-ui<?php if ( is_rtl() ) echo ' rtl'; ?>">
<h1 id="logo"><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>"><?php _e( 'WordPress' ); ?></a></h1>
<?php

View File

@ -16,11 +16,11 @@ header( 'Content-Type: text/html; charset=utf-8' );
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
<?php
<?php
wp_admin_css( 'install', true );
?>
</head>
<body>
<body class="wp-core-ui">
<h1 id="logo"><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>"><?php _e( 'WordPress' ); ?></a></h1>
<?php

View File

@ -53,7 +53,7 @@ if ( isset( $_GET['action'] ) ) {
if ( 'confirm' === $_GET['action'] ) {
check_admin_referer( 'confirm' );
if ( ! headers_sent() ) {
nocache_headers();
header( 'Content-Type: text/html; charset=utf-8' );
@ -72,7 +72,7 @@ if ( isset( $_GET['action'] ) ) {
wp_admin_css( 'ie', true );
?>
</head>
<body>
<body class="wp-core-ui">
<h1 id="logo"><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>"><?php _e( 'WordPress' ); ?></a></h1>
<form action="sites.php?action=<?php echo esc_attr( $_GET['action2'] ) ?>" method="post">
<input type="hidden" name="action" value="<?php echo esc_attr( $_GET['action2'] ) ?>" />
@ -85,20 +85,20 @@ if ( isset( $_GET['action'] ) ) {
</body>
</html>
<?php
exit();
exit();
}
$updated_action = '';
$manage_actions = array( 'deleteblog', 'allblogs', 'archiveblog', 'unarchiveblog', 'activateblog', 'deactivateblog', 'unspamblog', 'spamblog', 'unmatureblog', 'matureblog' );
if ( in_array( $_GET['action'], $manage_actions ) ) {
if ( in_array( $_GET['action'], $manage_actions ) ) {
$action = $_GET['action'];
if ( 'allblogs' === $action )
$action = 'bulk-sites';
check_admin_referer( $action );
}
}
switch ( $_GET['action'] ) {
case 'deleteblog':
@ -108,21 +108,21 @@ if ( isset( $_GET['action'] ) ) {
$updated_action = 'not_deleted';
if ( $id != '0' && $id != $current_site->blog_id && current_user_can( 'delete_site', $id ) ) {
wpmu_delete_blog( $id, true );
$updated_action = 'delete';
$updated_action = 'delete';
}
break;
case 'allblogs':
if ( ( isset( $_POST['action'] ) || isset( $_POST['action2'] ) ) && isset( $_POST['allblogs'] ) ) {
$doaction = $_POST['action'] != -1 ? $_POST['action'] : $_POST['action2'];
foreach ( (array) $_POST['allblogs'] as $key => $val ) {
if ( $val != '0' && $val != $current_site->blog_id ) {
switch ( $doaction ) {
case 'delete':
if ( ! current_user_can( 'delete_site', $val ) )
wp_die( __( 'You are not allowed to delete the site.' ) );
$updated_action = 'all_delete';
wpmu_delete_blog( $val, true );
break;
@ -162,16 +162,16 @@ if ( isset( $_GET['action'] ) ) {
case 'spamblog':
update_blog_status( $id, 'spam', ( 'spamblog' === $_GET['action'] ) ? '1' : '0' );
break;
case 'unmatureblog':
case 'matureblog':
update_blog_status( $id, 'mature', ( 'matureblog' === $_GET['action'] ) ? '1' : '0' );
break;
}
if ( empty( $updated_action ) && in_array( $_GET['action'], $manage_actions ) )
$updated_action = $_GET['action'];
if ( ! empty( $updated_action ) ) {
wp_safe_redirect( add_query_arg( array( 'updated' => $updated_action ), wp_get_referer() ) );
exit();
@ -218,7 +218,7 @@ if ( isset( $_GET['updated'] ) ) {
$msg = apply_filters( 'network_sites_updated_message_' . $_GET['updated'], __( 'Settings saved.' ) );
break;
}
if ( ! empty( $msg ) )
$msg = '<div class="updated" id="message"><p>' . $msg . '</p></div>';
}
@ -231,7 +231,7 @@ require_once( '../admin-header.php' );
<div class="wrap">
<?php screen_icon( 'ms-admin' ); ?>
<h2><?php _e( 'Sites' ) ?>
<?php if ( current_user_can( 'create_sites') ) : ?>
<a href="<?php echo network_admin_url('site-new.php'); ?>" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'site' ); ?></a>
<?php endif; ?>
@ -241,8 +241,8 @@ require_once( '../admin-header.php' );
} ?>
</h2>
<?php echo $msg; ?>
<?php echo $msg; ?>
<form action="" method="get" id="ms-search">
<?php $wp_list_table->search_box( __( 'Search Sites' ), 'site' ); ?>
<input type="hidden" name="action" value="blogs" />

View File

@ -439,7 +439,7 @@ var photostorage = false;
$admin_body_class = ( is_rtl() ) ? 'rtl' : '';
$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
?>
<body class="press-this wp-admin <?php echo $admin_body_class; ?>">
<body class="press-this wp-admin wp-core-ui <?php echo $admin_body_class; ?>">
<form action="press-this.php?action=post" method="post">
<div id="poststuff" class="metabox-holder">
<div id="side-sortables" class="press-this-sidebar">

View File

@ -99,7 +99,7 @@ function setup_config_display_header() {
<link rel="stylesheet" href="../wp-includes/css/buttons.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />
</head>
<body<?php if ( is_rtl() ) echo ' class="rtl"'; ?>>
<body class="wp-core-ui<?php if ( is_rtl() ) echo ' rtl'; ?>">
<h1 id="logo"><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>"><?php _e( 'WordPress' ); ?></a></h1>
<?php
} // end function setup_config_display_header();

View File

@ -57,7 +57,7 @@ else
wp_admin_css( 'ie', true );
?>
</head>
<body>
<body class="wp-core-ui">
<h1 id="logo"><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>"><?php _e( 'WordPress' ); ?></a></h1>
<?php if ( get_option( 'db_version' ) == $wp_db_version || !is_blog_installed() ) : ?>

View File

@ -113,7 +113,7 @@ final class _WP_Editors {
$buttons .= '<a id="' . $editor_id . '-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">' . __('Visual') . "</a>\n";
}
echo '<div id="wp-' . $editor_id . '-wrap" class="wp-editor-wrap ' . $switch_class . '">';
echo '<div id="wp-' . $editor_id . '-wrap" class="wp-core-ui wp-editor-wrap ' . $switch_class . '">';
if ( self::$editor_buttons_css ) {
wp_print_styles('editor-buttons');

View File

@ -600,7 +600,11 @@
* Customize support classes
*/
.no-customize-support .hide-if-no-customize,
.customize-support .hide-if-customize {
.customize-support .hide-if-customize,
.no-customize-support.wp-core-ui .hide-if-no-customize,
.no-customize-support .wp-core-ui .hide-if-no-customize,
.customize-support.wp-core-ui .hide-if-customize,
.customize-support .wp-core-ui .hide-if-customize {
display: none;
}

View File

@ -34,9 +34,9 @@ TABLE OF CONTENTS:
1.0 - Button Layouts
---------------------------------------------------------------------------- */
.button,
.button-primary,
.button-secondary {
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
display: inline-block;
text-decoration: none;
font-size: 12px;
@ -57,43 +57,43 @@ TABLE OF CONTENTS:
}
/* Remove the dotted border on :focus and the extra padding in Firefox */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
.wp-core-ui button::-moz-focus-inner,
.wp-core-ui input[type="reset"]::-moz-focus-inner,
.wp-core-ui input[type="button"]::-moz-focus-inner,
.wp-core-ui input[type="submit"]::-moz-focus-inner {
border-width: 1px 0;
border-style: solid none;
border-color: transparent;
padding: 0;
}
.button.button-large,
.button-group.button-large .button {
.wp-core-ui .button.button-large,
.wp-core-ui .button-group.button-large .button {
height: 30px;
line-height: 28px;
padding: 0 12px 2px;
}
.button.button-small,
.button-group.button-small .button {
.wp-core-ui .button.button-small,
.wp-core-ui .button-group.button-small .button {
height: 21px;
line-height: 20px;
padding: 0 8px 1px;
}
.button.button-hero,
.button-group.button-hero .button {
.wp-core-ui .button.button-hero,
.wp-core-ui .button-group.button-hero .button {
font-size: 14px;
height: 46px;
line-height: 44px;
padding: 0 36px;
}
.button:active {
.wp-core-ui .button:active {
outline: none;
}
.button.hidden {
.wp-core-ui .button.hidden {
display: none;
}
@ -101,8 +101,8 @@ input[type="submit"]::-moz-focus-inner {
2.0 - Default Button Style
---------------------------------------------------------------------------- */
.button,
.button-secondary {
.wp-core-ui .button,
.wp-core-ui .button-secondary {
background: #f3f3f3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
@ -114,12 +114,12 @@ input[type="submit"]::-moz-focus-inner {
text-shadow: 0 1px 0 #fff;
}
.button.hover,
.button:hover,
.button-secondary:hover,
.button.focus,
.button:focus,
.button-secondary:focus {
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
background: #f3f3f3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
@ -131,18 +131,18 @@ input[type="submit"]::-moz-focus-inner {
color: #222;
}
.button.focus,
.button:focus,
.button-secondary:focus {
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
.button.active,
.button.active:hover,
.button.active:focus,
.button:active,
.button-secondary:active {
.wp-core-ui .button.active,
.wp-core-ui .button.active:hover,
.wp-core-ui .button.active:focus,
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
background: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
@ -157,11 +157,11 @@ input[type="submit"]::-moz-focus-inner {
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
}
.button[disabled],
.button:disabled,
.button-secondary[disabled],
.button-secondary:disabled,
.button-disabled {
.wp-core-ui .button[disabled],
.wp-core-ui .button:disabled,
.wp-core-ui .button-secondary[disabled],
.wp-core-ui .button-secondary:disabled,
.wp-core-ui .button-disabled {
color: #aaa !important;
border-color: #ddd !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
@ -180,7 +180,7 @@ input[type="submit"]::-moz-focus-inner {
3.0 - Primary Button Style
---------------------------------------------------------------------------- */
.button-primary {
.wp-core-ui .button-primary {
background-color: #21759b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
@ -197,10 +197,10 @@ input[type="submit"]::-moz-focus-inner {
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.button-primary.hover,
.button-primary:hover,
.button-primary.focus,
.button-primary:focus {
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
background-color: #278ab7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
@ -215,17 +215,17 @@ input[type="submit"]::-moz-focus-inner {
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.button-primary.focus,
.button-primary:focus {
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
border-color: #0e3950;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
}
.button-primary.active,
.button-primary.active:hover,
.button-primary.active:focus,
.button-primary:active {
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active {
background: #1b607f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
@ -240,9 +240,9 @@ input[type="submit"]::-moz-focus-inner {
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.button-primary[disabled],
.button-primary:disabled,
.button-primary-disabled {
.wp-core-ui .button-primary[disabled],
.wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary-disabled {
color: #94cde7 !important;
background: #298cba !important;
border-color: #1b607f !important;
@ -256,7 +256,7 @@ input[type="submit"]::-moz-focus-inner {
4.0 - Button Groups
---------------------------------------------------------------------------- */
.button-group {
.wp-core-ui .button-group {
position: relative;
display: inline-block;
white-space: nowrap;
@ -264,25 +264,25 @@ input[type="submit"]::-moz-focus-inner {
vertical-align: middle;
}
.button-group > .button {
.wp-core-ui .button-group > .button {
display: inline-block;
border-radius: 0;
margin-right: -1px;
z-index: 10;
}
.button-group > .button-primary {
.wp-core-ui .button-group > .button-primary {
z-index: 100;
}
.button-group > .button:hover {
.wp-core-ui .button-group > .button:hover {
z-index: 20;
}
.button-group > .button:first-child {
.wp-core-ui .button-group > .button:first-child {
border-radius: 3px 0 0 3px;
}
.button-group > .button:last-child {
.wp-core-ui .button-group > .button:last-child {
border-radius: 0 3px 3px 0;
}

View File

@ -1066,6 +1066,9 @@
uploader: true
});
// Ensure core UI is enabled.
this.$el.addClass('wp-core-ui');
// Initialize modal container view.
if ( this.options.modal ) {
this.modal = new media.view.Modal({

View File

@ -11,7 +11,7 @@
<base target="_self" />
</head>
<body id="media-upload" style="display:none;">
<body id="media-upload" class="wp-core-ui" style="display:none;">
<script type="text/javascript">
if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
document.body.className += ' rtl';

View File

@ -152,7 +152,7 @@ wp_admin_css( 'wp-admin', true );
</style>
<?php endif; ?>
</head>
<body class="windows">
<body class="windows wp-core-ui">
<script type="text/javascript">
if ( tinymce.isMac )
document.body.className = document.body.className.replace(/windows/, 'macos');

View File

@ -1505,7 +1505,7 @@ function wp_print_media_templates() {
</script>
<script type="text/html" id="tmpl-media-modal">
<div class="media-modal">
<div class="media-modal wp-core-ui">
<h3 class="media-modal-title">{{ data.title }}</h3>
<a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a>
</div>

View File

@ -86,7 +86,7 @@ function login_header($title = 'Log In', $message = '', $wp_error = '') {
if ( $interim_login )
$login_header_url = '#';
$classes = array( 'login-action-' . $action );
$classes = array( 'login-action-' . $action, 'wp-core-ui' );
if ( wp_is_mobile() )
$classes[] = 'mobile';
if ( is_rtl() )