ionic-framework/core/src/components/textarea/textarea.ionic.outline.scss at fcf0ba2aa0c8809ca459d1a494dfce1c749c440d · ionic-team/ionic-framework · 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
@use "../../themes/ionic/ionic.globals.scss" as globals;

// Textarea Fill: Outline
// ----------------------------------------------------------------

:host(.textarea-fill-outline) {
  --border-width: #{globals.$ion-border-size-025};
  --border-color: #{globals.$ion-border-input-default};
}

// Textarea Fill: Outline, Textarea Wrapper
// ----------------------------------------------------------------

:host(.textarea-fill-outline) .textarea-wrapper {
  background: initial;
}

:host(.textarea-fill-outline) .textarea-wrapper-inner {
  /**
   * The border should be relative to the inner wrapper
   * so that it does not include the label.
   */
  position: relative;
}

// Textarea Fill: Outline, Outline Container
// ----------------------------------------------------------------

:host(.textarea-fill-outline) .textarea-outline {
  @include globals.position(0, 0, 0, 0);
  @include globals.border-radius(var(--border-radius));

  position: absolute;

  width: 100%;
  height: 100%;

  pointer-events: none;

  border: var(--border-width) var(--border-style) var(--border-color);

  background: var(--background);
}

// Textarea Fill: Outline, Bottom Content
// ----------------------------------------------------------------

/**
 * The bottom content should never have
 * a border with the outline style.
 */
:host(.textarea-fill-outline) .textarea-bottom {
  border-top: none;
}

// Textarea Fill: Outline, Native Textarea
// ----------------------------------------------------------------

:host(.textarea-fill-outline) textarea {
  margin-top: globals.$ion-space-100;
}

// Focus
// ----------------------------------------------------------------

:host(.textarea-fill-outline.has-focus.ion-valid),
:host(.textarea-fill-outline.ion-touched.ion-invalid) {
  --border-color: var(--highlight-color);
}

// Ionic Textarea - Readonly
// ----------------------------------------------------------------

:host(.textarea-fill-outline.textarea-readonly) {
  --border-color: #{globals.$ion-border-input-default};
  --border-width: #{globals.$ion-border-size-025};
}