Page MenuHomePhabricator

[subtask] Move form specific selectors to their own LESS file
Open, NormalPublic

Description

In order to remove reset.less, the form element normalizations and opinionated rules should live in forms.less

div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, ins, em, img,
small, strike, strong, sub, sup, tt,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, button, select,
audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
	background: none;
}

button {
	border: 0;
	background-color: transparent;
	cursor: pointer;
}

input {
	line-height: normal;
}

Proposed solution
forms.less containing only sensible defaults building on top of current reset.less, and take inspirations by normalize.css and sanitize.css.

Event Timeline

Volker_E created this task.Mar 5 2019, 3:54 AM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Mar 5 2019, 6:50 AM

Change 494411 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Move form specific styles to new 'forms.less' file

https://gerrit.wikimedia.org/r/494411

ovasileva triaged this task as Normal priority.Mar 6 2019, 9:24 AM
matmarex removed a subscriber: matmarex.Mar 7 2019, 7:49 PM
Jdlrobson renamed this task from Move form specific selectors to their own LESS file to [subtask] Move form specific selectors to their own LESS file.Mar 8 2019, 12:28 AM

Change 495628 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Add sensitive form element defaults

https://gerrit.wikimedia.org/r/495628

Change 495628 had a related patch set uploaded (by Jdlrobson; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Add sensitive form element defaults

https://gerrit.wikimedia.org/r/495628

Change 494411 had a related patch set uploaded (by Jdlrobson; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove form styles from 'reset.less'

https://gerrit.wikimedia.org/r/494411

Change 495628 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Add sensitive form element defaults

https://gerrit.wikimedia.org/r/495628

Change 494411 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove form styles from 'reset.less'

https://gerrit.wikimedia.org/r/494411

Change 508946 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Use font-size: 100% instead of inherit to ensure form element sizing

https://gerrit.wikimedia.org/r/508946

Change 508950 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Remove browser default padding on button and input

https://gerrit.wikimedia.org/r/508950

As mentioned on the main task, the original idea of moving the styles to a 'forms.less' was not completely wrong.
There are inputs, buttons, maybe textareas and selects outside of special pages, which need to receive styling.

Change 509062 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Introduce 'forms.less' with styling most common UI form elements

https://gerrit.wikimedia.org/r/509062

Pls ignore above comment, I was on a page that didn't receive scrollbar and therefore moved around with scrollbar appearing. That's additionally to the already existing slight movement of the search overlay on focus.

Change 509062 abandoned by VolkerE:
Introduce 'forms.less' with styling most common UI form elements

Reason:
Abandoned for I68551aa0969

https://gerrit.wikimedia.org/r/509062

Change 508946 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Use font-size: 100% instead of inherit to ensure form element sizing

https://gerrit.wikimedia.org/r/508946