Bug 1549814 - Update common.inc.css to style password inputs similar to text inputs. r?MattN draft
authorpulselistener
Sat, 18 May 2019 06:44:18 +0000
changeset 2008537 aa28ec1268222e4bbafb24f43b8489d05b8bf218
parent 2008536 9351242b28245280c731c370176733e1af6195d1
child 2008538 e299c2edd5ed5295e9e5e66073f7d09ac131f9b7
push id363921
push userreviewbot
push dateSat, 18 May 2019 06:44:53 +0000
treeherdertry@feb98ece6f65 [default view] [failures only]
reviewersMattN
bugs1549814
milestone68.0a1
Bug 1549814 - Update common.inc.css to style password inputs similar to text inputs. r?MattN Differential Revision: https://phabricator.services.mozilla.com/D31709 Differential Diff: PHID-DIFF-2rgd4xxyxhywljw7u6jd
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -417,16 +417,17 @@ xul|menulist > xul|menupopup xul|menusep
   border-bottom: none;
 }
 
 /* textboxes */
 
 html|input[type="email"],
 html|input[type="tel"],
 html|input[type="text"],
+html|input[type="password"],
 html|input[type="number"],
 html|textarea,
 xul|textbox {
   -moz-appearance: none;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
   /* !important to override disabled styling from textbox.css. We reduce the
      opacity instead of changing colors. */
@@ -438,65 +439,71 @@ xul|textbox {
   min-height: 30px;
   padding-right: 8px;
   padding-left: 8px;
 }
 
 html|input[type="email"],
 html|input[type="tel"],
 html|input[type="text"],
+html|input[type="password"],
 html|input[type="number"],
 html|textarea {
   font-family: inherit;
   font-size: inherit;
   padding: 5px 8px;
 }
 
 html|input[type="email"]:enabled:not(:focus):hover,
 html|input[type="tel"]:enabled:not(:focus):hover,
 html|input[type="text"]:enabled:not(:focus):hover,
+html|input[type="password"]:enabled:not(:focus):hover,
 html|input[type="number"]:enabled:not(:focus):hover,
 html|textarea:enabled:not(:focus):hover,
 xul|textbox:not([disabled="true"]):not([focused]):hover {
   border-color: var(--in-content-border-hover);
 }
 
 html|input[type="email"]:focus,
 html|input[type="tel"]:focus,
 html|input[type="text"]:focus,
+html|input[type="password"]:focus,
 html|input[type="number"]:focus,
 html|textarea:focus,
 xul|textbox[focused] {
   border-color: var(--in-content-border-active);
   box-shadow: 0 0 0 1px var(--in-content-border-active),
     0 0 0 4px var(--in-content-border-active-shadow);
 }
 
 html|input[type="email"]:-moz-ui-invalid,
 html|input[type="tel"]:-moz-ui-invalid,
 html|input[type="text"]:-moz-ui-invalid,
+html|input[type="password"]:-moz-ui-invalid,
 html|input[type="number"]:-moz-ui-invalid,
 html|textarea:-moz-ui-invalid {
   border-color: var(--in-content-border-invalid);
 }
 
 /* Don't show the field error outlines and focus borders at the same time.
    This doesn't apply to XUL <textbox> since they don't expose validity
    attributes */
 html|input[type="email"]:-moz-ui-invalid:focus,
 html|input[type="tel"]:-moz-ui-invalid:focus,
 html|input[type="text"]:-moz-ui-invalid:focus,
+html|input[type="password"]:-moz-ui-invalid:focus,
 html|input[type="number"]:-moz-ui-invalid:focus,
 html|textarea:-moz-ui-invalid:focus {
   box-shadow: 0 0 0 3px var(--in-content-border-invalid-shadow);
 }
 
 html|input[type="email"]:disabled,
 html|input[type="tel"]:disabled,
 html|input[type="text"]:disabled,
+html|input[type="password"]:disabled,
 html|input[type="number"]:disabled,
 html|textarea:disabled,
 xul|textbox[disabled="true"] {
   opacity: 0.4;
 }
 
 /* Links */