Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights.

Improves cross-browsers rendering and addresses most of the reported edge cases.

See #47477.


git-svn-id: https://develop.svn.wordpress.org/trunk@46356 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-09-30 17:23:06 +00:00
parent 48564fa823
commit f93cd8ceea
9 changed files with 213 additions and 191 deletions

View File

@@ -80,7 +80,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-group.button-small .button {
min-height: 24px;
line-height: 2;
padding: 0 8px 1px;
padding: 0 8px;
font-size: 11px;
}
@@ -92,14 +92,6 @@ TABLE OF CONTENTS:
padding: 0 36px;
}
/* Only visible in Windows High Contrast mode */
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.hidden {
display: none;
}
@@ -135,10 +127,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
.wp-core-ui .button-secondary:hover{
background: #f1f1f1;
border-color: #016087;
color: #016087;
@@ -151,6 +140,10 @@ TABLE OF CONTENTS:
border-color: #007cba;
color: #016087;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.active,
@@ -332,8 +325,8 @@ TABLE OF CONTENTS:
input#publish,
input#save-post,
a.preview {
padding: 6px 14px;
line-height: normal;
padding: 1px 14px;
line-height: 2;
font-size: 14px;
vertical-align: middle;
height: auto;

View File

@@ -1509,7 +1509,6 @@ i.mce-i-wp_code:before {
}
#wp-link .link-search-field {
float: left;
width: 250px;
max-width: 70%;
}
@@ -1520,13 +1519,9 @@ i.mce-i-wp_code:before {
overflow: hidden;
}
#wp-link .link-search-wrapper span {
float: left;
margin-top: 4px;
}
#wp-link .link-search-wrapper .spinner {
margin-top: 5px;
float: none;
margin: -3px 0 0 4px;
}
#wp-link .link-target {
@@ -1553,7 +1548,7 @@ i.mce-i-wp_code:before {
}
.has-text-field #wp-link .query-results {
top: 200px;
top: 210px;
}
#wp-link li {
@@ -1781,6 +1776,7 @@ div.wp-link-input input {
width: 300px;
padding: 3px;
box-sizing: border-box;
line-height: 1.28571429;
}
.mce-toolbar div.wp-link-preview ~ .mce-btn,

View File

@@ -34,17 +34,6 @@
line-height: 1.2;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
}
.media-frame select,
.wp-admin .media-frame select {
min-height: 28px;
vertical-align: middle;
}
.media-frame a {
border-bottom: none;
color: #0073aa;
@@ -77,21 +66,58 @@
color: #fff;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
}
.media-frame select,
.wp-admin .media-frame select {
min-height: 28px;
vertical-align: middle;
}
.media-frame input[type="text"],
.media-frame input[type="password"],
.media-frame input[type="color"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
.media-frame input[type="email"],
.media-frame input[type="tel"],
.media-frame input[type="time"],
.media-frame input[type="url"],
.media-frame input[type="week"],
.media-frame textarea,
.media-frame select {
padding: 6px 8px;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border: 1px solid #7e8993;
border-radius: 4px;
border: 1px solid #7e8993;
background-color: #fff;
color: #32373c;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 12px;
font-size: 13px;
}
.media-frame input[type="text"],
.media-frame input[type="password"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
.media-frame input[type="tel"],
.media-frame input[type="time"],
.media-frame input[type="url"],
.media-frame input[type="week"] {
padding: 0 8px;
/* inherits font size 13px */
line-height: 2.15384615; /* 28px */
}
.media-frame input[type="text"]:focus,
@@ -807,7 +833,7 @@
* Search
*/
.media-frame .search {
margin-top: 11px;
margin-top: 10px;
padding: 4px;
font-size: 13px;
color: #444;
@@ -1047,7 +1073,7 @@
display: block;
width: 100%;
margin: 0;
padding: 8px;
padding: 0 8px;
font-size: 12px;
border-radius: 0;
}
@@ -1075,7 +1101,7 @@
.attachments-browser .media-toolbar-primary > .media-button-group,
.attachments-browser .media-toolbar-secondary > .media-button,
.attachments-browser .media-toolbar-secondary > .media-button-group {
margin: 11px 0;
margin: 10px 0;
}
.attachments-browser .attachments {