diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css new file mode 100644 index 000000000..374ac3c97 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css @@ -0,0 +1,216 @@ +/* +Data List + +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. + +Features: +- Layout can be horizontal or vertical, wide or narrow. +- Narrow layouts have minimal spacing. Wide layouts have extra spacing. +- All layouts truncate keys. Some layouts truncate values. +- Table keys do not have colons. Other keys do have colons. + +Notices: +- User _should_ add arrangement and spacing modifiers. See Caveats #1. +- The _recommended_ markup is a description list (`
`) or a ``. + +Caveats: +1. With no modifiers added, the result is feature-limited vertical arrangement. +2. No provided repsonsive design solutions; users must apply their own. +3. Inflexible support for `
`s (flex and truncation in table is fragile). + - No protection from nesting caveats (whether is-wide or is-narrow takes precedence when one is nested inside the other). + - Specific (yet semantic) markup is required to benefit from all features. + +.c-data-list--is-horz - (arrangement) A horizontal list +.c-data-list--is-vert - (arrangement) A vertical list +.c-data-list--is-narrow - (spacing) A list that has limited horizontal space +.c-data-list--is-wide - (spacing) A list that has ample horizontal space + +Markup: c-data-list.html + +Styleguide Components.DataList +*/ +@import url("_imports/tools/x-truncate.css"); + + + + + +/* Base i.e. Container */ + +table.c-data-list { + border-left: 0; + border-right: 0; +} + + + + + +/* Elements i.e. Children */ + +/* To truncate text */ +.c-data-list__key { + @extend %x-truncate--one-line; +} +@supports(text-overflow: ':') { + .c-data-list__key:not(th) { + --text-overflow: ':'; + } +} + +/* To add colon (non-tables) */ +.c-data-list__key:not(th)::after { + content: ':'; + display: inline; + padding-right: 0.25em; +} + +/* To add space (instead of colon) (tables) */ +th.c-data-list__key { + padding-right: 0.25em; +} + + + + +/* Modifiers i.e. Types */ +/* FAQ: The `:not(table)` selectors avoid nesting caveats by using `>` */ + + + +/* Horizontal */ + +.c-data-list--is-horz { + display: flex; + flex-direction: row; +} +dl.c-data-list--is-horz, +.c-data-list--is-horz dd.c-data-list__value { + margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */ +} + +/* To propogate flexbox layout so cells are flex items */ +table.c-data-list--is-horz tr, +table.c-data-list--is-horz tbody { + min-width: 0; + + display: flex; + flex-direction: row; +} + +/* To space out key and value (non-tables) */ +.c-data-list--is-horz:not(table).c-data-list--is-narrow + > .c-data-list__key ~ .c-data-list__key::before { + padding-left: 0.5em; + padding-right: 0.5em; +} +.c-data-list--is-horz:not(table).c-data-list--is-wide + > .c-data-list__key ~ .c-data-list__key::before { + padding-left: 1em; + padding-right: 1em; +} +/* To space out key and value (tables) */ +table.c-data-list--is-horz.c-data-list--is-narrow + tr:not(:first-child) th.c-data-list__key { + padding-left: 0.5em; +} +table.c-data-list--is-horz.c-data-list--is-narrow + td.c-data-list__value { + margin-right: 0.5em; /* use margin because text would show through padding */ +} +table.c-data-list--is-horz.c-data-list--is-wide + tr:not(:first-child) th.c-data-list__key { + padding-left: 1em; +} +table.c-data-list--is-horz.c-data-list--is-wide + td.c-data-list__value { + margin-right: 1em; /* use margin because text would show through padding */ +} + + + +/* Vertical */ + +table.c-data-list--is-vert { + width: 100%; + table-layout: fixed; +} + +/* To overwrite Bootstrap `_reboot.scss` */ +.c-data-list--is-vert:not(table) > .c-data-list__value { + margin-left: 0; +} + +/* To space out key and value (tables) */ +.c-data-list--is-vert:not(table).c-data-list--is-narrow > .c-data-list__value, +table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value { + padding-left: 0; +} +.c-data-list--is-vert:not(table).c-data-list--is-wide > .c-data-list__value, +table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value { + padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */ +} + + + + + +/* Edge Cases */ + + + +/* Element Borders */ + +/* To remove most borders (tables) */ +table.c-data-list--is-vert th.c-data-list__key, +td.c-data-list__value { + border-left: 0; + border-right: 0; +} +table.c-data-list--is-horz th.c-data-list__key, +table.c-data-list--is-horz td.c-data-list__value { + border-top: 0; + border-bottom: 0; +} + +/* To keep real border between key and value (tables) */ +/* CAVEAT: Certain fonts may limit border height (see "Font Alignment") */ +table.c-data-list--is-horz tr:first-child th.c-data-list__key { + border-left: 0; +} +table.c-data-list--is-horz th.c-data-list__key { + border-right: 0; +} + +/* To add fake border between key and value (non-tables) */ +.c-data-list--is-horz:not(table) + > .c-data-list__key ~ .c-data-list__key::before { + content: '|'; + display: inline-block; +} + + + +/* Truncate Values */ +/* FAQ: Truncate when doing is unlikely to almost entirely obscure text */ + +.c-data-list--should-truncate-values .c-data-list__value { + @extend %x-truncate--one-line; +} + + + +/* Font Alignment */ +/* NOTE: If font has different internal baseline per weight, use these */ +/* FAQ: "Benton Sans" needs this solution (as of 2021-07) */ + +/* NOTE: This assumes key and value are flex items, not inline display */ +.c-data-list--is-horz:not(table) { align-items: baseline; } + +/* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */ +/* CAVEAT: This causes
and cell borders to be offset */ +table.c-data-list--is-horz tr { align-items: baseline; } + +/* NOTE: This assumes key and value are inline display, not flex items */ +table.c-data-list--is-vert th.c-data-list__key, +table.c-data-list--is-vert td.c-data-list__value { vertical-align: baseline; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html new file mode 100644 index 000000000..dde6d6c5b --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html @@ -0,0 +1,145 @@ + +
+

Horizontal & Wide & Truncate Values

+
+
Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Horizontal & Narrow

+
+
Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Vertical & Wide

+
+
Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Vertical & Narrow & Truncate Values

+
+
Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+ + + + +
+

Horizontal & Wide

+ + + + + + + + + + + + + + + +
NameKing
SurnameKong
Favorite FruitBanana
+
+
+

Horizontal & Narrow

+ + + + + + + + + + + + + + + +
NameKing
SurnameKong
Favorite FruitBanana
+
+
+

Vertical & Wide & Truncate Values

+ + + + + + + + + + + + + + + +
NameKing
SurnameKong
Favorite FruitBanana
+
+
+

Vertical & Narrow & Truncate Values

+ + + + + + + + + + + + + + + +
NameKing
SurnameKong
Favorite FruitBanana
+
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css index fab7ea028..2355299de 100644 --- a/taccsite_cms/static/site_cms/css/src/site.css +++ b/taccsite_cms/static/site_cms/css/src/site.css @@ -27,6 +27,7 @@ /* COMPONENTS */ /* GH-302: HELP: How should all of these become individually built files? */ /* GH-302: FAQ: Individually built stylesheets could be loaded explicitely. */ +@import url("_imports/components/c-data-list.css"); @import url("_imports/components/c-footer.css"); @import url("_imports/components/django.cms.css"); @import url("_imports/components/django.cms.blog.css");