-
Notifications
You must be signed in to change notification settings - Fork 13.5k
/
item-divider.scss
102 lines (80 loc) · 2.3 KB
/
item-divider.scss
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
@import "./item-divider.vars";
// Item Divider
// --------------------------------------------------
:host {
/**
* @prop --background: Background of the item divider
*
* @prop --color: Color of the item divider
*
* @prop --padding-top: Top padding of the item divider
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider
* @prop --padding-bottom: Bottom padding of the item divider
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider
*
* @prop --inner-padding-top: Top inner padding of the item divider
* @prop --inner-padding-end: End inner padding of the item divider
* @prop --inner-padding-bottom: Bottom inner padding of the item divider
* @prop --inner-padding-start: Start inner padding of the item divider
*/
--padding-top: 0px;
--padding-end: 0px;
--padding-bottom: 0px;
--padding-start: 0px;
--inner-padding-top: 0px;
--inner-padding-end: 0px;
--inner-padding-bottom: 0px;
--inner-padding-start: 0px;
@include font-smoothing();
@include margin(0);
@include padding(
var(--padding-top),
var(--padding-end),
var(--padding-bottom),
calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--background);
color: var(--color);
font-family: $font-family-base;
overflow: hidden;
z-index: $z-index-item-divider;
box-sizing: border-box;
}
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);
}
:host(.item-divider-sticky) {
position: sticky;
top: 0;
}
.item-divider-inner {
@include margin(0);
@include padding(
var(--inner-padding-top),
calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
var(--inner-padding-bottom),
var(--inner-padding-start)
);
display: flex;
flex: 1;
flex-direction: inherit;
align-items: inherit;
align-self: stretch;
min-height: inherit;
border: 0;
overflow: hidden;
}
.item-divider-wrapper {
display: flex;
flex: 1;
flex-direction: inherit;
align-items: inherit;
align-self: stretch;
text-overflow: ellipsis;
overflow: hidden;
}