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
|