Project

General

Profile

1 57592 stefania.m
/* list */
2
.md-list {
3
    .reset_list;
4
    .border-box;
5
    .uk-nestable-list > li,
6
    > li {
7
        min-height: 48px;
8
        padding: 8px 4px;
9
        box-sizing: border-box;
10
        border-bottom: 1px solid @border_color;
11
        position: relative;
12
        > .md-list-content {
13
            overflow: hidden;
14
            > span {
15
                display: block;
16
            }
17
            .md-list-heading {
18
                margin: 0;
19
                font-weight: 500;
20
                display: block;
21
                overflow: hidden;
22
                padding-bottom: 1px;
23
            }
24
            .md-list-menu {
25
                float: right;
26
                .md-list-menu-toggle {
27
                    display: block;
28
                    font-size: 18px;
29
                    color: rgba(0,0,0,.8);
30
                    width: 28px;
31
                    height: 28px;
32
                    line-height: 28px;
33
                    border-radius: 14px;
34
                    text-align: center;
35
                }
36
            }
37
            .uk-badge {
38
                float: right;
39
                color: @white !important;
40
            }
41
            .md-list-action {
42
                float: right;
43
                margin-left: 8px;
44
                margin-top: 2px;
45
                display: none;
46
            }
47
            .md-list-action-placeholder {
48
                float: right;
49
                margin-left: 8px;
50
                display: none;
51
                width: 32px;
52
                height: 32px;
53
            }
54
        }
55
        .md-list-action-dropdown {
56
            position: absolute;
57
            right: 16px;
58
            top: 10px;
59
            display: none;
60
        }
61
        > a.md-list-content {
62
            display: block;
63
            color: @text_primary_color;
64
        }
65
        &:last-child {
66
            border-bottom: none;
67
        }
68
        &.md-list-item-active {
69
            color: @accent_color;
70
            background: @background_color_default_hex;
71
        }
72
        &.md-list-item-disabled {
73
            > .md-list-content {
74
                color: @muted_color;
75
                span {
76
                    color: @muted_color !important;
77
                }
78
            }
79
        }
80
        &.heading_list {
81
            min-height: 32px;
82
            padding: 32px 8px 16px;
83
            border-bottom: none;
84
            background: transparent !important;
85
            text-transform: uppercase;
86
        }
87
        .uk-touch &,
88
        &:hover {
89
            > .md-list-addon-element {
90
                .uk-nestable-handle {
91
                    display: block;
92
                }
93
            }
94
            > .md-list-content {
95
                .md-list-action,
96
                .md-list-action-placeholder {
97
                    display: block;
98
                }
99
            }
100
            .md-list-action-dropdown {
101
                display: block;
102
            }
103
        }
104
    }
105
    .uk-nestable-list > li {
106
        margin-left: 64px;
107
    }
108
    &-addon {
109
        > li {
110
            margin-left: 64px;
111
            position: relative;
112
            &:last-child {
113
                .md-list-addon-element {
114
                    border-bottom: none;
115
                    bottom: 0;
116
                }
117
            }
118
            &:first-child {
119
                .md-list-addon-element {
120
                    top: 0;
121
                }
122
            }
123
            &.md-list-item-active {
124
                .md-list-addon-element {
125
                    &,
126
                    .material-icons {
127
                        color: @accent_color;
128
                    }
129
                }
130
            }
131
        }
132
        &-element {
133
            position: absolute;
134
            left: -64px;
135
            top: -1px;
136
            bottom: -1px;
137
            width: 64px;
138
            text-align: center;
139
            padding: 8px 0;
140
            display: block;
141
            .element-status {
142
                position: absolute;
143
                right: 12px;
144
                top: 10px;
145
                width: 12px;
146
                height: 12px;
147
                border-radius: 50%;
148
                background: @muted_color;
149
                border: 1px solid @white;
150
                &-danger {
151
                    background: @danger_color;
152
                }
153
                &-success {
154
                    background: @success_color;
155
                }
156
                &-warning {
157
                    background: @warning_color;
158
                }
159
            }
160
            > .md-list-addon-avatar {
161
                margin-top: 2px;
162
            }
163
            > .md-list-addon-icon {
164
                font-size: 28px;
165
                margin-top: 4px;
166
                color: @text_secondary_color;
167
            }
168
            > .material-icons {
169
                margin-top: 6px;
170
            }
171
            .iradio_md,
172
            .icheckbox_md {
173
                margin-top: 10px;
174
            }
175
            .uk-nestable-handle {
176
                position: absolute;
177
                left: -2px;
178
                top: 12px;
179
                display: none;
180
            }
181
        }
182
    }
183
    &-interactive {
184
        li {
185
            cursor: pointer;
186
        }
187
    }
188
    &-bg {
189
        background: @white;
190
    }
191
    &-separated {
192
        li {
193
            background: @white;
194
            padding: 8px;
195
            + li {
196
                border-top: none;
197
                margin-top: 8px;
198
            }
199
        }
200
    }
201
    &-bg-no-sep {
202
        background: @white;
203
        padding: 8px;
204
        li > .md-list-content {
205
            padding: 0 4px;
206
        }
207
    }
208
    &-outside {
209
        > li {
210
            padding: 0;
211
            > .md-list-content {
212
                padding: 8px 16px;
213
                display: block;
214
                color: @text_primary_color;
215
            }
216
            &.md-list-item-active,
217
            &:hover:not(.heading_list) {
218
                background: @background_color_default;
219
            }
220
            &.heading_list {
221
                padding: 32px 16px 16px;
222
            }
223
        }
224
        &.md-list-addon {
225
            li {
226
                margin-left: 0;
227
                .md-list-addon-element {
228
                    position: relative;
229
                    top: auto;
230
                    left: auto;
231
                    float: left;
232
                }
233
                .md-list-content {
234
                    padding-left: 0;
235
                }
236
            }
237
        }
238
    }
239
    /*&-outside-wrapper {
240
        overflow: hidden;
241
    }*/
242
    .uk-nestable-list {
243
        padding-left: 0;
244
        .uk-nestable-item {
245
            padding-right: 0;
246
        }
247
    }
248
    .uk-nestable-item + .uk-nestable-item {
249
        margin-top: 0;
250
    }
251
    &-right {
252
        &.md-list-addon {
253
            > li {
254
                margin-left: 0;
255
                margin-right: 64px;
256
                .md-list-addon-element {
257
                    left: auto;
258
                    right: -64px;
259
                }
260
            }
261
        }
262
    }
263
    &-borderless {
264
        > li {
265
            border-bottom: none;
266
        }
267
    }
268
}
269
270
.uk-touch {
271
    .md-list-addon-element {
272
        .uk-nestable-handle {
273
            display: block !important;
274
        }
275
    }
276
    .md-list-content {
277
        .md-list-action,
278
        .md-list-action-placeholder {
279
            display: block !important;
280
        }
281
    }
282
    .md-list-action-dropdown {
283
        display: block !important;
284
    }
285
}