74 lines
1.9 KiB
Plaintext
74 lines
1.9 KiB
Plaintext
// Name: Form password
|
|
// Description: Extends form component
|
|
//
|
|
// Component: `uk-form`
|
|
//
|
|
// Sub-objects: `uk-form-password`
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-form-password addon -->
|
|
// <form class="uk-form">
|
|
// <div class="uk-form-password">
|
|
// <input type="password">
|
|
// <a href="" class="uk-form-password-toggle" data-uk-form-password></a>
|
|
// </div>
|
|
// </form>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@form-password-font-size: 13px;
|
|
@form-password-line-height: @form-password-font-size;
|
|
@form-password-color: #999;
|
|
@form-password-hover-color: #999;
|
|
@form-password-padding: 50px;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Form password
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Container width fits its content
|
|
* 2. Create position context
|
|
* 3. Prevent `inline-block` consequences
|
|
*/
|
|
|
|
.uk-form-password {
|
|
/* 1 */
|
|
display: inline-block;
|
|
/* 2 */
|
|
position: relative;
|
|
/* 3 */
|
|
max-width: 100%;
|
|
}
|
|
|
|
.uk-form-password-toggle {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
margin-top: -(floor(@form-password-line-height/2));
|
|
font-size: @form-password-font-size;
|
|
line-height: @form-password-line-height;
|
|
color: @form-password-color;
|
|
}
|
|
|
|
.uk-form-password-toggle:hover {
|
|
color: @form-password-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.uk-form-password > input { padding-right: @form-password-padding !important; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-form-password-misc;
|
|
|
|
.hook-form-password-misc() {} |