vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-15 06:10:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

More consistent icons in place of some buttons for the Customizer and theme install preview.

Browse Source 
* Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
* Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.

props celloexpressions. fixes #28655.


git-svn-id: https://develop.svn.wordpress.org/trunk@29031 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2014-07-08 18:18:23 +00:00
parent 0a4e8b2b7e
commit bfdd641013
6 changed files with 137 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/colors/_admin.scss
+12
View File
@@ -453,6 +453,16 @@ body.more-filters-opened .more-filters:focus:before {
color: $menu-highlight-text;
}
.theme-install-overlay .close-full-overlay:hover,
.theme-install-overlay .close-full-overlay:focus,
.theme-install-overlay .previous-theme:hover,
.theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:hover,
.theme-install-overlay .next-theme:focus {
background-color: $menu-highlight-background;
color: $menu-highlight-text;
}
/* Widgets */
.widgets-chooser li.widgets-chooser-selected {
@@ -472,6 +482,8 @@ body.more-filters-opened .more-filters:focus:before {
color: $menu-highlight-text;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
.control-panel-back:hover {
background-color: $menu-highlight-background;
src/wp-admin/css/customize-controls.css
+28 -11
View File
@@ -170,6 +170,22 @@ body {
width: 100%;
}
.customize-controls-close {
display: block;
position: absolute;
top: 0;
left: 0;
width: 45px;
height: 45px;
padding-right: 2px;
background: #eee;
border-right: 1px solid #ddd;
color: #444;
cursor: pointer;
-webkit-transition: color ease-in .1s;
transition: color ease-in .1s;
}
.control-panel-back {
display: block;
position: fixed;
@@ -190,11 +206,23 @@ body {
display: none;
}
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
.control-panel-back:hover {
background-color: #0074a2;
color: #fff;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.customize-controls-close:before {
font: normal 32px/1 dashicons;
content: "\f335";
position: relative;
top: 8px;
left: 8px;
}
.control-panel-back:before {
@@ -217,17 +245,6 @@ body {
height: 22px;
}
#customize-header-actions a.back {
position: relative;
left: 0;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
}
.in-sub-panel #customize-header-actions a.back {
left: -120px;
}
.wp-full-overlay-sidebar .wp-full-overlay-header {
-webkit-transition: padding ease-in-out .18s;
transition: padding ease-in-out .18s;
src/wp-admin/css/themes.css
+85 -21
View File
@@ -1617,9 +1617,83 @@ body.full-overlay-active {
overflow: auto;
}
/* Close Link */
.wp-full-overlay .close-full-overlay {
/* Close & Navigation Links */
.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
padding: 0;
}
.theme-install-overlay .close-full-overlay,
.theme-install-overlay .previous-theme,
.theme-install-overlay .next-theme {
display: block;
position: relative;
float: left;
width: 45px;
height: 45px;
padding-right: 2px;
background: #eee;
border-right: 1px solid #ddd;
color: #444;
cursor: pointer;
text-decoration: none;
-webkit-transition: color ease-in .1s;
transition: color ease-in .1s;
}
.theme-install-overlay .close-full-overlay:hover,
.theme-install-overlay .close-full-overlay:focus,
.theme-install-overlay .previous-theme:hover,
.theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:hover,
.theme-install-overlay .next-theme:focus {
background-color: #0074a2;
color: #fff;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.theme-install-overlay .close-full-overlay:before {
font: normal 30px/1 dashicons;
content: "\f335";
position: relative;
top: 9px;
left: 9px;
}
.theme-install-overlay .previous-theme:before {
font: normal 20px/1 dashicons;
content: "\f340";
position: relative;
top: 6px;
left: 14px;
}
.theme-install-overlay .next-theme:before {
font: normal 20px/1 dashicons;
content: "\f344";
position: relative;
top: 6px;
left: 13px;
}
.theme-install-overlay .previous-theme.disabled,
.theme-install-overlay .next-theme.disabled,
.theme-install-overlay .previous-theme.disabled:hover,
.theme-install-overlay .previous-theme.disabled:focus,
.theme-install-overlay .next-theme.disabled:hover,
.theme-install-overlay .next-theme.disabled:focus {
color: #bbb;
background: #eee;
cursor: default;
}
.rtl .theme-install-overlay .previous-theme:before {
content: "\f344";
}
.rtl .theme-install-overlay .next-theme:before {
content: "\f340";
}
/* Collapse Button */
@@ -1704,19 +1778,6 @@ body.full-overlay-active {
display: none;
}
.wp-full-overlay .theme-navigation {
padding: 10px 20px;
position: absolute;
bottom: 10px;
text-align: left;
}
.wp-full-overlay .theme-navigation .next-theme {
float: right;
}
.wp-full-overlay.no-navigation .theme-navigation {
display: none;
}
/* Animations */
.wp-full-overlay,
.wp-full-overlay-sidebar,
@@ -1845,19 +1906,22 @@ body.full-overlay-active {
max-width: 100%;
}
.theme-install-overlay .wp-full-overlay-header {
margin-top: 9px;
}
.theme-install-overlay .wp-full-overlay-header .theme-install {
float: right;
margin: 8px 10px 0 0;
/* For when .theme-install is a span rather than a.button-primary (already installed theme) */
line-height: 26px;
}
.theme-install-overlay .wp-full-overlay-sidebar {
background: #EEE;
border-right: 1px solid #DDD;
background: #eee;
border-right: 1px solid #ddd;
}
.theme-install-overlay .wp-full-overlay-sidebar-content {
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.theme-install-overlay .wp-full-overlay-main {