@tacc/core-styles 0.5.1

package/source/_imports/components/c-image-map.structure.css

@@ -0,0 +1,285 @@
+/* PROPERTIES */
+
+.c-image-map {
+  --button-shape-size: 50px;
+  --toggle-shape-size: 60px;
+  --caption-width: 100%;
+}
+.c-image-map--has-caption-toggle-alignment {
+  --caption-toggle-offset-horz: 0px;
+  --caption-toggle-offset-vert: calc( ( var(--toggle-shape-size) / 2 ) + 1em );
+}
+
+
+
+/* ROOT */
+
+/* Shrink-wrap component */
+.c-image-map {
+  display: table;
+}
+/* On narrow viewport, center the widget */
+@media only screen and (max-width: 991px) {
+  .c-image-map { margin: 0 auto; }
+}
+
+/* Set dynamic image size */
+/* FAQ: Organized under "ROOT" only because it defines size of entire widget */
+.c-image-map__image {
+  /* FAQ: Removes inline whitespace between container and image */
+  display: block;
+  /* Stretch component */
+  width: 100%;
+  /* Prevent image from growing larger than native size */
+  max-width: 495px;
+}
+
+
+
+/* ELEMENTS */
+
+
+/* Item */
+
+.c-image-map__item {
+  width: 100%;
+}
+
+
+/* Captions */
+
+.c-image-map__item-caption {
+  width: var(--caption-width);
+}
+
+
+/* Close Buttons */
+
+/* On wide viewport, hide close button */
+@media only screen and (min-width: 992px) {
+  .c-image-map__item-close {
+    display: none !important; /* overwrite `display: flex` */
+  }
+}
+
+
+/* Toggles */
+
+.c-image-map__item-toggle {
+  width: var(--toggle-shape-size);
+  height: var(--toggle-shape-size);
+
+  /* Set transform origin to horizontal center */
+  margin-top: calc( -1 * var(--toggle-shape-size) / 2 );
+  margin-left: calc( -1 * var(--toggle-shape-size) / 2 );
+}
+
+
+/* Toggles & Captions */
+
+/* Toggles & Captions: Position Anchors */
+
+/* Anchor child elements */
+.c-image-map {
+  position: relative;
+}
+/* Prepare to position toggle horz. (directly) and vert. (via item) */
+.c-image-map:not(.c-image-map--should-position-items) .c-image-map__item {
+  position: relative;
+}
+/* Position and size items over image */
+.c-image-map:not(.c-image-map--should-position-items) .c-image-map__items {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+/* Allow relative alignment (x-axis, y-axis) and layering (z-axis) */
+.c-image-map__item-caption {
+  position: relative;
+}
+
+/* Toggles & Captions: UX */
+
+/* Toggles & Captions: UX: Cursors */
+
+/* On narrow viewport, suggest toggles' click action to users */
+@media only screen and (max-width: 991px) {
+  .c-image-map__item-toggle {
+    cursor: pointer;
+  }
+}
+
+/* Toggles & Captions: UX: Hide/Show Captions */
+
+/* Hide captions by default */
+.c-image-map__item-toggle ~ .c-image-map__item-caption {
+  visibility: hidden;
+}
+/* Show the description on item click or focus or target */
+/* FAQ: A click provides focus on focusable items */
+/*
+/* Click on item toggle should SHOW caption */
+.c-image-map__item-toggle:focus ~ .c-image-map__item-caption,
+/* Click on item caption should NOT HIDE caption */
+.c-image-map__item:focus-within .c-image-map__item-caption,
+/* Click on another item caption should HIDE caption of target item */
+/* CAVEAT: Without focus on any other item, caption of target item is shown */
+.c-image-map:not(:focus-within) .c-image-map__item:target .c-image-map__item-caption {
+  visibility: visible;
+}
+/* On wide viewport, always show captions */
+@media only screen and (min-width: 992px) {
+  .c-image-map__item-caption {
+    visibility: visible !important; /* overwrite `.c-image-map__item-toggle… .c-image-map__item-caption` */
+  }
+}
+
+
+/* Toggles & Close Buttons */
+
+/* Toggle and close markup should suggest clickability */
+button.c-image-map__item-toggle:hover,
+button.c-image-map__item-close:hover {
+  cursor: pointer;
+}
+/* As a link, toggle and close should not look like default links */
+a.c-image-map__item-toggle:hover,
+a.c-image-map__item-close:hover {
+  text-decoration: none;
+}
+/* As a button, toggle and close should not look like default buttons */
+button.c-image-map__item-toggle,
+button.c-image-map__item-close {
+  border: none;
+}
+
+
+/* Toggles, Counters, & Close Buttons */
+
+.c-image-map__item-toggle,
+.c-image-map--has-item-counters .c-image-map__item::before,
+.c-image-map__item-close {
+  /* Align any text vertically and horizontally */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+/* MODIFIERS */
+
+
+/* Position Items */
+
+/* Prepare to position toggle horz. (directly) and vert. (via item) */
+.c-image-map--should-position-items .c-image-map__item,
+.c-image-map--should-position-items .c-image-map__item-toggle {
+  position: absolute;
+}
+/* IMPORTANT: Define these per instance. Key:
+    - `unique-instance--item…` is a `c-image-map__item`
+    - `top` is the vertical y position of the item & toggle
+    - `left` is the horizontal x position of the item & toggle */
+/*
+#unique-instance--item_1_name                            { top: 10% }
+#unique-instance--item_1_name .c-image-map__item-toggle { left: 5%; }
+
+#unique-instance--item_2_name                            { top: 20% }
+#unique-instance--item_2_name .c-image-map__item-toggle { left: 5%; }
+
+#unique-instance--item_3_name                            { top: 30% }
+#unique-instance--item_3_name .c-image-map__item-toggle { left: 5%; }
+
+#unique-instance--item_4_name                             { top: 40% }
+#unique-instance--item_4_name .c-image-map__item-toggle { left: 5%; }
+
+#unique-instance--item_5_name                            { top: 50% }
+#unique-instance--item_5_name .c-image-map__item-toggle { left: 5%; }
+*/
+
+
+/* Toggle Counters */
+
+/* Assign numbers to markers */
+.c-image-map--has-toggle-counters {
+  counter-reset: items;
+}
+.c-image-map--has-toggle-counters .c-image-map__item {
+  counter-increment: items;
+}
+.c-image-map--has-toggle-counters .c-image-map__item-toggle::before {
+  content: counter(items);
+}
+
+
+/* Item Counters */
+
+/* Assign numbers to markers */
+.c-image-map--has-item-counters {
+  counter-reset: items;
+}
+.c-image-map--has-item-counters .c-image-map__item {
+  counter-increment: items;
+}
+.c-image-map--has-item-counters .c-image-map__item::before {
+  content: counter(items);
+}
+
+/* On narrow viewport, hide counters for all items */
+@media only screen and (max-width: 991px) {
+  .c-image-map--has-item-counters .c-image-map__item::before {
+    display: none;
+  }
+}
+/* On narrow viewport, hide counters for unmapped items */
+.c-image-map--has-item-counters .c-image-map__item--unmapped::before {
+  display: none;
+}
+
+
+/* Caption-Toggle Alignment */
+
+/* Fix scroll position for toggle anchor links to item */
+.c-image-map--has-caption-toggle-alignment .c-image-map__item {
+  scroll-snap-align: start;
+  scroll-margin: var(--caption-toggle-offset-vert);
+}
+
+/* Align caption far left, but still aligned vertically with toggle */
+.c-image-map--has-caption-toggle-alignment .c-image-map__item-caption {
+  left: var(--caption-toggle-offset-horz);
+}
+
+/* On narrow screen, move toggles of unmapped items to center of widget */
+@media only screen and (max-width: 991px) {
+  .c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle {
+    left: 50% !important; /* overwrite item ID selector */
+  }
+}
+/* On wide screen, move toggles of unmapped items to top-right of caption */
+@media only screen and (min-width: 992px) {
+  .c-image-map--has-caption-toggle-alignment .c-image-map__item--unmapped .c-image-map__item-toggle {
+    left: calc( var(--caption-toggle-offset-horz) + var(--caption-width) ) !important; /* overwrite item ID */
+  }
+}
+
+/* On narrow viewport, set caption atop (z-axis) toggles below it (y-axis) */
+@media only screen and (max-width: 991px) {
+  .c-image-map--has-caption-toggle-alignment .c-image-map__item-caption {
+    /* Layer caption above toggle */
+    z-index: 1;
+
+    /* Position caption below toggle */
+    margin-top: var(--caption-toggle-offset-vert);
+  }
+}
+/* On wide viewport, set toggle atop (z-axis) its own caption (if nearby) */
+/* FAQ: An `.c-image-map__item--unmapped` places caption near toggle */
+@media only screen and (min-width: 992px) {
+  .c-image-map--has-caption-toggle-alignment .c-image-map__item-toggle {
+    /* Layer toggle above caption */
+    z-index: 1;
+  }
+}

package/source/_imports/components/c-nav.css

@@ -0,0 +1,164 @@
+/*
+Nav
+
+Navigation links that flows inline on narrow screens.
+
+To enforce appropriate semantic HTML, a `<nav>` is required.
+
+For list-like navigation, use `<ul>` or `<ol>` (with children `<li>`). Inside this kind of nav, markup whitespace is __not__ rendered.
+
+To support a navigation not as a list and with direct `<a>` children, add class `c-nav--no-list`. Inside this kind of nav, markup whitespace __is__ rendered.﹡
+
+﹡ To remove whitespace with CSS would break or complicate font-size cascade.
+
+- c-nav--boxed - Surrounded by a box
+
+Markup: c-nav.html
+
+Styleguide Components.Nav
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+
+
+/* Block */
+
+nav.c-nav {
+  --link-padding: 0.5em;
+}
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifiers: Boxed */
+
+nav.c-nav--boxed {
+  --indent-small: calc(var(--global-space--list-indent) / 4);
+  --indent-medium: calc(var(--global-space--list-indent) / 2);
+  --indent-large: var(--global-space--list-indent);
+
+  width: fit-content;
+
+  border: var(--global-border--normal);
+}
+
+/* any list */
+nav.c-nav--boxed :is(ul,ol) {
+  margin: 0;
+}
+
+/* Modifiers: Boxed: Padding */
+
+/* unordered list */
+nav.c-nav--boxed ul {
+  list-style-type: none; /* to remove bullets (must then reduce padding left) */
+  padding-left: var(--indent-medium);
+  padding-right: var(--indent-large);
+}
+
+/* wide screen */
+@media (--medium-and-above) {
+  nav.c-nav--boxed {
+    /* Normal vertical padding */
+    padding-block: var(--indent-medium);
+  }
+
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (wide screen) need large padding (so keep it) */
+    padding-left: var(--indent-large);
+    padding-right: calc( var(--indent-large) - var(--link-padding) );
+  }
+}
+
+/* narrow screen */
+@media (--medium-and-below) {
+  nav.c-nav--boxed {
+    /* Reduced vertical padding because of narrow screen link line-height */
+    padding-block: var(--indent-small);
+  }
+
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (narrow screen) don't need large padding left */
+    padding-left: calc( var(--indent-medium) - var(--link-padding) );
+    padding-right: calc( var(--indent-large) - var(--link-padding) );
+  }
+}
+
+/* no list */
+nav.c-nav--boxed.c-nav--no-list {
+  /* Has no bullets, thus smaller padding left */
+  padding-left: var(--indent-medium);
+  padding-right: var(--indent-large);
+}
+
+
+
+/* Modifiers: No List */
+
+/* This is not a true modifier. It is required to support certain markup. */
+/* SEE: stylesheet docblock, "no list" comments, `...--no-list` selectors */
+
+
+
+
+
+/* Elements */
+
+
+
+nav.c-nav {
+  --space-between-inline-items: 0.5em;
+}
+nav.c-nav a {
+  display: inline-block; /* to let line-height define clickable area */
+  padding-inline: var(--link-padding);
+}
+
+/* no list */
+nav.c-nav--no-list {
+  display: flex; /* to remove whitespace between items */
+  flex-wrap: wrap;
+}
+nav.c-nav--no-list > a {
+  /* To space items via margin (use `-right` to not increase left indent) */
+  margin-right: var(--space-between-inline-items);
+}
+
+
+
+/* Elements: Narrow Screen */
+
+@media (--medium-and-below) {
+
+  nav.c-nav a {
+    line-height: 2.5;
+  }
+
+  /* any list */
+  nav.c-nav :is(ul,ol) {
+    display: flex;
+    flex-wrap: wrap;
+
+    /* To prevent overlap of any lists' decorators (when items are inline) */
+    list-style-position: inside;
+  }
+  nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)) {
+    /* To remove padding because list decorators are `...position: inside` */
+    padding-left: unset;
+  }
+  nav.c-nav :is(ul,ol) li {
+    /* To space items via margin (use `-right` to not increase left indent) */
+    margin-right: var(--space-between-inline-items);
+  }
+
+  /* unordered list */
+  nav.c-nav ul { list-style-type: none; }
+
+}

