ionic-framework/core/src/components/item/item.ios.vars.scss at 026dce80f2ae3126bdfb39767d39f530a5e4bbdc · 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
@import "../../themes/native/native.globals.ios";

// iOS Item
// --------------------------------------------------

/// @prop - Minimum height of the item
$item-ios-min-height: 44px;

/// @prop - Font size of the item
$item-ios-font-size: dynamic-font(16px);

/// @prop - Margin top of the item paragraph
$item-ios-paragraph-margin-top: 0;

/// @prop - Margin end of the item paragraph
$item-ios-paragraph-margin-end: 0;

/// @prop - Margin bottom of the item paragraph
$item-ios-paragraph-margin-bottom: 2px;

/// @prop - Margin start of the item paragraph
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;

/// @prop - Font size of the item paragraph
$item-ios-paragraph-font-size: dynamic-font(14px);

/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);

/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px;

/// @prop - Height of the avatar in the item
$item-ios-avatar-height: $item-ios-avatar-width;

/// @prop - Width of the thumbnail in the item
$item-ios-thumbnail-width: 56px;

/// @prop - Height of the thumbnail in the item
$item-ios-thumbnail-height: $item-ios-thumbnail-width;

/// @prop - Padding top for the item content
$item-ios-padding-top: 10px;

/// @prop - Padding end for the item content
$item-ios-padding-end: 16px;

/// @prop - Padding bottom for the item content
$item-ios-padding-bottom: 10px;

/// @prop - Padding start for the item content
$item-ios-padding-start: 16px;

/// @prop - Border bottom width for the item when lines are displayed
$item-ios-border-bottom-width: $hairlines-width;

/// @prop - Border bottom style for the item when lines are displayed
$item-ios-border-bottom-style: solid;

/// @prop - Border bottom color for the item when lines are displayed
$item-ios-border-bottom-color: $item-ios-border-color;

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

/// @prop - Margin top for the start slot
$item-ios-slot-start-margin-top: 2px;

/// @prop - Margin end for the start slot
$item-ios-slot-start-margin-end: $item-ios-padding-end;

/// @prop - Margin bottom for the start slot
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;

/// @prop - Margin start for the start slot
$item-ios-slot-start-margin-start: 0;

/// @prop - Margin top for the end slot
$item-ios-slot-end-margin-top: null;

/// @prop - Margin end for the end slot
$item-ios-slot-end-margin-end: null;

/// @prop - Margin bottom for the end slot
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;

/// @prop - Margin start for the end slot
$item-ios-slot-end-margin-start: null;

/// @prop - Margin top for an icon in the start/end slot
$item-ios-icon-slot-margin-top: 7px;

/// @prop - Margin end for an icon in the start/end slot
$item-ios-icon-slot-margin-end: null;

/// @prop - Margin bottom for an icon in the start/end slot
$item-ios-icon-slot-margin-bottom: 7px;

/// @prop - Margin start for an icon in the start/end slot
$item-ios-icon-slot-margin-start: null;

/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-top: 7px;

/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-end: null;

/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top;

/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end;