Press This: convert the Preview | Save | Publish buttons to a split button.

See #32757.

git-svn-id: https://develop.svn.wordpress.org/trunk@32920 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
2015-06-24 02:45:38 +00:00
parent 447550ec7b
commit 9911a1cbe6
3 changed files with 175 additions and 50 deletions
+134 -10
View File
@@ -390,6 +390,140 @@ strong {
text-decoration: underline;
}
.split-button {
position: relative;
display: inline-block;
}
.split-button-body {
display: none;
position: absolute;
bottom: 37px;
right: 0;
border: 1px solid #ccc;
background-color: #fff;
min-width: 160px;
max-width: 100%;
padding: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
}
.split-button-body:before,
.split-button-body:after {
position: absolute;
right: 12px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
content: '';
}
.split-button-body:before {
bottom: -18px;
border-top-color: #a0a5aa;
border-width: 9px;
right: 11px;
}
.split-button-body:after {
bottom: -16px;
border-top-color: #fff;
border-width: 8px;
}
.split-button-body .split-button-option {
display: block;
padding: 4px 10px;
margin: 0;
width: 100%;
text-align: left;
}
.is-open .split-button-body {
display: block;
}
.split-button-primary,
.split-button-toggle {
-webkit-border-radius: 0;
border-radius: 0;
display: block;
margin: 0;
font-size: 13px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
line-height: 2;
padding: 0 10px 1px;
background: #00a0d2;
border-color: #0073aa;
border-width: 1px;
border-style: solid;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
color: #fff;
}
.split-button-primary {
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
border-right: 0 none;
float: left;
}
.split-button-toggle {
padding: 0;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 0 none;
float: right;
}
.split-button-toggle i {
margin: 4px 20px 3px 0;
padding: 0 10px;
border-left: 1px solid #fff;
}
.split-button-primary:hover,
.split-button-toggle:hover {
outline: none;
background: #0091cd;
border-color: #0073aa;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
}
.split-button-primary:focus,
.split-button-toggle:focus {
outline: none;
border-color: #0e3950;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
.split-button-primary:active,
.split-button-toggle:active {
background: #0073aa;
border-color: #005082;
color: rgba( 255, 255, 255, 0.95 );
-webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
}
/**
* Forms
@@ -1753,16 +1887,6 @@ html {
padding: 0 10px;
}
.draft-button.is-hidden,
.draft-button .saving-draft,
.draft-button.is-saving .save-draft {
display: none;
}
.draft-button.is-saving .saving-draft {
display: inline;
}
/* TinyMCE styles */
.editor .wp-media-buttons {
float: none;