ionic/src/components/input/input.md.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
150
151
152
153
@import "../../themes/ionic.globals.md";

// Material Design Input
// --------------------------------------------------

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

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

$text-input-md-input-clear-icon-width:      30px !default;
$text-input-md-input-clear-icon-color:      #5b5b5b !default;
$text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-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;
$text-input-md-input-clear-icon-size:       22px !default;

$text-input-md-show-focus-highlight:        true !default;
$text-input-md-show-valid-highlight:        $text-input-md-show-focus-highlight !default;
$text-input-md-show-invalid-highlight:      $text-input-md-show-focus-highlight !default;

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


// Material Design Default Input
// --------------------------------------------------

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

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


// Material Design Inset Input
// --------------------------------------------------

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


// Material Design Highlighted Input
// --------------------------------------------------

// Input highlight mixin for focus, valid, and invalid states
@mixin md-input-highlight($highlight-color) {
  border-bottom-color: $highlight-color;
  box-shadow: inset 0 -1px 0 0 $highlight-color;
}

// Show the focus highlight when the input has focus
@if ($text-input-md-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-md.item-input.input-has-focus .item-inner {
    @include md-input-highlight($text-input-md-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-md .item-input.input-has-focus:last-child {
    @include md-input-highlight($text-input-md-highlight-color);

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

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

  .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
    @include md-input-highlight($text-input-md-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-md-show-invalid-highlight) {
  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
    @include md-input-highlight($text-input-md-highlight-color-invalid);
  }

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

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


// Material Design Stacked & Floating Inputs
// --------------------------------------------------

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

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

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

.item-label-floating .text-input-md.cloned-input {
  top: 32px;
}

.item-label-stacked .text-input-md.cloned-input {
  top: 27px;
}


// Material Design Clear Input Icon
// --------------------------------------------------

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

.input-md[clearInput] .text-input {
  padding-right: $text-input-md-input-clear-icon-width;
}

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

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

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

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