ionic/src/components/input/input.ios.scss at polyfill-changes · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@import "../../themes/ionic.globals.ios";

// iOS Input
// --------------------------------------------------

$text-input-ios-background-color:          $list-ios-background-color !default;

$text-input-ios-margin-top:                $item-ios-padding-top !default;
$text-input-ios-margin-right:              ($item-ios-padding-right / 2) !default;
$text-input-ios-margin-bottom:             $item-ios-padding-bottom !default;
$text-input-ios-margin-left:               0 !default;

$text-input-ios-input-clear-icon-width:    30px !default;
$text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
$text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$text-input-ios-input-clear-icon-size:     18px !default;

$text-input-ios-show-focus-highlight:      false !default;
$text-input-ios-show-valid-highlight:      $text-input-ios-show-focus-highlight !default;
$text-input-ios-show-invalid-highlight:    $text-input-ios-show-focus-highlight !default;

$text-input-ios-highlight-color:           color($colors-ios, primary) !default;
$text-input-ios-highlight-color-valid:     color($colors-ios, secondary) !default;
$text-input-ios-highlight-color-invalid:   color($colors-ios, danger) !default;


// iOS Default Input
// --------------------------------------------------

.text-input-ios {
  margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left;
  padding: 0;

  width: calc(100% - #{$text-input-ios-margin-right} - #{$text-input-ios-margin-left});
}


// iOS Inset Input
// --------------------------------------------------

.input-ios .inset-input {
  margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
  padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}


// iOS Highlighted Input
// --------------------------------------------------

// Input highlight mixin for focus, valid, and invalid states
@mixin ios-input-highlight($highlight-color) {
  border-bottom-color: $highlight-color;
}

// Show the focus highlight when the input has focus
@if ($text-input-ios-show-focus-highlight) {
  // In order to get a 2px border we need to add an inset
  // box-shadow 1px (this is to avoid the div resizing)
  .item-ios.item-input.input-has-focus .item-inner {
    @include ios-input-highlight($text-input-ios-highlight-color);
  }

  // The last item in a list has a border on the item, not the
  // inner item, so add it to the item itself
  .list-ios .item-input.input-has-focus:last-child {
    @include ios-input-highlight($text-input-ios-highlight-color);

    .item-inner {
      box-shadow: none;
    }
  }
}

// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-ios-show-valid-highlight) {
  .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
    @include ios-input-highlight($text-input-ios-highlight-color-valid);
  }

  .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
    @include ios-input-highlight($text-input-ios-highlight-color-valid);

    .item-inner {
      box-shadow: none;
    }
  }
}

// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-ios-show-invalid-highlight) {
  .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
    @include ios-input-highlight($text-input-ios-highlight-color-invalid);
  }

  .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
    @include ios-input-highlight($text-input-ios-highlight-color-invalid);

    .item-inner {
      box-shadow: none;
    }
  }
}


// iOS Stacked & Floating Inputs
// --------------------------------------------------

.item-ios.item-label-stacked .text-input,
.item-ios.item-label-floating .text-input {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 0;

  width: calc(100% - #{$text-input-ios-margin-right});
}

.item-label-stacked .select-ios,
.item-label-floating .select-ios {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 0;
}

.item-label-floating .text-input-ios.cloned-input,
.item-label-stacked .text-input-ios.cloned-input {
  top: 30px;
}


// iOS Clear Input Icon
// --------------------------------------------------

.input-ios[clearInput] {
  position: relative;
}

.input-ios .text-input {
  padding-right: $text-input-ios-input-clear-icon-width;
}

.input-ios .text-input-clear-icon {
  @include svg-background-image($text-input-ios-input-clear-icon-svg);

  right: ($item-ios-padding-right / 2);

  width: $text-input-ios-input-clear-icon-width;

  background-size: $text-input-ios-input-clear-icon-size;
}