105 lines
2.5 KiB
Sass
105 lines
2.5 KiB
Sass
@mixin textfield
|
|
margin: 0 1em
|
|
min-width: 100%
|
|
position: relative
|
|
display: block
|
|
margin: 0
|
|
|
|
background: #fafafa
|
|
border-radius: .3em
|
|
border-bottom: 1px solid #ccc
|
|
&:hover
|
|
background: #fff
|
|
input
|
|
//overflow: hidden
|
|
display: block
|
|
background: none
|
|
width: 100%
|
|
border-radius: none
|
|
outline: none
|
|
border: none
|
|
font-size: 1em
|
|
padding: 0.7em
|
|
+ label
|
|
user-select: none
|
|
position: absolute
|
|
top: 0.15em
|
|
left: 0.25em
|
|
right: 0
|
|
font-size: .7em
|
|
cursor: text
|
|
transition: 250ms all
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
&::placeholder
|
|
color: transparent
|
|
|
|
&:placeholder-shown + label
|
|
color: grey
|
|
position: absolute
|
|
padding: .7em
|
|
top: 0em
|
|
left: 0em
|
|
right: 0
|
|
bottom: 0
|
|
font-size: 1em
|
|
&__info
|
|
color: #ccc
|
|
font-size: 0.7em
|
|
&__hint
|
|
position: absolute
|
|
z-index: 1
|
|
left: 0
|
|
right: 0
|
|
top: calc(100% - .6em)
|
|
border-bottom-left-radius: .3em
|
|
border-bottom-right-radius: .3em
|
|
color: #fff
|
|
font-size: .7em
|
|
background: red
|
|
|
|
@mixin checkbox
|
|
position: relative
|
|
font-size: 1.5em
|
|
label
|
|
user-select: none
|
|
margin-left: 1em
|
|
padding-left: .5em
|
|
transition: all 250ms ease-in-out
|
|
&::before
|
|
position: absolute
|
|
content: ''
|
|
left: 0
|
|
top: 0
|
|
width: 1em
|
|
height: 1em
|
|
background: radial-gradient(circle, #e2e2e2 0%, #b8b8b8 100%)
|
|
border-radius: .3em
|
|
border: solid 1px #ccc
|
|
box-shadow: 0 0 .5em #fff, inset 0 0 .3em #fff
|
|
|
|
&::after
|
|
content: ''
|
|
left: 0
|
|
top: 0
|
|
width: 1em
|
|
height: 1em
|
|
position: absolute
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
transform: scale(0)
|
|
padding: 0
|
|
text-shadow: 0 0 .2em #888
|
|
transition: all 250ms ease-in-out
|
|
input
|
|
display: none
|
|
&:checked + label
|
|
text-shadow: 0 0 .5em #888
|
|
&::before
|
|
box-shadow: 0 0 .5em #fff, inset 0 0 .5em #fff
|
|
&::after
|
|
transform: scale(1)
|
|
content: '✔'
|
|
color: #fff
|