61 lines
1.0 KiB
Stylus
61 lines
1.0 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
|
// Password field with toggle to show characters
|
|
// Dependencies: form
|
|
|
|
// Bones
|
|
|
|
.password
|
|
position: relative
|
|
display: block
|
|
|
|
&_inline
|
|
display: inline-block
|
|
|
|
&__field
|
|
position:relative;
|
|
width: 100%
|
|
z-index: 90
|
|
|
|
&__toggle
|
|
display: none
|
|
&.is-ok &__toggle
|
|
position: absolute
|
|
display: block
|
|
top: 0
|
|
bottom: 0
|
|
right: 0
|
|
cursor: pointer
|
|
z-index: 100
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%,-50%)
|
|
|
|
&.is-disabled &__toggle
|
|
opacity: .4
|
|
|
|
// Hide IE10 password visibility toggle
|
|
&::-ms-reveal
|
|
size: 0 // Not display:none because: http://bit.ly/1h3UlAH
|
|
|
|
|
|
// Default skin
|
|
|
|
modules_default_skin ?= true
|
|
password_default_skin ?= false
|
|
|
|
if modules_default_skin or password_default_skin
|
|
.password
|
|
&.is-ok &__toggle
|
|
width: 1.8em
|
|
&:before
|
|
tweak-inverted-text()
|
|
content: "abc"
|
|
font-size: .75em
|
|
letter-spacing: .1ex
|
|
&.is-ok.is-unlocked &__toggle:before
|
|
content: "●●●"
|
|
letter-spacing: 0
|