Commit Graph

54 Commits

Author SHA1 Message Date
Sergey Biryukov
f090f8528c Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.

Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.

git-svn-id: https://develop.svn.wordpress.org/trunk@46866 602fd350-edb4-49c9-b593-d223f7449a82
2019-12-09 20:24:17 +00:00
Andrea Fercia
aa37e6e2f8 Script Loader: Partially revert [46550] as it brought in unrelated CSS changes.
[46550] was meant to revert [46440] but it also merged some unrelated CSS changes.

See #47069.


git-svn-id: https://develop.svn.wordpress.org/trunk@46559 602fd350-edb4-49c9-b593-d223f7449a82
2019-10-16 17:47:28 +00:00
Andrea Fercia
943320fa03 Accessibility: Script Loader: Remove jQuery as dependency of admin-bar after [46440].
A better approach needs to be explored, as there are valid concerns for potential conflicts between different jQuery versions added by themes or plugins.

See #47069.


git-svn-id: https://develop.svn.wordpress.org/trunk@46550 602fd350-edb4-49c9-b593-d223f7449a82
2019-10-15 17:21:50 +00:00
Andrea Fercia
5e943fad4a Accessibility: Improve and modernize user interface controls: Revert the new links focus style.
Thew new dotted outline for the links focus style introduced in [46241] doesn't appear to be ready to guarantee a good indication of focus.
It was agreed to restore the previous links focus style and postpone exploration for a new style to the next release cycle.
Partially reverts [46241] and [46293].

See #34904, #47153.


git-svn-id: https://develop.svn.wordpress.org/trunk@46425 602fd350-edb4-49c9-b593-d223f7449a82
2019-10-07 19:55:58 +00:00
Andrea Fercia
ae8bef6419 Accessibility: Improve and modernize user interface controls: Improve the buttons active CSS class.
- improves the buttons `.active` CSS class for buttons that need to be styled as "pressed"
- update the alternate color schemes `.active` CSS class accordingly
- improves a few icons colors in the alternate color schemes

See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46423 602fd350-edb4-49c9-b593-d223f7449a82
2019-10-07 18:45:45 +00:00
Andrea Fercia
f93cd8ceea 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
2019-09-30 17:23:06 +00:00
Andrea Fercia
9288beb7b5 Accessibility: Improve and modernize user interface controls: Remove the CSS transform 1 pixel shift from the buttons active state.
Props Joen.
See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46350 602fd350-edb4-49c9-b593-d223f7449a82
2019-09-30 10:52:36 +00:00
Andrea Fercia
ef206a787f Accessibility: Improve and modernize user interface controls: Make the secondary buttons border blue.
Props drw158, youknowriad, kjellr, melchoyce, talldanwp, audrasjb.
See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46344 602fd350-edb4-49c9-b593-d223f7449a82
2019-09-29 21:52:38 +00:00
Andrea Fercia
3f58ce59d7 Accessibility: Improve and modernize user interface controls. Third part: allow buttons and form controls to scale with text.
Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.


git-svn-id: https://develop.svn.wordpress.org/trunk@46243 602fd350-edb4-49c9-b593-d223f7449a82
2019-09-23 15:26:23 +00:00
Andrea Fercia
94211aeb05 Accessibility: Improve and modernize user interface controls for better contrast. First part: buttons and links.
- Introduces new styles for the buttons, with better contrast for borders and better focus style.
- Introduces a new focus style for links.
- The new styles improve consistency with the ones used in the new Block Editor (Gutenberg).

Props michaelarestad, truchot, mor10, kellychoffman, adamsoucie, paaljoachim, Joen, kjellr, melchoyce, karmatosed, audrasjb, afercia.
Fixes #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46241 602fd350-edb4-49c9-b593-d223f7449a82
2019-09-23 14:42:36 +00:00
Tammie Lister
c83f0b0d22 Media: Reduces the bulk media options to have one primary button
This fixes where 2 primary buttons were showing for bulk actions within media trash.

Props garrett-eclipse, afercia, ianbelanger, SergeyBiryukov
Fixes #46757, #46758


git-svn-id: https://develop.svn.wordpress.org/trunk@45701 602fd350-edb4-49c9-b593-d223f7449a82
2019-07-30 23:19:18 +00:00
Andrea Fercia
c14ea1630f Accessibility: Improve the Screen Options and Help buttons order.
- makes the buttons visual order match the DOM order
- also, restores the focus style on the "hero" primary button after [34948]

Props vrimill, mukesh27 for reporting and testing.
Fixes #45094.


git-svn-id: https://develop.svn.wordpress.org/trunk@45503 602fd350-edb4-49c9-b593-d223f7449a82
2019-06-08 16:30:15 +00:00
Andrea Fercia
226dc75154 Accessibility: Improve accessibility of all the media views form controls.
- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.


