@tacc/core-styles 0.6.0-beta.1 → 0.6.0

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 (81) hide show
  1. package/README.md +0 -1
  2. package/dist/all.css +2 -0
  3. package/dist/base.css +1 -0
  4. package/dist/branding_logos.css +1 -1
  5. package/dist/components/README.css +1 -1
  6. package/dist/components/bootstrap.container.css +1 -1
  7. package/dist/components/bootstrap.figure.css +1 -1
  8. package/dist/components/bootstrap.form.css +1 -1
  9. package/dist/components/bootstrap.modal.css +1 -1
  10. package/dist/components/bootstrap.pagination.css +1 -1
  11. package/dist/components/c-button/c-button.cms.css +2 -0
  12. package/dist/components/c-button/c-button.css +2 -0
  13. package/dist/components/c-button/c-button_cms.css +2 -0
  14. package/dist/components/c-button/c-button_docs.css +2 -0
  15. package/dist/components/c-button.css +1 -1
  16. package/dist/components/c-callout.css +1 -1
  17. package/dist/components/c-card.css +1 -1
  18. package/dist/components/c-data-list.css +1 -1
  19. package/dist/components/c-footer.css +1 -1
  20. package/dist/components/c-image-map.css +1 -1
  21. package/dist/components/c-image-map.skin.css +1 -1
  22. package/dist/components/c-image-map.structure.css +1 -1
  23. package/dist/components/c-nav.css +1 -1
  24. package/dist/components/c-page.css +1 -1
  25. package/dist/components/c-recognition.css +1 -1
  26. package/dist/components/c-see-all-link.css +1 -1
  27. package/dist/components/c-show-more.css +1 -1
  28. package/dist/components/cortal.icon.css +1 -1
  29. package/dist/components/cortal.icon.font.css +1 -1
  30. package/dist/elements/README.css +1 -1
  31. package/dist/elements/html-elements.css +2 -2
  32. package/dist/elements/tacc-search-bar.css +1 -1
  33. package/dist/generics/README.css +1 -1
  34. package/dist/objects/README.css +1 -1
  35. package/dist/objects/o-fixed-header-table.css +1 -1
  36. package/dist/objects/o-flex-item-table-wrap.css +1 -1
  37. package/dist/objects/o-grid.css +1 -1
  38. package/dist/objects/o-offset-content.css +1 -1
  39. package/dist/objects/o-section.css +2 -2
  40. package/dist/objects/o-site.css +1 -2
  41. package/dist/settings/README.css +1 -1
  42. package/dist/settings/border.css +1 -1
  43. package/dist/settings/color.cms.css +2 -0
  44. package/dist/settings/color.css +1 -1
  45. package/dist/settings/font.css +1 -1
  46. package/dist/settings/max-width.css +1 -1
  47. package/dist/settings/space.css +1 -1
  48. package/dist/tools/README.css +1 -1
  49. package/dist/tools/media-queries.css +1 -1
  50. package/dist/tools/x-article-link.css +1 -1
  51. package/dist/tools/x-center.css +1 -1
  52. package/dist/tools/x-fake-border.css +1 -1
  53. package/dist/tools/x-grid.css +1 -1
  54. package/dist/tools/x-layout.css +1 -1
  55. package/dist/tools/x-overlay.css +1 -1
  56. package/dist/tools/x-truncate.css +1 -1
  57. package/dist/trumps/README.css +1 -1
  58. package/dist/trumps/icon.css +1 -1
  59. package/dist/trumps/icon.fonts.css +1 -1
  60. package/dist/trumps/s-article-list.css +1 -1
  61. package/dist/trumps/s-article-preview.css +1 -1
  62. package/dist/trumps/s-blockquote.css +1 -1
  63. package/dist/trumps/s-breadcrumbs.css +1 -1
  64. package/dist/trumps/s-cms-nav.css +1 -1
  65. package/dist/trumps/s-document.css +1 -1
  66. package/dist/trumps/s-footer.css +1 -1
  67. package/dist/trumps/s-guide-doc.css +1 -1
  68. package/dist/trumps/s-header.css +1 -1
  69. package/dist/trumps/s-inline-dl.css +1 -1
  70. package/dist/trumps/s-portal-nav.css +1 -1
  71. package/dist/trumps/s-style-guide.css +1 -1
  72. package/dist/trumps/s-system-specs.css +1 -1
  73. package/dist/trumps/tacc-search-bar.css +1 -1
  74. package/dist/trumps/u-empty.css +1 -1
  75. package/dist/trumps/u-hide.css +1 -1
  76. package/dist/trumps/u-nested-text-content.css +1 -1
  77. package/package.json +1 -1
  78. package/src/lib/_imports/elements/html-elements.css +9 -2
  79. package/src/lib/_imports/objects/o-section.css +27 -12
  80. package/src/lib/_imports/objects/o-site.css +8 -12
  81. package/src/lib/_imports/objects/o-site.html +3 -3