package/source/_imports/components/c-nav.html

@@ -0,0 +1,45 @@
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+
+<h3>Unordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ul>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ul>
+</nav>
+
+<h3>Ordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ol>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ol>
+</nav>
+
+<h3>No List</h3>
+<p>(requires <code>c-nav--no-list</code>)</p>
+<nav class="c-nav c-nav--no-list {{modifier_class}} {{ html }}">
+  <a href="#alabama">Alabama</a>
+  <a href="#alaska">Alaska</a>
+  <a href="#arizona">Arizona</a>
+  <a href="#arkansas">Arkansas</a>
+  <a href="#california">California</a>
+  <a href="#colorado">Colorado</a>
+  <a href="#connecticut">Connecticut</a>
+  <a href="#deleware">Delware</a>
+  <a href="#florida">Florida</a>
+</nav>

package/source/_imports/components/c-page.css

@@ -0,0 +1,95 @@
+/*
+Pagination
+
+A navigation list of sequential page toggles with end cap links.
+
+Markup: c-page.html
+
+Styleguide Components.Pagination
+*/
+
+
+
+/* Pagination: Variables */
+
+.c-page-list {
+  --item-width: 2em;
+  --item-buffer: 3px;
+  --item-border: var(--global-border-width--normal); /* WARNING: assumption */
+}
+
+
+
+/* Pagination: List */
+
+.c-page-list {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  list-style: none;
+
+  font-size: 14px; /* TEMPORARY: Should be 14px and have commented rem value */
+}
+ul.c-page-list {
+  list-style: none;
+}
+
+/* Pagination: List: Constant Hover */
+
+.c-page-link--always-click {
+  position: relative;
+  box-sizing: content-box;
+}
+.c-page-link--always-click::before,
+.c-page-link--always-click::after {
+  --width: var(--item-buffer);
+  --vert-offset: calc( -1 * var(--item-border) );
+  --horz-offset: calc( 100% + var(--item-border) );
+
+  content: '';
+  width: var(--width);
+  position: absolute;
+  top: var(--vert-offset);
+  bottom: var(--vert-offset);
+}
+.c-page-link--always-click.c-button {
+  overflow: visible; /* overwrite `.c-button` so pseudo elements show */
+}
+.c-page-link--always-click::before { right: var(--horz-offset) }
+.c-page-link--always-click::after { left: var(--horz-offset) }
+
+
+
+
+
+/* Pagination: Item */
+
+.c-page-item              { margin-inline: var(--item-buffer) }
+.c-page-item:first-child  { margin-left: 0 }
+.c-page-item:last-child   { margin-right: 0 }
+
+/* Pagination: Item: Truncated */
+
+.c-page-item--etcetera {
+  min-width: var(--item-width);
+  margin-inline: 2px;
+  text-align: center;
+
+  cursor: default;
+}
+
+
+
+/* Pagination: End */
+
+.c-page-end { padding: 4px 12px }
+
+
+
+/* Pagination: Link */
+
+.c-page-link {
+  padding: 5px 0;
+  min-width: var(--item-width);
+  line-height: 1.2;
+}