git-svn-id: https://develop.svn.wordpress.org/trunk@45499 602fd350-edb4-49c9-b593-d223f7449a82
2019-06-07 20:43:26 +00:00
Sergey Biryukov
42d0a9ff5d CSS Coding Standards: Use unitless values for line-height in wp-includes/css/buttons.css.
Props ianbelanger, pbiron, afercia.
Fixes #46526. See #44643.

git-svn-id: https://develop.svn.wordpress.org/trunk@45476 602fd350-edb4-49c9-b593-d223f7449a82
2019-05-30 12:41:56 +00:00
Gary Pendergast
8d7c644a7d UI: Remove vertical alignment from active primary buttons.
This caused the post-plugin installation actions to jump around when the "Activate Plugin" primary button became active.

Props seedsca, pratikthink, ianbelanger, mukesh27.
Fixes #44836.



git-svn-id: https://develop.svn.wordpress.org/trunk@45150 602fd350-edb4-49c9-b593-d223f7449a82
2019-04-09 00:15:51 +00:00
Andrea Fercia
19abdee85f Coding standards: Fix incorrect CSS rgba() values.
Also, fixes some indentation where spaces were used instead of tabs.

Props nielslange, mukesh27.
Fixes #45937.


git-svn-id: https://develop.svn.wordpress.org/trunk@44791 602fd350-edb4-49c9-b593-d223f7449a82
2019-03-04 22:01:10 +00:00
Andrea Fercia
fb37359865 Administration: CSS coding standards
- properties should be followed by a colon and a space
- media queries shouldn't use spaces within parenthesis
- indentation should use tabs instead of spaces or mixed spaces / tabs
- the content property should use double quotes
- no double spaces

Props nadim0988, afercia.
Fixes #45185.


git-svn-id: https://develop.svn.wordpress.org/trunk@44637 602fd350-edb4-49c9-b593-d223f7449a82
2019-01-17 07:40:40 +00:00
Andrea Fercia
2d4ae6ce6d Accessibility: Add focus styles for Windows High Contrast mode.
Introduces in core new focus styles dedicated to Windows High Contrast mode. The 
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.


git-svn-id: https://develop.svn.wordpress.org/trunk@44544 602fd350-edb4-49c9-b593-d223f7449a82
2019-01-10 16:46:44 +00:00
Gary Pendergast
ef37f002ee Once upon a midnight dreary, while I coded, weak and weary,
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
            Only this and nothing more.”

Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
            Guten-ready for evermore.

Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
            Let’s move on, we’re all aboard.”

Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
            Quoth Omar, “In WordPress Core.”

Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes #43055.



git-svn-id: https://develop.svn.wordpress.org/trunk@43309 602fd350-edb4-49c9-b593-d223f7449a82
2018-05-23 10:04:22 +00:00
Aaron Jorbin
eb78c8e092 Update autoprefixer browser support matrix
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.

So, in the (paraphrased) words of Taylor Swift:

I remember when we dropped support  the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you

We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...

Fixes #37651.
Props stunnedbeast, netweb, jorbin.




git-svn-id: https://develop.svn.wordpress.org/trunk@41062 602fd350-edb4-49c9-b593-d223f7449a82
2017-07-16 01:14:36 +00:00
Andrea Fercia
66eb13d3b2 Accessibility: Make some Widgets buttons real buttons.
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622

Fixes #31476.


git-svn-id: https://develop.svn.wordpress.org/trunk@40480 602fd350-edb4-49c9-b593-d223f7449a82
2017-04-19 21:13:53 +00:00
Pascal Birchler
b5ca4cc9c3 Media: Ensure Crop Image is always visible.
Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed.

Props karinedo, sagarprajapati, Cybr, mayurk.
Fixes #40152.


git-svn-id: https://develop.svn.wordpress.org/trunk@40428 602fd350-edb4-49c9-b593-d223f7449a82
2017-04-14 09:30:37 +00:00
Andrea Fercia
dccf1535a4 Buttons: Fix a few .button-link glitches after [40052].
Removes some stray underlines. Explicitly set the button text to be left aligned.

Props Cheffheid, f.staude, Presskopp.

See #34242.
Fixes #35126, #38712.


git-svn-id: https://develop.svn.wordpress.org/trunk@40059 602fd350-edb4-49c9-b593-d223f7449a82
2017-02-14 18:41:25 +00:00
Andrea Fercia
7487559dfd Buttons: Improve the .button-link CSS class for link-like buttons.
Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.


git-svn-id: https://develop.svn.wordpress.org/trunk@40052 602fd350-edb4-49c9-b593-d223f7449a82
2017-02-09 16:46:58 +00:00
Drew Jaynes
195572596b Docs: Standardize on 'backward compatibility/compatible' nomenclature in core inline docs.
Also use 'back-compat' in some inline comments where backward compatibility is the subject and shorthand feels more natural.

