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