ionic-framework/core/src/components/item/item.ionic.scss at 393512007707ffd29eeea0354b1ca282dff2ff8a · 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
@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};
}

// Item in Accordion
// --------------------------------------------------
// Ensure button element in accordion header has proper horizontal padding specifically for nested accordions
:host(.accordion-header-item) .item-native {
  @include globals.padding-horizontal(globals.$ion-space-400);
}