Skip to content

Commit 476deda

Browse files
wesleyboarwesleyboar
authored
Merge pull request #305 from TACC/task/GH-75-styles
2 parents d03541a + eb86d50 commit 476deda

3 files changed

Lines changed: 362 additions & 0 deletions

File tree

‎taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
/*
2+
Data List
3+
4+
A list of pairs of values, where the titles/names of the values are aligned with each other and the values themselves are aligned with each other.
5+
6+
Features:
7+
- Layout can be horizontal or vertical, wide or narrow.
8+
- Narrow layouts have minimal spacing. Wide layouts have extra spacing.
9+
- All layouts truncate keys. Some layouts truncate values.
10+
- Table keys do not have colons. Other keys do have colons.
11+
12+
Notices:
13+
- User _should_ add arrangement and spacing modifiers. See Caveats #1.
14+
- The _recommended_ markup is a description list (`<dl>`) or a `<table>`.
15+
16+
Caveats:
17+
1. With no modifiers added, the result is feature-limited vertical arrangement.
18+
2. No provided repsonsive design solutions; users must apply their own.
19+
3. Inflexible support for `<table>`s (flex and truncation in table is fragile).
20+
- No protection from nesting caveats (whether is-wide or is-narrow takes precedence when one is nested inside the other).
21+
- Specific (yet semantic) markup is required to benefit from all features.
22+
23+
.c-data-list--is-horz - (arrangement) A horizontal list
24+
.c-data-list--is-vert - (arrangement) A vertical list
25+
.c-data-list--is-narrow - (spacing) A list that has limited horizontal space
26+
.c-data-list--is-wide - (spacing) A list that has ample horizontal space
27+
28+
Markup: c-data-list.html
29+
30+
Styleguide Components.DataList
31+
*/
32+
@import url("_imports/tools/x-truncate.css");
33+
34+
35+
36+
37+
38+
/* Base i.e. Container */
39+
40+
table.c-data-list {
41+
border-left: 0;
42+
border-right: 0;
43+
}
44+
45+
46+
47+
48+
49+
/* Elements i.e. Children */
50+
51+
/* To truncate text */
52+
.c-data-list__key {
53+
@extend %x-truncate--one-line;
54+
}
55+
@supports(text-overflow: ':') {
56+
.c-data-list__key:not(th) {
57+
--text-overflow: ':';
58+
}
59+
}
60+
61+
/* To add colon (non-tables) */
62+
.c-data-list__key:not(th)::after {
63+
content: ':';
64+
display: inline;
65+
padding-right: 0.25em;
66+
}
67+
68+
/* To add space (instead of colon) (tables) */
69+
th.c-data-list__key {
70+
padding-right: 0.25em;
71+
}
72+
73+
74+
75+
76+
/* Modifiers i.e. Types */
77+
/* FAQ: The `:not(table)` selectors avoid nesting caveats by using `>` */
78+
79+
80+
81+
/* Horizontal */
82+
83+
.c-data-list--is-horz {
84+
display: flex;
85+
flex-direction: row;
86+
}
87+
dl.c-data-list--is-horz,
88+
.c-data-list--is-horz dd.c-data-list__value {
89+
margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */
90+
}
91+
92+
/* To propogate flexbox layout so cells are flex items */
93+
table.c-data-list--is-horz tr,
94+
table.c-data-list--is-horz tbody {
95+
min-width: 0;
96+
97+
display: flex;
98+
flex-direction: row;
99+
}
100+
101+
/* To space out key and value (non-tables) */
102+
.c-data-list--is-horz:not(table).c-data-list--is-narrow
103+
> .c-data-list__key ~ .c-data-list__key::before {
104+
padding-left: 0.5em;
105+
padding-right: 0.5em;
106+
}
107+
.c-data-list--is-horz:not(table).c-data-list--is-wide
108+
> .c-data-list__key ~ .c-data-list__key::before {
109+
padding-left: 1em;
110+
padding-right: 1em;
111+
}
112+
/* To space out key and value (tables) */
113+
table.c-data-list--is-horz.c-data-list--is-narrow
114+
tr:not(:first-child) th.c-data-list__key {
115+
padding-left: 0.5em;
116+
}
117+
table.c-data-list--is-horz.c-data-list--is-narrow
118+
td.c-data-list__value {
119+
margin-right: 0.5em; /* use margin because text would show through padding */
120+
}
121+
table.c-data-list--is-horz.c-data-list--is-wide
122+
tr:not(:first-child) th.c-data-list__key {
123+
padding-left: 1em;
124+
}
125+
table.c-data-list--is-horz.c-data-list--is-wide
126+
td.c-data-list__value {
127+
margin-right: 1em; /* use margin because text would show through padding */
128+
}
129+
130+
131+
132+
/* Vertical */
133+
134+
table.c-data-list--is-vert {
135+
width: 100%;
136+
table-layout: fixed;
137+
}
138+
139+
/* To overwrite Bootstrap `_reboot.scss` */
140+
.c-data-list--is-vert:not(table) > .c-data-list__value {
141+
margin-left: 0;
142+
}
143+
144+
/* To space out key and value (tables) */
145+
.c-data-list--is-vert:not(table).c-data-list--is-narrow > .c-data-list__value,
146+
table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value {
147+
padding-left: 0;
148+
}
149+
.c-data-list--is-vert:not(table).c-data-list--is-wide > .c-data-list__value,
150+
table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value {
151+
padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */
152+
}
153+
154+
155+
156+
157+
158+
/* Edge Cases */
159+
160+
161+
162+
/* Element Borders */
163+
164+
/* To remove most borders (tables) */
165+
table.c-data-list--is-vert th.c-data-list__key,
166+
td.c-data-list__value {
167+
border-left: 0;
168+
border-right: 0;
169+
}
170+
table.c-data-list--is-horz th.c-data-list__key,
171+
table.c-data-list--is-horz td.c-data-list__value {
172+
border-top: 0;
173+
border-bottom: 0;
174+
}
175+
176+
/* To keep real border between key and value (tables) */
177+
/* CAVEAT: Certain fonts may limit border height (see "Font Alignment") */
178+
table.c-data-list--is-horz tr:first-child th.c-data-list__key {
179+
border-left: 0;
180+
}
181+
table.c-data-list--is-horz th.c-data-list__key {
182+
border-right: 0;
183+
}
184+
185+
/* To add fake border between key and value (non-tables) */
186+
.c-data-list--is-horz:not(table)
187+
> .c-data-list__key ~ .c-data-list__key::before {
188+
content: '|';
189+
display: inline-block;
190+
}
191+
192+
193+
194+
/* Truncate Values */
195+
/* FAQ: Truncate when doing is unlikely to almost entirely obscure text */
196+
197+
.c-data-list--should-truncate-values .c-data-list__value {
198+
@extend %x-truncate--one-line;
199+
}
200+
201+
202+
203+
/* Font Alignment */
204+
/* NOTE: If font has different internal baseline per weight, use these */
205+
/* FAQ: "Benton Sans" needs this solution (as of 2021-07) */
206+
207+
/* NOTE: This assumes key and value are flex items, not inline display */
208+
.c-data-list--is-horz:not(table) { align-items: baseline; }
209+
210+
/* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */
211+
/* CAVEAT: This causes <th> and <td> cell borders to be offset */
212+
table.c-data-list--is-horz tr { align-items: baseline; }
213+
214+
/* NOTE: This assumes key and value are inline display, not flex items */
215+
table.c-data-list--is-vert th.c-data-list__key,
216+
table.c-data-list--is-vert td.c-data-list__value { vertical-align: baseline; }

