| /* ========================================================================== |
| NAVIGATION |
| ========================================================================== */ |
| |
| /* |
| Breadcrumb navigation links |
| ========================================================================== */ |
| |
| .breadcrumbs { |
| @include container; |
| @include clearfix; |
| margin-top: 0; |
| margin-bottom: 0; |
| padding-left: 2em; |
| padding-right: 2em; |
| font-family: $sans-serif; |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.30s; |
| animation-delay: 0.30s; |
| |
| @include breakpoint($large) { |
| padding-left: 1em; |
| padding-right: 1em; |
| } |
| |
| @include breakpoint($x-large) { |
| max-width: $x-large; |
| } |
| |
| ol { |
| padding: 0; |
| list-style: none; |
| font-size: $type-size-6; |
| |
| @include breakpoint($large) { |
| @include span(10 of 12 last); |
| } |
| |
| @include breakpoint($x-large) { |
| @include prefix(0.5 of 12); |
| } |
| } |
| |
| li { |
| display: inline; |
| } |
| |
| .current { |
| font-weight: bold; |
| } |
| } |
| |
| |
| /* |
| Post pagination navigation links |
| ========================================================================== */ |
| |
| .pagination { |
| @include full(); |
| @include clearfix(); |
| margin-top: 1em; |
| padding-top: 1em; |
| |
| ul { |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| font-family: $sans-serif; |
| } |
| |
| li { |
| display: block; |
| float: left; |
| margin-left: -1px; |
| |
| a { |
| display: block; |
| margin-bottom: 0.25em; |
| padding: 0.5em 1em; |
| font-family: $sans-serif; |
| font-size: 14px; |
| font-weight: bold; |
| line-height: 1.5; |
| text-align: center; |
| text-decoration: none; |
| color: mix(#fff, $gray, 25%); |
| border: 1px solid $light-gray; |
| border-radius: 0; |
| |
| &:hover { |
| color: $link-color-hover; |
| } |
| |
| &.current { |
| color: #fff; |
| background: $primary-color; |
| } |
| |
| &.disabled { |
| color: mix(#fff, $gray, 75%); |
| 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: 1em 2em; |
| float: left; |
| width: 50%; |
| font-family: $sans-serif; |
| font-size: $type-size-5; |
| font-weight: bold; |
| text-align: center; |
| text-decoration: none; |
| color: $link-color; |
| border: 1px solid $light-gray; |
| border-radius: $border-radius; |
| |
| &:hover { |
| color: $link-color-hover; |
| } |
| |
| &:first-child { |
| border-top-right-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
| |
| &:last-child { |
| margin-left: -1px; |
| border-top-left-radius: 0; |
| border-bottom-left-radius: 0; |
| } |
| |
| &.disabled { |
| color: mix(#fff, $gray, 75%); |
| pointer-events: none; |
| cursor: not-allowed; |
| } |
| } |
| } |
| |
| .page__content + .pagination, |
| .page__meta + .pagination, |
| .page__share + .pagination, |
| .page__comments + .pagination { |
| margin-top: 2em; |
| padding-top: 2em; |
| border-top: 1px solid $border-color; |
| } |
| |
| |
| /* |
| Priority plus navigation |
| ========================================================================== */ |
| |
| .greedy-nav { |
| position: relative; |
| display: -webkit-box; |
| display: flex; |
| -webkit-box-align: center; |
| align-items: center; |
| background: $masthead-background-color; |
| margin-top: 5px; |
| margin-bottom: 5px; |
| |
| .nav-lang { |
| margin-left: auto; |
| |
| a { |
| margin-left: 42px; |
| margin-right: 0; |
| font-weight: 400; |
| font-size: 16px; |
| color: white; |
| opacity: 1.0; |
| padding: 2px 10px; |
| border: 1px solid #ffffff; |
| border-radius: 38px; |
| |
| } |
| |
| &:hover { |
| font-weight: 500; |
| } |
| } |
| |
| @include breakpoint(max-width (400px)) { |
| .nav-lang { |
| a { |
| margin-left: 5px; |
| font-size: 14px; |
| } |
| } |
| } |
| |
| a { |
| display: block; |
| font-size: 16px; |
| margin-right: 2.08rem; |
| padding: 0 0; |
| color: white; |
| opacity: 0.6; |
| text-decoration: none; |
| font-weight: 400; |
| |
| &:hover { |
| color: white; |
| opacity: 1.0; |
| font-weight: 500; |
| } |
| |
| &.site-title { |
| margin-left: 0; |
| } |
| } |
| |
| a.active { |
| color: white; |
| opacity: 1.0; |
| font-weight: 500; |
| } |
| |
| button { |
| padding: 0 0.5rem; |
| align-self: stretch; |
| border: 0; |
| outline: none; |
| color: #fff; |
| background-color: $primary-color; |
| cursor: pointer; |
| } |
| |
| .visible-links { |
| display: -webkit-box; |
| display: flex; |
| -webkit-box-pack: end; |
| justify-content: flex-end; |
| -webkit-box-flex: 1; |
| flex: 1; |
| overflow: hidden; |
| |
| li { |
| -webkit-box-flex: 0; |
| flex: none; |
| |
| &:last-child { |
| a { |
| margin-right: 0; |
| } |
| } |
| } |
| |
| a { |
| position: relative; |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| height: 4px; |
| background: mix(#fff, $primary-color, 50%); |
| width: 100%; |
| -webkit-transition: $global-transition; |
| transition: $global-transition; |
| -webkit-transform: scaleX(0) translate3d(0, 0 , 0); |
| transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/ |
| } |
| |
| &:hover:before { |
| -webkit-transform: scaleX(1); |
| -ms-transform: scaleX(1); |
| transform: scaleX(1); /* reveal*/ |
| } |
| } |
| } |
| |
| .hidden-links { |
| position: absolute; |
| top: 100%; |
| right: 0; |
| margin-top: 15px; |
| padding: 5px; |
| border: 1px solid $border-color; |
| border-radius: $border-radius; |
| background: #fff; |
| box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); |
| |
| &.hidden { |
| display: none; |
| } |
| |
| a { |
| margin: 0; |
| padding: 10px 20px; |
| font-size: 16px; |
| color: $masthead-link-color; |
| |
| &:hover { |
| color: $masthead-link-color-hover; |
| background: mix(#fff, $info-color, 50%); |
| } |
| } |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| top: -11px; |
| right: 10px; |
| width: 0; |
| border-style: solid; |
| border-width: 0 10px 10px; |
| border-color: $border-color transparent; |
| display: block; |
| z-index: 0; |
| } |
| |
| &:after { |
| content: ""; |
| position: absolute; |
| top: -10px; |
| right: 10px; |
| width: 0; |
| border-style: solid; |
| border-width: 0 10px 10px; |
| border-color: #fff transparent; |
| display: block; |
| z-index: 1; |
| } |
| |
| li { |
| display: block; |
| border-bottom: 1px solid $border-color; |
| |
| &:last-child { |
| border-bottom: none; |
| } |
| } |
| } |
| } |
| |
| |
| /* |
| Navigation list |
| ========================================================================== */ |
| |
| .nav__list { |
| margin-bottom: 0em; |
| |
| input[type="checkbox"], |
| label { |
| display: none; |
| } |
| |
| @include breakpoint(max-width ($large - 1px)) { |
| background-color: #ffffff; |
| |
| label { |
| position: relative; |
| display: inline-block; |
| padding: 0.5em 2.5em 0.5em 1em; |
| color: #494e52; |
| font-size: 14px; |
| font-weight: bold; |
| border: 1px solid $light-gray; |
| border-radius: $border-radius; |
| z-index: 20; |
| -webkit-transition: 0.2s ease-out; |
| 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; |
| background-color: mix(#fff, #11a4ff, 50%); |
| -webkit-transition: 0.2s ease-out; |
| transition: 0.2s ease-out; |
| } |
| |
| &:after { |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| } |
| |
| &:hover { |
| color: #fff; |
| border-color: mix(#fff, #11a4ff, 50%); |
| background-color: mix(#fff, #11a4ff, 50%); |
| |
| &:before, |
| &:after { |
| background-color: #11a4ff; |
| } |
| } |
| } |
| |
| /* selected*/ |
| input:checked + label { |
| color: white; |
| background-color: mix(#fff, #11a4ff, 50%); |
| |
| &:before, |
| &:after { |
| background-color: #11a4ff; |
| } |
| } |
| |
| /* on hover show expand*/ |
| label:hover:after { |
| -webkit-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| transform: rotate(90deg); |
| } |
| |
| input:checked + label:hover:after { |
| -webkit-transform: rotate(0); |
| -ms-transform: rotate(0); |
| 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; |
| padding: 0 20px 20px 20px; |
| @include breakpoint(max-width ($large - 1px)) { |
| padding-bottom: 0; |
| } |
| |
| a { |
| color: inherit; |
| } |
| |
| .active { |
| margin-left: -0.5em; |
| padding-left: 0.5em; |
| padding-right: 0.5em; |
| color: #fff; |
| background: mix(#fff, #11a4ff, 50%); |
| border-radius: $border-radius; |
| |
| &:hover { |
| color: #fff; |
| } |
| } |
| |
| li a { |
| font-size: 14px; |
| line-height: 30px; |
| display: block; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| |
| &:hover { |
| overflow: visible; |
| white-space: normal; |
| height: auto; |
| } |
| } |
| |
| @include breakpoint(max-width ($large - 1px)) { |
| position: relative; |
| max-height: 0; |
| opacity: 0%; |
| overflow: hidden; |
| z-index: 10; |
| -webkit-transition: 0.3s ease-in-out; |
| transition: 0.3s ease-in-out; |
| -webkit-transform: translate(0, 10%); |
| -ms-transform: translate(0, 10%); |
| transform: translate(0, 10%); |
| } |
| |
| li ul { |
| padding-bottom: 20px; |
| border-bottom: 1px solid #e6e6e6; |
| } |
| } |
| |
| @include breakpoint(max-width ($large - 1px)) { |
| .nav__list input:checked ~ .nav__items { |
| -webkit-transition: 0.5s ease-in-out; |
| transition: 0.5s ease-in-out; |
| max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/ |
| overflow: visible; |
| opacity: 1; |
| margin-top: 1em; |
| -webkit-transform: translate(0, 0); |
| -ms-transform: translate(0, 0); |
| transform: translate(0, 0); |
| } |
| } |
| |
| .nav__title { |
| margin: 0; |
| padding: 0 1rem; |
| font-family: $sans-serif-narrow; |
| font-size: $type-size-5; |
| font-weight: bold; |
| } |
| |
| .nav__sub-title { |
| display: block; |
| overflow: hidden; |
| line-height: 19px; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| margin: 0; |
| padding: 20px 0 9px; |
| font-family: $sans-serif-narrow; |
| font-size: 16px; |
| color: #11a4ff; |
| font-weight: 500; |
| border-bottom: 1px solid $border-color; |
| text-decoration: none; |
| |
| &:hover { |
| height: auto; |
| overflow: visible; |
| white-space: normal; |
| } |
| } |
| |
| .nav__sub-title-with-url { |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| |
| /* |
| Table of contents navigation |
| ========================================================================== */ |
| |
| .toc { |
| font-family: $sans-serif-narrow; |
| color: $gray; |
| letter-spacing: 1px; |
| background-color: $lighter-gray; |
| border: 1px solid $gray; |
| border-radius: 6px; |
| |
| .nav__title { |
| color: #fff; |
| font-size: 12px; |
| background: $primary-color; |
| 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: 0.8rem; |
| |
| a { |
| display: block; |
| padding: 0.5rem 1rem; |
| color: $dark-gray; |
| font-weight: normal; |
| font-size: 0.85em; |
| } |
| |
| > li:last-child { |
| a { |
| border-bottom: none; |
| } |
| } |
| |
| li ul > li a { |
| padding-left: 2rem; |
| font-weight: normal; |
| } |
| |
| /* hide sub sub links on small screens*/ |
| li > ul li { |
| display: none; |
| |
| @include breakpoint($medium) { |
| display: block; |
| } |
| } |
| } |
