vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Themes: Bring the device preview from [31195] to the theme install previewer.

Browse Source 
Props celloexpressions.
Fixes #36017.

git-svn-id: https://develop.svn.wordpress.org/trunk@36858 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
2016-03-05 22:06:57 +00:00
parent 25838b4c23
commit e5556666cc
4 changed files with 151 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/customize-controls.css
-123
View File
@@ -1308,129 +1308,6 @@ body.cheatin p {
color: #00a0d2;
}
/* Device/preview size toggles */
.wp-full-overlay {
background: #191e23;
}
#customize-preview.wp-full-overlay-main {
background-color: #f1f1f1;
}
.expanded #customize-footer-actions {
position: fixed;
bottom: 0;
left: 0;
width: 300px;
height: 45px;
border-top: 1px solid #ddd;
}
#customize-footer-actions .devices {
float: right;
}
#customize-footer-actions .devices button {
cursor: pointer;
background: transparent;
border: none;
height: 45px;
padding: 0 3px;
margin: 0 0 0 -4px;
-webkit-box-shadow: none;
box-shadow: none;
border-top: 1px solid transparent;
border-bottom: 4px solid transparent;
-webkit-transition: background .1s ease-in-out;
transition: background .1s ease-in-out;
}
#customize-footer-actions .devices button:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
#customize-footer-actions .devices button:before {
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/30px "dashicons";
vertical-align: top;
margin: 3px 0;
padding: 4px 8px;
color: #656a6f;
}
#customize-footer-actions .devices button.active {
border-bottom-color: #191e23;
}
#customize-footer-actions .devices button:hover,
#customize-footer-actions .devices button:focus {
background-color: #fff;
}
#customize-footer-actions .devices button:focus {
background-color: #fff;
border-bottom-color: #0073aa;
}
#customize-footer-actions .devices button.active:before,
#customize-footer-actions .devices button:hover:before,
#customize-footer-actions .devices button:focus:before {
color: #191e23;
}
.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
color: #191e23;
}
#customize-footer-actions .devices .preview-desktop:before {
content: "\f472";
}
#customize-footer-actions .devices .preview-tablet:before {
content: "\f471";
}
#customize-footer-actions .devices .preview-mobile:before {
content: "\f470";
}
@media screen and (max-width:1024px) {
#customize-footer-actions .devices {
display: none;
}
}
.collapsed #customize-footer-actions .devices button:before {
display: none;
}
.collapsed #customize-footer-actions .devices .preview-full {
left: 0;
}
.preview-mobile #customize-preview {
margin: auto 0 auto -160px;
width: 320px;
height: 480px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
.preview-tablet #customize-preview {
margin: auto 0 auto -3in;
width: 6in;
height: 9in;
max-height: 100%;
max-width: 100%;
left: 50%;
}
.widget-reorder-nav span,
.menu-item-reorder-nav button {
position: relative;
src/wp-admin/css/themes.css
+116 -1
View File
@@ -1480,6 +1480,121 @@ body.full-overlay-active {
transition-duration: 0.2s;
}
/* Device/preview size toggles */
.wp-full-overlay {
background: #191e23;
}
.wp-full-overlay-main {
background-color: #f1f1f1;
}
.expanded .wp-full-overlay-footer {
position: fixed;
bottom: 0;
left: 0;
width: 300px;
height: 45px;
border-top: 1px solid #ddd;
}
.wp-full-overlay-footer .devices {
float: right;
}
.wp-full-overlay-footer .devices button {
cursor: pointer;
background: transparent;
border: none;
height: 45px;
padding: 0 3px;
margin: 0 0 0 -4px;
-webkit-box-shadow: none;
box-shadow: none;
border-top: 1px solid transparent;
border-bottom: 4px solid transparent;
-webkit-transition: background .1s ease-in-out;
transition: background .1s ease-in-out;
}
.wp-full-overlay-footer .devices button:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.wp-full-overlay-footer .devices button:before {
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/30px "dashicons";
vertical-align: top;
margin: 3px 0;
padding: 4px 8px;
color: #656a6f;
}
.wp-full-overlay-footer .devices button.active {
border-bottom-color: #191e23;
}
.wp-full-overlay-footer .devices button:hover,
.wp-full-overlay-footer .devices button:focus {
background-color: #fff;
}
.wp-full-overlay-footer .devices button:focus {
background-color: #fff;
border-bottom-color: #0073aa;
}
.wp-full-overlay-footer .devices button.active:before,
.wp-full-overlay-footer .devices button:hover:before,
.wp-full-overlay-footer .devices button:focus:before {
color: #191e23;
}
.wp-full-overlay-footer .devices .preview-desktop:before {
content: "\f472";
}
.wp-full-overlay-footer .devices .preview-tablet:before {
content: "\f471";
}
.wp-full-overlay-footer .devices .preview-mobile:before {
content: "\f470";
}
@media screen and (max-width:1024px) {
.wp-full-overlay-footer .devices {
display: none;
}
}
.collapsed .wp-full-overlay-footer .devices button:before {
display: none;
}
.preview-mobile .wp-full-overlay-main {
margin: auto 0 auto -160px;
width: 320px;
height: 480px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
.preview-tablet .wp-full-overlay-main {
margin: auto 0 auto -3in;
width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
height: 9in;
max-height: 100%;
max-width: 100%;
left: 50%;
}
/*------------------------------------------------------------------------------
24.0 - Customize Loader
------------------------------------------------------------------------------*/
@@ -1600,7 +1715,7 @@ body.full-overlay-active {
}
.theme-install-overlay .wp-full-overlay-main {
position: relative;
position: absolute;
z-index: 0;
background-color: #f1f1f1;
}