package/src/lib/_imports/elements/html-elements.css CHANGED
@@ -58,8 +58,15 @@ Reference:
58
58
  Styleguide Elements.ContentSectioning
59
59
  */
60
60
 
61
- main {
62
- padding-bottom: var(--global-space--section-gap);
61
+ body > main {
62
+ margin-bottom: var(--global-space--section-gap);
63
+ }
64
+
65
+ /* To make a "sticky footer" */
66
+ /* https://css-tricks.com/a-clever-sticky-footer-technique/ */
67
+ body > main + footer {
68
+ position: sticky;
69
+ top: 100vh;
63
70
  }
64
71
 
65
72
  h1, h2, h3, h4, h5, h6 {
package/src/lib/_imports/objects/o-section.css CHANGED
@@ -44,7 +44,9 @@ Styleguide Objects.Section
44
44
 
45
45
  .o-section {
46
46
  /* GH-99: Use standard spacing value */
47
- padding-block: var(--global-space--section-gap); /* ~avg. from design docs */
47
+ --padding-block: var(--global-space--section-gap);
48
+
49
+ padding-block: var(--padding-block); /* ~avg. from design docs */
48
50
  }
49
51
  /* To distinguish nested sections */
50
52
  .o-section .o-section {
@@ -251,19 +253,32 @@ Styleguide Objects.Section
251
253
 
252
254
 
253
255
 
254
- /* Tricks: /* Children: Banner Image */
256
+ /* Tricks: Children: Banner Image */
255
257
  /* FP-1462: Extract to new banner component(s) */
256
258
 
257
- /* HACK: To hide vertical overflow by placing sibling sections atop */
258
- [class*="o-section--style"] { position: relative; }
259
+ /* To hide section overflow with minimal side effects */
260
+ /* FAQ: Use 'clip', not 'hidden' which can affect opposite 'overflow-' value */
259
261
  /* NOTE: This selector assumes only a banner section has vertical overflow */
260
- /* CAVEAT: Any banner pop-out el's can NOT overflow atop sibling sections */
261
- [class*="o-section--style"].o-section--banner { z-index: 0; }
262
- /* NOTE: A `z-index` > 0 is only necessary for sections before banner */
263
- /* CAVEAT: Any section pop-out el's can NOT overflow atop section after it */
264
- [class*="o-section--style"] { z-index: 1; }
265
-
266
- /* HACK: To hide `.o-section__banner-image` overflow */
262
+ /* CAVEAT: Any banner pop-out el's would NOT overflow atop sibling sections */
263
+ [class*="o-section--style"].o-section--banner {
264
+ /* To hide vert. overflow */
265
+ overflow-y: clip;
266
+ }
267
267
  main {
268
- overflow-x: clip; /* support position sticky on element in section */
268
+ /* To hide horz. overflow yet support any 'position: sticky' descendant */
269
+ overflow-x: clip;
270
+ }
271
+
272
+
273
+
274
+ /* Tricks: Modifers: Style */
275
+
276
+ /* To prevent visibly extra space beneath certain sections and footer */
277
+ /* FAQ: "extra space" is margin (from <main>) between section and <footer> */
278
+ /* FAQ: 'last-of-type' not 'last-child' cuz hidden elements */
279
+ main > .container.o-section--style-light:last-of-type,
280
+ main > .container > .o-section--style-light:last-of-type,
281
+ main > .container.o-section--style-dark:last-of-type,
282
+ main > .container > .o-section--style-dark:last-of-type {
283
+ margin-bottom: calc( -1 * var(--padding-block) );
269
284
  }
package/src/lib/_imports/objects/o-site.css CHANGED
@@ -10,17 +10,13 @@ Markup: o-site.html
10
10
  Styleguide Objects.Site
11
11
  */
12
12
 
13
- /* SEE: https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3 */
13
+ /* IDEA: Use or add grid solution */
14
+ /* https://github.com/DesignSafe-CI/portal/blob/215915c/designsafe/static/styles/main.css#L935 */
15
+
16
+ /*
14
17
  .o-site {
15
- display: flex;
16
- flex-direction: column;
17
- }
18
- .o-site__body {
19
- flex-grow: 1;
20
- flex-shrink: 0;
21
- flex-basis: auto;
22
- }
23
- .o-site__head,
24
- .o-site__foot {
25
- flex-shrink: 0;
18
+ display: grid;
19
+ height: 100vh;
20
+ grid-template-rows: auto 1fr auto;
26
21
  }
22
+ */
package/src/lib/_imports/objects/o-site.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <body class="o-site">
2
- <header class="o-site__head">Header</header>
3
- <main class="o-site__body">Content</main>
4
- <footer class="o-site__foot">Footer</footer>
2
+ <header>Header</header>
3
+ <main>Content</main>
4
+ <footer>Footer</footer>
5
5
  </body>