Sha256: f64ca9013b445bbf528eb358cdc39a7d1dfe7391cdbd42fd9a1e4d0a268977d0
Contents?: true
Size: 1.81 KB
Versions: 2
Compression:
Stored size: 1.81 KB
Contents
@import "../button/index";
@import "../input/index";
@include govuk-exports("govuk/component/password-input") {
.govuk-password-input__wrapper {
// This element inherits styles from .govuk-input__wrapper, including:
// - being display: block with contents in a stacked column below the mobile breakpoint
// - being display: flex above the mobile breakpoint
@include govuk-media-query($from: mobile) {
flex-direction: row;
// The default of `stretch` makes the toggle button appear taller than the input, due to using
// box-shadow, which we don't particularly want in this situation
align-items: flex-start;
}
}
.govuk-password-input__input {
// IE 11 and Microsoft Edge comes with its own password reveal function. We want to hide it,
// so that there aren't two controls presented to the user that do the same thing but aren't in
// sync with one another. This doesn't affect the function that allows Edge users to toggle
// password visibility by pressing Alt+F8, which cannot be programatically disabled.
&::-ms-reveal {
display: none;
}
}
.govuk-password-input__toggle {
// Add margin to the top so that the button doesn't obscure the input's focus style
margin-top: govuk-spacing(1);
// Remove default margin-bottom from button
margin-bottom: 0;
// Hide the button by default, JS removes this attribute
&[hidden] {
display: none;
}
@include govuk-media-query($from: mobile) {
// Buttons are normally 100% width on this breakpoint, but we don't want that in this case
width: auto;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
// Move the spacing from top to the left
margin-top: 0;
margin-left: govuk-spacing(1);
}
}
}
/*# sourceMappingURL=_index.scss.map */
Version data entries
2 entries across 2 versions & 1 rubygems