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
|
//
// Table views
// --------------------------------------------------
.table-view {
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;
border-top: $border-default;
border-bottom: $border-default;
}
// Pad each table view item and add dividers
.table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px;
border-bottom: $border-default;
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
}
// If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
padding: inherit;
margin: -11px -65px -11px -15px; // Make the entire list item tappable.
color: inherit;
&:active {
background-color: #eee;
}
}
p {
margin-bottom: 0;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
color: #999;
font-weight: $font-weight;
border-top: $border-default;
border-bottom: $border-default;
background-color: #fafafa;
}
// Table-views with media (images,avatars, icons)
// --------------------------------------------------
.table-view .media,
.table-view .media-body {
overflow: hidden;
zoom: 1;
}
.table-view .media-object {
&.pull-left {
margin-right: 10px;
}
&.pull-right {
margin-left: 10px;
}
}
// Table-views with buttons, badges and toggles
// --------------------------------------------------
.table-view-cell,
.table-view-cell > a {
> .btn,
> .badge,
> .toggle {
position: absolute;
top: 50%;
right: 15px;
@include transform(translateY(-50%));
}
// If the cell has a chevron, give some more room.
.push-left,
.push-right {
> .btn,
> .badge,
> .toggle {
right: 35px;
}
}
}
// If the table view is the first component, give it extra margin on top.
.content > .table-view:first-child {
margin-top: 15px;
}
|
