Commit fa95efee authored by Dan Allen's avatar Dan Allen

merge !83

rename CSS classes and add more CSS variables
parents cc8d5ead 781cb319
:root {
--color-text: #222;
--color-navbar-bg: #0a0a0a;
--color-navbar-bg-focus: #000;
--color-navbar-text: #fff;
}
html,
body {
height: 100%;
......
@media screen and (min-width: 1024px) {
.body {
display: flex;
}
}
.crumbs {
.breadcrumbs {
display: none;
flex: 1 1;
padding: 0 0.5rem 0 0.75rem;
......@@ -7,16 +7,16 @@
}
@media screen and (min-width: 1024px) {
.crumbs {
.breadcrumbs {
display: block;
}
}
a + .crumbs {
a + .breadcrumbs {
padding-left: 0.05rem;
}
.crumbs ul {
.breadcrumbs ul {
display: flex;
flex-wrap: wrap;
margin: 0;
......@@ -24,16 +24,16 @@ a + .crumbs {
list-style: none;
}
.crumbs li {
.breadcrumbs li {
display: inline;
margin: 0;
}
.crumbs li::after {
.breadcrumbs li::after {
content: "/";
padding: 0 0.5rem;
}
.crumbs li:last-of-type::after {
.breadcrumbs li:last-of-type::after {
content: none;
}
.doc {
margin: 0 auto;
max-width: 40rem;
max-width: var(--width-doc-mobile);
padding: 0 1rem 4rem;
color: #333;
}
......@@ -8,7 +8,7 @@
@media screen and (min-width: 1024px) {
.doc {
margin: 0 2rem;
max-width: 54rem;
max-width: var(--width-doc);
}
}
......
:root {
--navbar-height: 3.25rem;
}
html.is-clipped--navbar {
overflow-y: hidden;
}
body {
padding-top: var(--navbar-height);
padding-top: var(--height-navbar);
}
.navbar {
background-color: var(--color-navbar-bg);
color: var(--color-navbar-text);
font-size: 0.83333rem;
height: var(--navbar-height);
height: var(--height-navbar);
position: fixed;
top: 0;
width: 100%;
word-wrap: break-word;
z-index: 3;
z-index: var(--z-index-navbar);
}
.navbar a {
......@@ -62,7 +58,7 @@ body {
align-items: stretch;
display: flex;
flex-shrink: 0;
height: var(--navbar-height);
height: var(--height-navbar);
}
.navbar-burger {
......@@ -72,9 +68,9 @@ body {
outline: none;
cursor: pointer;
display: block;
height: var(--navbar-height);
height: var(--height-navbar);
position: relative;
/* width: var(--navbar-height); */
/* width: var(--height-navbar); */
width: 2.75rem;
margin-left: auto;
padding: 0;
......@@ -184,7 +180,7 @@ body {
.navbar-menu.is-active {
display: block;
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
max-height: calc(100vh - var(--navbar-height));
max-height: var(--height-nav);
overflow-y: auto;
}
......
@media screen and (min-width: 1024px) {
.body {
display: flex;
}
main {
flex: auto;
/* min-width: 0 required for flexbox to constrain overflowing elements */
......
.nav-container {
display: none;
position: fixed;
top: var(--height-navbar);
left: 0;
width: 100%;
font-size: 0.9375rem;
z-index: var(--z-index-nav);
}
.nav-container.is-active {
display: block;
}
@media screen and (min-width: 769px) {
.nav-container {
width: var(--width-nav);
font-size: 0.875rem;
}
}
@media screen and (min-width: 1024px) {
.nav-container {
font-size: 0.8125rem;
flex: none;
display: block;
position: static;
top: 0;
}
}
.nav {
background-color: #fafafa;
position: relative;
top: var(--height-toolbar);
height: var(--height-nav-mobile);
}
@media screen and (min-width: 769px) {
.nav {
box-shadow: 0.5px 0 3px #c1c1c1;
}
}
@media screen and (min-width: 1024px) {
.nav {
top: var(--height-navbar);
box-shadow: none;
position: sticky;
height: var(--height-nav);
}
}
.nav .panels {
display: flex;
flex-direction: column;
height: inherit;
}
html.is-clipped--nav {
overflow-y: hidden;
}
.navigation-menu {
.nav-panel-menu {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
/* help Chrome calculate the height correctly; must match .navigation value minus height of drawer */
height: calc(100vh - var(--navbar-height) - var(--toolbar-height) - var(--drawer-height));
/* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
height: var(--height-nav-panel-mobile);
}
@media screen and (min-width: 1024px) {
.navigation-menu {
height: calc(100vh - var(--navbar-height) - var(--drawer-height));
.nav-panel-menu {
height: var(--height-nav-panel);
}
}
.navigation-menu:not(.is-active) {
.nav-panel-menu:not(.is-active) {
display: none;
}
.navigation-menu::-webkit-scrollbar {
.nav-panel-menu::-webkit-scrollbar {
width: 0.25rem;
}
.navigation-menu::-webkit-scrollbar-thumb {
.nav-panel-menu::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}
......@@ -66,7 +125,7 @@ html.is-clipped--nav {
}
/* adds some breathing room below a nested list */
.nav-toggle ~ .nav-list {
.nav-item-toggle ~ .nav-list {
padding-bottom: 0.125rem;
}
......@@ -80,7 +139,7 @@ html.is-clipped--nav {
display: none;
}
.nav-toggle {
.nav-item-toggle {
background: transparent url(../img/caret.svg) no-repeat center;
background-size: 55%;
border: none;
......@@ -92,11 +151,11 @@ html.is-clipped--nav {
margin-left: -1.5em;
}
.nav-toggle::-moz-focus-inner {
.nav-item-toggle::-moz-focus-inner {
border: none;
}
.nav-item.is-active > .nav-toggle {
.nav-item.is-active > .nav-item-toggle {
transform: rotate(90deg);
}
......@@ -104,3 +163,107 @@ html.is-clipped--nav {
.is-current-page > .nav-text {
font-weight: 500;
}
.nav-panel-explore {
display: flex;
flex-direction: column;
}
.nav-panel-explore.is-active {
height: inherit;
}
.nav-panel-explore .context {
flex-shrink: 0;
color: #5d5d5d;
background-color: #fafafa;
box-shadow: 0 -1px 0 #e1e1e1;
padding: 0 0.25rem 0 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
line-height: 1;
font-size: 0.8125rem;
height: var(--height-drawer);
}
@media screen and (min-width: 1024px) {
.nav-panel-explore .context {
font-size: 0.75rem;
}
}
.nav-panel-explore.is-active .context {
box-shadow: 0 1px 0 #e1e1e1;
}
.nav-panel-explore .context .version {
background-image: url(../img/chevron.svg);
background-repeat: no-repeat;
background-position: right 0.5rem top 50%;
background-size: auto 0.75em;
padding: 0 1.5rem 0 0;
}
.nav-panel-explore .components {
flex-grow: 1;
box-shadow: inset 0 1px 5px #e1e1e1;
background-color: #f0f0f0;
padding: 0.5rem;
margin: 0;
overflow-y: auto;
max-height: 100%;
display: block;
}
.nav-panel-explore:not(.is-active) .components {
display: none;
}
.nav-panel-explore .component {
display: block;
}
.nav-panel-explore .component + .component {
margin-top: 0.5rem;
}
.nav-panel-explore .component .title {
font-weight: 500;
}
.nav-panel-explore .versions {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0.5rem;
}
.nav-panel-explore .component .version {
display: block;
font-size: 0.9375em;
}
.nav-panel-explore .component .version a {
border: 1px solid #b0b0b0;
border-radius: 0.25em;
color: #4a4a4a;
white-space: nowrap;
padding: 0.05em 0.25em 0;
}
.nav-panel-explore .component .is-current a {
border-color: #4a4a4a;
font-weight: 500;
}
/*
.nav-panel-explore .component .is-latest a::after {
content: " (latest)";
}
*/
.nav-panel-explore .component .version + .version {
padding-left: 0.375em;
}
.navigation-explore {
display: flex;
flex-direction: column;
}
.navigation-explore.is-active {
height: inherit;
}
.navigation-explore .context {
flex-shrink: 0;
color: #5d5d5d;
background-color: #fafafa;
box-shadow: 0 -1px 0 #e1e1e1;
padding: 0 0.25rem 0 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
line-height: 1;
font-size: 0.8125rem;
height: var(--drawer-height);
}
@media screen and (min-width: 1024px) {
.navigation-explore .context {
font-size: 0.75rem;
}
}
.navigation-explore.is-active .context {
box-shadow: 0 1px 0 #e1e1e1;
}
.navigation-explore .context .version {
background-image: url(../img/chevron.svg);
background-repeat: no-repeat;
background-position: right 0.5rem top 50%;
background-size: auto 0.75em;
padding: 0 1.5rem 0 0;
}
.navigation-explore .components {
flex-grow: 1;
box-shadow: inset 0 1px 5px #e1e1e1;
background-color: #f0f0f0;
padding: 0.5rem;
margin: 0;
overflow-y: auto;
max-height: 100%;
display: block;
}
.navigation-explore:not(.is-active) .components {
display: none;
}
.navigation-explore .component {
display: block;
}
.navigation-explore .component + .component {
margin-top: 0.5rem;
}
.navigation-explore .component .title {
font-weight: 500;
}
.navigation-explore .versions {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0.5rem;
}
.navigation-explore .component .version {
display: block;
font-size: 0.9375em;
}
.navigation-explore .component .version a {
border: 1px solid #b0b0b0;
border-radius: 0.25em;
color: #4a4a4a;
white-space: nowrap;
padding: 0.05em 0.25em 0;
}
.navigation-explore .component .is-current a {
border-color: #4a4a4a;
font-weight: 500;
}
/*
.navigation-explore .component .is-latest a::after {
content: " (latest)";
}
*/
.navigation-explore .component .version + .version {
padding-left: 0.375em;
}
:root {
--drawer-height: 2.5rem;
}
.navigation-container {
display: none;
position: fixed;
top: var(--navbar-height);
left: 0;
width: 100%;
font-size: 0.9375rem;
z-index: 1;
}
.navigation-container.is-active {
display: block;
}
@media screen and (min-width: 769px) {
.navigation-container {
width: 16rem;
font-size: 0.875rem;
}
}
@media screen and (min-width: 1024px) {
.navigation-container {
font-size: 0.8125rem;
flex: none;
display: block;
position: static;
top: 0;
}
}
.navigation {
background-color: #fafafa;
position: relative;
top: var(--toolbar-height);
height: calc(100vh - var(--navbar-height) - var(--toolbar-height));
}
@media screen and (min-width: 769px) {
.navigation {
box-shadow: 0.5px 0 3px #c1c1c1;
}
}
@media screen and (min-width: 1024px) {
.navigation {
top: var(--navbar-height);
box-shadow: none;
position: sticky;
height: calc(100vh - var(--navbar-height));
}
}
.navigation .panels {
display: flex;
flex-direction: column;
height: inherit;
}
......@@ -14,7 +14,7 @@
color: #333;
}
.page-versions .versions-menu-toggle {
.page-versions .version-menu-toggle {
color: inherit;
font-family: inherit;
font-size: inherit;
......@@ -26,14 +26,14 @@
cursor: pointer;
padding: 0.35rem 1.5rem 0.35rem 0.5rem;
position: relative;
z-index: 1;
z-index: var(--z-index-page-version-menu);
}
.page-versions .versions-menu-toggle::-moz-focus-inner {
.page-versions .version-menu-toggle::-moz-focus-inner {
border: none;
}
.page-versions .versions-menu {
.page-versions .version-menu {
border: 1px solid transparent;
background-color: #f0f0f0;
padding: 1.3rem 0.5rem 0.35rem;
......@@ -43,7 +43,7 @@
width: 100%;
}
.page-versions:not(.is-active) .versions-menu {
.page-versions:not(.is-active) .version-menu {
display: none;
}
......
......@@ -53,7 +53,7 @@
}
#topbar-nav,
.navigation-container,
.nav-container,
.toolbar {
display: none;
}
......
@import "typeface-roboto.css";
@import "typeface-roboto-mono.css";
@import "vars.css";
@import "base.css";
@import "body.css";
@import "nav.css";
@import "main.css";
@import "navigation.css";
@import "navigation-menu.css";
@import "navigation-explore.css";
@import "toolbar.css";
@import "breadcrumbs.css";
@import "page-versions.css";
......
:root {
--toolbar-height: 2.5rem;
}
.toolbar {
color: #5d5d5d;
align-items: center;
......@@ -9,11 +5,11 @@
box-shadow: 0 1px 0 #e1e1e1;
display: flex;
font-size: 0.75rem;
height: var(--toolbar-height);
height: var(--height-toolbar);
justify-content: flex-start;
position: sticky;
top: var(--navbar-height);
z-index: 1;
top: var(--height-navbar);
z-index: var(--z-index-toolbar);
}
.toolbar a,
......@@ -21,7 +17,7 @@
color: inherit;
}
.navigation-toggle {
.nav-toggle {
background: url(../img/menu.svg) no-repeat 50% 47.5%;
background-size: 49%;
border: none;
......@@ -34,17 +30,17 @@
margin-right: -0.25rem;
}
.navigation-toggle::-moz-focus-inner {
.nav-toggle::-moz-focus-inner {
border: none;
}
@media screen and (min-width: 1024px) {
.navigation-toggle {
.nav-toggle {
display: none;
}
}
.navigation-toggle.is-active {
.nav-toggle.is-active {
background-image: url(../img/back.svg);
background-size: 41.5%;
}
......
:root {
--color-text: #222;
--color-navbar-bg: #0a0a0a;
--color-navbar-bg-focus: #000;
--color-navbar-text: #fff;
--height-navbar: 3.25rem;
--height-drawer: 2.5rem;
--height-toolbar: 2.5rem;
--height-to-body: var(--height-navbar);
--height-min-body: calc(100vh - var(--height-to-body));
--height-nav: var(--height-min-body);
--height-nav-mobile: calc(var(--height-min-body) - var(--height-toolbar));
--height-nav-panel: calc(var(--height-nav) - var(--height-drawer));
--height-nav-panel-mobile: calc(var(--height-nav-mobile) - var(--height-drawer));
--width-nav: 16rem;
--width-doc: 54rem;
--width-doc-mobile: 40rem;
--z-index-nav: 1;
--z-index-toolbar: 2;
--z-index-page-version-menu: 3;
--z-index-navbar: 4;
}
;(function () {
'use strict'
var navContainer = document.querySelector('.navigation-container')
var navToggle = document.querySelector('.navigation-toggle')
var navContainer = document.querySelector('.nav-container')
var navToggle = document.querySelector('.nav-toggle')
navToggle.addEventListener('click', toggleNavigation)
// don't let click events propagate outside of navigation container
// don't let click events propagate outside of nav container
navContainer.addEventListener('click', concealEvent)
var menuPanel = navContainer.querySelector('[data-panel=menu]')
......@@ -21,7 +21,7 @@
navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
})
find('.nav-toggle', menuPanel).forEach(function (btn) {
find('.nav-item-toggle', menuPanel).forEach(function (btn) {
var li = btn.parentElement
btn.addEventListener('click', function () {
li.classList.toggle('is-active')
......
;(function () {
'use strict'
var toggle = document.querySelector('.page-versions .versions-menu-toggle')
var toggle = document.querySelector('.page-versions .version-menu-toggle')
if (!toggle) return
var selector = document.querySelector('.page-versions')
......
<nav class="crumbs" aria-label="breadcrumbs">
<nav class="breadcrumbs" aria-label="breadcrumbs">
{{#if page.breadcrumbs}}
<ul>
{{#with page.componentVersion}}
{{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
<li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
<li><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
{{/if}}
{{/with}}
{{#each page.breadcrumbs}}
<li class="crumb">
<li>
{{~#if (and ./url (eq ./urlType 'internal'))~}}
<a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
{{~else~}}
......
<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
<div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
{{#if page.component}}
<div class="context">
<span class="title">{{page.component.title}}</span>
......