-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
2 changed files
with
183 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
/* | ||
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"); | ||
|
||
|
||
|
||
|
||
|
||
/* Modifiers */ | ||
|
||
|
||
|
||
/* Modifiers: Boxed */ | ||
|
||
nav.c-nav--boxed { | ||
--small-indent: calc(var(--global-space--list-indent) / 2); | ||
--large-indent: var(--global-space--list-indent); | ||
|
||
width: fit-content; | ||
padding-block: var(--small-indent); | ||
|
||
border: var(--global-border--normal); | ||
|
||
line-height: 2em; | ||
} | ||
|
||
/* 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(--small-indent); /* overwrite `html-elements.css` */ | ||
padding-right: var(--large-indent); | ||
} | ||
|
||
/* ordered list (wide) */ | ||
@media (--narrow-and-above) { | ||
nav.c-nav--boxed ol { | ||
/* We retain bullets, which (wide screen) need large padding (so keep it) */ | ||
/* padding-left: var(--large-indent); *//* comes from `html-elements.css` */ | ||
padding-right: var(--large-indent); | ||
} | ||
} | ||
/* ordered list (narrow) */ | ||
@media (--narrow-and-below) { | ||
nav.c-nav--boxed ol { | ||
/* We retain bullets, which (narrow screen) don't need large padding left */ | ||
padding-left: var(--small-indent); /* overwrite `html-elements.css` */ | ||
padding-right: var(--large-indent); | ||
} | ||
} | ||
|
||
/* no list */ | ||
nav.c-nav--boxed.c-nav--no-list { | ||
/* Has no bullets, thus smaller padding left */ | ||
padding-left: var(--small-indent); | ||
padding-right: var(--large-indent); | ||
} | ||
|
||
|
||
|
||
/* 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 */ | ||
|
||
|
||
|
||
|
||
|
||
/* Content */ | ||
|
||
|
||
|
||
nav.c-nav { | ||
--space-between-inline-items: 0.5em; | ||
} | ||
|
||
/* no list */ | ||
nav.c-nav--no-list > a { | ||
display: inline-block; | ||
|
||
/* To space content via margin (must then be re-aligned with container) */ | ||
margin-left: var(--space-between-inline-items); | ||
/* To re-align content to container (after they were spaced via margin) */ | ||
transform: translateX(calc(-1 * var(--space-between-inline-items))); | ||
} | ||
|
||
|
||
|
||
/* Content: Narrow Screen */ | ||
|
||
@media (--narrow-and-below) { | ||
|
||
/* 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 content via margin (must then be re-aligned with container) */ | ||
margin-left: var(--space-between-inline-items); | ||
/* To re-align content to container (after they were spaced via margin) */ | ||
transform: translateX(calc(-1 * var(--space-between-inline-items))); | ||
} | ||
|
||
/* unordered list */ | ||
nav.c-nav ul { list-style-type: none; } | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |