Sha256: 7660b4ffb25068efbc547b5df9516c5138d3d1166187c17b5cd649fa6db899a6
Contents?: true
Size: 1.93 KB
Versions: 7
Compression:
Stored size: 1.93 KB
Contents
// Name: Form password
// Description: Extends form component
//
// Component: `uk-form`
//
// Sub-objects: `uk-form-password`
//
// Markup:
//
// <!-- uk-form-password -->
// <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 !default;
$form-password-line-height: $form-password-font-size !default;
$form-password-color: #999 !default;
$form-password-hover-color: #999 !default;
$form-password-padding: 50px !default;
/* ========================================================================
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
// ========================================================================
@include hook-form-password-misc();
// @mixin hook-form-password-misc(){}
Version data entries
7 entries across 7 versions & 4 rubygems