Rev 182 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 179 | espaco | 1 | body { |
| 2 | @include placeholder { |
||
| 3 | color: $inputPlaceholderTextColor; |
||
| 4 | } |
||
| 5 | |||
| 6 | .p-field { |
||
| 7 | small.ui-state-error { |
||
| 8 | color: $inputErrorBorderColor; |
||
| 9 | } |
||
| 10 | } |
||
| 11 | |||
| 12 | .ui-float-label { |
||
| 13 | > label { |
||
| 14 | margin-left: nth($inputPadding, 1); |
||
| 15 | color: $inputPlaceholderTextColor; |
||
| 16 | } |
||
| 17 | |||
| 18 | > input:focus ~ label, |
||
| 19 | > input.ui-state-filled ~ label, |
||
| 20 | > textarea:focus ~ label, |
||
| 21 | > textarea.ui-state-filled ~ label, |
||
| 22 | > .ui-inputwrapper-focus ~ label, |
||
| 23 | > .ui-inputwrapper-filled ~ label { |
||
| 24 | color: $inputTextColor; |
||
| 25 | } |
||
| 26 | |||
| 27 | > input:-webkit-autofill ~ label, |
||
| 28 | > textarea:-webkit-autofill ~ label { |
||
| 29 | color: $inputTextColor; |
||
| 30 | } |
||
| 31 | } |
||
| 32 | |||
| 33 | .ui-input-icon-left, |
||
| 34 | .ui-input-icon-right { |
||
| 35 | position: relative; |
||
| 36 | display: inline-block; |
||
| 37 | } |
||
| 38 | |||
| 39 | .ui-fluid { |
||
| 40 | .ui-input-icon-left, |
||
| 41 | .ui-input-icon-right { |
||
| 42 | display: block; |
||
| 43 | } |
||
| 44 | } |
||
| 45 | |||
| 46 | .ui-input-icon-left > i, |
||
| 47 | .ui-input-icon-right > i { |
||
| 48 | position: absolute; |
||
| 49 | top: 50%; |
||
| 50 | margin-top: -.5rem; |
||
| 51 | } |
||
| 52 | |||
| 53 | .ui-input-icon-left > i:first-of-type { |
||
| 54 | left: nth($inputPadding, 2); |
||
| 55 | color: $inputIconColor; |
||
| 56 | } |
||
| 57 | |||
| 58 | .ui-input-icon-left > .ui-inputfield { |
||
| 59 | padding-left: 2 * nth($inputPadding, 2) + $iconSize; |
||
| 60 | } |
||
| 61 | |||
| 62 | .ui-input-icon-right > i:last-of-type { |
||
| 63 | right: nth($inputPadding, 2); |
||
| 64 | color: $inputIconColor; |
||
| 65 | } |
||
| 66 | |||
| 67 | .ui-input-icon-right > .ui-inputfield { |
||
| 68 | padding-right: 2 * nth($inputPadding, 2) + $iconSize; |
||
| 69 | } |
||
| 70 | |||
| 71 | .ui-inputfield { |
||
| 72 | color: $inputTextColor; |
||
| 73 | background: $inputBg; |
||
| 74 | padding: $inputPadding; |
||
| 75 | border: $inputBorder; |
||
| 76 | outline: 0 none; |
||
| 77 | font-size: $inputTextFontSize; |
||
| 78 | border-radius: $borderRadius; |
||
| 79 | transition: $transition; |
||
| 80 | -webkit-appearance: none; |
||
| 81 | appearance: none; |
||
| 82 | |||
| 83 | &.ui-state-error { |
||
| 84 | @include invalid-input(); |
||
| 85 | } |
||
| 86 | |||
| 87 | &.ui-state-hover { |
||
| 88 | border-color: $inputHoverBorderColor; |
||
| 89 | } |
||
| 90 | |||
| 91 | &.ui-state-focus { |
||
| 92 | @include focused-input(); |
||
| 93 | } |
||
| 94 | } |
||
| 95 | |||
| 96 | .ui-input-filled, |
||
| 97 | &.ui-input-filled { |
||
| 98 | .ui-inputfield { |
||
| 99 | background-color: $inputFilledBg; |
||
| 100 | |||
| 101 | &.ui-state-hover { |
||
| 102 | background-color: $inputFilledHoverBg; |
||
| 103 | } |
||
| 104 | |||
| 105 | &.ui-state-focus { |
||
| 106 | background-color: $inputFilledFocusBg; |
||
| 107 | } |
||
| 108 | } |
||
| 109 | } |
||
| 110 | |||
| 111 | .ui-inputtextarea { |
||
| 112 | vertical-align: top; |
||
| 113 | } |
||
| 114 | } |