|
| 1 | +@import "../../globals.wp"; |
| 2 | +@import "./input"; |
| 3 | + |
| 4 | +// Windows Input |
| 5 | +// -------------------------------------------------- |
| 6 | + |
| 7 | +$text-input-wp-background-color: $list-wp-background-color !default; |
| 8 | +$text-input-wp-border-color: $input-wp-border-color !default; |
| 9 | +$text-input-wp-border-width: 2px !default; |
| 10 | + |
| 11 | +$text-input-wp-padding-vertical: 0 !default; |
| 12 | +$text-input-wp-padding-horizontal: 8px !default; |
| 13 | +$text-input-wp-line-height: 3rem !default; |
| 14 | + |
| 15 | +$text-input-wp-highlight-color: map-get($colors-wp, primary) !default; |
| 16 | +$text-input-wp-hightlight-color-valid: map-get($colors-wp, secondary) !default; |
| 17 | +$text-input-wp-hightlight-color-invalid: map-get($colors-wp, danger) !default; |
| 18 | + |
| 19 | +$text-input-wp-input-clear-icon-width: 30px !default; |
| 20 | +$text-input-wp-input-clear-icon-color: $input-wp-border-color !default; |
| 21 | +$text-input-wp-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default; |
| 22 | +$text-input-wp-input-clear-icon-size: 22px !default; |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +// Windows Default Input |
| 27 | +// -------------------------------------------------- |
| 28 | + |
| 29 | +.text-input { |
| 30 | + margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom ($item-wp-padding-left / 2); |
| 31 | + padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal; |
| 32 | + border: $text-input-wp-border-width solid $text-input-wp-border-color; |
| 33 | + line-height: $text-input-wp-line-height; |
| 34 | +} |
| 35 | + |
| 36 | + |
| 37 | +// Windows Inset Input |
| 38 | +// -------------------------------------------------- |
| 39 | + |
| 40 | +.inset-input { |
| 41 | + margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left; |
| 42 | + padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2); |
| 43 | +} |
| 44 | + |
| 45 | + |
| 46 | +// Windows Highlighted Input |
| 47 | +// -------------------------------------------------- |
| 48 | + |
| 49 | +.input-has-focus .text-input { |
| 50 | + border-color: $text-input-wp-highlight-color; |
| 51 | +} |
| 52 | + |
| 53 | +ion-input.ng-valid.input-has-value .text-input { |
| 54 | + border-color: $text-input-wp-hightlight-color-valid; |
| 55 | +} |
| 56 | + |
| 57 | +ion-input.ng-invalid.ng-touched .text-input { |
| 58 | + border-color: $text-input-wp-hightlight-color-invalid; |
| 59 | +} |
| 60 | + |
| 61 | + |
| 62 | +// Windows Stacked & Floating Inputs |
| 63 | +// -------------------------------------------------- |
| 64 | + |
| 65 | +.item-label-stacked .text-input, |
| 66 | +.item-label-floating .text-input { |
| 67 | + margin-left: 0; |
| 68 | + margin-top: 8px; |
| 69 | + margin-bottom: 8px; |
| 70 | +} |
| 71 | + |
| 72 | +.item-label-floating .text-input.cloned-input { |
| 73 | + top: 32px; |
| 74 | +} |
| 75 | + |
| 76 | +.item-label-stacked .text-input.cloned-input { |
| 77 | + top: 27px; |
| 78 | +} |
| 79 | + |
| 80 | + |
| 81 | +// Windows Clear Input Icon |
| 82 | +// -------------------------------------------------- |
| 83 | + |
| 84 | +ion-input[clearInput] { |
| 85 | + position: relative; |
| 86 | + |
| 87 | + .text-input { |
| 88 | + padding-right: $text-input-wp-input-clear-icon-width; |
| 89 | + } |
| 90 | +} |
| 91 | + |
| 92 | +.text-input-clear-icon { |
| 93 | + width: $text-input-wp-input-clear-icon-width; |
| 94 | + |
| 95 | + @include svg-background-image($text-input-wp-input-clear-icon-svg); |
| 96 | + background-size: $text-input-wp-input-clear-icon-size; |
| 97 | + right: ($item-wp-padding-right / 2); |
| 98 | + bottom: 2px; |
| 99 | +} |
0 commit comments