/* ========================================================================== NAVIGATION ========================================================================== */ /* Breadcrumb navigation links ========================================================================== */ .breadcrumbs { @include clearfix; margin: 0 auto; max-width: 100%; padding-left: 1em; padding-right: 1em; animation: $intro-transition; animation-delay: 0.3s; @include breakpoint($x-large) { max-width: $x-large; } ol { padding: 0; list-style: none; font-size: $type-size-6; @include breakpoint($large) { float: right; width: calc(100% - #{$right-sidebar-width-narrow}); } @include breakpoint($x-large) { width: calc(100% - #{$right-sidebar-width}); } } li { display: inline; } .current { font-weight: bold; } } /* Post pagination navigation links ========================================================================== */ .pagination { @include clearfix(); float: left; margin-top: 1em; padding-top: 1em; padding-bottom: 1.5em; width: 100%; ul { margin: 0; padding: 0; list-style-type: none; } li { display: block; float: left; margin-left: -1px; a { display: block; margin-bottom: 0.25em; padding: 0.5em 1em; font-size: 14px; font-weight: bold; line-height: 1.5; text-align: center; text-decoration: none; border-width: 1px; border-style: solid; border-radius: 0; &.disabled { pointer-events: none; cursor: not-allowed; } } &:first-child { margin-left: 0; a { border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; } } &:last-child { a { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; } } } /* next/previous buttons */ &--pager { display: block; padding: 0.5em 0em; font-size: $type-size-5; &.right { text-align: end; } } } .page__content + .pagination, .page__meta + .pagination, .page__share + .pagination, .page__comments + .pagination { margin-top: 2em; padding-top: 2em; border-top-width: 1px; border-top-style: solid; } /* Navigation list ========================================================================== */ .nav__list { margin-bottom: 1.5em; input[type="checkbox"], label { display: none; } @include breakpoint(max-width $large - 1px) { label { position: relative; display: inline-block; padding: 0.5em 2.5em 0.5em 1em; font-size: $type-size-6; font-weight: bold; border-width: 1px; border-style: solid; border-radius: $border-radius; z-index: 20; transition: 0.2s ease-out; cursor: pointer; &:before, &:after { content: ""; position: absolute; right: 1em; top: 1.25em; width: 0.75em; height: 0.125em; line-height: 1; transition: 0.2s ease-out; } &:after { transform: rotate(90deg); } } /* on hover show expand*/ label:hover:after { transform: rotate(90deg); } input:checked + label:hover:after { transform: rotate(0); } ul { margin-bottom: 1em; } a { display: block; padding: 0.25em 0; @include breakpoint($large) { padding-top: 0.125em; padding-bottom: 0.125em; } &:hover { text-decoration: underline; } } } } .nav__list .nav__items { margin: 0; font-size: 1.25rem; .active { margin-left: -0.5em; padding-left: 0.5em; padding-right: 0.5em; font-weight: bold; } @include breakpoint(max-width $large - 1px) { position: relative; max-height: 0; opacity: 0%; overflow: hidden; z-index: 10; transition: 0.3s ease-in-out; transform: translate(0, 10%); } } @include breakpoint(max-width $large - 1px) { .nav__list input:checked ~ .nav__items { transition: 0.5s ease-in-out; max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/ overflow: visible; opacity: 1; margin-top: 1em; transform: translate(0, 0); } } .nav__title { margin: 0; padding: 0.5rem 0.75rem; font-size: $type-size-5; font-weight: bold; } .nav__sub-title { display: block; margin: 0.5rem 0; padding: 0.25rem 0; font-size: $type-size-6; font-weight: bold; text-transform: uppercase; border-bottom-width: 1px; border-bottom-style: solid; } /* Table of contents navigation ========================================================================== */ .toc { border-width: 1px; border-style: solid; border-radius: $border-radius; box-shadow: $box-shadow; .nav__title { font-size: $type-size-6; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; } } .toc__menu { margin: 0; padding: 0; width: 100%; list-style: none; font-size: $type-size-6; @include breakpoint($large) { font-size: $type-size-7; } a { display: block; padding: 0.25rem 0.75rem; font-weight: bold; line-height: 1.5; border-bottom-width: 1px; border-bottom-style: solid; } li ul > li a { padding-left: 1.25rem; font-weight: normal; } li ul li ul > li a { padding-left: 1.75rem; } li ul li ul li ul > li a { padding-left: 2.25rem; } li ul li ul li ul li ul > li a { padding-left: 2.75rem; } li ul li ul li ul li ul li ul > li a { padding-left: 3.25rem } }