ionic-framework/core/src/components/item/item.ionic.scss at 9ab6791260649441c5d08eee931aff6d35f23864 · 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
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
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./item.common";

// Item
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  --background-activated: #{globals.$ion-bg-select-default};
  --border-color: #{globals.$ion-primitives-neutral-300};
  --border-style: #{globals.$ion-border-style-solid};
  --border-width: #{0 0 globals.$ion-border-size-025 0};
  --color: #{globals.$ion-text-default};
  --detail-icon-font-size: #{globals.$ion-scale-600};
  --detail-icon-opacity: 1;
  --min-height: #{globals.$ion-scale-1800};
  --padding-top: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-400};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-400};

  @include globals.typography(globals.$ion-body-lg-medium);
}

// Inner Item
// --------------------------------------------------

.item-inner {
  // This prevents the padding/margin from
  // being excluded from the height calculation.
  min-height: initial;
}

// Item Detail Icon
// --------------------------------------------------

.item-detail-icon {
  margin-inline-end: 0;
}

// Ionic Item Slots
// --------------------------------------------------

slot[name="start"]::slotted(*) {
  @include globals.margin(null, #{globals.$ion-space-400}, null, null);
}

slot[name="end"]::slotted(*) {
  @include globals.margin(null, null, null, #{globals.$ion-space-400});
}

::slotted(ion-icon:not(.item-detail-icon)) {
  color: globals.$ion-primitives-neutral-1000;

  font-size: globals.$ion-scale-1000;
}

// Item: Disabled
// --------------------------------------------------

:host(.item-disabled) .item-native::after {
  @include globals.disabled-state();
}

// Item: Activated
// --------------------------------------------------

:host(.ion-activated) .item-native {
  background: var(--background-activated);
}

// Item: Focused
// --------------------------------------------------
:host(.ion-focused) .item-native::after {
  @include globals.border-radius(inherit);
  @include globals.position(0, 0, 0, 0);

  position: absolute;

  border-width: globals.$ion-border-size-050;
  border-style: globals.$ion-border-style-solid;
  border-color: globals.$ion-border-focus-default;

  content: "";
}

// Ionic Item Lines
// --------------------------------------------------

// Full lines - apply the border to the item
// Inset lines - apply the border to the item inner
:host(.item-lines-full) {
  --border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
    globals.$ion-border-size-0};
}

:host(.item-lines-inset) {
  --inner-border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
    globals.$ion-border-size-0};
}

// Full lines - remove the border from the item inner (inset list items)
// Inset lines - remove the border on the item (full list items)
// No lines - remove the border on both (full / inset list items)
:host(.item-lines-inset),
:host(.item-lines-none) {
  --border-width: #{globals.$ion-border-size-0};
}

:host(.item-lines-full),
:host(.item-lines-none) {
  --inner-border-width: #{globals.$ion-border-size-0};
}

// Item in Select Modal
// --------------------------------------------------
:host(.in-select-modal) {
  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
  --background-focused-opacity: 0;
}

:host(.in-select-modal.ion-focused) .item-native {
  --border-radius: #{globals.$ion-border-radius-400};
}

// Accordion header (ionic theme adds `accordion-header-item` on the slotted header item)
// Neutral press for `.ion-activated`. Avoid `:host-context(ion-accordion)` — unsupported
// in WebKit/Firefox; the whole rule group would be ignored (see core mixins.scss).
// --------------------------------------------------
:host(.accordion-header-item) {
  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
  --background-activated-opacity: 1;
}

:host(.accordion-header-item) .item-native {
  @include globals.padding-horizontal(globals.$ion-space-400);
}