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

Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.

Browse Source 
For accessibility, UI controls should preferably be native controls. Adds
ARIA attributes and labels to improve accessibility and pair these buttons
with the ones in the Menu Customizer.

Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia.

Fixes #33327.

git-svn-id: https://develop.svn.wordpress.org/trunk@35304 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2015-10-20 20:14:51 +00:00
parent 11f4d7bb68
commit 8774b40dc8
6 changed files with 126 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/customize-controls.css
+81 -2
View File
@@ -615,9 +615,10 @@ p.customize-section-description {
/* Style for custom settings */
/*
/**
* Dropdowns
*/
.accordion-section .dropdown {
float: left;
display: block;
@@ -698,6 +699,7 @@ p.customize-section-description {
* iOS can't scroll iframes,
* instead it expands the iframe size to match the size of the content
*/
.ios .wp-full-overlay {
position: relative;
}
@@ -710,7 +712,7 @@ p.customize-section-description {
-webkit-overflow-scrolling: touch;
}
/** Media controls **/
/* Media controls */
.customize-control-media .current,
.customize-control-upload .current,
@@ -995,6 +997,7 @@ p.customize-section-description {
/**
* Themes
*/
@-webkit-keyframes customize-reload {
0% { opacity: 0; }
100% { opacity: 1; }
@@ -1228,6 +1231,82 @@ body.cheatin p {
margin: 25px 0 20px;
}
/**
* Widgets and Menus common styles
*/
/* higher specificity than .wp-core-ui .button-secondary */
#customize-theme-controls .add-new-widget,
#customize-theme-controls .add-new-menu-item {
cursor: pointer;
float: right;
margin-left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.reordering .add-new-widget,
.reordering .add-new-menu-item {
opacity: 0.2;
pointer-events: none;
cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
}
.add-new-widget:before,
.add-new-menu-item:before {
content: "\f132";
display: inline-block;
position: relative;
left: -2px;
top: -1px;
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reordering */
.reorder-toggle {
float: right;
padding: 5px 8px;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.reorder-toggle:focus {
outline: 1px dotted;
}
.reorder,
.reordering .reorder-done {
display: block;
padding: 5px 8px;
}
.reorder-done,
.reordering .reorder {
display: none;
color: #0073aa;
}
.reorder-toggle:hover .reorder-done,
.reorder-toggle:active .reorder-done,
.reorder-toggle:focus .reorder-done {
color: #00a0d2;
}
/* Responsive */
.customize-controls-preview-toggle {
display: none;
src/wp-admin/css/customize-nav-menus.css
+9 -50
View File
@@ -90,17 +90,9 @@
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
}
/* Menu-item reordering nav. */
.reordering .customize-control-nav_menu .reorder,
.customize-control-nav_menu .reorder-done {
display: none;
}
.customize-control-nav_menu .reorder,
.reordering .customize-control-nav_menu .reorder-done {
display: inline-block;
padding: 5px 8px;
}
/**
* Menu items reordering styles
*/
.menu-item-reorder-nav {
display: none;
@@ -110,12 +102,6 @@
right: 0;
}
#customize-theme-controls .reordering .add-new-menu-item {
opacity: 0.2;
pointer-events: none;
cursor: not-allowed;
}
.menu-item-reorder-nav button {
position: relative;
overflow: hidden;
@@ -361,10 +347,10 @@
.wp-customizer button:focus .toggle-indicator:after {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
@@ -479,9 +465,10 @@
margin-top: 0;
}
/*
* Add-menu-items mode.
/**
* Add-menu-items mode
*/
.wp-full-overlay-main {
right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
width: 100%;
@@ -496,34 +483,6 @@
opacity: 1;
}
/* Add-new button. */
#customize-theme-controls .add-new-menu-item {
cursor: pointer;
float: right;
margin-left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.add-new-menu-item:before {
content: "\f132";
display: inline-block;
position: relative;
left: -2px;
top: -1px;
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.adding-menu-items .add-new-menu-item,
.adding-menu-items .add-new-menu-item:hover,
.add-menu-toggle.open,
src/wp-admin/css/customize-widgets.css
+6 -68
View File
@@ -117,44 +117,8 @@
}
/**
* Widget reordering styles
**/
.reorder-toggle {
float: right;
padding: 5px 8px;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.reorder-toggle:focus {
outline: 1px dotted;
}
.reorder-done,
.reordering .reorder {
display: none;
}
.reordering .reorder-done {
display: block;
color: #0073aa;
}
.reordering .reorder-done:hover,
.reordering .reorder-done:active {
color: #00a0d2;
}
#customize-theme-controls .reordering .add-new-widget {
opacity: 0.2;
pointer-events: none;
cursor: not-allowed;
}
* Widget reordering styles
*/
#customize-theme-controls .widget-reorder-nav {
display: none;
@@ -213,7 +177,7 @@
cursor: default;
}
#customize-theme-controls .move-widget-area {
#customize-theme-controls .move-widget-area {
display: none;
background: #fff;
border: 1px solid #dedede;
@@ -288,42 +252,15 @@
display: block;
}
/**
* Styles for new widget addition panel
*/
.wp-full-overlay-main {
right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
width: 100%;
}
#customize-theme-controls .add-new-widget {
cursor: pointer;
float: right;
margin-left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.add-new-widget:before {
content: "\f132";
display: inline-block;
position: relative;
left: -2px;
top: -1px;
font: normal 20px/1 dashicons;
vertical-align: middle;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.adding-widget .add-new-widget,
body.adding-widget .add-new-widget:hover {
background: #eee;
@@ -456,7 +393,8 @@ body.adding-widget #customize-preview {
* Widget Icon styling
* No plurals in naming.
* Ordered from lowest to highest specificity.
**/
*/
#available-widgets .widget-title {
position: relative;
}