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.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +87 -0
  3. data/app/assets/stylesheets/_ethosstyles.scss +2 -0
  4. data/app/assets/stylesheets/components/_base.scss +4 -0
  5. data/app/assets/stylesheets/components/_blurbs.scss +96 -5
  6. data/app/assets/stylesheets/components/_buttons.scss +3 -2
  7. data/app/assets/stylesheets/components/_forms.scss +128 -3
  8. data/app/assets/stylesheets/components/_grid.scss +36 -3
  9. data/app/assets/stylesheets/components/_highlights.scss +17 -0
  10. data/app/assets/stylesheets/components/_icons.scss +1 -0
  11. data/app/assets/stylesheets/components/_list-groups.scss +32 -0
  12. data/app/assets/stylesheets/components/_lists.scss +28 -7
  13. data/app/assets/stylesheets/components/_logs.scss +15 -0
  14. data/app/assets/stylesheets/components/_notes.scss +43 -0
  15. data/app/assets/stylesheets/components/_notices.scss +19 -0
  16. data/app/assets/stylesheets/components/_panels.scss +35 -1
  17. data/app/assets/stylesheets/components/_tables.scss +68 -13
  18. data/app/assets/stylesheets/components/_tooltips.scss +18 -21
  19. data/app/assets/stylesheets/pages/_styleguide.scss +6 -0
  20. data/app/assets/stylesheets/utilities/_mixins.scss +7 -33
  21. data/app/assets/stylesheets/utilities/_utilities.scss +10 -1
  22. data/app/views/blurbs.php +31 -0
  23. data/app/views/forms.php +68 -0
  24. data/app/views/grid.php +19 -0
  25. data/app/views/index.php +56 -2
  26. data/app/views/list-groups.php +69 -8
  27. data/app/views/logs.php +12 -0
  28. data/app/views/notes.php +10 -0
  29. data/app/views/notices.php +11 -0
  30. data/app/views/panels.php +8 -0
  31. data/app/views/partial_tooltips.php +6 -16
  32. data/app/views/tables.php +102 -0
  33. data/app/views/tooltips.php +6 -10
  34. data/lib/ethosstyles/version.rb +1 -1
  35. 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
- // Two action buttons
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: 4%;
122
+ margin-right: 0;
95
123
  }
96
124
  }
125
+
126
+ .rf-btn:first-child {
127
+ margin-right: 0;
128
+ }
97
129
  }
98
130
 
99
- // Single action button
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
+ }
@@ -35,6 +35,7 @@
35
35
  color: $green;
36
36
  font-family: $font-icon-f5;
37
37
  }
38
+
38
39
  // 6 dots, 2 across
39
40
 
40
41
  .rf-icon--grip:after {
@@ -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: 20px;
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
- // Tables
2
+ // TABLES
3
3
  //
4
4
 
5
5
  //
6
6
  // Structure
7
7
  //
8
- //<table class="rf-table">
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
- //</table>
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: separate; // Necessary to round corners
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 %h5;
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
- tr:first-of-type > .rf-table__td {
149
+ .rf-table__row:first-of-type > .rf-table__td {
90
150
  border-top: $border-default;
91
151
  }
92
152
 
93
- .rf-table__row > td:first-of-type {
153
+ .rf-table__row > .rf-table__td:first-of-type {
94
154
  border-left: $border-default;
95
155
  }
96
156
 
97
- .rf-table__row > td:last-of-type {
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
- }