ionic-framework/core/src/components/item-divider/item-divider.md.scss at 55cac74c956e79b26441ace20d9df791cc9ce14e · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
@use "sass:math";
@import "./item-divider";
@import "./item-divider.md.vars";

// Material Design Item Divider
// --------------------------------------------------

:host {
  --background: #{$item-divider-md-background};
  --color: #{$item-divider-md-color};
  --padding-start: #{$item-divider-md-padding-start};
  --inner-padding-end: #{$item-divider-md-padding-end};

  min-height: $item-divider-md-min-height;

  border-bottom: $item-divider-md-border-bottom;

  font-size: dynamic-font($item-divider-md-font-size);
}

// Material Design Item Divider Slots
// --------------------------------------------------

::slotted([slot="start"]) {
  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
}

::slotted([slot="end"]) {
  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
}

// Material Design Slotted Label
// --------------------------------------------------

::slotted(ion-label) {
  @include margin(13px, 0, 10px, 0);
}

// Material Design Slotted Icon
// --------------------------------------------------

::slotted(ion-icon) {
  color: $item-md-icon-slot-color;

  // The icon's font size should use em units to support
  // font scaling but evaluate to 24px at 100% font size.
  // The value in em units is calculated by dividing
  // the icon's font size in pixels by the item divider's
  // font size in pixels.
  // e.g. 24px / 14px = 1.7142857143em
  font-size: math.div($item-md-icon-slot-font-size, $item-divider-md-font-size) * 1em;
}

:host(.ion-color) ::slotted(ion-icon) {
  color: current-color(contrast);
}

::slotted(ion-icon[slot]) {
  @include margin(
    $item-md-icon-slot-margin-top,
    $item-md-icon-slot-margin-end,
    $item-md-icon-slot-margin-bottom,
    $item-md-icon-slot-margin-start
  );
}

::slotted(ion-icon[slot="start"]) {
  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
}

::slotted(ion-icon[slot="end"]) {
  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
}

// Material Design Slotted Note
// --------------------------------------------------

::slotted(ion-note) {
  @include margin(0);

  align-self: flex-start;

  font-size: $item-md-note-slot-font-size;
}

::slotted(ion-note[slot]) {
  @include padding(
    $item-md-note-slot-padding-top,
    $item-md-note-slot-padding-end,
    $item-md-note-slot-padding-bottom,
    $item-md-note-slot-padding-start
  );
}

// Material Design Item Divider Avatar
// --------------------------------------------------

::slotted(ion-avatar) {
  width: $item-md-avatar-width;
  height: $item-md-avatar-height;
}

// Material Design Item Divider Thumbnail
// --------------------------------------------------

::slotted(ion-thumbnail) {
  --size: #{$item-md-thumbnail-size};
}

// Material Design Item Divider Avatar/Thumbnail
// --------------------------------------------------

::slotted(ion-avatar),
::slotted(ion-thumbnail) {
  @include margin(
    $item-md-media-slot-margin-top,
    $item-md-media-slot-margin-end,
    $item-md-media-slot-margin-bottom,
    $item-md-media-slot-margin-start
  );
}

::slotted(ion-avatar[slot="start"]),
::slotted(ion-thumbnail[slot="start"]) {
  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
}

::slotted(ion-avatar[slot="end"]),
::slotted(ion-thumbnail[slot="end"]) {
  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
}

// Material Design Item Divider Content
// --------------------------------------------------

::slotted(h1) {
  @include margin(0, 0, 2px);
}

::slotted(h2) {
  @include margin(2px, 0);
}

::slotted(h3, h4, h5, h6) {
  @include margin(2px, 0);
}

::slotted(p) {
  @include margin(0, 0, 2px);

  color: $item-md-paragraph-text-color;

  font-size: dynamic-font(14px);

  line-height: normal;

  text-overflow: inherit;

  overflow: inherit;
}