verdnatura/salix
verdnatura
/
salix
3
5
Fork 0
Code Issues Pull Requests 63 Releases Wiki Activity

refactor textfield CR JUAN

This commit is contained in:
gerard 2018-07-04 16:36:37 +02:00
parent 2ac0c34085
commit 66a7cbb998
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/core/src/components/textfield/style.scss
View File

@ -21,7 +21,7 @@ vn-textfield {
display: flex; display: flex;
color: $secondary-font-color; color: $secondary-font-color;
& .material-icons { .material-icons {
font-size: 20px !important font-size: 20px !important
} }
} }
@ -48,12 +48,19 @@ vn-textfield {
} }
label { label {
position: absolute; position: absolute;
bottom: 2px; bottom: 0;
padding: 4px;
pointer-events: none; pointer-events: none;
color: $secondary-font-color; color: $secondary-font-color;
transition-duration: .2s; transition-duration: .2s;
transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1);
} }
&.not-empty label{
bottom: 24px;
color: $main-01;
padding: 0;
font-size: 12px;
}
input { input {
outline: none; outline: none;
border: none; border: none;
@ -69,7 +76,7 @@ vn-textfield {
&[type=number] { &[type=number] {
-moz-appearance: textfield; -moz-appearance: textfield;
&::-webkit-outer-spin-button, &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button{ &::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
@ -95,23 +102,17 @@ vn-textfield {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1);
} }
&.not-empty {
& label {
bottom: 24px;
color: $main-01;
font-size: 12px;
}
}
div.selected { div.selected {
&.container{ &.container{
border-bottom: 0px; border-bottom: 0px;
} }
& label { label {
bottom: 24px; bottom: 24px;
color: $main-01; color: $main-01;
font-size: 12px; font-size: 12px;
} }
& .selected.underline{ .selected.underline{
left: 0; left: 0;
width: 100%!important; width: 100%!important;
} }