* Make attachment focus styles more obvious, particularly for already selected items.
* Fix styling for the selection set attachments.
* Remove some CSS cruft.

fixes #28822.

Built from https://develop.svn.wordpress.org/trunk@29607


git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-08-25 21:26:16 +00:00
parent a2ad27c03e
commit 13a49fc018
8 changed files with 82 additions and 88 deletions

View File

@ -528,13 +528,16 @@ border color while dragging a file over the uploader drop area */
padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */ padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
} }
.media-frame.mode-grid .attachment:focus { .media-frame.mode-grid .attachment:focus,
.media-frame.mode-grid .selected.attachment:focus,
.media-frame.mode-grid .attachment.details:focus {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 5px #f1f1f1, inset 0 0 2px 3px #f1f1f1,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
box-shadow: box-shadow:
inset 0 0 0 5px #f1f1f1, inset 0 0 2px 3px #f1f1f1,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
outline: none;
} }
.media-frame.mode-grid .selected.attachment { .media-frame.mode-grid .selected.attachment {
@ -546,7 +549,7 @@ border color while dragging a file over the uploader drop area */
inset 0 0 0 7px #ccc; inset 0 0 0 7px #ccc;
} }
.media-frame.mode-grid .selected.attachment:focus { .media-frame.mode-grid .attachment.details {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 3px #f1f1f1, inset 0 0 0 3px #f1f1f1,
inset 0 0 0 7px #1e8cbe; inset 0 0 0 7px #1e8cbe;

View File

@ -528,13 +528,16 @@ border color while dragging a file over the uploader drop area */
padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */ padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
} }
.media-frame.mode-grid .attachment:focus { .media-frame.mode-grid .attachment:focus,
.media-frame.mode-grid .selected.attachment:focus,
.media-frame.mode-grid .attachment.details:focus {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 5px #f1f1f1, inset 0 0 2px 3px #f1f1f1,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
box-shadow: box-shadow:
inset 0 0 0 5px #f1f1f1, inset 0 0 2px 3px #f1f1f1,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
outline: none;
} }
.media-frame.mode-grid .selected.attachment { .media-frame.mode-grid .selected.attachment {
@ -546,7 +549,7 @@ border color while dragging a file over the uploader drop area */
inset 0 0 0 7px #ccc; inset 0 0 0 7px #ccc;
} }
.media-frame.mode-grid .selected.attachment:focus { .media-frame.mode-grid .attachment.details {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 3px #f1f1f1, inset 0 0 0 3px #f1f1f1,
inset 0 0 0 7px #1e8cbe; inset 0 0 0 7px #1e8cbe;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -64,6 +64,17 @@
border-color: #dfdfdf; border-color: #dfdfdf;
} }
.media-frame input[type="text"]:focus,
.media-frame input[type="password"]:focus,
.media-frame input[type="number"]:focus,
.media-frame input[type="search"]:focus,
.media-frame input[type="email"]:focus,
.media-frame input[type="url"]:focus,
.media-frame textarea:focus,
.media-frame select:focus {
border-color: #5b9dd9;
}
.media-frame select { .media-frame select {
height: 24px; height: 24px;
padding: 2px; padding: 2px;
@ -763,13 +774,15 @@
box-sizing: border-box; box-sizing: border-box;
} }
.attachment:focus { .attachment:focus,
.selected.attachment:focus,
.attachment.details:focus {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 5px #fff, inset 0 0 2px 3px #fff,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
box-shadow: box-shadow:
inset 0 0 0 5px #fff, inset 0 0 2px 3px #fff,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
outline: none; outline: none;
} }
@ -782,6 +795,15 @@
inset 0 0 0 7px #ccc; inset 0 0 0 7px #ccc;
} }
.attachment.details {
-webkit-box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
}
.attachment-preview { .attachment-preview {
position: relative; position: relative;
-webkit-box-shadow: -webkit-box-shadow:
@ -956,16 +978,6 @@
display: block; display: block;
} }
.selected.attachment:focus,
.attachment.details {
-webkit-box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
}
.attachment.details .check, .attachment.details .check,
.attachment.selected .check:focus, .attachment.selected .check:focus,
.media-frame.mode-grid .attachment.selected .check { .media-frame.mode-grid .attachment.selected .check {
@ -1423,31 +1435,13 @@
.media-selection .attachment .icon { .media-selection .attachment .icon {
width: 50%; width: 50%;
} }
/*
.attachment.selection.selected .thumbnail { .media-selection .attachment-preview {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: none;
} }
.attachment.selection.selected:focus {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 2px #5b9dd9;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 2px #5b9dd9;
outline: none;
}
.attachment.selection.details {
-webkit-box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
}
*/
.media-selection .attachment.selection.details .thumbnail { .media-selection .attachment.selection.details .thumbnail {
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #fff, 0 0 0 1px #fff,

File diff suppressed because one or more lines are too long

View File

@ -64,6 +64,17 @@
border-color: #dfdfdf; border-color: #dfdfdf;
} }
.media-frame input[type="text"]:focus,
.media-frame input[type="password"]:focus,
.media-frame input[type="number"]:focus,
.media-frame input[type="search"]:focus,
.media-frame input[type="email"]:focus,
.media-frame input[type="url"]:focus,
.media-frame textarea:focus,
.media-frame select:focus {
border-color: #5b9dd9;
}
.media-frame select { .media-frame select {
height: 24px; height: 24px;
padding: 2px; padding: 2px;
@ -763,13 +774,15 @@
box-sizing: border-box; box-sizing: border-box;
} }
.attachment:focus { .attachment:focus,
.selected.attachment:focus,
.attachment.details:focus {
-webkit-box-shadow: -webkit-box-shadow:
inset 0 0 0 5px #fff, inset 0 0 2px 3px #fff,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
box-shadow: box-shadow:
inset 0 0 0 5px #fff, inset 0 0 2px 3px #fff,
inset 0 0 1px 7px #5b9dd9; inset 0 0 0 7px #5b9dd9;
outline: none; outline: none;
} }
@ -782,6 +795,15 @@
inset 0 0 0 7px #ccc; inset 0 0 0 7px #ccc;
} }
.attachment.details {
-webkit-box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
}
.attachment-preview { .attachment-preview {
position: relative; position: relative;
-webkit-box-shadow: -webkit-box-shadow:
@ -956,16 +978,6 @@
display: block; display: block;
} }
.selected.attachment:focus,
.attachment.details {
-webkit-box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
box-shadow:
inset 0 0 0 3px #fff,
inset 0 0 0 7px #1e8cbe;
}
.attachment.details .check, .attachment.details .check,
.attachment.selected .check:focus, .attachment.selected .check:focus,
.media-frame.mode-grid .attachment.selected .check { .media-frame.mode-grid .attachment.selected .check {
@ -1423,31 +1435,13 @@
.media-selection .attachment .icon { .media-selection .attachment .icon {
width: 50%; width: 50%;
} }
/*
.attachment.selection.selected .thumbnail { .media-selection .attachment-preview {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: none;
} }
.attachment.selection.selected:focus {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 2px #5b9dd9;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 2px #5b9dd9;
outline: none;
}
.attachment.selection.details {
-webkit-box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
}
*/
.media-selection .attachment.selection.details .thumbnail { .media-selection .attachment.selection.details .thumbnail {
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #fff, 0 0 0 1px #fff,

File diff suppressed because one or more lines are too long