Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Conversion of parts of MP6 to SCSS for http://core.trac.wordpress.org/ticket/22862
@mixin background-gradient($start-color, $end-color) {
background: $start-color;
@include background-image(linear-gradient(top, $start-color 0%, $end-color 100%));
@include ie-filter($start-color, $end-color);
}
@mixin ie-filter($start-color, $end-color) {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0 );
}
/* ----------------------------------------------------------------------------
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
---------------------------------------------------------------------------- */
@import "utilities";
@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/box-sizing";
.wp-core-ui {
///////////////////////////////////////////////////////////////////////////
// 1.0 - Button Layouts
///////////////////////////////////////////////////////////////////////////
.button,
.button-primary,
.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;
@include border-radius(3px);
white-space: nowrap;
@include box-sizing(border-box);
}
.button {
&.button-large {
height: 30px;
line-height: 28px;
padding: 0 12px 2px;
}
&.button-small {
height: 21px;
line-height: 20px;
padding: 0 8px 1px;
}
&.button-hero {
font-size: 14px;
height: 46px;
line-height: 44px;
padding: 0 36px;
}
&:active {
outline: none;
}
&.hidden {
display: none;
}
}
.button-group.button-large .button {
@extend .button.button-large;
}
.button-group.button-small .button {
@extend .button.button-small;
}
.button-group.button-hero .button {
@extend .button.button-hero;
}
// 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 {
border-width: 1px 0;
border-style: solid none;
border-color: transparent;
padding: 0;
}
// Style Reset buttons as simple text links
input[type="reset"],
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus {
background: none;
border: none;
@include box-shadow(none);
padding-left: 2px;
padding-right: 2px;
width: auto;
}
///////////////////////////////////////////////////////////////////////////
// 2.0 - Default Button Style
///////////////////////////////////////////////////////////////////////////
.button,
.button-secondary {
background: #fafafa;
@include 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;
&.hover, &:hover, &.focus, &:focus {
background: #f3f3f3;
@include background-image(linear-gradient(top, #fff, #f3f3f3));
border-color: #999;
color: #222;
}
&.focus, &:focus {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
&.active, &.active:hover, &.active:focus, &:active {
background: #eee;
@include 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 );
}
&[disabled], &:disabled {
color: #aaa !important;
border-color: #ddd !important;
@include background-image(linear-gradient(top, #f4f4f4, #fefefe) !important);
@include box-shadow(none !important);
text-shadow: 0 1px 0 #fff !important;
cursor: default;
}
}
.button-disabled {
@extend .button:disabled;
}
///////////////////////////////////////////////////////////////////////////
// 3.0 - Primary Button Style
///////////////////////////////////////////////////////////////////////////
.button-primary {
@include background-gradient(#2ea2cc, #1e8cbe);
border-color: #0074a2;
@include 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);
&.hover, &:hover, &.focus, &:focus {
$start-color: #1e8cbe;
$end-color: #0074a2;
@include background-gradient($start-color, $end-color);
border-color: $end-color;
@include box-shadow(inset 0 1px 0 rgba(120,200,230,0.6));
color: #fff;
}
&.focus, &:focus {
border-color: #0e3950;
@include box-shadow(inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4));
}
&.active, &.active:hover,
&.active:focus, &:active {
@include background-image(linear-gradient(bottom, #1e8cbe 0%,#0074a2 100%));
border-color: #005684;
color: rgba(255,255,255,0.95);
@include box-shadow(inset 0 1px 0 rgba(0,0,0,0.1));
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
&[disabled], &:disabled,
&.button-primary-disabled {
color: #94cde7 !important;
background: #298cba !important;
border-color: #1b607f !important;
@include box-shadow(none !important);
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
cursor: default;
}
}
///////////////////////////////////////////////////////////////////////////
// 4.0 - Button Groups
///////////////////////////////////////////////////////////////////////////
.button-group {
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 0;
vertical-align: middle;
> .button {
display: inline-block;
border-radius: 0;
margin-right: -1px;
z-index: 10;
&:hover {
z-index: 20;
}
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
}
}
> .button-primary {
z-index: 100;
}
}
}
/* Last merged revision: 22629 */
/* Styles for the media library iframe (not used on the Library screen) */
div#media-upload-header {
margin: 0;
padding: 5px 5px 0;
font-weight: bold;
position: relative;
border-bottom-width: 1px;
border-bottom-style: solid;
}
body#media-upload ul#sidemenu {
font-weight: normal;
margin: 0 5px;
left: 0;
bottom: -1px;
float: none;
overflow: hidden;
}
#media-upload {
&:after { // clearfix
content: "";
display: table;
clear: both;
}
&, .media-item .slidetoggle {
background: #fff;
}
.slidetoggle {
border-top-color: #dfdfdf;
}
input[type="radio"] {
padding: 0;
}
}
form {
margin: 1em;
}
#search-filter {
text-align: right;
}
th {
position: relative;
}
.media-upload-form {
label.form-help, td.help {
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
p.help {
margin: 0;
padding: 0;
}
fieldset {
width: 100%;
border: none;
text-align: justify;
margin: 0 0 1em 0;
padding: 0;
}
}
// specific to the image upload form
.image-align-none-label {
background: url('../images/align-none.png') no-repeat center left;
}
.image-align-left-label {
background: url('../images/align-left.png') no-repeat center left;
}
.image-align-center-label {
background: url('../images/align-center.png') no-repeat center left;
}
.image-align-right-label {
background: url('../images/align-right.png') no-repeat center left;
}
tr.image-size td {
width: 460px;
}
tr.image-size div.image-size-item {
margin: 0 0 5px;
}
#library-form .progress,
#gallery-form .progress,
.insert-gallery,
.describe.startopen,
.describe.startclosed {
display: none;
}
.media-item .thumbnail {
max-width: 128px;
max-height: 128px;
}
thead.media-item-info tr {
background-color: transparent;
}
.form-table thead.media-item-info {
border: 8px solid #fff;
}
abbr.required {
text-decoration: none;
border: none;
}
.describe {
label {
display: inline;
}
td.error {
padding: 2px 8px;
}
td.A1 {
width: 132px;
}
input[type="text"],
textarea {
width: 460px;
border-width: 1px;
border-style: solid;
}
}
// Specific to Uploader
#media-upload {
p.ml-submit {
padding: 1em 0;
}
p.help, label.help {
font-family: sans-serif;
font-style: italic;
font-weight: normal;
}
.ui-sortable .media-item {
cursor: move;
}
tr.image-size {
margin-bottom: 1em;
height: 3em;
}
#filter {
width: 623px;
}
#filter .subsubsub {
margin: 8px 0;
}
.del-attachment {
display: none;
margin: 5px 0;
}
th.order-head {
width: 20%;
text-align: center;
}
th.actions-head {
width: 25%;
text-align: center;
}
a.wp-post-thumbnail {
margin: 0 20px;
}
.widefat {
width: 626px;
border-style: solid solid none;
}
}
#filter .tablenav select {
border-style: solid;
border-width: 1px;
padding: 2px;
vertical-align: top;
width: auto;
}
.menu_order {
float: right;
font-size: 11px;
margin: 10px 10px 0;
}
.menu_order_input {
border: 1px solid #ddd;
font-size: 10px;
padding: 1px;
width: 23px;
}
.ui-sortable-helper {
background-color: #fff;
border: 1px solid #aaa;
opacity: 0.6;
filter: alpha(opacity=60);
}
.sorthelper {
height: 37px;
width: 623px;
display: block;
}
@mixin media-title {
font-family: Georgia,"Times New Roman",Times,serif;
font-weight: normal;
color: #5A5A5A;
}
h3.media-title {
@include media-title;
font-size: 1.6em;
}
h4.media-sub-title {
@include media-title;
border-bottom: 1px solid #DADADA;
font-size: 1.3em;
margin: 12px;
padding: 0 0 3px;
}
#gallery-settings {
th.label {
width: 160px;
}
#basic th.label {
padding: 5px 5px 5px 0;
}
.title {
@include media-title;
clear: both;
padding: 0 0 3px;
font-size: 1.6em;
border-bottom: 1px solid #DADADA;
}
.describe {
padding: 5px;
width: 615px;
clear: both;
cursor: default;
td {
vertical-align: middle;
height: 3em;
}
th.label {
padding-top: .5em;
text-align: left;
}
select {
width: 15em;
}
select option,
td {
padding: 0;
}
}
label,
legend {
font-size: 13px;
color: #464646;
margin-right: 15px;
}
.align .field label {
margin: 0 1em 0 3px;
}
p.ml-submit {
border-top: 1px solid #dfdfdf;
}
select#columns {
width: 6em;
}
}
#sort-buttons {
font-size: 0.8em;
margin: 3px 25px -8px 0;
text-align: right;
max-width: 625px;
a {
text-decoration: none;
}
#asc,
#showall {
padding-left: 5px;
}
span {
margin-right: 25px;
}
}
p.media-types {
margin: 1em;
}
tr.not-image {
display: none;
}
table.not-image {
tr.not-image {
display: table-row;
}
tr.image-only {
display: none;
}
}
///////////////////////////////////////////////////////////////////////////
// HiDPI Displays
///////////////////////////////////////////////////////////////////////////
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.image-align-none-label {
background-image: url('../images/align-none-2x.png?ver=20120916');
background-size: 21px 15px;
}
.image-align-left-label {
background-image: url('../images/align-left-2x.png?ver=20120916');
background-size: 22px 15px;
}
.image-align-center-label {
background-image: url('../images/align-center-2x.png?ver=20120916');
background-size: 21px 15px;
}
.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
You can’t perform that action at this time.