Skip to content

Instantly share code, notes, and snippets.

@rmccue
Created August 5, 2013 05:04
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rmccue/6153632 to your computer and use it in GitHub Desktop.
Save rmccue/6153632 to your computer and use it in GitHub Desktop.
/* ----------------------------------------------------------------------------
Last merged revision: 22948
WordPress-style Buttons
=======================
Create a button by adding the `.button` class to an element. For backwards
compatibility, we support several other classes (such as `.button-secondary`),
but these will *not* work with the stackable classes described below.
Button Styles
-------------
To display a primary button style, add the `.button-primary` class to a button.
Button Sizes
------------
Adjust a button's size by adding the `.button-large` or `.button-small` class.
Button States
-------------
Lock the state of a button by adding the name of the pseudoclass as
an actual class (e.g. `.hover` for `:hover`).
TABLE OF CONTENTS:
------------------
1.0 - Button Layouts
2.0 - Default Button Style
3.0 - Primary Button Style
4.0 - Button Groups
---------------------------------------------------------------------------- */
/* line 47, ../scss/buttons.scss */
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 22px;
height: 24px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 65, ../scss/buttons.scss */
.wp-core-ui .button.button-large, .wp-core-ui .button-group.button-large .button {
height: 30px;
line-height: 28px;
padding: 0 12px 2px;
}
/* line 70, ../scss/buttons.scss */
.wp-core-ui .button.button-small, .wp-core-ui .button-group.button-small .button {
height: 21px;
line-height: 20px;
padding: 0 8px 1px;
}
/* line 75, ../scss/buttons.scss */
.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;
}
/* line 81, ../scss/buttons.scss */
.wp-core-ui .button:active {
outline: none;
}
/* line 85, ../scss/buttons.scss */
.wp-core-ui .button.hidden {
display: none;
}
/* line 106, ../scss/buttons.scss */
.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;
}
/* line 117, ../scss/buttons.scss */
.wp-core-ui input[type="reset"],
.wp-core-ui input[type="reset"]:hover,
.wp-core-ui input[type="reset"]:active,
.wp-core-ui input[type="reset"]:focus {
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding-left: 2px;
padding-right: 2px;
width: auto;
}
/* line 131, ../scss/buttons.scss */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
background: #fafafa;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
background-image: -webkit-linear-gradient(top, #fafafa, #e9e9e9);
background-image: -moz-linear-gradient(top, #fafafa, #e9e9e9);
background-image: -o-linear-gradient(top, #fafafa, #e9e9e9);
background-image: linear-gradient(top, #fafafa, #e9e9e9);
border-color: #adadad;
color: #333;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
}
/* line 142, ../scss/buttons.scss */
.wp-core-ui .button.hover, .wp-core-ui .button:hover, .wp-core-ui .button.focus, .wp-core-ui .button:focus,
.wp-core-ui .button-secondary.hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button-secondary.focus,
.wp-core-ui .button-secondary:focus {
background: #f3f3f3;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f3f3f3));
background-image: -webkit-linear-gradient(top, #ffffff, #f3f3f3);
background-image: -moz-linear-gradient(top, #ffffff, #f3f3f3);
background-image: -o-linear-gradient(top, #ffffff, #f3f3f3);
background-image: linear-gradient(top, #ffffff, #f3f3f3);
border-color: #999;
color: #222;
}
/* line 149, ../scss/buttons.scss */
.wp-core-ui .button.focus, .wp-core-ui .button:focus,
.wp-core-ui .button-secondary.focus,
.wp-core-ui .button-secondary:focus {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
/* line 154, ../scss/buttons.scss */
.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,
.wp-core-ui .button-secondary.active:hover,
.wp-core-ui .button-secondary.active:focus,
.wp-core-ui .button-secondary:active {
background: #eee;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #fefefe));
background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe);
background-image: -o-linear-gradient(top, #f4f4f4, #fefefe);
background-image: linear-gradient(top, #f4f4f4, #fefefe);
border-color: #999;
color: #333;
text-shadow: 0 -1px 0 #fff;
-webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
}
/* line 164, ../scss/buttons.scss */
.wp-core-ui .button[disabled], .wp-core-ui .button:disabled, .wp-core-ui .button-disabled,
.wp-core-ui .button-secondary[disabled],
.wp-core-ui .button-secondary:disabled {
color: #aaa !important;
border-color: #ddd !important;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #fefefe)) !important;
background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe) !important;
background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe) !important;
background-image: -o-linear-gradient(top, #f4f4f4, #fefefe) !important;
background-image: linear-gradient(top, #f4f4f4, #fefefe) !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
text-shadow: 0 1px 0 #fff !important;
cursor: default;
}
/* line 182, ../scss/buttons.scss */
.wp-core-ui .button-primary {
background: #2ea2cc;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ea2cc), color-stop(100%, #1e8cbe));
background-image: -webkit-linear-gradient(top, #2ea2cc 0%, #1e8cbe 100%);
background-image: -moz-linear-gradient(top, #2ea2cc 0%, #1e8cbe 100%);
background-image: -o-linear-gradient(top, #2ea2cc 0%, #1e8cbe 100%);
background-image: linear-gradient(top, #2ea2cc 0%, #1e8cbe 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ea2cc', endColorstr='#1e8cbe', GradientType=0 );
border-color: #0074a2;
-webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 86, 132, 0.7);
}
/* line 190, ../scss/buttons.scss */
.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: #1e8cbe;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1e8cbe), color-stop(100%, #0074a2));
background-image: -webkit-linear-gradient(top, #1e8cbe 0%, #0074a2 100%);
background-image: -moz-linear-gradient(top, #1e8cbe 0%, #0074a2 100%);
background-image: -o-linear-gradient(top, #1e8cbe 0%, #0074a2 100%);
background-image: linear-gradient(top, #1e8cbe 0%, #0074a2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e8cbe', endColorstr='#0074a2', GradientType=0 );
border-color: #0074a2;
-webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
-moz-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
color: #fff;
}
/* line 199, ../scss/buttons.scss */
.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);
-moz-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);
}
/* line 205, ../scss/buttons.scss */
.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-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #1e8cbe), color-stop(100%, #0074a2));
background-image: -webkit-linear-gradient(bottom, #1e8cbe 0%, #0074a2 100%);
background-image: -moz-linear-gradient(bottom, #1e8cbe 0%, #0074a2 100%);
background-image: -o-linear-gradient(bottom, #1e8cbe 0%, #0074a2 100%);
background-image: linear-gradient(bottom, #1e8cbe 0%, #0074a2 100%);
border-color: #005684;
color: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
/* line 214, ../scss/buttons.scss */
.wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled {
color: #94cde7 !important;
background: #298cba !important;
border-color: #1b607f !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
cursor: default;
}
/* line 228, ../scss/buttons.scss */
.wp-core-ui .button-group {
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 0;
vertical-align: middle;
}
/* line 235, ../scss/buttons.scss */
.wp-core-ui .button-group > .button {
display: inline-block;
border-radius: 0;
margin-right: -1px;
z-index: 10;
}
/* line 241, ../scss/buttons.scss */
.wp-core-ui .button-group > .button:hover {
z-index: 20;
}
/* line 244, ../scss/buttons.scss */
.wp-core-ui .button-group > .button:first-child {
border-radius: 3px 0 0 3px;
}
/* line 247, ../scss/buttons.scss */
.wp-core-ui .button-group > .button:last-child {
border-radius: 0 3px 3px 0;
}
/* line 252, ../scss/buttons.scss */
.wp-core-ui .button-group > .button-primary {
z-index: 100;
}
/* Last merged revision: 22629 */
/* Styles for the media library iframe (not used on the Library screen) */
/* line 4, ../scss/media.scss */
div#media-upload-header {
margin: 0;
padding: 5px 5px 0;
font-weight: bold;
position: relative;
border-bottom-width: 1px;
border-bottom-style: solid;
}
/* line 13, ../scss/media.scss */
body#media-upload ul#sidemenu {
font-weight: normal;
margin: 0 5px;
left: 0;
bottom: -1px;
float: none;
overflow: hidden;
}
/* line 23, ../scss/media.scss */
#media-upload:after {
content: "";
display: table;
clear: both;
}
/* line 29, ../scss/media.scss */
#media-upload, #media-upload .media-item .slidetoggle {
background: #fff;
}
/* line 33, ../scss/media.scss */
#media-upload .slidetoggle {
border-top-color: #dfdfdf;
}
/* line 37, ../scss/media.scss */
#media-upload input[type="radio"] {
padding: 0;
}
/* line 42, ../scss/media.scss */
form {
margin: 1em;
}
/* line 46, ../scss/media.scss */
#search-filter {
text-align: right;
}
/* line 50, ../scss/media.scss */
th {
position: relative;
}
/* line 55, ../scss/media.scss */
.media-upload-form label.form-help, .media-upload-form td.help {
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
/* line 61, ../scss/media.scss */
.media-upload-form p.help {
margin: 0;
padding: 0;
}
/* line 66, ../scss/media.scss */
.media-upload-form fieldset {
width: 100%;
border: none;
text-align: justify;
margin: 0 0 1em 0;
padding: 0;
}
/* line 76, ../scss/media.scss */
.image-align-none-label {
background: url("../images/align-none.png") no-repeat center left;
}
/* line 80, ../scss/media.scss */
.image-align-left-label {
background: url("../images/align-left.png") no-repeat center left;
}
/* line 84, ../scss/media.scss */
.image-align-center-label {
background: url("../images/align-center.png") no-repeat center left;
}
/* line 88, ../scss/media.scss */
.image-align-right-label {
background: url("../images/align-right.png") no-repeat center left;
}
/* line 92, ../scss/media.scss */
tr.image-size td {
width: 460px;
}
/* line 96, ../scss/media.scss */
tr.image-size div.image-size-item {
margin: 0 0 5px;
}
/* line 104, ../scss/media.scss */
#library-form .progress,
#gallery-form .progress,
.insert-gallery,
.describe.startopen,
.describe.startclosed {
display: none;
}
/* line 108, ../scss/media.scss */
.media-item .thumbnail {
max-width: 128px;
max-height: 128px;
}
/* line 113, ../scss/media.scss */
thead.media-item-info tr {
background-color: transparent;
}
/* line 117, ../scss/media.scss */
.form-table thead.media-item-info {
border: 8px solid #fff;
}
/* line 121, ../scss/media.scss */
abbr.required {
text-decoration: none;
border: none;
}
/* line 127, ../scss/media.scss */
.describe label {
display: inline;
}
/* line 131, ../scss/media.scss */
.describe td.error {
padding: 2px 8px;
}
/* line 135, ../scss/media.scss */
.describe td.A1 {
width: 132px;
}
/* line 140, ../scss/media.scss */
.describe input[type="text"],
.describe textarea {
width: 460px;
border-width: 1px;
border-style: solid;
}
/* line 149, ../scss/media.scss */
#media-upload p.ml-submit {
padding: 1em 0;
}
/* line 153, ../scss/media.scss */
#media-upload p.help, #media-upload label.help {
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
/* line 159, ../scss/media.scss */
#media-upload .ui-sortable .media-item {
cursor: move;
}
/* line 163, ../scss/media.scss */
#media-upload tr.image-size {
margin-bottom: 1em;
height: 3em;
}
/* line 168, ../scss/media.scss */
#media-upload #filter {
width: 623px;
}
/* line 172, ../scss/media.scss */
#media-upload #filter .subsubsub {
margin: 8px 0;
}
/* line 176, ../scss/media.scss */
#media-upload .del-attachment {
display: none;
margin: 5px 0;
}
/* line 181, ../scss/media.scss */
#media-upload th.order-head {
width: 20%;
text-align: center;
}
/* line 186, ../scss/media.scss */
#media-upload th.actions-head {
width: 25%;
text-align: center;
}
/* line 191, ../scss/media.scss */
#media-upload a.wp-post-thumbnail {
margin: 0 20px;
}
/* line 195, ../scss/media.scss */
#media-upload .widefat {
width: 626px;
border-style: solid solid none;
}
/* line 201, ../scss/media.scss */
#filter .tablenav select {
border-style: solid;
border-width: 1px;
padding: 2px;
vertical-align: top;
width: auto;
}
/* line 209, ../scss/media.scss */
.menu_order {
float: right;
font-size: 11px;
margin: 10px 10px 0;
}
/* line 215, ../scss/media.scss */
.menu_order_input {
border: 1px solid #ddd;
font-size: 10px;
padding: 1px;
width: 23px;
}
/* line 222, ../scss/media.scss */
.ui-sortable-helper {
background-color: #fff;
border: 1px solid #aaa;
opacity: 0.6;
filter: alpha(opacity=60);
}
/* line 229, ../scss/media.scss */
.sorthelper {
height: 37px;
width: 623px;
display: block;
}
/* line 241, ../scss/media.scss */
h3.media-title {
font-family: Georgia,"Times New Roman",Times,serif;
font-weight: normal;
color: #5A5A5A;
font-size: 1.6em;
}
/* line 247, ../scss/media.scss */
h4.media-sub-title {
font-family: Georgia,"Times New Roman",Times,serif;
font-weight: normal;
color: #5A5A5A;
border-bottom: 1px solid #DADADA;
font-size: 1.3em;
margin: 12px;
padding: 0 0 3px;
}
/* line 258, ../scss/media.scss */
#gallery-settings th.label {
width: 160px;
}
/* line 262, ../scss/media.scss */
#gallery-settings #basic th.label {
padding: 5px 5px 5px 0;
}
/* line 266, ../scss/media.scss */
#gallery-settings .title {
font-family: Georgia,"Times New Roman",Times,serif;
font-weight: normal;
color: #5A5A5A;
clear: both;
padding: 0 0 3px;
font-size: 1.6em;
border-bottom: 1px solid #DADADA;
}
/* line 275, ../scss/media.scss */
#gallery-settings .describe {
padding: 5px;
width: 615px;
clear: both;
cursor: default;
}
/* line 281, ../scss/media.scss */
#gallery-settings .describe td {
vertical-align: middle;
height: 3em;
}
/* line 286, ../scss/media.scss */
#gallery-settings .describe th.label {
padding-top: .5em;
text-align: left;
}
/* line 291, ../scss/media.scss */
#gallery-settings .describe select {
width: 15em;
}
/* line 296, ../scss/media.scss */
#gallery-settings .describe select option,
#gallery-settings .describe td {
padding: 0;
}
/* line 302, ../scss/media.scss */
#gallery-settings label,
#gallery-settings legend {
font-size: 13px;
color: #464646;
margin-right: 15px;
}
/* line 308, ../scss/media.scss */
#gallery-settings .align .field label {
margin: 0 1em 0 3px;
}
/* line 312, ../scss/media.scss */
#gallery-settings p.ml-submit {
border-top: 1px solid #dfdfdf;
}
/* line 316, ../scss/media.scss */
#gallery-settings select#columns {
width: 6em;
}
/* line 321, ../scss/media.scss */
#sort-buttons {
font-size: 0.8em;
margin: 3px 25px -8px 0;
text-align: right;
max-width: 625px;
}
/* line 327, ../scss/media.scss */
#sort-buttons a {
text-decoration: none;
}
/* line 332, ../scss/media.scss */
#sort-buttons #asc,
#sort-buttons #showall {
padding-left: 5px;
}
/* line 336, ../scss/media.scss */
#sort-buttons span {
margin-right: 25px;
}
/* line 341, ../scss/media.scss */
p.media-types {
margin: 1em;
}
/* line 345, ../scss/media.scss */
tr.not-image {
display: none;
}
/* line 350, ../scss/media.scss */
table.not-image tr.not-image {
display: table-row;
}
/* line 354, ../scss/media.scss */
table.not-image tr.image-only {
display: none;
}
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/* line 367, ../scss/media.scss */
.image-align-none-label {
background-image: url("../images/align-none-2x.png?ver=20120916");
background-size: 21px 15px;
}
/* line 372, ../scss/media.scss */
.image-align-left-label {
background-image: url("../images/align-left-2x.png?ver=20120916");
background-size: 22px 15px;
}
/* line 377, ../scss/media.scss */
.image-align-center-label {
background-image: url("../images/align-center-2x.png?ver=20120916");
background-size: 21px 15px;
}
/* line 382, ../scss/media.scss */
.image-align-right-label {
background-image: url("../images/align-right-2x.png?ver=20120916");
background-size: 22px 15px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment