ethosstyles 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 63006280f49289796c9daf34e00910632c3e49ffa42f210967a6797c638cfa7f
|
|
4
|
+
data.tar.gz: 8ceae95b87a5f1cd78efa5d978827b071643c879e1df8a91e338c025b213d95c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 32d734714881739227fbea2712d8d0c6552e2508c235ee6b176c8731c3698c78768b70e4b706f86922e28a8c498d1963a2ffb6b1494acf76ceb12f51315f809c
|
|
7
|
+
data.tar.gz: 12cad315d4548996a67aca0e592f2f12626c6a6b242805c799b09a6b8528aa45d2c905eff512266c5ca8f3492783d4f48d1a22db297fb31ac1e8f0edf6c62a30
|
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
///////////////////////////////////
|
|
2
|
+
// LIST GROUPS & LIST ITEMS
|
|
3
|
+
///////////////////////////////////
|
|
4
|
+
|
|
5
|
+
$arrow-height: 14px;
|
|
6
|
+
$arrow-width: 6px;
|
|
7
|
+
$list-padding-condensed: 10px;
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
//
|
|
11
|
+
// LIST GROUP
|
|
12
|
+
//
|
|
13
|
+
// modifiers:
|
|
14
|
+
// --partial
|
|
15
|
+
// --borderless
|
|
16
|
+
// --table
|
|
17
|
+
//
|
|
18
|
+
|
|
19
|
+
.rf-list-group {
|
|
20
|
+
clear: both;
|
|
21
|
+
list-style-type: none;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// PARTIAL
|
|
27
|
+
// Used when part of a list is visible and there is a button
|
|
28
|
+
// to reveal the rest of the list
|
|
29
|
+
|
|
30
|
+
.rf-list-group--partial {
|
|
31
|
+
|
|
32
|
+
.rf-list-item {
|
|
33
|
+
border-radius: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
> .rf-list-item:first-child {
|
|
37
|
+
border-top-left-radius: $border-radius;
|
|
38
|
+
border-top-right-radius: $border-radius;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// List item to expand secondary list
|
|
42
|
+
|
|
43
|
+
.rf-list-item--to-expand {
|
|
44
|
+
border-width: 0;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: block;
|
|
47
|
+
height: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
text-align: center;
|
|
50
|
+
|
|
51
|
+
> .rf-btn--secondary {
|
|
52
|
+
margin-top: -8px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&[aria-expanded='true'] {
|
|
56
|
+
display: none;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Secondary list portion
|
|
61
|
+
|
|
62
|
+
+ .rf-list-group--partial {
|
|
63
|
+
|
|
64
|
+
margin-top: -1px;
|
|
65
|
+
|
|
66
|
+
> .rf-list-item:first-child {
|
|
67
|
+
border-top-left-radius: 0;
|
|
68
|
+
border-top-right-radius: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
> .rf-list-item:last-child {
|
|
72
|
+
border-bottom-left-radius: $border-radius;
|
|
73
|
+
border-bottom-right-radius: $border-radius;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// BORDERLESS
|
|
79
|
+
// A list group without round corners and an outer border
|
|
80
|
+
// Good for inside panels without padding
|
|
81
|
+
|
|
82
|
+
.rf-list-group--borderless {
|
|
83
|
+
margin-top: 1px;
|
|
84
|
+
|
|
85
|
+
> .rf-list-item:first-child {
|
|
86
|
+
border-radius: 0;
|
|
87
|
+
border-top-width: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
> .rf-list-item {
|
|
91
|
+
border-right-width: 0;
|
|
92
|
+
border-left: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
> .rf-list-item:first-child {
|
|
96
|
+
border-radius: 0;
|
|
97
|
+
border-bottom-width: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&.rf-list-group--partial + .rf-list-group--partial {
|
|
101
|
+
|
|
102
|
+
> .rf-list-item:last-child {
|
|
103
|
+
border-bottom-left-radius: 0;
|
|
104
|
+
border-bottom-right-radius: 0;
|
|
105
|
+
border-bottom-width: 0;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// TABLE
|
|
111
|
+
// Creates a list group with columns and table-like properties
|
|
112
|
+
|
|
113
|
+
.rf-list-group--table {
|
|
114
|
+
@extend .rf-table;
|
|
115
|
+
display: table;
|
|
116
|
+
|
|
117
|
+
.rf-list-item--tr {
|
|
118
|
+
@extend .rf-table__row;
|
|
119
|
+
display: table-row;
|
|
120
|
+
|
|
121
|
+
&:nth-child(2) .rf-list-item__td {
|
|
122
|
+
border-top: $border-default;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Round top corners
|
|
127
|
+
|
|
128
|
+
.rf-list-item--tr--header + .rf-list-item--tr {
|
|
129
|
+
|
|
130
|
+
> .rf-list-item__td:first-of-type {
|
|
131
|
+
border-radius: $border-radius 0 0 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
> .rf-list-item__td:last-of-type {
|
|
135
|
+
border-radius: 0 $border-radius 0 0;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.rf-list-item__th {
|
|
140
|
+
@extend .rf-table__th;
|
|
141
|
+
|
|
142
|
+
display: table-cell;
|
|
143
|
+
padding: $list-padding;
|
|
144
|
+
padding-bottom: 4px;
|
|
145
|
+
vertical-align: bottom;
|
|
146
|
+
|
|
147
|
+
&:first-child {
|
|
148
|
+
padding-left: 0;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.rf-list-item__td {
|
|
153
|
+
@extend .rf-table__td;
|
|
154
|
+
|
|
155
|
+
display: table-cell;
|
|
156
|
+
padding: $list-padding;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
//
|
|
162
|
+
// LIST GROUP ITEM
|
|
163
|
+
//
|
|
164
|
+
// elements:
|
|
165
|
+
// __title
|
|
166
|
+
// __row
|
|
167
|
+
// --flex
|
|
168
|
+
// __link
|
|
169
|
+
// __info
|
|
170
|
+
//
|
|
171
|
+
// modifiers:
|
|
172
|
+
// --has-trigger
|
|
173
|
+
// --condensed
|
|
174
|
+
// --has-timestamp
|
|
175
|
+
// --link
|
|
176
|
+
// statuses
|
|
177
|
+
// --danger, --failure, --aborted, --error
|
|
178
|
+
// --pending
|
|
179
|
+
// --started,--ongoing
|
|
180
|
+
// --success
|
|
181
|
+
// --irrelevant
|
|
182
|
+
// --unstable
|
|
183
|
+
//
|
|
184
|
+
|
|
185
|
+
.rf-list-item,
|
|
186
|
+
%rf-list-item {
|
|
187
|
+
border: $border-default;
|
|
188
|
+
padding: $list-padding;
|
|
189
|
+
margin-top: -1px;
|
|
190
|
+
display: flex;
|
|
191
|
+
flex-flow: row wrap;
|
|
192
|
+
align-items: baseline;
|
|
193
|
+
|
|
194
|
+
&:first-child {
|
|
195
|
+
border-top-left-radius: $border-radius;
|
|
196
|
+
border-top-right-radius: $border-radius;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
&:last-child {
|
|
200
|
+
border-bottom-right-radius: $border-radius;
|
|
201
|
+
border-bottom-left-radius: $border-radius;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// ELEMENTS
|
|
206
|
+
|
|
207
|
+
.rf-list-item__title {
|
|
208
|
+
line-height: 1em;
|
|
209
|
+
position: relative;
|
|
210
|
+
padding: 0;
|
|
211
|
+
margin: 0;
|
|
212
|
+
display: inline-block;
|
|
213
|
+
|
|
214
|
+
> * {
|
|
215
|
+
display: inline-block;
|
|
216
|
+
padding: 0;
|
|
217
|
+
margin: 0;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.rf-list-item__row {
|
|
222
|
+
display: block;
|
|
223
|
+
width: 100%;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.rf-list-item__row + .rf-list-item__row {
|
|
227
|
+
padding-top: 4px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.rf-list-item__row--flex {
|
|
231
|
+
display: flex;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.rf-list-item__title__link {
|
|
235
|
+
color: $charcoal;
|
|
236
|
+
text-decoration: underline;
|
|
237
|
+
display: inline;
|
|
238
|
+
|
|
239
|
+
@include hocus() {
|
|
240
|
+
color: $black;
|
|
241
|
+
text-decoration: none;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.rf-list-item__info {
|
|
246
|
+
@extend p;
|
|
247
|
+
|
|
248
|
+
margin: 0;
|
|
249
|
+
padding: 0;
|
|
250
|
+
display: flex;
|
|
251
|
+
align-items: baseline;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.rf-list-item__info > * + * {
|
|
255
|
+
margin-left: 10px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.rf-list-item__title + .rf-list-item__info {
|
|
259
|
+
padding-left: 10px;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// HAS TRIGGER
|
|
263
|
+
|
|
264
|
+
.rf-list-item--has-trigger {
|
|
265
|
+
padding: 0;
|
|
266
|
+
display: block;
|
|
267
|
+
|
|
268
|
+
.rf-list-item__row {
|
|
269
|
+
padding: $list-padding;
|
|
270
|
+
|
|
271
|
+
&:first-of-type {
|
|
272
|
+
align-items: baseline;
|
|
273
|
+
padding-right: $list-padding + $arrow-width + 10px;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.rf-list-item__row--trigger {
|
|
278
|
+
@include rf_trigger_arrow( $arrow-pos: $list-padding/2 );
|
|
279
|
+
|
|
280
|
+
color: inherit;
|
|
281
|
+
position: relative;
|
|
282
|
+
width: 100%;
|
|
283
|
+
display: flex;
|
|
284
|
+
|
|
285
|
+
@include hocus() {
|
|
286
|
+
background-color: $lighterprewhite;
|
|
287
|
+
text-decoration: none !important;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
// CONDENSED
|
|
293
|
+
|
|
294
|
+
.rf-list-item--condensed {
|
|
295
|
+
padding-top: $list-padding-condensed;
|
|
296
|
+
padding-bottom: $list-padding-condensed;
|
|
297
|
+
|
|
298
|
+
&.rf-list-item--has-trigger {
|
|
299
|
+
padding: 0;
|
|
300
|
+
|
|
301
|
+
.rf-list-item__row {
|
|
302
|
+
padding-top: $list-padding-condensed;
|
|
303
|
+
padding-bottom: $list-padding-condensed;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.rf-list-item__row--trigger {
|
|
307
|
+
@include rf_trigger_arrow( $arrow-pos: 0px );
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
// HAS TIMESTAMP
|
|
313
|
+
|
|
314
|
+
.rf-list-item--has-timestamp {
|
|
315
|
+
display: flex;
|
|
316
|
+
justify-content: space-between;
|
|
317
|
+
|
|
318
|
+
.rf-list-item__row:first-of-type {
|
|
319
|
+
justify-content: space-between;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.rf-timestamp {
|
|
323
|
+
text-align: right;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// LINK
|
|
328
|
+
|
|
329
|
+
.rf-list-item--link {
|
|
330
|
+
cursor: pointer;
|
|
331
|
+
|
|
332
|
+
&:hover {
|
|
333
|
+
background-color: $prewhite;
|
|
334
|
+
color: $black;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
// STATUSES
|
|
339
|
+
|
|
340
|
+
.rf-list-item--danger,
|
|
341
|
+
.rf-list-item--failure,
|
|
342
|
+
.rf-list-item--aborted,
|
|
343
|
+
.rf-list-item--error {
|
|
344
|
+
border-left: 6px solid $red !important;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.rf-list-item--pending {
|
|
348
|
+
border-left: 6px solid $lemon !important;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.rf-list-item--started,
|
|
352
|
+
.rf-list-item--ongoing {
|
|
353
|
+
border-left: 6px solid $blue-bright !important;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.rf-list-item--success {
|
|
357
|
+
border-left: 6px solid $green !important;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.rf-list-item--irrelevant {
|
|
361
|
+
border-left: 6px solid $stormy !important;
|
|
362
|
+
opacity: $opacity-default;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.rf-list-item--unstable {
|
|
366
|
+
border-left: 6px solid $gold !important;
|
|
367
|
+
}
|
|
@@ -194,3 +194,37 @@
|
|
|
194
194
|
-webkit-transition: .4s;
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
|
+
|
|
198
|
+
//
|
|
199
|
+
// REFACTORED TRIGGER ARROW
|
|
200
|
+
// Used for toggles and ranges
|
|
201
|
+
//
|
|
202
|
+
|
|
203
|
+
@mixin rf_trigger_arrow ( $arrow-pos: $list-padding ) {
|
|
204
|
+
|
|
205
|
+
&[aria-expanded='false']:after,
|
|
206
|
+
&[aria-expanded='true']:after {
|
|
207
|
+
color: inherit;
|
|
208
|
+
font-family: 'octicons';
|
|
209
|
+
font-size: 14px;
|
|
210
|
+
vertical-align: middle;
|
|
211
|
+
height: $arrow-height;
|
|
212
|
+
width: $arrow-width;
|
|
213
|
+
display: block;
|
|
214
|
+
position: absolute;
|
|
215
|
+
right: $list-padding;
|
|
216
|
+
top: $arrow-pos + ($arrow-height/2);
|
|
217
|
+
|
|
218
|
+
@include hocus() {
|
|
219
|
+
color: inherit;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&[aria-expanded='false']:after {
|
|
224
|
+
content: '\f05a'; // triangle right
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
&[aria-expanded='true']:after {
|
|
228
|
+
content: '\f05b'; // triangle down
|
|
229
|
+
}
|
|
230
|
+
}
|
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
<h1>LISTS</h1>
|
|
2
|
+
|
|
3
|
+
<section class="rf-section">
|
|
4
|
+
|
|
5
|
+
<h2>Basic List Groups + List Items</h2>
|
|
6
|
+
|
|
7
|
+
<ul class="rf-list-group">
|
|
8
|
+
<li class="rf-list-item">
|
|
9
|
+
List Item
|
|
10
|
+
</li>
|
|
11
|
+
|
|
12
|
+
<li class="rf-list-item">
|
|
13
|
+
<h4 class="rf-list-item__title">
|
|
14
|
+
List Item with Title
|
|
15
|
+
</h4>
|
|
16
|
+
</li>
|
|
17
|
+
|
|
18
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
19
|
+
<h4 class="rf-list-item__title">
|
|
20
|
+
List Item with Title and Status
|
|
21
|
+
</h4>
|
|
22
|
+
</li>
|
|
23
|
+
|
|
24
|
+
<li class="rf-list-item rf-list-item--success">
|
|
25
|
+
<h3 class="rf-list-item__title">
|
|
26
|
+
List Item with Title and Status and a <a href="#" class="rf-list-item__title__link">Link</a>
|
|
27
|
+
</h3>
|
|
28
|
+
</li>
|
|
29
|
+
|
|
30
|
+
<li class="rf-list-item rf-list-item--unstable">
|
|
31
|
+
<div class="rf-list-item__row">
|
|
32
|
+
<h3 class="rf-list-item__title">
|
|
33
|
+
List Item with Title and Status and a <a href="#" class="rf-list-item__title__link">Link</a> and a Row
|
|
34
|
+
</h3>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="rf-list-item__row">
|
|
37
|
+
<div class="rf-list-item__info">
|
|
38
|
+
<div>This is info in a row</div>
|
|
39
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</li>
|
|
43
|
+
|
|
44
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
45
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id1">
|
|
46
|
+
<h3 class="rf-list-item__title">
|
|
47
|
+
List Item with Title and Status and is a Trigger
|
|
48
|
+
</h3>
|
|
49
|
+
</a>
|
|
50
|
+
<div class="collapse" id="id1">
|
|
51
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
52
|
+
</div>
|
|
53
|
+
</li>
|
|
54
|
+
|
|
55
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
56
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id2">
|
|
57
|
+
<h3 class="rf-list-item__title">
|
|
58
|
+
List Item with Title and Status and is a Trigger
|
|
59
|
+
</h3>
|
|
60
|
+
<div class="rf-list-item__info">
|
|
61
|
+
<div>This is some item info</div>
|
|
62
|
+
<div>Additional item info</div>
|
|
63
|
+
</div>
|
|
64
|
+
</a>
|
|
65
|
+
<div class="collapse" id="id2">
|
|
66
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
67
|
+
</div>
|
|
68
|
+
</li>
|
|
69
|
+
|
|
70
|
+
<li class="rf-list-item rf-list-item--ongoing">
|
|
71
|
+
<h3 class="rf-list-item__title">
|
|
72
|
+
List Item with Title and Status
|
|
73
|
+
</h3>
|
|
74
|
+
<div class="rf-list-item__info">
|
|
75
|
+
<div>This is some item info</div>
|
|
76
|
+
<div>Additional item info</div>
|
|
77
|
+
</div>
|
|
78
|
+
</li>
|
|
79
|
+
|
|
80
|
+
<li class="rf-list-item rf-list-item--error">
|
|
81
|
+
<div class="rf-list-item__row">
|
|
82
|
+
<div class="rf-list-item__info">
|
|
83
|
+
<div class="rf-col--4">Columns</div>
|
|
84
|
+
<div class="rf-col--4">Are</div>
|
|
85
|
+
<div class="rf-col--4">Here</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</li>
|
|
89
|
+
|
|
90
|
+
<li class="rf-list-item rf-list-item--unstable">
|
|
91
|
+
<div class="rf-col--4">Columns</div>
|
|
92
|
+
<div class="rf-col--4">Are</div>
|
|
93
|
+
<div class="rf-col--4">Here</div>
|
|
94
|
+
</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</section>
|
|
97
|
+
|
|
98
|
+
<section class="rf-section">
|
|
99
|
+
<h2>Partial List Groups</h2>
|
|
100
|
+
|
|
101
|
+
<ul class="rf-list-group rf-list-group--partial">
|
|
102
|
+
<li class="rf-list-item">
|
|
103
|
+
<h4 class="rf-list-item__title">
|
|
104
|
+
List Item with Title
|
|
105
|
+
</h4>
|
|
106
|
+
</li>
|
|
107
|
+
|
|
108
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
109
|
+
<h4 class="rf-list-item__title">
|
|
110
|
+
List Item with Title and Status
|
|
111
|
+
</h4>
|
|
112
|
+
</li>
|
|
113
|
+
|
|
114
|
+
<li class="rf-list-item rf-list-item--to-expand"
|
|
115
|
+
data-target="#partial"
|
|
116
|
+
data-toggle="collapse"
|
|
117
|
+
aria-expanded="false"
|
|
118
|
+
aria-controls="partial">
|
|
119
|
+
<span class="rf-btn rf-btn--secondary">Click to see all</span>
|
|
120
|
+
</li>
|
|
121
|
+
</ul>
|
|
122
|
+
|
|
123
|
+
<ul class="rf-list-group rf-list-group--partial collapse" id="partial">
|
|
124
|
+
<li class="rf-list-item">
|
|
125
|
+
<h4 class="rf-list-item__title">
|
|
126
|
+
List Item with Title
|
|
127
|
+
</h4>
|
|
128
|
+
</li>
|
|
129
|
+
|
|
130
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
131
|
+
<h4 class="rf-list-item__title">
|
|
132
|
+
List Item with Title and Status
|
|
133
|
+
</h4>
|
|
134
|
+
</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</section>
|
|
137
|
+
|
|
138
|
+
<section class="rf-section">
|
|
139
|
+
|
|
140
|
+
<h2>Borderless List Group</h2>
|
|
141
|
+
<br/>
|
|
142
|
+
<h3>Borderless</h3>
|
|
143
|
+
|
|
144
|
+
<ul class="rf-list-group rf-list-group--borderless">
|
|
145
|
+
<li class="rf-list-item">
|
|
146
|
+
List Item
|
|
147
|
+
</li>
|
|
148
|
+
<li class="rf-list-item">
|
|
149
|
+
List Item
|
|
150
|
+
</li>
|
|
151
|
+
</ul>
|
|
152
|
+
|
|
153
|
+
<br/><br/>
|
|
154
|
+
|
|
155
|
+
<h3>Borderless Partial</h3>
|
|
156
|
+
|
|
157
|
+
<ul class="rf-list-group rf-list-group--partial rf-list-group--borderless">
|
|
158
|
+
<li class="rf-list-item">
|
|
159
|
+
<h4 class="rf-list-item__title">
|
|
160
|
+
List Item with Title
|
|
161
|
+
</h4>
|
|
162
|
+
</li>
|
|
163
|
+
|
|
164
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
165
|
+
<h4 class="rf-list-item__title">
|
|
166
|
+
List Item with Title and Status
|
|
167
|
+
</h4>
|
|
168
|
+
</li>
|
|
169
|
+
|
|
170
|
+
<li class="rf-list-item rf-list-item--to-expand"
|
|
171
|
+
data-target="#borderlesspartial"
|
|
172
|
+
data-toggle="collapse"
|
|
173
|
+
aria-expanded="false"
|
|
174
|
+
aria-controls="borderlesspartial">
|
|
175
|
+
<span class="rf-btn rf-btn--secondary">Click to see all</span>
|
|
176
|
+
</li>
|
|
177
|
+
</ul>
|
|
178
|
+
|
|
179
|
+
<ul class="rf-list-group rf-list-group--partial rf-list-group--borderless collapse" id="borderlesspartial">
|
|
180
|
+
<li class="rf-list-item">
|
|
181
|
+
<h4 class="rf-list-item__title">
|
|
182
|
+
List Item with Title
|
|
183
|
+
</h4>
|
|
184
|
+
</li>
|
|
185
|
+
|
|
186
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
187
|
+
<h4 class="rf-list-item__title">
|
|
188
|
+
List Item with Title and Status
|
|
189
|
+
</h4>
|
|
190
|
+
</li>
|
|
191
|
+
</ul>
|
|
192
|
+
</section>
|
|
193
|
+
|
|
194
|
+
<section class="rf-section">
|
|
195
|
+
|
|
196
|
+
<h2>Table List Group</h2>
|
|
197
|
+
|
|
198
|
+
<ul class="rf-list-group rf-list-group--table">
|
|
199
|
+
<li class="rf-list-item rf-list-item--tr rf-list-item--tr--header">
|
|
200
|
+
<div class="rf-list-item__th rf-col--4">header 1</div>
|
|
201
|
+
<div class="rf-list-item__th rf-col--4">header 2</div>
|
|
202
|
+
<div class="rf-list-item__th rf-col--4">header 3</div>
|
|
203
|
+
</li>
|
|
204
|
+
<li class="rf-list-item rf-list-item--tr">
|
|
205
|
+
<div class="rf-list-item__td">col 1</div>
|
|
206
|
+
<div class="rf-list-item__td">col 2</div>
|
|
207
|
+
<div class="rf-list-item__td">col 3</div>
|
|
208
|
+
</li>
|
|
209
|
+
<li class="rf-list-item rf-list-item--tr">
|
|
210
|
+
<div class="rf-list-item__td">col 1</div>
|
|
211
|
+
<div class="rf-list-item__td">col 2</div>
|
|
212
|
+
<div class="rf-list-item__td">col 3</div>
|
|
213
|
+
</li>
|
|
214
|
+
</ul>
|
|
215
|
+
</section>
|
|
216
|
+
|
|
217
|
+
<hr/>
|
|
218
|
+
|
|
219
|
+
<section class="rf-section">
|
|
220
|
+
|
|
221
|
+
<h2>List Items with Timestamps</h2>
|
|
222
|
+
|
|
223
|
+
<ul class="rf-list-group">
|
|
224
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--has-timestamp">
|
|
225
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id3">
|
|
226
|
+
<h3 class="rf-list-item__title rf-col--4">
|
|
227
|
+
List Item with Title and Status and is a Trigger and Also Has a Timestamp
|
|
228
|
+
</h3>
|
|
229
|
+
<div class="rf-list-item__info">
|
|
230
|
+
<div>This is some item info</div>
|
|
231
|
+
<div>Additional item info</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
234
|
+
</a>
|
|
235
|
+
<div class="collapse" id="id3">
|
|
236
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
237
|
+
</div>
|
|
238
|
+
</li>
|
|
239
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--has-timestamp">
|
|
240
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id4">
|
|
241
|
+
<h3 class="rf-list-item__title rf-col--4">
|
|
242
|
+
Short Title
|
|
243
|
+
</h3>
|
|
244
|
+
<div class="rf-list-item__info">
|
|
245
|
+
<div>This is some item info</div>
|
|
246
|
+
<div>Additional item info</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
249
|
+
</a>
|
|
250
|
+
<div class="collapse" id="id4">
|
|
251
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
252
|
+
</div>
|
|
253
|
+
</li>
|
|
254
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--has-timestamp">
|
|
255
|
+
<h3 class="rf-list-item__title">
|
|
256
|
+
List Item with Title and Status and is a Trigger and Also Has a Timestamp and Even a <a href="#" class="rf-list-item__title__link">Link</a>
|
|
257
|
+
</h3>
|
|
258
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
259
|
+
</li>
|
|
260
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--has-timestamp">
|
|
261
|
+
<h3 class="rf-list-item__title">
|
|
262
|
+
List Item with Title and Status and a Timestamp
|
|
263
|
+
</h3>
|
|
264
|
+
<div class="rf-list-item__info">
|
|
265
|
+
<div>This is some item info</div>
|
|
266
|
+
<div>Additional item info</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
269
|
+
</li>
|
|
270
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--condensed">
|
|
271
|
+
<h3 class="rf-list-item__title">
|
|
272
|
+
List Item with Title and Status and a Timestamp that is Condensed
|
|
273
|
+
</h3>
|
|
274
|
+
<div class="rf-list-item__info">
|
|
275
|
+
<div>This is some item info</div>
|
|
276
|
+
<div>Additional item info</div>
|
|
277
|
+
</div>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</section>
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
<section class="rf-section">
|
|
284
|
+
|
|
285
|
+
<h2>List Item Accordions</h2>
|
|
286
|
+
|
|
287
|
+
<ul class="rf-list-group">
|
|
288
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
289
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id5">
|
|
290
|
+
<h3 class="rf-list-item__title">
|
|
291
|
+
List Item with Title and Status and is a Trigger
|
|
292
|
+
</h3>
|
|
293
|
+
</a>
|
|
294
|
+
<div class="collapse" id="id5">
|
|
295
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
296
|
+
</div>
|
|
297
|
+
</li>
|
|
298
|
+
|
|
299
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--condensed">
|
|
300
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id6">
|
|
301
|
+
<h3 class="rf-list-item__title">
|
|
302
|
+
List Item with Title and Status and is a Trigger and is Condensed
|
|
303
|
+
</h3>
|
|
304
|
+
</a>
|
|
305
|
+
<div class="collapse" id="id6">
|
|
306
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
307
|
+
</div>
|
|
308
|
+
</li>
|
|
309
|
+
</ul>
|
|
310
|
+
</section>
|
data/lib/ethosstyles/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ethosstyles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ethos
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-
|
|
11
|
+
date: 2018-04-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -86,6 +86,7 @@ files:
|
|
|
86
86
|
- app/assets/stylesheets/components/_grid.scss
|
|
87
87
|
- app/assets/stylesheets/components/_icons.scss
|
|
88
88
|
- app/assets/stylesheets/components/_links.scss
|
|
89
|
+
- app/assets/stylesheets/components/_list-groups.scss
|
|
89
90
|
- app/assets/stylesheets/components/_lists.scss
|
|
90
91
|
- app/assets/stylesheets/components/_logs.scss
|
|
91
92
|
- app/assets/stylesheets/components/_notices.scss
|
|
@@ -105,6 +106,7 @@ files:
|
|
|
105
106
|
- app/assets/stylesheets/utilities/_shame.scss
|
|
106
107
|
- app/assets/stylesheets/utilities/_utilities.scss
|
|
107
108
|
- app/views/buttons.html
|
|
109
|
+
- app/views/list-groups.html
|
|
108
110
|
- ethosstyles.gemspec
|
|
109
111
|
- lib/ethosstyles.rb
|
|
110
112
|
- lib/ethosstyles/engine.rb
|