/
list.scss
125 lines (120 loc) · 2.96 KB
/
list.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
// List item label
md-list-item {
.md-list-item-inner {
flex-grow: 1; // use all column space
}
md-icon,
.md-button md-icon {
margin-left: 0;
}
.sg-item-name {
font-size: sg-size(button);
max-width: 75%; // leave some place for a secondary button
text-transform: initial;
overflow: hidden;
align-items: flex-start;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-inline-list-icon-label {
text-transform: uppercase;
}
}
// Add some padding to the first icon in a list item
.md-list-item-inner {
> i:first-child {
margin-left: $mg;
}
}
// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------
.md-tile-left,
.md-tile-right {
border-radius: 100%;
padding: $layout-gutter-width;
width: $sg-md-grid-pitch + $baseline-grid;
height: $sg-md-grid-pitch + $baseline-grid;
line-height: $sg-md-grid-pitch + $baseline-grid;
background-clip: content-box;
}
.md-tile-right {
margin-right: -$layout-gutter-width;
}
// Overqualifying to override a rule in source
div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-tile-icons {
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
.sg-avatars {
margin: ($mg / 2) 0 0 ($mg / 2);
img {
border-radius: 100%;
margin-right: ($mg / 2);
}
}
// Avatar placeholder
// ------------------------------------
.md-tile-left:before {
font-family: 'Material Icons';
font-size: 40px;
color: rgba(0, 0, 0, 0.26);
}
.md-tile-left-card:before {
@extend .md-tile-left;
content: "\e7fd"; // person
}
.md-tile-left-list:before {
@extend .md-tile-left;
content: "\e7ef"; // group
}
.md-tile-left-selected:before {
@extend .md-tile-left;
content: "\e5ca"; // check
}
.md-tile-left-accepted:before {
@extend .md-tile-left;
background-color: rgba(0, 255, 0, 0.3) !important;
content: "\e5ca"; // check
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-declined:before {
@extend .md-tile-left;
background-color: rgba(255, 0, 0, 0.3) !important;
content: "\e15b"; // remove
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-delegated:before {
@extend .md-tile-left;
background-color: rgba(192, 192, 192, 0.3) !important;
content: "\e5c8"; // arrow-forward
color: rgba(0, 0, 0, 0.5);
}
.md-tile-left-needs-action:before {
@extend .md-tile-left;
background-color: rgba(255, 255, 0, 0.3) !important;
content: "?";
}
.md-tile-left-tentative:before {
@extend .md-tile-left;
background-color: rgba(255, 255, 0, 0.3) !important;
content: "\e7fd"; // person
}