2016-09-04 18:11:58 +03:00
|
|
|
////
|
2017-01-06 21:11:18 +03:00
|
|
|
/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
|
2016-09-04 18:11:58 +03:00
|
|
|
///
|
|
|
|
/// 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
|
|
|
|
////
|
|
|
|
|
2017-03-21 17:27:45 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// Variables
|
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
// Active (toggled) drawer
|
|
|
|
$md-toggle__drawer--checked:
|
|
|
|
"[data-md-toggle=\"drawer\"]:checked ~";
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-10-06 13:14:33 +03:00
|
|
|
// Rules: base grid and containers
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-09-04 18:11:58 +03:00
|
|
|
|
2016-09-23 12:56:25 +03:00
|
|
|
// Stretch container to viewport and set base font-size to 10px for simple
|
2017-05-15 11:44:26 +03:00
|
|
|
// calculations base on relative ems (rems)
|
2016-08-07 19:01:56 +03:00
|
|
|
html {
|
|
|
|
height: 100%;
|
2016-09-23 12:56:25 +03:00
|
|
|
font-size: 62.5%;
|
2017-11-01 20:07:15 +03:00
|
|
|
// 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;
|
2016-09-04 18:11:58 +03:00
|
|
|
|
2016-10-23 20:31:54 +03:00
|
|
|
// [screen medium +]: Set base font-size to 11px
|
2016-09-04 18:11:58 +03:00
|
|
|
@include break-from-device(screen medium) {
|
|
|
|
font-size: 68.75%;
|
|
|
|
}
|
|
|
|
|
2016-10-23 20:31:54 +03:00
|
|
|
// [screen large +]: Set base font-size to 12px
|
2016-09-04 18:11:58 +03:00
|
|
|
@include break-from-device(screen large) {
|
2016-09-23 12:56:25 +03:00
|
|
|
font-size: 75%;
|
2016-09-04 18:11:58 +03:00
|
|
|
}
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
|
2017-05-15 11:44:26 +03:00
|
|
|
// Stretch body to container and leave room for footer
|
2016-08-07 19:01:56 +03:00
|
|
|
body {
|
|
|
|
position: relative;
|
2016-12-26 16:31:16 +03:00
|
|
|
height: 100%;
|
2016-09-02 01:33:45 +03:00
|
|
|
|
2016-10-24 19:02:53 +03:00
|
|
|
// [tablet portrait -]: Lock body to disable scroll bubbling
|
|
|
|
@include break-to-device(tablet portrait) {
|
|
|
|
|
|
|
|
// Lock body to viewport height (e.g. in search mode)
|
2016-12-15 17:55:40 +03:00
|
|
|
&[data-md-state="lock"] {
|
2016-10-24 19:02:53 +03:00
|
|
|
overflow: hidden;
|
2016-12-28 19:13:07 +03:00
|
|
|
|
|
|
|
// Hide container on iOS, or the body will not be locked correctly
|
|
|
|
.ios & .md-container {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-10-24 19:02:53 +03:00
|
|
|
}
|
2016-09-02 01:33:45 +03:00
|
|
|
}
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Horizontal separators
|
2016-08-07 19:01:56 +03:00
|
|
|
hr {
|
|
|
|
display: block;
|
2016-10-21 22:15:35 +03:00
|
|
|
height: 0.1rem;
|
2016-08-07 19:01:56 +03:00
|
|
|
padding: 0;
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
2016-12-28 16:47:53 +03:00
|
|
|
// Inline SVG container
|
|
|
|
.md-svg {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Template-wide grid
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-grid {
|
2017-01-06 21:04:52 +03:00
|
|
|
max-width: 122rem;
|
2016-08-07 19:01:56 +03:00
|
|
|
margin-right: auto;
|
2016-09-04 18:11:58 +03:00
|
|
|
margin-left: auto;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Prevent collapse of margin when setting margin on child element
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-container,
|
|
|
|
.md-main {
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
2016-12-26 16:34:17 +03:00
|
|
|
// Content wrapper - use display: table to make variable-height sticky footers
|
2017-05-15 11:44:26 +03:00
|
|
|
// work and fixed table-layout for IE, see http://bit.ly/2hZohXL
|
2016-12-26 16:31:16 +03:00
|
|
|
.md-container {
|
|
|
|
display: table;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2017-02-18 15:51:34 +03:00
|
|
|
padding-top: 5.6rem;
|
2016-12-26 16:31:16 +03:00
|
|
|
table-layout: fixed;
|
|
|
|
}
|
|
|
|
|
|
|
|
// The main content should stretch to maximum height in the table
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-main {
|
2016-12-26 16:31:16 +03:00
|
|
|
display: table-row;
|
|
|
|
height: 100%;
|
2016-08-07 19:01:56 +03:00
|
|
|
|
2017-02-18 15:51:34 +03:00
|
|
|
// Increase top spacing of content area to give typography more room
|
2016-08-07 19:01:56 +03:00
|
|
|
&__inner {
|
2017-10-06 11:53:43 +03:00
|
|
|
height: 100%;
|
2016-12-26 16:31:16 +03:00
|
|
|
padding-top: 2.4rem + 0.6rem;
|
2017-05-15 11:44:26 +03:00
|
|
|
// 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: 0.1rem;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-10-06 13:14:33 +03:00
|
|
|
// Rules: navigational elements
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-08-07 19:01:56 +03:00
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Toggle checkbox
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-toggle {
|
2016-09-04 18:11:58 +03:00
|
|
|
display: none;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Overlay below expanded drawer
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-overlay {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
2016-10-23 11:21:37 +03:00
|
|
|
transition:
|
|
|
|
width 0s 0.25s,
|
|
|
|
height 0s 0.25s,
|
|
|
|
opacity 0.25s;
|
2016-12-17 14:53:24 +03:00
|
|
|
background-color: $md-color-black--light;
|
2016-09-04 18:11:58 +03:00
|
|
|
opacity: 0;
|
2017-06-01 23:24:48 +03:00
|
|
|
z-index: 3;
|
2016-08-07 19:01:56 +03:00
|
|
|
|
2016-09-23 12:56:25 +03:00
|
|
|
// [tablet -]: Trigger overlay
|
|
|
|
@include break-to-device(tablet) {
|
2016-08-07 19:01:56 +03:00
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Expanded drawer
|
2017-03-21 17:27:45 +03:00
|
|
|
#{$md-toggle__drawer--checked} & {
|
2016-08-07 19:01:56 +03:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2016-10-23 11:21:37 +03:00
|
|
|
transition:
|
|
|
|
width 0s,
|
|
|
|
height 0s,
|
|
|
|
opacity 0.25s;
|
2016-08-07 19:01:56 +03:00
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-10-06 13:14:33 +03:00
|
|
|
// Rules: flexible elements, implemented with table layout
|
2016-09-04 18:32:12 +03:00
|
|
|
// ----------------------------------------------------------------------------
|
2016-08-07 19:01:56 +03:00
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Flexible layout container
|
2016-08-07 19:01:56 +03:00
|
|
|
.md-flex {
|
|
|
|
display: table;
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Flexible layout container cell/element
|
2016-08-07 19:01:56 +03:00
|
|
|
&__cell {
|
|
|
|
display: table-cell;
|
2016-09-11 20:00:53 +03:00
|
|
|
position: relative;
|
2016-08-07 19:01:56 +03:00
|
|
|
vertical-align: top;
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Shrink to minimum width
|
2016-08-07 19:01:56 +03:00
|
|
|
&--shrink {
|
2016-09-23 18:46:16 +03:00
|
|
|
width: 0%;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Stretch to maximum width
|
2016-08-07 19:01:56 +03:00
|
|
|
&--stretch {
|
|
|
|
display: table;
|
|
|
|
width: 100%;
|
2016-09-04 18:11:58 +03:00
|
|
|
table-layout: fixed;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-04 18:32:12 +03:00
|
|
|
// Apply ellipsis in case of overflowing text
|
2016-08-07 19:01:56 +03:00
|
|
|
&__ellipsis {
|
|
|
|
display: table-cell;
|
|
|
|
text-overflow: ellipsis;
|
2016-09-04 18:11:58 +03:00
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
2016-08-07 19:01:56 +03:00
|
|
|
}
|
2016-09-04 18:11:58 +03:00
|
|
|
}
|
2016-10-24 19:02:53 +03:00
|
|
|
|
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// Rules: print styles
|
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
// Add margins to page
|
|
|
|
@page {
|
|
|
|
margin: 25mm;
|
|
|
|
}
|