Note: 'backwards compatibility/compatibile' can also be considered correct, though it's primary seen in regular use in British English.

Props ocean90.
Fixes #36835.


git-svn-id: https://develop.svn.wordpress.org/trunk@37431 602fd350-edb4-49c9-b593-d223f7449a82
2016-05-13 18:40:19 +00:00
Ella Iseulde Van Dorpe
e6b5f3316f Update TinyMCE and jQuery UI button styles
Part props liljimmi.
Fixes #35571.



git-svn-id: https://develop.svn.wordpress.org/trunk@37076 602fd350-edb4-49c9-b593-d223f7449a82
2016-03-24 00:56:14 +00:00
Dominik Schilling (ocean90)
01a6fe13f9 Buttons: Update colors for disabled buttons.
Props hugobaeta.
Fixes #31459.

git-svn-id: https://develop.svn.wordpress.org/trunk@35697 602fd350-edb4-49c9-b593-d223f7449a82
2015-11-18 22:46:25 +00:00
Dominik Schilling (ocean90)
e0e70036de Buttons: Don't transform disabled buttons by 1px on :active.
Fixes #34717.

git-svn-id: https://develop.svn.wordpress.org/trunk@35657 602fd350-edb4-49c9-b593-d223f7449a82
2015-11-17 23:17:10 +00:00
Helen Hou-Sandi
6f1bb2ab67 Buttons: Standardize on .button-link for link-like buttons.
This serves as both a reset and some basic styling. The class name also aligns with parallel components in other popular projects.

props paulwilde for the initial patch.
fixes #34242.


git-svn-id: https://develop.svn.wordpress.org/trunk@35636 602fd350-edb4-49c9-b593-d223f7449a82
2015-11-13 15:46:12 +00:00
Helen Hou-Sandi
6c243567cf Buttons: More consistent focus styling.
props afercia.
fixes #32915.


git-svn-id: https://develop.svn.wordpress.org/trunk@35421 602fd350-edb4-49c9-b593-d223f7449a82
2015-10-28 20:16:43 +00:00
Helen Hou-Sandi
df1b726ed0 Buttons: Update styles and colors.
* Aligns with the color standards. See https://make.wordpress.org/design/handbook/foundations/colors/
* Creates a consistent interaction experience between states.
* Improves contrast and accessibility.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.


git-svn-id: https://develop.svn.wordpress.org/trunk@34948 602fd350-edb4-49c9-b593-d223f7449a82
2015-10-08 17:30:57 +00:00
Scott Taylor
d0c3281ea8 In Media microtemplates after [32467], use <button> instead of <a> for several more non-links.
Props afercia.
Fixes #26550.


git-svn-id: https://develop.svn.wordpress.org/trunk@32952 602fd350-edb4-49c9-b593-d223f7449a82
2015-06-26 05:00:42 +00:00
Helen Hou-Sandi
f64bf71719 Update more instances of default admin blues and grays.
props hugobaeta.
fixes #31234.


git-svn-id: https://develop.svn.wordpress.org/trunk@32051 602fd350-edb4-49c9-b593-d223f7449a82
2015-04-05 21:19:54 +00:00
Andrew Ozz
7c516ad964 PressThis: fix and update buttons styles. Props Michael-Arestad. Fixes #31498.
git-svn-id: https://develop.svn.wordpress.org/trunk@31598 602fd350-edb4-49c9-b593-d223f7449a82
2015-03-02 01:17:26 +00:00
Helen Hou-Sandi
8bdbb3de87 Better focus styling for buttons and button groups. props mattheu, avryl, celloexpressions. fixes #27826. see #28267.
git-svn-id: https://develop.svn.wordpress.org/trunk@29466 602fd350-edb4-49c9-b593-d223f7449a82
2014-08-11 18:20:18 +00:00
Andrew Ozz
a1ce4931a1 Fix CSS for form elements for Firefox 30+, fixes #28500.
git-svn-id: https://develop.svn.wordpress.org/trunk@29366 602fd350-edb4-49c9-b593-d223f7449a82
2014-08-03 00:33:31 +00:00
Dominik Schilling (ocean90)
db77bc8bff Media Grid: Align "Apply" button on small screens.
fixes #28903.

git-svn-id: https://develop.svn.wordpress.org/trunk@29307 602fd350-edb4-49c9-b593-d223f7449a82
2014-07-27 12:14:58 +00:00
Helen Hou-Sandi
8c47b1e188 Ensure buttons don't get overly tall in responsive views when a browser (oh, Firefox) enforces a line-height on buttons. props azaozz. fixes #27409.
git-svn-id: https://develop.svn.wordpress.org/trunk@27727 602fd350-edb4-49c9-b593-d223f7449a82
2014-03-25 21:23:00 +00:00
Andrew Ozz
7812a3fa77 wpLink: stop using UI dialog, restyle the modal, add better responsive behaviour.
Fix UI dialog styling to match the rest of the admin styling.
Props avryl, see #26952

