ethosstyles 0.1.15 → 0.1.16
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 +4 -4
- data/README.md +87 -0
- data/app/assets/stylesheets/_ethosstyles.scss +2 -0
- data/app/assets/stylesheets/components/_base.scss +4 -0
- data/app/assets/stylesheets/components/_blurbs.scss +96 -5
- data/app/assets/stylesheets/components/_buttons.scss +3 -2
- data/app/assets/stylesheets/components/_forms.scss +128 -3
- data/app/assets/stylesheets/components/_grid.scss +36 -3
- data/app/assets/stylesheets/components/_highlights.scss +17 -0
- data/app/assets/stylesheets/components/_icons.scss +1 -0
- data/app/assets/stylesheets/components/_list-groups.scss +32 -0
- data/app/assets/stylesheets/components/_lists.scss +28 -7
- data/app/assets/stylesheets/components/_logs.scss +15 -0
- data/app/assets/stylesheets/components/_notes.scss +43 -0
- data/app/assets/stylesheets/components/_notices.scss +19 -0
- data/app/assets/stylesheets/components/_panels.scss +35 -1
- data/app/assets/stylesheets/components/_tables.scss +68 -13
- data/app/assets/stylesheets/components/_tooltips.scss +18 -21
- data/app/assets/stylesheets/pages/_styleguide.scss +6 -0
- data/app/assets/stylesheets/utilities/_mixins.scss +7 -33
- data/app/assets/stylesheets/utilities/_utilities.scss +10 -1
- data/app/views/blurbs.php +31 -0
- data/app/views/forms.php +68 -0
- data/app/views/grid.php +19 -0
- data/app/views/index.php +56 -2
- data/app/views/list-groups.php +69 -8
- data/app/views/logs.php +12 -0
- data/app/views/notes.php +10 -0
- data/app/views/notices.php +11 -0
- data/app/views/panels.php +8 -0
- data/app/views/partial_tooltips.php +6 -16
- data/app/views/tables.php +102 -0
- data/app/views/tooltips.php +6 -10
- data/lib/ethosstyles/version.rb +1 -1
- metadata +13 -3
@@ -1,3 +1,18 @@
|
|
1
|
+
//
|
2
|
+
// GRID
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <div class="rf-row">
|
9
|
+
// <div class="rf-col--[width]">1st Column</div>
|
10
|
+
// ...
|
11
|
+
// <div class="rf-col--[width]">Last Column</div>
|
12
|
+
// </div>
|
13
|
+
//
|
14
|
+
|
15
|
+
|
1
16
|
//
|
2
17
|
// ROWS
|
3
18
|
//
|
@@ -77,7 +92,20 @@
|
|
77
92
|
// ACTIONS COLUMN
|
78
93
|
//
|
79
94
|
|
80
|
-
//
|
95
|
+
//
|
96
|
+
// Structure
|
97
|
+
//
|
98
|
+
// <div class="rf-row rf-col">
|
99
|
+
// <div class="rf-col--[width]">Body</div>
|
100
|
+
// <div class="rf-col--[width] rf-col--actions">
|
101
|
+
// <input class="rf-btn rf-btn--primary" type="delete" value="Delete">
|
102
|
+
// <input class="rf-btn rf-btn--secondary" type="submit" value="Submit">
|
103
|
+
// </div>
|
104
|
+
// </div>
|
105
|
+
//
|
106
|
+
|
107
|
+
// TWO OR MORE ACTION BUTTONS
|
108
|
+
|
81
109
|
.rf-col--actions {
|
82
110
|
align-items: center;
|
83
111
|
display: flex;
|
@@ -91,12 +119,17 @@
|
|
91
119
|
width: 48%;
|
92
120
|
|
93
121
|
&:first-child {
|
94
|
-
margin-right:
|
122
|
+
margin-right: 0;
|
95
123
|
}
|
96
124
|
}
|
125
|
+
|
126
|
+
.rf-btn:first-child {
|
127
|
+
margin-right: 0;
|
128
|
+
}
|
97
129
|
}
|
98
130
|
|
99
|
-
//
|
131
|
+
// SINGLE ACTION BUTTON
|
132
|
+
|
100
133
|
.rf-col--action {
|
101
134
|
.rf-btn {
|
102
135
|
padding-left: 0;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
//
|
2
|
+
// HIGHLIGHTS
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <div class="rf-highlight--[type]">Body</div>
|
9
|
+
//
|
10
|
+
|
11
|
+
.rf-highlight--ready {
|
12
|
+
@include border-status( $blue-bright );
|
13
|
+
}
|
14
|
+
|
15
|
+
.rf-highlight--none {
|
16
|
+
@include border-status( $mercury );
|
17
|
+
}
|
@@ -21,6 +21,10 @@ $list-padding-condensed: 10px;
|
|
21
21
|
list-style-type: none;
|
22
22
|
margin: 0;
|
23
23
|
padding: 0;
|
24
|
+
|
25
|
+
.rf-well {
|
26
|
+
margin-top: 10px;
|
27
|
+
}
|
24
28
|
}
|
25
29
|
|
26
30
|
// PARTIAL
|
@@ -119,6 +123,22 @@ $list-padding-condensed: 10px;
|
|
119
123
|
// TABLE
|
120
124
|
// Creates a list group with columns and table-like properties
|
121
125
|
|
126
|
+
// Format
|
127
|
+
|
128
|
+
// <ul class="rf-list-group rf-list-group--table">
|
129
|
+
// <li class="rf-list-item--tr">
|
130
|
+
// <h5 class="rf-list-item__th">First Column</h5>
|
131
|
+
// ...
|
132
|
+
// <h5 class="rf-list-item__th">Last Column</h5>
|
133
|
+
// </li>
|
134
|
+
// <li class="rf-list-item--tr">
|
135
|
+
// <div class="rf-list-item__td">First Column</div>
|
136
|
+
// ...
|
137
|
+
// <div class="rf-list-item__td">First Column</div>
|
138
|
+
// </li>
|
139
|
+
// ...
|
140
|
+
// </ul>
|
141
|
+
|
122
142
|
.rf-list-group--table {
|
123
143
|
@extend .rf-table;
|
124
144
|
display: table;
|
@@ -166,6 +186,17 @@ $list-padding-condensed: 10px;
|
|
166
186
|
}
|
167
187
|
}
|
168
188
|
|
189
|
+
// Extra styles for table partial.
|
190
|
+
// Needed due to tables use of display attribute
|
191
|
+
.rf-list-group--table.rf-list-group--partial.collapse {
|
192
|
+
|
193
|
+
display: none;
|
194
|
+
|
195
|
+
&[aria-expanded='true'] {
|
196
|
+
display: table;
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
169
200
|
|
170
201
|
//
|
171
202
|
// LIST GROUP ITEM
|
@@ -214,6 +245,7 @@ $list-padding-condensed: 10px;
|
|
214
245
|
// ELEMENTS
|
215
246
|
|
216
247
|
.rf-list-item__title {
|
248
|
+
@include truncate;
|
217
249
|
line-height: 1em;
|
218
250
|
position: relative;
|
219
251
|
padding: 0;
|
@@ -1,8 +1,31 @@
|
|
1
|
+
//
|
2
|
+
// LIST GROUP
|
3
|
+
//
|
4
|
+
|
5
|
+
// /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
|
6
|
+
// //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
|
7
|
+
// \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
|
8
|
+
// //\\ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ //\\
|
9
|
+
// \\// \\//
|
10
|
+
// \/ THIS WILL BE DEPRECATED SOON! \/
|
11
|
+
// /\ /\
|
12
|
+
// //\\ //\\
|
13
|
+
// \\// Do NOT add any new uses for this file! \\//
|
14
|
+
// //\\ //\\
|
15
|
+
// \\// _list-groups.scss is the new file for list groups. \\//
|
16
|
+
// \/ If you find views using these old styles please \/
|
17
|
+
// /\ change them over to _list-groups.scss. /\
|
18
|
+
// //\\ //\\
|
19
|
+
// \\// /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ \\//
|
20
|
+
// //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
|
21
|
+
// \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
|
22
|
+
// \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
|
23
|
+
|
24
|
+
|
1
25
|
//
|
2
26
|
// STRUCTURE
|
3
|
-
// todo: move to documentation
|
4
27
|
//
|
5
|
-
//<ul class="rf-list-group">
|
28
|
+
//<ul class="rf-list-group rf-list-group--[modifiers]">
|
6
29
|
// <li class="rf-list-group__item rf-list-group__item--[status]">
|
7
30
|
// <h3 class="rf-list-group__title">
|
8
31
|
// This is the title of the item with <a href="#" class="rf-list-group__titlelink">a link</a>
|
@@ -14,11 +37,6 @@
|
|
14
37
|
//</ul>
|
15
38
|
//
|
16
39
|
|
17
|
-
|
18
|
-
//
|
19
|
-
// LIST GROUP
|
20
|
-
//
|
21
|
-
|
22
40
|
.rf-list-group {
|
23
41
|
clear: both;
|
24
42
|
list-style-type: none;
|
@@ -42,6 +60,8 @@
|
|
42
60
|
border-bottom-left-radius: $border-radius;
|
43
61
|
}
|
44
62
|
|
63
|
+
// LIST GROUP TITLES
|
64
|
+
|
45
65
|
.rf-list-group__title {
|
46
66
|
@include truncate;
|
47
67
|
@extend %h3;
|
@@ -109,6 +129,7 @@
|
|
109
129
|
opacity: $opacity-default;
|
110
130
|
}
|
111
131
|
|
132
|
+
|
112
133
|
//
|
113
134
|
// LISTS GROUP W/ LINES
|
114
135
|
//
|
@@ -1,3 +1,17 @@
|
|
1
|
+
//
|
2
|
+
// LOGS
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <div class="rf-logs js-project-logs">
|
9
|
+
// <pre class="rf-logs__pre">
|
10
|
+
// Body
|
11
|
+
// </pre>
|
12
|
+
// </div>
|
13
|
+
//
|
14
|
+
|
1
15
|
.rf-logs {
|
2
16
|
background-color: $white;
|
3
17
|
border: 1px solid $mercury;
|
@@ -25,6 +39,7 @@
|
|
25
39
|
overflow: scroll;
|
26
40
|
padding: 15px;
|
27
41
|
position: relative;
|
42
|
+
white-space: pre-line;
|
28
43
|
}
|
29
44
|
|
30
45
|
|
@@ -0,0 +1,43 @@
|
|
1
|
+
//
|
2
|
+
// NOTES
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <span class="rf-note rf-note--[status]">Info</span>
|
9
|
+
//
|
10
|
+
// TODO: Add 2+ digit numbers support, check number centering within circle,
|
11
|
+
// center circle for larger elements.
|
12
|
+
//
|
13
|
+
|
14
|
+
.rf-note {
|
15
|
+
border-radius: 100%;
|
16
|
+
display: inline-block;
|
17
|
+
font-size: 10px;
|
18
|
+
height: 16px;
|
19
|
+
line-height: 16px;
|
20
|
+
margin-right: 4px;
|
21
|
+
text-align: center;
|
22
|
+
vertical-align: text-bottom;
|
23
|
+
width: 16px;
|
24
|
+
}
|
25
|
+
|
26
|
+
//
|
27
|
+
// NOTE TYPES
|
28
|
+
//
|
29
|
+
|
30
|
+
.rf-note--error {
|
31
|
+
background-color: $red;
|
32
|
+
color: $white;
|
33
|
+
}
|
34
|
+
|
35
|
+
.rf-note--ongoing {
|
36
|
+
background-color: $blue-bright;
|
37
|
+
color: $white;
|
38
|
+
}
|
39
|
+
|
40
|
+
.rf-note--neutral {
|
41
|
+
background-color: $slate;
|
42
|
+
color: $white;
|
43
|
+
}
|
@@ -2,6 +2,16 @@
|
|
2
2
|
// NOTICES
|
3
3
|
//
|
4
4
|
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <div class="rf-notice rf-notice--[status]">
|
9
|
+
// <div>
|
10
|
+
// Body
|
11
|
+
// </div>
|
12
|
+
// </div>
|
13
|
+
//
|
14
|
+
|
5
15
|
.rf-notice {
|
6
16
|
height: auto;
|
7
17
|
width: 100%;
|
@@ -12,4 +22,13 @@
|
|
12
22
|
.rf-notice--error {
|
13
23
|
background-color: $red;
|
14
24
|
color: $white;
|
25
|
+
|
26
|
+
p {
|
27
|
+
color: $white;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
.rf-notice--info {
|
32
|
+
background-color: $baby-blue;
|
33
|
+
border-bottom: 1px solid $periwinkle;
|
15
34
|
}
|
@@ -2,9 +2,43 @@
|
|
2
2
|
// PANELS
|
3
3
|
//
|
4
4
|
|
5
|
+
//
|
6
|
+
// Structure
|
7
|
+
//
|
8
|
+
// <div class="rf-panel">
|
9
|
+
// <div class="rf-panel__heading">
|
10
|
+
// <h3>Header</h3>
|
11
|
+
// </div>
|
12
|
+
// <div class="rf-panel__body">
|
13
|
+
// <p>Body</p>
|
14
|
+
// </div>
|
15
|
+
// </div>
|
16
|
+
//
|
17
|
+
|
5
18
|
.rf-panel {
|
6
|
-
margin-bottom:
|
19
|
+
margin-bottom: 0;
|
7
20
|
background-color: white;
|
8
21
|
border: $border-default;
|
9
22
|
border-radius: 4px;
|
10
23
|
}
|
24
|
+
|
25
|
+
.rf-panel__body {
|
26
|
+
padding: $list-padding;
|
27
|
+
|
28
|
+
:last-child {
|
29
|
+
margin-bottom: 0;
|
30
|
+
padding-bottom: 0;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
.rf-panel__heading {
|
35
|
+
border-bottom: $border-default;
|
36
|
+
padding: $list-padding;
|
37
|
+
padding-top: $list-padding/2;
|
38
|
+
padding-bottom: $list-padding/2;
|
39
|
+
|
40
|
+
> * h3 {
|
41
|
+
margin-bottom: 0;
|
42
|
+
padding-bottom: 0;
|
43
|
+
}
|
44
|
+
}
|
@@ -1,11 +1,11 @@
|
|
1
1
|
//
|
2
|
-
//
|
2
|
+
// TABLES
|
3
3
|
//
|
4
4
|
|
5
5
|
//
|
6
6
|
// Structure
|
7
7
|
//
|
8
|
-
|
8
|
+
// <table class="rf-table">
|
9
9
|
// <tr class="rf-table__row rf-table__row--header">
|
10
10
|
// <th class="rf-table__th">Product</th>
|
11
11
|
// <th class="rf-table__th">Name</th>
|
@@ -16,7 +16,7 @@
|
|
16
16
|
// <td class="rf-table__td"> Cell #2</td>
|
17
17
|
// </tr>
|
18
18
|
// </tbody>
|
19
|
-
|
19
|
+
// </table>
|
20
20
|
//
|
21
21
|
// Best Practices
|
22
22
|
//
|
@@ -25,7 +25,7 @@
|
|
25
25
|
|
26
26
|
.rf-table {
|
27
27
|
width: 100%;
|
28
|
-
border-collapse:
|
28
|
+
border-collapse: collapse;
|
29
29
|
table-layout: fixed;
|
30
30
|
}
|
31
31
|
|
@@ -59,6 +59,24 @@
|
|
59
59
|
text-align: right;
|
60
60
|
}
|
61
61
|
|
62
|
+
//
|
63
|
+
// ROW TYPES
|
64
|
+
//
|
65
|
+
|
66
|
+
.rf-table__row--error {
|
67
|
+
border-left: 6px solid $red;
|
68
|
+
}
|
69
|
+
|
70
|
+
.rf-table__row--success {
|
71
|
+
border-left: 6px solid $green;
|
72
|
+
}
|
73
|
+
|
74
|
+
.rf-table__row--aligntop {
|
75
|
+
> td {
|
76
|
+
vertical-align: top;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
62
80
|
|
63
81
|
// Padding and borders for table cells
|
64
82
|
|
@@ -75,7 +93,7 @@
|
|
75
93
|
}
|
76
94
|
|
77
95
|
.rf-table__th {
|
78
|
-
@extend
|
96
|
+
@extend h5;
|
79
97
|
padding: 0px $list-padding 5px;
|
80
98
|
}
|
81
99
|
|
@@ -84,21 +102,58 @@
|
|
84
102
|
font-weight: bold;
|
85
103
|
}
|
86
104
|
|
105
|
+
//
|
106
|
+
// CONDENSED TABLE
|
107
|
+
//
|
108
|
+
|
109
|
+
.rf-table--condensed {
|
110
|
+
margin: 6px 0;
|
111
|
+
|
112
|
+
.rf-table__td {
|
113
|
+
padding: 2px 10px;
|
114
|
+
|
115
|
+
.rf-preview {
|
116
|
+
min-height: 34px;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
.rf-table__td select {
|
121
|
+
margin-top: 4px;
|
122
|
+
margin-bottom: 4px;
|
123
|
+
}
|
124
|
+
|
125
|
+
.rf-table__td label {
|
126
|
+
margin-bottom: 0;
|
127
|
+
}
|
128
|
+
|
129
|
+
}
|
130
|
+
|
131
|
+
// Rounds corners of the table body
|
132
|
+
.rf-table__row:first-of-type .rf-table__td:first-of-type {
|
133
|
+
border-top-left-radius: $border-radius;
|
134
|
+
}
|
135
|
+
|
136
|
+
.rf-table__row:first-of-type .rf-table__td:last-of-type {
|
137
|
+
border-top-right-radius: $border-radius;
|
138
|
+
}
|
139
|
+
|
140
|
+
.rf-table__row:last-of-type .rf-table__td:first-of-type {
|
141
|
+
border-bottom-left-radius: $border-radius;
|
142
|
+
}
|
143
|
+
|
144
|
+
.rf-table__row:last-of-type .rf-table__td:last-of-type {
|
145
|
+
border-bottom-right-radius: $border-radius;
|
146
|
+
}
|
87
147
|
|
88
148
|
// Draws table borders
|
89
|
-
|
149
|
+
.rf-table__row:first-of-type > .rf-table__td {
|
90
150
|
border-top: $border-default;
|
91
151
|
}
|
92
152
|
|
93
|
-
.rf-table__row >
|
153
|
+
.rf-table__row > .rf-table__td:first-of-type {
|
94
154
|
border-left: $border-default;
|
95
155
|
}
|
96
156
|
|
97
|
-
.rf-table__row >
|
157
|
+
.rf-table__row > .rf-table__td:last-of-type {
|
98
158
|
border-right: $border-default;
|
99
159
|
}
|
100
|
-
|
101
|
-
// Rounds corners of the table body
|
102
|
-
.rf-table__body {
|
103
|
-
@include round-table-corners();
|
104
|
-
}
|