‎taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!-- D. Lists -->
2+
<article>
3+
<h4>Horizontal &amp; Wide &amp; Truncate Values</h4>
4+
<dl class="c-data-list
5+
c-data-list--is-horz
6+
c-data-list--is-wide
7+
c-data-list--should-truncate-values">
8+
<dt class="c-data-list__key">Name</dt>
9+
<dd class="c-data-list__value">King</dd>
10+
<dt class="c-data-list__key">Surname</dt>
11+
<dd class="c-data-list__value">Kong</dd>
12+
<dt class="c-data-list__key">Favorite Fruit</dt>
13+
<dd class="c-data-list__value">Banana</dd>
14+
</dl>
15+
</article>
16+
<article>
17+
<h4>Horizontal &amp; Narrow</h4>
18+
<dl class="c-data-list
19+
c-data-list--is-horz
20+
c-data-list--is-narrow">
21+
<dt class="c-data-list__key">Name</dt>
22+
<dd class="c-data-list__value">King</dd>
23+
<dt class="c-data-list__key">Surname</dt>
24+
<dd class="c-data-list__value">Kong</dd>
25+
<dt class="c-data-list__key">Favorite Fruit</dt>
26+
<dd class="c-data-list__value">Banana</dd>
27+
</dl>
28+
</article>
29+
<article>
30+
<h4>Vertical &amp; Wide</h4>
31+
<dl class="c-data-list
32+
c-data-list--is-vert
33+
c-data-list--is-wide">
34+
<dt class="c-data-list__key">Name</dt>
35+
<dd class="c-data-list__value">King</dd>
36+
<dt class="c-data-list__key">Surname</dt>
37+
<dd class="c-data-list__value">Kong</dd>
38+
<dt class="c-data-list__key">Favorite Fruit</dt>
39+
<dd class="c-data-list__value">Banana</dd>
40+
</dl>
41+
</article>
42+
<article>
43+
<h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
44+
<dl class="c-data-list
45+
c-data-list--is-vert
46+
c-data-list--is-narrow
47+
c-data-list--should-truncate-values">
48+
<dt class="c-data-list__key">Name</dt>
49+
<dd class="c-data-list__value">King</dd>
50+
<dt class="c-data-list__key">Surname</dt>
51+
<dd class="c-data-list__value">Kong</dd>
52+
<dt class="c-data-list__key">Favorite Fruit</dt>
53+
<dd class="c-data-list__value">Banana</dd>
54+
</dl>
55+
</article>
56+
57+
58+
59+
<!-- Tables -->
60+
<article>
61+
<h4>Horizontal &amp; Wide</h4>
62+
<table class="c-data-list
63+
c-data-list--is-horz
64+
c-data-list--is-wide">
65+
<tbody>
66+
<tr>
67+
<th class="c-data-list__key">Name</th>
68+
<td class="c-data-list__value">King</td>
69+
</tr>
70+
<tr>
71+
<th class="c-data-list__key">Surname</th>
72+
<td class="c-data-list__value">Kong</td>
73+
</tr>
74+
<tr>
75+
<th class="c-data-list__key">Favorite Fruit</th>
76+
<td class="c-data-list__value">Banana</td>
77+
</tr>
78+
</tbody>
79+
</table>
80+
</article>
81+
<article>
82+
<h4>Horizontal &amp; Narrow</h4>
83+
<table class="c-data-list
84+
c-data-list--is-horz
85+
c-data-list--is-narrow">
86+
<tbody>
87+
<tr>
88+
<th class="c-data-list__key">Name</th>
89+
<td class="c-data-list__value">King</td>
90+
</tr>
91+
<tr>
92+
<th class="c-data-list__key">Surname</th>
93+
<td class="c-data-list__value">Kong</td>
94+
</tr>
95+
<tr>
96+
<th class="c-data-list__key">Favorite Fruit</th>
97+
<td class="c-data-list__value">Banana</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
</article>
102+
<article>
103+
<h4>Vertical &amp; Wide &amp; Truncate Values</h4>
104+
<table class="c-data-list
105+
c-data-list--is-vert
106+
c-data-list--is-wide
107+
c-data-list--should-truncate-values">
108+
<tbody>
109+
<tr>
110+
<th class="c-data-list__key">Name</th>
111+
<td class="c-data-list__value">King</td>
112+
</tr>
113+
<tr>
114+
<th class="c-data-list__key">Surname</th>
115+
<td class="c-data-list__value">Kong</td>
116+
</tr>
117+
<tr>
118+
<th class="c-data-list__key">Favorite Fruit</th>
119+
<td class="c-data-list__value">Banana</td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
</article>
124+
<article>
125+
<h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
126+
<table class="c-data-list
127+
c-data-list--is-vert
128+
c-data-list--is-narrow
129+
c-data-list--should-truncate-values">
130+
<tbody>
131+
<tr>
132+
<th class="c-data-list__key">Name</th>
133+
<td class="c-data-list__value">King</td>
134+
</tr>
135+
<tr>
136+
<th class="c-data-list__key">Surname</th>
137+
<td class="c-data-list__value">Kong</td>
138+
</tr>
139+
<tr>
140+
<th class="c-data-list__key">Favorite Fruit</th>
141+
<td class="c-data-list__value">Banana</td>
142+
</tr>
143+
</tbody>
144+
</table>
145+
</article>

‎taccsite_cms/static/site_cms/css/src/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
/* COMPONENTS */
2828
/* GH-302: HELP: How should all of these become individually built files? */
2929
/* GH-302: FAQ: Individually built stylesheets could be loaded explicitely. */
30+
@import url("_imports/components/c-data-list.css");
3031
@import url("_imports/components/c-footer.css");
3132
@import url("_imports/components/c-see-all-link.css");
3233
@import url("_imports/components/django.cms.css");

0 commit comments

Comments
 (0)