git-svn-id: https://develop.svn.wordpress.org/trunk@27494 602fd350-edb4-49c9-b593-d223f7449a82
2014-03-11 00:03:54 +00:00
Andrew Nacin
6dde834d22 Ensure disabled secondary buttons do not change background on hover or active.
props helen.
fixes #26785.


git-svn-id: https://develop.svn.wordpress.org/trunk@27282 602fd350-edb4-49c9-b593-d223f7449a82
2014-02-26 08:06:33 +00:00
Andrew Nacin
01b809bf2b Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes.
We'll be using it for two distinct tasks:
 * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build.
 * Color CSS files will receive prefixes when they are built.

This commit:
 * Adds prefixes we were missing to core CSS.
 * Removes prefixes that we no longer need from core CSS.
 * Removes all prefixes from colors CSS.

props ocean90.
fixes #27078.


git-svn-id: https://develop.svn.wordpress.org/trunk@27174 602fd350-edb4-49c9-b593-d223f7449a82
2014-02-13 08:29:16 +00:00
Andrew Ozz
70ca581b67 Autosave:
- Move the 'Saving post' and 'Draft saved at...' strings from autosaveL10n to postL10n as they are used only there.
- Use the custom jQuery events 'before-autosave' and 'after-autosave' to show these messages.
- Separate autosave.suspend() for local and server so local autosaves can continue while server autosaves are suspended.
- Remove the recently added autosave.server.disable() and use autosave.server.suspend() instead.
- Bring back .button.disabled, button-primary.disabled and use .disabled to prevent multiple form submissions.
See #25272.


git-svn-id: https://develop.svn.wordpress.org/trunk@27038 602fd350-edb4-49c9-b593-d223f7449a82
2014-01-27 00:27:42 +00:00
Matt Thomas
275d589503 Eliminate the 1px padding adjustment on active buttons because it creates an un-clickable dead zone 1px high and spanning the entire width of the button. Modify the background color of active buttons for better contrast to make the active state more obvious.
See #26700, props johnbillion.



git-svn-id: https://develop.svn.wordpress.org/trunk@26993 602fd350-edb4-49c9-b593-d223f7449a82
2014-01-21 21:26:31 +00:00
Matt Thomas
5ee03aa6c7 When a button appears within a paragraph, vertically align it with the text baseline.
git-svn-id: https://develop.svn.wordpress.org/trunk@26683 602fd350-edb4-49c9-b593-d223f7449a82
2013-12-05 18:52:36 +00:00
Matt Thomas
69dabd809f Reset responsive button styles in the Customizer, which uses fixed widths and positioning and is otherwise non-responsive. See #21890.
git-svn-id: https://develop.svn.wordpress.org/trunk@26628 602fd350-edb4-49c9-b593-d223f7449a82
2013-12-04 19:44:01 +00:00
Matt Thomas
d51190952a Add basic responsive styles for button-small and button-large, override responsive button-large styles when used in the .interim-login iframe. Fixes #26363.
git-svn-id: https://develop.svn.wordpress.org/trunk@26533 602fd350-edb4-49c9-b593-d223f7449a82
2013-12-02 19:25:42 +00:00
Dion Hulse
d87ef69f00 Add the proper padding-top for button's active states in small screens. Fixes #26346
git-svn-id: https://develop.svn.wordpress.org/trunk@26497 602fd350-edb4-49c9-b593-d223f7449a82
2013-12-01 05:41:21 +00:00
Matt Thomas
acb98dc95a Updating the #wp-auth-check login form to match the new admin design:
* Remove border-radius on the container and add a box shadow
* Style the top bar background to match the new #eee page background
* Replace the close button PNG with a Dashicon
* Remove a no-longer-needed button style override in buttons.css that caused padding to change when clicking the submit button.

See #25858.



git-svn-id: https://develop.svn.wordpress.org/trunk@26441 602fd350-edb4-49c9-b593-d223f7449a82
2013-11-27 22:35:25 +00:00
Matt Thomas
e029951d27 Press This fixes:
* Override responsive styles for the Press This window
* Remove the old header logo in Press This
* Add the new Dashicon WP logo

See #25858.



git-svn-id: https://develop.svn.wordpress.org/trunk@26433 602fd350-edb4-49c9-b593-d223f7449a82
2013-11-27 19:15:29 +00:00
Matt Thomas
eb4dccce32 Unify the style of button-small everywhere we use it, and make sure the edit slug input lines up with its button and label. Fixes #26261, props mattheu.
git-svn-id: https://develop.svn.wordpress.org/trunk@26420 602fd350-edb4-49c9-b593-d223f7449a82
2013-11-26 22:09:28 +00:00