vnTextfield style fixes
This commit is contained in:
Juan
parent
98001b364e
commit
3208cc7851
|
|
@ -17,11 +17,6 @@
|
|||
</div>
|
||||
<label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
|
||||
</div>
|
||||
<i class="material-icons pointer"
|
||||
ng-show="!$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)"
|
||||
ng-click="$ctrl.clear()">
|
||||
clear
|
||||
</i>
|
||||
</div>
|
||||
<vn-drop-down
|
||||
vn-id="drop-down"
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
@import "colors";
|
||||
vn-textfield {
|
||||
margin: 20px 0!important;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
|
||||
.leftIcons, .rightIcons, .suffix{
|
||||
display: inline-flex;
|
||||
color: $secondary-font-color;
|
||||
& .material-icons{
|
||||
font-size: 20px!important
|
||||
}
|
||||
}
|
||||
.leftIcons{
|
||||
margin-right: 3px;
|
||||
}
|
||||
.container{
|
||||
& > .container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
display: flex;
|
||||
|
||||
& > .textField {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
.textField{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
.leftIcons, .rightIcons, .suffix {
|
||||
display: flex;
|
||||
color: $secondary-font-color;
|
||||
|
||||
& .material-icons {
|
||||
font-size: 20px !important
|
||||
}
|
||||
}
|
||||
.infix {
|
||||
position: relative;
|
||||
|
|
@ -31,8 +32,16 @@ vn-textfield {
|
|||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
i.pointer {
|
||||
i.clear {
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
&:hover i.clear {
|
||||
visibility: visible;
|
||||
}
|
||||
i.visible {
|
||||
visibility: visible;
|
||||
|
|
@ -48,12 +57,14 @@ vn-textfield {
|
|||
input {
|
||||
outline: none;
|
||||
border: none;
|
||||
font-family: "Helvetica","Arial",sans-serif;
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
background: 0 0;
|
||||
color: inherit;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
|
|
@ -64,10 +75,10 @@ vn-textfield {
|
|||
}
|
||||
}
|
||||
&:invalid {
|
||||
box-shadow:none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.underline{
|
||||
.underline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
|
|
@ -76,11 +87,11 @@ vn-textfield {
|
|||
width: 100%;
|
||||
background-color: rgba(0,0,0,.12);
|
||||
}
|
||||
.selected.underline{
|
||||
.selected.underline {
|
||||
background-color: rgb(255,152,0);
|
||||
height: 2px;
|
||||
left: 50%;
|
||||
width: 0px!important;
|
||||
width: 0px !important;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
|
|
@ -91,7 +102,7 @@ vn-textfield {
|
|||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
div.selected{
|
||||
div.selected {
|
||||
&.container{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
|
@ -105,20 +116,18 @@ vn-textfield {
|
|||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
& > div.container > div.textField > div.infix.invalid{
|
||||
& > div.container > div.textField > div.infix.invalid {
|
||||
@extend div.selected;
|
||||
|
||||
& > span.mdl-textfield__error{
|
||||
& > span.mdl-textfield__error {
|
||||
visibility: visible;
|
||||
margin-top: 9px;
|
||||
}
|
||||
& > label{
|
||||
& > label {
|
||||
color: #d50000;
|
||||
}
|
||||
}
|
||||
.infix.invalid + .underline {
|
||||
&{
|
||||
background-color: #d50000;
|
||||
}
|
||||
background-color: #d50000;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +1,29 @@
|
|||
<div class="container"
|
||||
ng-class="{selected: $ctrl.hasFocus}"
|
||||
ng-mouseenter="$ctrl.hasMouseIn = true"
|
||||
ng-mouseleave="$ctrl.hasMouseIn = false"
|
||||
style="display: inline-flex"
|
||||
>
|
||||
ng-class="{selected: $ctrl.hasFocus}">
|
||||
<div class="textField">
|
||||
<div class="leftIcons">
|
||||
</div>
|
||||
|
||||
<div class="leftIcons"></div>
|
||||
<div class="infix">
|
||||
<input
|
||||
type="{{$ctrl.type}}"
|
||||
name="{{$ctrl.name}}"
|
||||
ng-model="$ctrl.value"
|
||||
vn-validation="{{$ctrl.rule}}"
|
||||
ng-disabled="$ctrl.disabled"
|
||||
ng-readonly="$ctrl.readonly"
|
||||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
tabindex="{{$ctrl.input.tabindex}}"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="{{$ctrl.type}}"
|
||||
name="{{$ctrl.name}}"
|
||||
ng-model="$ctrl.value"
|
||||
vn-validation="{{$ctrl.rule}}"
|
||||
ng-disabled="$ctrl.disabled"
|
||||
ng-readonly="$ctrl.readonly"
|
||||
ng-focus="$ctrl.hasFocus = true"
|
||||
ng-blur="$ctrl.hasFocus = false"
|
||||
tabindex="{{$ctrl.input.tabindex}}"/>
|
||||
<label class="label" translate>{{::$ctrl.label}}</label>
|
||||
</div>
|
||||
<div class="underline"></div>
|
||||
<div class="selected underline"></div>
|
||||
<div class="suffix">
|
||||
<i class="material-icons pointer"
|
||||
<i class="material-icons clear"
|
||||
translate-attr="{title: 'Clear'}"
|
||||
ng-class="{visible:
|
||||
!$ctrl.disabled
|
||||
&& $ctrl.hasValue
|
||||
&& ($ctrl.hasFocus || $ctrl.hasMouseIn)
|
||||
&& ($ctrl.hasFocus)
|
||||
&& !$ctrl.unclearable}"
|
||||
ng-click="$ctrl.clear()">
|
||||
clear
|
||||
|
|
|
|||
Loading…
Reference in New Issue