1.27.1 · master
Harbour

Components

Card Content Dialog Menu Popover Tag

Controls

Button Checkbox Drop-down menu Input Stepper Link Password Input Text Input

Layouts

Collection Form Layout Menu View Page

Variables

Icons

Password Input

Available states

password-input.is-valid
password-input.is-invalid
password-input__input:disabled
password-input__input:focus

Available local variables

Z Index

A z-index variable is added, because different z-indexes are necessary for styling states correctly.

$password-input-z-index

Input Margin

This margin is added, to make sure the input does not cover ‘state styling’.

$password-input-input-margin

Webkit Credentials Auto Fill Button

Webkit auto fill button can be turned off (false) or on (true).

$password-input-webkit-credentials-auto-fill-button-toggle

Example HTML

<div class="password-input">
	<input class="password-input__input"
		id="new-password"
		name="new-password"
		type="password"
		required
		autocomplete="new-password"
		spellcheck="false"
		autocorrect="off"
	>
	<div class="password-input__toolbar">
		<button class="password-input__visibility-toggle"
			type="button"
		>
			<span class="password-input__visibility-toggle-label">
				Show
			</span>
			<span class="password-input__visibility-toggle-label"
				style="display:none;"
			>
				Hide
			</span>
		</button>
	</div>
</div>

When I'm not surfing or sailing, I am to be found at the harbour working on my boat.

Build on 20 July 2021 12:12