ethosstyles 0.1.14 → 0.1.15
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 +5 -5
- data/.gitignore +9 -0
- data/Dockerfile +7 -0
- data/Gemfile +4 -0
- data/Makefile +15 -0
- data/README.md +32 -0
- data/Rakefile +9 -0
- data/app/assets/images/loader.svg +12 -0
- data/app/assets/stylesheets/_ethosstyles.scss +8 -1
- data/app/assets/stylesheets/components/_avatars.scss +59 -0
- data/app/assets/stylesheets/components/_blurbs.scss +14 -40
- data/app/assets/stylesheets/components/_buttons.scss +3 -5
- data/app/assets/stylesheets/components/_checks.scss +5 -7
- data/app/assets/stylesheets/components/_icons.scss +10 -54
- data/app/assets/stylesheets/components/_links.scss +3 -20
- data/app/assets/stylesheets/components/_modal.scss +14 -43
- data/app/assets/stylesheets/components/_pills.scss +0 -46
- data/app/assets/stylesheets/components/_tables.scss +0 -13
- data/app/assets/stylesheets/components/_tooltips.scss +55 -0
- data/app/assets/stylesheets/main.scss +0 -4
- data/app/assets/stylesheets/settings/_variables.scss +0 -25
- data/app/assets/stylesheets/utilities/_animations.scss +0 -22
- data/app/assets/stylesheets/utilities/_mixins.scss +12 -10
- data/app/views/avatars.php +31 -0
- data/app/views/buttons.html +105 -0
- data/app/views/buttons.php +105 -0
- data/app/views/favicon.ico +0 -0
- data/app/views/icons.php +129 -0
- data/app/views/index.php +66 -0
- data/app/views/list-groups.php +318 -0
- data/app/views/modal_partial.php +21 -0
- data/app/views/modals.php +20 -0
- data/app/views/partial_avatars.php +20 -0
- data/app/views/partial_icons.php +16 -0
- data/app/views/partial_tooltips.php +19 -0
- data/app/views/tooltips.php +27 -0
- data/ethosstyles.gemspec +28 -0
- data/lib/ethosstyles.rb +23 -2
- data/lib/ethosstyles/engine.rb +1 -0
- data/lib/ethosstyles/generator.rb +80 -0
- data/lib/ethosstyles/version.rb +1 -1
- metadata +61 -10
- data/app/assets/stylesheets/components/_tooltip.scss +0 -23
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<h1>BUTTON</h1>
|
|
2
|
+
|
|
3
|
+
<section class="rf-section">
|
|
4
|
+
|
|
5
|
+
<h2>BUTTON TYPES</h2>
|
|
6
|
+
|
|
7
|
+
<a href="#" class="rf-btn rf-btn--primary">Primary</a>
|
|
8
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
9
|
+
<a href="#" class="rf-btn rf-btn--link">Link</a>
|
|
10
|
+
<a href="#" class="rf-btn rf-btn--dropdown">Dropdown</a>
|
|
11
|
+
<a href="#" class="rf-btn rf-btn--warning">Warning</a>
|
|
12
|
+
<a href="#" class="rf-btn rf-btn--error">Error</a>
|
|
13
|
+
</section>
|
|
14
|
+
|
|
15
|
+
<section class="rf-section">
|
|
16
|
+
|
|
17
|
+
<h2>BUTTON SIZES</h2>
|
|
18
|
+
|
|
19
|
+
<a href="#" class="rf-btn rf-btn--small">Button</a>
|
|
20
|
+
<a href="#" class="rf-btn rf-btn--large">Button</a>
|
|
21
|
+
<br/><br/><br/>
|
|
22
|
+
|
|
23
|
+
<h3>Types + sizes </h3>
|
|
24
|
+
|
|
25
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
|
|
26
|
+
<a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
|
|
27
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
|
|
28
|
+
<a href="#" class="rf-btn rf-btn--link rf-btn--large">Link</a>
|
|
29
|
+
<a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
|
|
30
|
+
<a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
|
|
31
|
+
<br/><br/><br/>
|
|
32
|
+
|
|
33
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--small">Button</a>
|
|
34
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--small">Button</a>
|
|
35
|
+
<a href="#" class="rf-btn rf-btn--warning rf-btn--small">Button</a>
|
|
36
|
+
<a href="#" class="rf-btn rf-btn--link rf-btn--small">Link</a>
|
|
37
|
+
<a href="#" class="rf-btn rf-btn--dropdown rf-btn--small">Dropdown</a>
|
|
38
|
+
<a href="#" class="rf-btn rf-btn--error rf-btn--small">Error</a>
|
|
39
|
+
</section>
|
|
40
|
+
|
|
41
|
+
<section class="rf-section">
|
|
42
|
+
<h2>BUTTON HELPERS</h2>
|
|
43
|
+
|
|
44
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--disabled">Disabled</a>
|
|
45
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--errorhover">Error Hover</a>
|
|
46
|
+
<br/><br/><br/>
|
|
47
|
+
|
|
48
|
+
<div class="rf-sg--dark">
|
|
49
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--light">Button</a>
|
|
50
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--large rf-btn--light">Button</a>
|
|
51
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--small rf-btn--light">Button</a>
|
|
52
|
+
<a href="#" class="rf-btn rf-btn--dropdown rf-btn--light">Dropdown</a>
|
|
53
|
+
</div>
|
|
54
|
+
<br/><br/><br/>
|
|
55
|
+
|
|
56
|
+
<h3>Multiline buttons</h3>
|
|
57
|
+
|
|
58
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--large rf-btn--multiline">
|
|
59
|
+
Primary
|
|
60
|
+
<small class="rf-btn__text">Extra line of text</small>
|
|
61
|
+
</a>
|
|
62
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--large">
|
|
63
|
+
Secondary
|
|
64
|
+
</a>
|
|
65
|
+
</section>
|
|
66
|
+
|
|
67
|
+
<section class="rf-section">
|
|
68
|
+
|
|
69
|
+
<h2>BUTTON GROUPINGS</h2>
|
|
70
|
+
<br/>
|
|
71
|
+
<h3>Button Group</h3>
|
|
72
|
+
|
|
73
|
+
<div class="rf-btn-group">
|
|
74
|
+
<a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
|
|
75
|
+
<a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
|
|
76
|
+
<a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
|
|
77
|
+
<a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
|
|
78
|
+
<a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
|
|
79
|
+
</div>
|
|
80
|
+
<br/><br/><br/><br/>
|
|
81
|
+
|
|
82
|
+
<h3>Button Set</h3>
|
|
83
|
+
<div class="rf-col--2">
|
|
84
|
+
<div class="rf-btn-set">
|
|
85
|
+
<a href="#" class="rf-btn rf-btn--primary">Primary</a>
|
|
86
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<br/>
|
|
90
|
+
<div class="rf-col--8">
|
|
91
|
+
<div class="rf-btn-set">
|
|
92
|
+
<a href="#" class="rf-btn rf-btn--primary">Primary</a>
|
|
93
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
94
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<br/>
|
|
98
|
+
<div class="rf-col--1">
|
|
99
|
+
<div class="rf-btn-set">
|
|
100
|
+
<a href="#" class="rf-btn rf-btn--primary">Primary</a>
|
|
101
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
102
|
+
<a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</section>
|
|
Binary file
|
data/app/views/icons.php
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<section class="rf-section">
|
|
2
|
+
<h3>Basic Icons</h3>
|
|
3
|
+
|
|
4
|
+
<?php
|
|
5
|
+
$icon_class = "rf-icon--no";
|
|
6
|
+
include 'partial_icons.php';
|
|
7
|
+
?>
|
|
8
|
+
<?php
|
|
9
|
+
$icon_class = "rf-icon--ok";
|
|
10
|
+
include 'partial_icons.php';
|
|
11
|
+
?>
|
|
12
|
+
<?php
|
|
13
|
+
$icon_class = "rf-icon--grip";
|
|
14
|
+
include 'partial_icons.php';
|
|
15
|
+
?>
|
|
16
|
+
<?php
|
|
17
|
+
$icon_class = "rf-icon--caret--right";
|
|
18
|
+
include 'partial_icons.php';
|
|
19
|
+
?>
|
|
20
|
+
<?php
|
|
21
|
+
$icon_class = "rf-icon--refresh";
|
|
22
|
+
include 'partial_icons.php';
|
|
23
|
+
?>
|
|
24
|
+
<?php
|
|
25
|
+
$icon_class = "rf-icon--rollback";
|
|
26
|
+
include 'partial_icons.php';
|
|
27
|
+
?>
|
|
28
|
+
<?php
|
|
29
|
+
$icon_class = "rf-icon--pencil";
|
|
30
|
+
include 'partial_icons.php';
|
|
31
|
+
?>
|
|
32
|
+
<?php
|
|
33
|
+
$icon_class = "rf-icon--eye-open";
|
|
34
|
+
include 'partial_icons.php';
|
|
35
|
+
?>
|
|
36
|
+
<?php
|
|
37
|
+
$icon_class = "rf-icon--eye-closed";
|
|
38
|
+
include 'partial_icons.php';
|
|
39
|
+
?>
|
|
40
|
+
<?php
|
|
41
|
+
$icon_class = "rf-icon--download";
|
|
42
|
+
include 'partial_icons.php';
|
|
43
|
+
?>
|
|
44
|
+
<?php
|
|
45
|
+
$icon_class = "rf-icon--upload";
|
|
46
|
+
include 'partial_icons.php';
|
|
47
|
+
?>
|
|
48
|
+
<?php
|
|
49
|
+
$icon_class = "rf-icon--trash";
|
|
50
|
+
include 'partial_icons.php';
|
|
51
|
+
?>
|
|
52
|
+
<?php
|
|
53
|
+
$icon_class = "rf-icon--dashboard";
|
|
54
|
+
include 'partial_icons.php';
|
|
55
|
+
?>
|
|
56
|
+
<?php
|
|
57
|
+
$icon_class = "rf-icon--repeat";
|
|
58
|
+
include 'partial_icons.php';
|
|
59
|
+
?>
|
|
60
|
+
<?php
|
|
61
|
+
$icon_class = "rf-icon--question";
|
|
62
|
+
include 'partial_icons.php';
|
|
63
|
+
?>
|
|
64
|
+
<?php
|
|
65
|
+
$icon_class = "rf-icon--github";
|
|
66
|
+
include 'partial_icons.php';
|
|
67
|
+
?>
|
|
68
|
+
</section>
|
|
69
|
+
|
|
70
|
+
<section class="rf-section">
|
|
71
|
+
<h3>Status Icons</h3>
|
|
72
|
+
<p class="rf-p--lead">
|
|
73
|
+
Currently used in modals and on Moonbeam deploy pages.
|
|
74
|
+
</p>
|
|
75
|
+
|
|
76
|
+
<?php
|
|
77
|
+
$icon_class = "rf-icon--info";
|
|
78
|
+
include 'partial_icons.php';
|
|
79
|
+
?>
|
|
80
|
+
<?php
|
|
81
|
+
$icon_class = "rf-icon--warning";
|
|
82
|
+
include 'partial_icons.php';
|
|
83
|
+
?>
|
|
84
|
+
<?php
|
|
85
|
+
$icon_class = "rf-icon--error";
|
|
86
|
+
include 'partial_icons.php';
|
|
87
|
+
?>
|
|
88
|
+
</section>
|
|
89
|
+
|
|
90
|
+
<section class="rf-section">
|
|
91
|
+
<h3>Status Icons</h3>
|
|
92
|
+
<p class="rf-p--lead">
|
|
93
|
+
Currently used in OrCA Onboarding page.
|
|
94
|
+
</p>
|
|
95
|
+
|
|
96
|
+
<?php
|
|
97
|
+
$icon_class = "rf-icon--failure";
|
|
98
|
+
include 'partial_icons.php';
|
|
99
|
+
?>
|
|
100
|
+
|
|
101
|
+
<?php
|
|
102
|
+
$icon_class = "rf-icon--success";
|
|
103
|
+
include 'partial_icons.php';
|
|
104
|
+
?>
|
|
105
|
+
|
|
106
|
+
<?php
|
|
107
|
+
$icon_class = "rf-icon--pending";
|
|
108
|
+
include 'partial_icons.php';
|
|
109
|
+
?>
|
|
110
|
+
|
|
111
|
+
<?php
|
|
112
|
+
$icon_class = "rf-icon--ongoing";
|
|
113
|
+
include 'partial_icons.php';
|
|
114
|
+
?>
|
|
115
|
+
|
|
116
|
+
<?php
|
|
117
|
+
$icon_class = "rf-icon--irrelevant";
|
|
118
|
+
include 'partial_icons.php';
|
|
119
|
+
?>
|
|
120
|
+
</section>
|
|
121
|
+
|
|
122
|
+
<section class="rf-section">
|
|
123
|
+
<h3>Loaders</h3>
|
|
124
|
+
|
|
125
|
+
<?php
|
|
126
|
+
$icon_class = "rf-icon--loading";
|
|
127
|
+
include 'partial_icons.php';
|
|
128
|
+
?>
|
|
129
|
+
</section>
|
data/app/views/index.php
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<doctype>
|
|
2
|
+
<html lang="">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Stardust</title>
|
|
6
|
+
<meta name="description" content="Ethos's design system">
|
|
7
|
+
|
|
8
|
+
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
|
9
|
+
|
|
10
|
+
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
11
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
12
|
+
<script>
|
|
13
|
+
$(document).ready(function(){
|
|
14
|
+
$('[data-toggle="tooltip"]').tooltip();
|
|
15
|
+
});
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
|
19
|
+
<link rel="stylesheet" href="../assets/compiled/main.css">
|
|
20
|
+
</head>
|
|
21
|
+
|
|
22
|
+
<body>
|
|
23
|
+
|
|
24
|
+
<div class="rf-container">
|
|
25
|
+
<ul>
|
|
26
|
+
<li><a href="#avatars">Avatars</a></li>
|
|
27
|
+
<li><a href="#icons">Icons</a></li>
|
|
28
|
+
<li><a href="#modals">Modals</a></li>
|
|
29
|
+
<li><a href="#buttons">Buttons</a></li>
|
|
30
|
+
<li><a href="#tooltips">Tooltips</a></li>
|
|
31
|
+
</ul>
|
|
32
|
+
|
|
33
|
+
<section class="rf-section">
|
|
34
|
+
<h2 id="avatars">Avatars</h2>
|
|
35
|
+
<?php include "avatars.php" ?>
|
|
36
|
+
</section>
|
|
37
|
+
|
|
38
|
+
<section class="rf-section">
|
|
39
|
+
<h2 id="icons">Icons</h2>
|
|
40
|
+
<?php include "icons.php" ?>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<section class="rf-section">
|
|
44
|
+
<h2 id="modals">Modals</h2>
|
|
45
|
+
<?php include "modals.php" ?>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<section class="rf-section">
|
|
49
|
+
<h2 id="buttons">Buttons</h2>
|
|
50
|
+
<?php include "buttons.php" ?>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section class="rf-section">
|
|
54
|
+
<h2 id="list-groups">List Groups</h2>
|
|
55
|
+
<?php include "list-groups.php" ?>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section class="rf-section">
|
|
59
|
+
<h2 id="tooltips">Tooltips</h2>
|
|
60
|
+
<?php include "tooltips.php" ?>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
<section class="rf-section">
|
|
2
|
+
<h2>Basic List Groups + List Items</h2>
|
|
3
|
+
|
|
4
|
+
<ul class="rf-list-group">
|
|
5
|
+
<li class="rf-list-item">
|
|
6
|
+
List Item
|
|
7
|
+
</li>
|
|
8
|
+
|
|
9
|
+
<li class="rf-list-item">
|
|
10
|
+
<h4 class="rf-list-item__title">
|
|
11
|
+
List Item with Title
|
|
12
|
+
</h4>
|
|
13
|
+
</li>
|
|
14
|
+
|
|
15
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
16
|
+
<h4 class="rf-list-item__title">
|
|
17
|
+
List Item with Title and Status
|
|
18
|
+
</h4>
|
|
19
|
+
</li>
|
|
20
|
+
|
|
21
|
+
<li class="rf-list-item rf-list-item--success">
|
|
22
|
+
<h3 class="rf-list-item__title">
|
|
23
|
+
List Item with Title and Status and a <a href="#" class="rf-list-item__title__link">Link</a>
|
|
24
|
+
</h3>
|
|
25
|
+
</li>
|
|
26
|
+
|
|
27
|
+
<li class="rf-list-item rf-list-item--unstable">
|
|
28
|
+
<div class="rf-list-item__row">
|
|
29
|
+
<h3 class="rf-list-item__title">
|
|
30
|
+
List Item with Title and Status and a <a href="#" class="rf-list-item__title__link">Link</a> and a Row
|
|
31
|
+
</h3>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="rf-list-item__row">
|
|
34
|
+
<div class="rf-list-item__info">
|
|
35
|
+
<div>This is info in a row</div>
|
|
36
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</li>
|
|
40
|
+
|
|
41
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
42
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id1">
|
|
43
|
+
<h3 class="rf-list-item__title">
|
|
44
|
+
List Item with Title and Status and is a Trigger
|
|
45
|
+
</h3>
|
|
46
|
+
</a>
|
|
47
|
+
<div class="collapse" id="id1">
|
|
48
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
49
|
+
</div>
|
|
50
|
+
</li>
|
|
51
|
+
|
|
52
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
53
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id2">
|
|
54
|
+
<h3 class="rf-list-item__title">
|
|
55
|
+
List Item with Title and Status and is a Trigger
|
|
56
|
+
</h3>
|
|
57
|
+
<div class="rf-list-item__info">
|
|
58
|
+
<div>This is some item info</div>
|
|
59
|
+
<div>Additional item info</div>
|
|
60
|
+
</div>
|
|
61
|
+
</a>
|
|
62
|
+
<div class="collapse" id="id2">
|
|
63
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
64
|
+
</div>
|
|
65
|
+
</li>
|
|
66
|
+
|
|
67
|
+
<li class="rf-list-item rf-list-item--ongoing">
|
|
68
|
+
<h3 class="rf-list-item__title">
|
|
69
|
+
List Item with Title and Status
|
|
70
|
+
</h3>
|
|
71
|
+
<div class="rf-list-item__info">
|
|
72
|
+
<div>This is some item info</div>
|
|
73
|
+
<div>Additional item info</div>
|
|
74
|
+
</div>
|
|
75
|
+
</li>
|
|
76
|
+
|
|
77
|
+
<li class="rf-list-item rf-list-item--error">
|
|
78
|
+
<div class="rf-list-item__row">
|
|
79
|
+
<div class="rf-list-item__info">
|
|
80
|
+
<div class="rf-col--4">Columns</div>
|
|
81
|
+
<div class="rf-col--4">Are</div>
|
|
82
|
+
<div class="rf-col--4">Here</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</li>
|
|
86
|
+
|
|
87
|
+
<li class="rf-list-item rf-list-item--unstable">
|
|
88
|
+
<div class="rf-col--4">Columns</div>
|
|
89
|
+
<div class="rf-col--4">Are</div>
|
|
90
|
+
<div class="rf-col--4">Here</div>
|
|
91
|
+
</li>
|
|
92
|
+
</ul>
|
|
93
|
+
</section>
|
|
94
|
+
|
|
95
|
+
<section class="rf-section">
|
|
96
|
+
<h2>Partial List Groups</h2>
|
|
97
|
+
|
|
98
|
+
<ul class="rf-list-group rf-list-group--partial">
|
|
99
|
+
<li class="rf-list-item">
|
|
100
|
+
<h4 class="rf-list-item__title">
|
|
101
|
+
List Item with Title
|
|
102
|
+
</h4>
|
|
103
|
+
</li>
|
|
104
|
+
|
|
105
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
106
|
+
<h4 class="rf-list-item__title">
|
|
107
|
+
List Item with Title and Status
|
|
108
|
+
</h4>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
<li class="rf-list-item rf-list-item--to-expand"
|
|
112
|
+
data-target="#partial"
|
|
113
|
+
data-toggle="collapse"
|
|
114
|
+
aria-expanded="false"
|
|
115
|
+
aria-controls="partial">
|
|
116
|
+
<span class="rf-btn rf-btn--secondary">Click to see all</span>
|
|
117
|
+
</li>
|
|
118
|
+
</ul>
|
|
119
|
+
|
|
120
|
+
<ul class="rf-list-group rf-list-group--partial collapse" id="partial">
|
|
121
|
+
<li class="rf-list-item">
|
|
122
|
+
<h4 class="rf-list-item__title">
|
|
123
|
+
List Item with Title
|
|
124
|
+
</h4>
|
|
125
|
+
</li>
|
|
126
|
+
|
|
127
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
128
|
+
<h4 class="rf-list-item__title">
|
|
129
|
+
List Item with Title and Status
|
|
130
|
+
</h4>
|
|
131
|
+
</li>
|
|
132
|
+
</ul>
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
<section class="rf-section">
|
|
136
|
+
|
|
137
|
+
<h2>Borderless List Group</h2>
|
|
138
|
+
<br/>
|
|
139
|
+
<h3>Borderless</h3>
|
|
140
|
+
|
|
141
|
+
<ul class="rf-list-group rf-list-group--borderless">
|
|
142
|
+
<li class="rf-list-item">
|
|
143
|
+
List Item
|
|
144
|
+
</li>
|
|
145
|
+
<li class="rf-list-item">
|
|
146
|
+
List Item
|
|
147
|
+
</li>
|
|
148
|
+
</ul>
|
|
149
|
+
|
|
150
|
+
<br/><br/>
|
|
151
|
+
|
|
152
|
+
<h3>Borderless Partial</h3>
|
|
153
|
+
|
|
154
|
+
<ul class="rf-list-group rf-list-group--partial rf-list-group--borderless">
|
|
155
|
+
<li class="rf-list-item">
|
|
156
|
+
<h4 class="rf-list-item__title">
|
|
157
|
+
List Item with Title
|
|
158
|
+
</h4>
|
|
159
|
+
</li>
|
|
160
|
+
|
|
161
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
162
|
+
<h4 class="rf-list-item__title">
|
|
163
|
+
List Item with Title and Status
|
|
164
|
+
</h4>
|
|
165
|
+
</li>
|
|
166
|
+
|
|
167
|
+
<li class="rf-list-item rf-list-item--to-expand"
|
|
168
|
+
data-target="#borderlesspartial"
|
|
169
|
+
data-toggle="collapse"
|
|
170
|
+
aria-expanded="false"
|
|
171
|
+
aria-controls="borderlesspartial">
|
|
172
|
+
<span class="rf-btn rf-btn--secondary">Click to see all</span>
|
|
173
|
+
</li>
|
|
174
|
+
</ul>
|
|
175
|
+
|
|
176
|
+
<ul class="rf-list-group rf-list-group--partial rf-list-group--borderless collapse" id="borderlesspartial">
|
|
177
|
+
<li class="rf-list-item">
|
|
178
|
+
<h4 class="rf-list-item__title">
|
|
179
|
+
List Item with Title
|
|
180
|
+
</h4>
|
|
181
|
+
</li>
|
|
182
|
+
|
|
183
|
+
<li class="rf-list-item rf-list-item--danger">
|
|
184
|
+
<h4 class="rf-list-item__title">
|
|
185
|
+
List Item with Title and Status
|
|
186
|
+
</h4>
|
|
187
|
+
</li>
|
|
188
|
+
</ul>
|
|
189
|
+
</section>
|
|
190
|
+
|
|
191
|
+
<section class="rf-section">
|
|
192
|
+
|
|
193
|
+
<h2>Table List Group</h2>
|
|
194
|
+
|
|
195
|
+
<ul class="rf-list-group rf-list-group--table">
|
|
196
|
+
<li class="rf-list-item rf-list-item--tr rf-list-item--tr--header">
|
|
197
|
+
<div class="rf-list-item__th rf-col--4">header 1</div>
|
|
198
|
+
<div class="rf-list-item__th rf-col--4">header 2</div>
|
|
199
|
+
<div class="rf-list-item__th rf-col--4">header 3</div>
|
|
200
|
+
</li>
|
|
201
|
+
<li class="rf-list-item rf-list-item--tr">
|
|
202
|
+
<div class="rf-list-item__td">col 1</div>
|
|
203
|
+
<div class="rf-list-item__td">col 2</div>
|
|
204
|
+
<div class="rf-list-item__td">col 3</div>
|
|
205
|
+
</li>
|
|
206
|
+
<li class="rf-list-item rf-list-item--tr">
|
|
207
|
+
<div class="rf-list-item__td">col 1</div>
|
|
208
|
+
<div class="rf-list-item__td">col 2</div>
|
|
209
|
+
<div class="rf-list-item__td">col 3</div>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</section>
|
|
213
|
+
|
|
214
|
+
<hr/>
|
|
215
|
+
|
|
216
|
+
<section class="rf-section">
|
|
217
|
+
|
|
218
|
+
<h2>List Items with Timestamps</h2>
|
|
219
|
+
<p>Notes:</p>
|
|
220
|
+
<ul>
|
|
221
|
+
<li>Timestamp element must be within a <code>rf-list-item__row</code></li>
|
|
222
|
+
</ul>
|
|
223
|
+
|
|
224
|
+
<ul class="rf-list-group">
|
|
225
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--has-timestamp">
|
|
226
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id3">
|
|
227
|
+
<h3 class="rf-list-item__title rf-col--4">
|
|
228
|
+
List Item with Title and Status and is a Trigger and Also Has a Timestamp
|
|
229
|
+
</h3>
|
|
230
|
+
<div class="rf-list-item__info">
|
|
231
|
+
<div>This is some item info</div>
|
|
232
|
+
<div>Additional item info</div>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
235
|
+
</a>
|
|
236
|
+
<div class="collapse" id="id3">
|
|
237
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
238
|
+
</div>
|
|
239
|
+
</li>
|
|
240
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--has-timestamp">
|
|
241
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id4">
|
|
242
|
+
<h3 class="rf-list-item__title rf-col--4">
|
|
243
|
+
Short Title
|
|
244
|
+
</h3>
|
|
245
|
+
<div class="rf-list-item__info">
|
|
246
|
+
<div>This is some item info</div>
|
|
247
|
+
<div>Additional item info</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
250
|
+
</a>
|
|
251
|
+
<div class="collapse" id="id4">
|
|
252
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
253
|
+
</div>
|
|
254
|
+
</li>
|
|
255
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--has-timestamp">
|
|
256
|
+
<div class="rf-list-item__row">
|
|
257
|
+
<h3 class="rf-list-item__title">
|
|
258
|
+
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>
|
|
259
|
+
</h3>
|
|
260
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
261
|
+
</div>
|
|
262
|
+
</li>
|
|
263
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--has-timestamp">
|
|
264
|
+
<div class="rf-list-item__row">
|
|
265
|
+
<h3 class="rf-list-item__title">
|
|
266
|
+
List Item with Title and Status and a Timestamp
|
|
267
|
+
</h3>
|
|
268
|
+
<div class="rf-list-item__info">
|
|
269
|
+
<div>This is some item info</div>
|
|
270
|
+
<div>Additional item info</div>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
273
|
+
</div>
|
|
274
|
+
</li>
|
|
275
|
+
<li class="rf-list-item rf-list-item--success rf-list-item--has-timestamp rf-list-item--condensed">
|
|
276
|
+
<div class="rf-list-item__row">
|
|
277
|
+
<h3 class="rf-list-item__title">
|
|
278
|
+
List Item with Title and Status and a Timestamp that is Condensed
|
|
279
|
+
</h3>
|
|
280
|
+
<div class="rf-list-item__info">
|
|
281
|
+
<div>This is some item info</div>
|
|
282
|
+
<div>Additional item info</div>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="rf-timestamp">2 days ago</div>
|
|
285
|
+
</div>
|
|
286
|
+
</li>
|
|
287
|
+
</ul>
|
|
288
|
+
</section>
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
<section class="rf-section">
|
|
292
|
+
|
|
293
|
+
<h2>List Item Accordions</h2>
|
|
294
|
+
|
|
295
|
+
<ul class="rf-list-group">
|
|
296
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger">
|
|
297
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id5">
|
|
298
|
+
<h3 class="rf-list-item__title">
|
|
299
|
+
List Item with Title and Status and is a Trigger
|
|
300
|
+
</h3>
|
|
301
|
+
</a>
|
|
302
|
+
<div class="collapse" id="id5">
|
|
303
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
304
|
+
</div>
|
|
305
|
+
</li>
|
|
306
|
+
|
|
307
|
+
<li class="rf-list-item rf-list-item--error rf-list-item--has-trigger rf-list-item--condensed">
|
|
308
|
+
<a class="rf-list-item__row rf-list-item__row--trigger" aria-expanded="false" data-toggle="collapse" href="#id6">
|
|
309
|
+
<h3 class="rf-list-item__title">
|
|
310
|
+
List Item with Title and Status and is a Trigger and is Condensed
|
|
311
|
+
</h3>
|
|
312
|
+
</a>
|
|
313
|
+
<div class="collapse" id="id6">
|
|
314
|
+
<div class="rf-list-item__row">Well of hidden information</div>
|
|
315
|
+
</div>
|
|
316
|
+
</li>
|
|
317
|
+
</ul>
|
|
318
|
+
</section>
|