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
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user