From e8405c330b4a40fc1e150738b5c6b2fbd3649d9b Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 22 Aug 2014 13:33:20 -0700 Subject: [PATCH] Change css rule order :invalid is incorrectly overriding a :focus:invalid element correct the order and add a note about this. Change-Id: I4ee1a4634840b2251e294dfb704c1f5e3b730f7d --- resources/src/mediawiki.ui/components/inputs.less | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less index 0a50e107ab..acf11575e6 100644 --- a/resources/src/mediawiki.ui/components/inputs.less +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -56,19 +56,20 @@ .field-placeholder-styling; } - &:focus { - box-shadow: inset .45em 0 0 #5088f7; - border-color: @colorGrayDark; - // Remove focus glow on input[type="search"] - outline: 0; - } - // Remove red outline from inputs which have required field and invalid content. // This is a Firefox only issue // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid + // This should be above :focus so focus behaviour takes preference &:invalid { box-shadow: none; } + + &:focus { + box-shadow: inset .45em 0 0 #5088f7; + border-color: @colorGrayDark; + // Remove focus glow on input[type="search"] + outline: 0; + } } textarea.mw-ui-input { -- 2.20.1