//// /// Copyright (c) 2016-2019 Martin Donath /// /// Permission is hereby granted, free of charge, to any person obtaining a /// copy of this software and associated documentation files (the "Software"), /// to deal in the Software without restriction, including without limitation /// the rights to use, copy, modify, merge, publish, distribute, sublicense, /// and/or sell copies of the Software, and to permit persons to whom the /// Software is furnished to do so, subject to the following conditions: /// /// The above copyright notice and this permission notice shall be included in /// all copies or substantial portions of the Software. /// /// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR /// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, /// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL /// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER /// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING /// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER /// DEALINGS //// // ---------------------------------------------------------------------------- // Variables // ---------------------------------------------------------------------------- // Active (toggled) drawer $md-toggle__drawer--checked: "[data-md-toggle=\"drawer\"]:checked ~"; // ---------------------------------------------------------------------------- // Rules: base grid and containers // ---------------------------------------------------------------------------- // Stretch container to viewport and set base font-size to 10px for simple // calculations base on relative ems (rems) html { min-height: 100%; // Hack: normally, we would set the base font-size to 62.5%, so we can base // all calculations on 10px, but Chromium and Chrome define a minimal font // size of 12 if the system language is set to Chinese. For this reason we // just double the font-size, set it to 20px which seems to do the trick. // // See https://github.com/squidfunk/mkdocs-material/issues/911 font-size: 125%; // Hack: some browsers on some operating systems don't account for scroll // bars when firing media queries, so we need to do this for safety. This // currently impacts the table of contents component between 1220 and 1234px // and is to current knowledge not fixable. overflow-x: hidden; // [screen medium +]: Set base font-size to 11px @include break-from-device(screen medium) { font-size: 137.50%; } // [screen large +]: Set base font-size to 12px @include break-from-device(screen large) { font-size: 150%; } } // Stretch body to container and leave room for footer body { position: relative; min-height: 100%; // Hack: reset font-size to 10px, so the spacing for all inline elements is // correct again. Otherwise the spacing would be based on 20px. font-size: 0.5rem; // stylelint-disable-line unit-whitelist // [tablet portrait -]: Lock body to disable scroll bubbling @include break-to-device(tablet portrait) { // Lock body to viewport height (e.g. in search mode) &[data-md-state="lock"] { overflow: hidden; // Hide container on iOS, or the body will not be locked correctly .ios & .md-container { display: none; } } } } // Horizontal separators hr { display: block; height: px2rem(1px); padding: 0; border: 0; } // Template-wide grid .md-grid { max-width: px2rem(1220px); margin-right: auto; margin-left: auto; } // Prevent collapse of margin when setting margin on child element .md-container, .md-main { overflow: auto; } // Content wrapper - use display: table to make variable-height sticky footers // work and fixed table-layout for IE, see http://bit.ly/2hZohXL .md-container { display: table; width: 100%; height: 100%; table-layout: fixed; } // The main content should stretch to maximum height in the table .md-main { display: table-row; height: 100%; // Increase top spacing of content area to give typography more room &__inner { height: 100%; padding-top: px2rem(24px + 6px); // Hack: induce margin-collapse, because otherwise the sidebar height is // not calculated correctly and the overflow property on this element must // be left in initial state for targetted link offsets to work properly padding-bottom: px2rem(1px); } } // ---------------------------------------------------------------------------- // Rules: navigational elements // ---------------------------------------------------------------------------- // Toggle checkbox .md-toggle { display: none; } // Overlay below expanded drawer .md-overlay { position: fixed; top: 0; width: 0; height: 0; transition: width 0s 0.25s, height 0s 0.25s, opacity 0.25s; background-color: $md-color-black--light; opacity: 0; z-index: 3; // [tablet -]: Trigger overlay @include break-to-device(tablet) { // Expanded drawer #{$md-toggle__drawer--checked} & { width: 100%; height: 100%; transition: width 0s, height 0s, opacity 0.25s; opacity: 1; } } } // ---------------------------------------------------------------------------- // Rules: flexible elements, implemented with table layout // ---------------------------------------------------------------------------- // Flexible layout container .md-flex { display: table; // Flexible layout container cell/element &__cell { display: table-cell; position: relative; vertical-align: top; // Shrink to minimum width &--shrink { width: 0%; } // Stretch to maximum width &--stretch { display: table; width: 100%; table-layout: fixed; } } // Apply ellipsis in case of overflowing text &__ellipsis { display: table-cell; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } // ---------------------------------------------------------------------------- // Rules: skip link // ---------------------------------------------------------------------------- // Skip link .md-skip { position: fixed; width: px2rem(1px); height: px2rem(1px); margin: px2rem(10px); padding: px2rem(6px) px2rem(10px); transform: translateY(px2rem(8px)); border-radius: px2rem(2px); background-color: $md-color-black; color: $md-color-white; font-size: ms(-1); opacity: 0; overflow: hidden; // Show skip link on focus &:focus { width: auto; height: auto; clip: auto; transform: translateX(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.175s 0.075s; opacity: 1; z-index: 10; } } // ---------------------------------------------------------------------------- // Rules: print styles // ---------------------------------------------------------------------------- // Add margins to page @page { margin: 25mm; }