inputs.less: Change focus state

- Make focus state consistent across UI controls (analogous update for
  buttons is already merged and checkboxes coming soon).
- Support for browsers that don't support box-shadow by
  making the border the same color.
- Use a sine-out curve for the transition

Bug: T73150
Change-Id: I24f33a40cd0126ae95698c2a46858a15f502ca5b

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 9f3a77d..72e66df 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -42,7 +42,7 @@
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
-       .transition(~"border linear .2s, box-shadow linear .2s");
+       .transition(~"border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)");
 
        // Placeholder text styling must be set individually for each browser @winter
        &::-webkit-input-placeholder { // webkit
@@ -67,8 +67,9 @@
        }
 
        &:focus {
-               box-shadow: inset .45em 0 0 @colorProgressive;
-               border-color: @colorGrayDark;
+               box-shadow: inset 0 0 0 2px @colorProgressive;
+               // Color being used to match inset shadow, not semantic reasons
+               border-color: @colorProgressive;
                // Remove focus glow on input[type="search"]
                outline: 0;
        }