mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2026-07-24 23:04:32 -04:00
Added helper function for rem calculation and set base font size to 20px
This commit is contained in:
squidfunk
@@ -25,7 +25,7 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Modular typographic scale
|
||||
$ms-base: 1.6rem;
|
||||
$ms-base: px2rem(16px);
|
||||
$ms-ratio: $major-third;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@@ -44,13 +44,13 @@
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-primary],
|
||||
button[data-md-color-accent] {
|
||||
width: 13rem;
|
||||
margin-bottom: 0.4rem;
|
||||
padding: 2.4rem 0.8rem 0.4rem;
|
||||
width: px2rem(130px);
|
||||
margin-bottom: px2rem(4px);
|
||||
padding: px2rem(24px) px2rem(8px) px2rem(4px);
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
opacity 0.25s;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
color: $md-color-white;
|
||||
font-size: ms(-1);
|
||||
text-align: left;
|
||||
@@ -152,7 +152,7 @@ button[data-md-color-accent] {
|
||||
button[data-md-color-primary="white"] {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
box-shadow: 0 0 0.1rem $md-color-black--light inset;
|
||||
box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
|
||||
}
|
||||
|
||||
// Overrides for white color
|
||||
@@ -171,7 +171,7 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Add a border if there are no tabs
|
||||
&--expand {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -210,7 +210,7 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,7 +219,7 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@ kbd {
|
||||
|
||||
// 1st level headline
|
||||
h1 {
|
||||
margin: 0 0 4rem;
|
||||
margin: 0 0 px2rem(40px);
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(3);
|
||||
font-weight: 300;
|
||||
@@ -82,7 +82,7 @@ kbd {
|
||||
|
||||
// 2nd level headline
|
||||
h2 {
|
||||
margin: 4rem 0 1.6rem;
|
||||
margin: px2rem(40px) 0 px2rem(16px);
|
||||
font-size: ms(2);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
@@ -91,7 +91,7 @@ kbd {
|
||||
|
||||
// 3rd level headline
|
||||
h3 {
|
||||
margin: 3.2rem 0 1.6rem;
|
||||
margin: px2rem(32px) 0 px2rem(16px);
|
||||
font-size: ms(1);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
@@ -100,12 +100,12 @@ kbd {
|
||||
|
||||
// 3rd level headline following an 2nd level headline
|
||||
h2 + h3 {
|
||||
margin-top: 1.6rem;
|
||||
margin-top: px2rem(16px);
|
||||
}
|
||||
|
||||
// 4th level headline
|
||||
h4 {
|
||||
margin: 1.6rem 0;
|
||||
margin: px2rem(16px) 0;
|
||||
font-size: ms(0);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
@@ -114,7 +114,7 @@ kbd {
|
||||
// 5th and 6th level headline
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.6rem 0;
|
||||
margin: px2rem(16px) 0;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(-1);
|
||||
font-weight: 700;
|
||||
@@ -129,7 +129,7 @@ kbd {
|
||||
// Horizontal separators
|
||||
hr {
|
||||
margin: 1.5em 0;
|
||||
border-bottom: 0.1rem dotted $md-color-black--lighter;
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
||||
}
|
||||
|
||||
// Links
|
||||
@@ -180,7 +180,7 @@ kbd {
|
||||
|
||||
margin: 0 0.25em * $correct;
|
||||
padding: 0.0625em * $correct 0;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
+0.25em * $correct 0 0 $md-code-background,
|
||||
-0.25em * $correct 0 0 $md-code-background;
|
||||
@@ -220,13 +220,13 @@ kbd {
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 1em 0;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
line-height: 1.4;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em -1.6rem;
|
||||
margin: 1em px2rem(-16px);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -234,7 +234,7 @@ kbd {
|
||||
> code {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 1.05rem 1.2rem;
|
||||
padding: px2rem(10.5px) px2rem(12px);
|
||||
background-color: transparent;
|
||||
font-size: inherit;
|
||||
box-shadow: none;
|
||||
@@ -243,13 +243,13 @@ kbd {
|
||||
|
||||
// [mobile -]: Increase padding to match text
|
||||
@include break-to-device(mobile) {
|
||||
padding: 1.05rem 1.6rem;
|
||||
padding: px2rem(10.5px) px2rem(16px);
|
||||
}
|
||||
|
||||
// Override native scrollbar styles
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
@@ -269,13 +269,13 @@ kbd {
|
||||
$correct: 1 / 0.85;
|
||||
|
||||
padding: 0 0.25em * $correct;
|
||||
border: 0.1rem solid darken($md-keyboard-background, 20%);
|
||||
border-radius: 0.3rem;
|
||||
border: px2rem(1px) solid darken($md-keyboard-background, 20%);
|
||||
border-radius: px2rem(3px);
|
||||
border-bottom-color: darken($md-keyboard-background, 25%);
|
||||
background-color: $md-keyboard-background;
|
||||
color: $md-keyboard-color;
|
||||
font-size: 85%;
|
||||
box-shadow: 0 0.1rem 0 darken($md-keyboard-background, 30%);
|
||||
box-shadow: 0 px2rem(1px) 0 darken($md-keyboard-background, 30%);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@@ -283,7 +283,7 @@ kbd {
|
||||
mark {
|
||||
margin: 0 0.25em;
|
||||
padding: 0.0625em 0;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
background-color: transparentize($clr-yellow-500, 0.5);
|
||||
box-shadow:
|
||||
+0.25em 0 0 transparentize($clr-yellow-500, 0.5),
|
||||
@@ -294,7 +294,7 @@ kbd {
|
||||
|
||||
// Abbreviations
|
||||
abbr {
|
||||
border-bottom: 0.1rem dotted $md-color-black--light;
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--light;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
@@ -318,15 +318,15 @@ kbd {
|
||||
|
||||
// Blockquotes, possibly nested
|
||||
blockquote {
|
||||
padding-left: 1.2rem;
|
||||
border-left: 0.4rem solid $md-color-black--lighter;
|
||||
padding-left: px2rem(12px);
|
||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||
color: $md-color-black--light;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.2rem;
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: initial;
|
||||
border-right: 0.4rem solid $md-color-black--lighter;
|
||||
border-right: px2rem(4px) solid $md-color-black--lighter;
|
||||
border-left: initial;
|
||||
}
|
||||
}
|
||||
@@ -418,7 +418,7 @@ kbd {
|
||||
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
font-size: ms(-1);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@@ -443,8 +443,8 @@ kbd {
|
||||
|
||||
// Table headings
|
||||
th {
|
||||
min-width: 10rem;
|
||||
padding: 1.2rem 1.6rem;
|
||||
min-width: px2rem(100px);
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
background-color: $md-color-black--light;
|
||||
color: $md-color-white;
|
||||
vertical-align: top;
|
||||
@@ -452,8 +452,8 @@ kbd {
|
||||
|
||||
// Table cells
|
||||
td {
|
||||
padding: 1.2rem 1.6rem;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@@ -470,7 +470,7 @@ kbd {
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
&__scrollwrap {
|
||||
margin: 1em -1.6rem;
|
||||
margin: 1em px2rem(-16px);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@@ -479,7 +479,7 @@ kbd {
|
||||
.md-typeset__table {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0 1.6rem;
|
||||
padding: 0 px2rem(16px);
|
||||
|
||||
// Data tables
|
||||
table {
|
||||
|
||||
@@ -33,21 +33,21 @@
|
||||
|
||||
position: relative;
|
||||
margin: 1.5625em 0;
|
||||
padding: 0 1.2rem;
|
||||
border-left: 0.4rem solid $clr-blue-a200;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 px2rem(12px);
|
||||
border-left: px2rem(4px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(2px);
|
||||
font-size: ms(-1);
|
||||
overflow: auto;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
border-right: 0.4rem solid $clr-blue-a200;
|
||||
border-right: px2rem(4px) solid $clr-blue-a200;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// Adjust spacing on last element
|
||||
html & > :last-child {
|
||||
margin-bottom: 1.2rem;
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
|
||||
// Adjust margin for nested admonition blocks
|
||||
@@ -57,15 +57,15 @@
|
||||
|
||||
// Title
|
||||
> .admonition-title {
|
||||
margin: 0 -1.2rem;
|
||||
padding: 0.8rem 1.2rem 0.8rem 4rem;
|
||||
border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9);
|
||||
margin: 0 px2rem(-12px);
|
||||
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
|
||||
border-bottom: px2rem(1px) solid transparentize($clr-blue-a200, 0.9);
|
||||
background-color: transparentize($clr-blue-a200, 0.9);
|
||||
font-weight: 700;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding: 0.8rem 4rem 0.8rem 1.2rem;
|
||||
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
|
||||
}
|
||||
|
||||
// Reset spacing, if title is the only element
|
||||
@@ -78,14 +78,14 @@
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
left: px2rem(12px);
|
||||
color: $clr-blue-a200;
|
||||
font-size: 2rem;
|
||||
font-size: px2rem(20px);
|
||||
content: "\E3C9"; // edit
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: 1.2rem;
|
||||
right: px2rem(12px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
@@ -120,7 +120,7 @@
|
||||
|
||||
// Title
|
||||
> .admonition-title {
|
||||
border-bottom-color: 0.1rem solid transparentize($tint, 0.9);
|
||||
border-bottom-color: px2rem(1px) solid transparentize($tint, 0.9);
|
||||
background-color: transparentize($tint, 0.9);
|
||||
|
||||
// Icon
|
||||
|
||||
@@ -194,14 +194,14 @@ $codehilite-whitespace: transparent;
|
||||
// Highlighted lines
|
||||
.hll {
|
||||
display: block;
|
||||
margin: 0 -1.2rem;
|
||||
padding: 0 1.2rem;
|
||||
margin: 0 px2rem(-12px);
|
||||
padding: 0 px2rem(12px);
|
||||
background-color: transparentize($clr-yellow-500, 0.5);
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 0 -1.6rem;
|
||||
padding: 0 1.6rem;
|
||||
margin: 0 px2rem(-16px);
|
||||
padding: 0 px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -219,7 +219,7 @@ $codehilite-whitespace: transparent;
|
||||
position: relative;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-code-background;
|
||||
color: $md-code-color;
|
||||
line-height: 1.4;
|
||||
@@ -230,15 +230,15 @@ $codehilite-whitespace: transparent;
|
||||
code {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 1.05rem 1.2rem;
|
||||
padding: px2rem(10.5px) px2rem(12px);
|
||||
background-color: transparent;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
|
||||
// Override native scrollbar styles
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
@@ -260,7 +260,7 @@ $codehilite-whitespace: transparent;
|
||||
// Actual container with code, overflowing
|
||||
code {
|
||||
display: block;
|
||||
padding: 1.05rem 1.2rem;
|
||||
padding: px2rem(10.5px) px2rem(12px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@@ -297,7 +297,7 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// Add spacing to line number container
|
||||
.linenodiv {
|
||||
padding: 1.05rem 1.2rem;
|
||||
padding: px2rem(10.5px) px2rem(12px);
|
||||
}
|
||||
|
||||
// Disable user selection, so code can be easily copied without
|
||||
@@ -330,13 +330,13 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em -1.6rem;
|
||||
margin: 1em px2rem(-16px);
|
||||
border-radius: 0;
|
||||
|
||||
// Actual container with code, overflowing
|
||||
pre,
|
||||
code {
|
||||
padding: 1.05rem 1.6rem;
|
||||
padding: px2rem(10.5px) px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -347,14 +347,14 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em -1.6rem;
|
||||
margin: 1em px2rem(-16px);
|
||||
border-radius: 0;
|
||||
|
||||
// Increase spacing
|
||||
.codehilite > pre,
|
||||
.codehilite > code,
|
||||
.linenodiv {
|
||||
padding: 1rem 1.6rem;
|
||||
padding: px2rem(10px) px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
|
||||
// Targeted anchor
|
||||
&:target {
|
||||
margin-top: -(4.8rem + 1.2rem + 1.6rem);
|
||||
padding-top: (4.8rem + 1.2rem + 1.6rem);
|
||||
margin-top: -1 * px2rem(48px + 12px + 16px);
|
||||
padding-top: px2rem(48px + 12px + 16px);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -52,8 +52,8 @@
|
||||
// Targeted anchor
|
||||
&:target::before {
|
||||
display: block;
|
||||
margin-top: -(4.8rem + 1.2rem + 1rem);
|
||||
padding-top: (4.8rem + 1.2rem + 1rem);
|
||||
margin-top: -1 * px2rem(48px + 12px + 10px);
|
||||
padding-top: px2rem(48px + 12px + 10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -106,10 +106,10 @@
|
||||
&::before {
|
||||
display: inline;
|
||||
margin: 0 0.2em;
|
||||
border-left: 0.1rem solid $md-color-black--lighter;
|
||||
border-left: px2rem(1px) solid $md-color-black--lighter;
|
||||
font-size: 1.25em;
|
||||
content: "";
|
||||
vertical-align: -0.5rem;
|
||||
vertical-align: px2rem(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
@extend %md-icon;
|
||||
|
||||
display: inline-block;
|
||||
transform: translateX(0.5rem);
|
||||
transform: translateX(px2rem(5px));
|
||||
transition:
|
||||
transform 0.25s 0.125s,
|
||||
color 0.25s,
|
||||
@@ -131,13 +131,13 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-0.5rem);
|
||||
transform: translateX(px2rem(-5px));
|
||||
}
|
||||
|
||||
// Back reference icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
font-size: 1.6rem;
|
||||
font-size: px2rem(16px);
|
||||
content: "\E31B"; // keyboard_return
|
||||
|
||||
// Adjust for RTL languages
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
// Permalinks extension
|
||||
.headerlink {
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
transform: translate(0, 0.5rem);
|
||||
margin-left: px2rem(10px);
|
||||
transform: translate(0, px2rem(5px));
|
||||
transition:
|
||||
transform 0.25s 0.25s,
|
||||
color 0.25s,
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1rem;
|
||||
margin-right: px2rem(10px);
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
@@ -57,12 +57,12 @@
|
||||
|
||||
// Correct anchor offset for link blurring
|
||||
@each $level, $delta in (
|
||||
h1: 0.9rem,
|
||||
h2: 0.8rem,
|
||||
h3: 0.9rem,
|
||||
h4: 0.9rem,
|
||||
h5: 1.1rem,
|
||||
h6: 1.1rem
|
||||
h1: 9px,
|
||||
h2: 8px,
|
||||
h3: 9px,
|
||||
h4: 9px,
|
||||
h5: 11px,
|
||||
h6: 11px
|
||||
) {
|
||||
#{$level}[id] {
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
|
||||
// Targeted anchor (48px from header, 12px from sidebar offset)
|
||||
&:target::before {
|
||||
margin-top: -(4.8rem + 1.2rem + $delta);
|
||||
padding-top: (4.8rem + 1.2rem + $delta);
|
||||
margin-top: -1 * px2rem(48px + 12px + $delta);
|
||||
padding-top: px2rem(48px + 12px + $delta);
|
||||
}
|
||||
|
||||
// Make permalink visible on hover
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 0.75em -1.6rem;
|
||||
padding: 0.25em 1.6rem;
|
||||
margin: 0.75em px2rem(-16px);
|
||||
padding: 0.25em px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
.critic.comment {
|
||||
margin: 0 0.25em;
|
||||
padding: 0.0625em 0;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
.critic.block {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding-right: 1.6rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(16px);
|
||||
box-shadow: none;
|
||||
|
||||
// Decrease spacing on first element
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
|
||||
// Increase spacing to the right - scoped here for higher specificity
|
||||
summary {
|
||||
padding-right: 4rem;
|
||||
padding-right: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-left: 4rem;
|
||||
padding-left: px2rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,16 +93,16 @@
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 1.2rem;
|
||||
top: px2rem(8px);
|
||||
right: px2rem(12px);
|
||||
color: $md-color-black--lighter;
|
||||
font-size: 2rem;
|
||||
font-size: px2rem(20px);
|
||||
content: "\E313"; // keyboard_arrow_down
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: 1.2rem;
|
||||
left: px2rem(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
// Correct alignment of emojis
|
||||
.emojione {
|
||||
width: 2rem;
|
||||
width: px2rem(20px);
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
border: 0.1rem solid $md-color-black--lightest;
|
||||
border: px2rem(1px) solid $md-color-black--lightest;
|
||||
border-radius: 0.2em;
|
||||
|
||||
// Hide radio buttons
|
||||
@@ -68,7 +68,7 @@
|
||||
// Tab label
|
||||
> label {
|
||||
width: auto;
|
||||
padding: 1.2rem 1.2rem;
|
||||
padding: px2rem(12px);
|
||||
transition: color 0.125s;
|
||||
font-size: ms(-1);
|
||||
cursor: pointer;
|
||||
@@ -85,15 +85,15 @@
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em -1.6rem;
|
||||
margin: 1em px2rem(-16px);
|
||||
border: 0;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
border-radius: 0;
|
||||
|
||||
// Actual container with code, overflowing
|
||||
pre,
|
||||
code {
|
||||
padding: 1.05rem 1.6rem;
|
||||
padding: px2rem(10.5px) px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,3 +44,24 @@
|
||||
@error "Invalid size: #{$size} - unit must be 'px'";
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Convert font size in px to rem.
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number} $size Font size in px
|
||||
/// @param {Number} $base Base font size
|
||||
/// @return {Number} Font size in rem
|
||||
///
|
||||
@function px2rem($size, $base: 20px) {
|
||||
@if unit($size) == px {
|
||||
@if unit($base) == px {
|
||||
@return ($size / $base) * 1.0rem;
|
||||
} @else {
|
||||
@error "Invalid base: #{$base} - unit must be 'px'";
|
||||
}
|
||||
} @else {
|
||||
@error "Invalid size: #{$size} - unit must be 'px'";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,13 @@ $md-toggle__drawer--checked:
|
||||
// calculations base on relative ems (rems)
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 62.5%;
|
||||
// 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
|
||||
@@ -45,12 +51,12 @@ html {
|
||||
|
||||
// [screen medium +]: Set base font-size to 11px
|
||||
@include break-from-device(screen medium) {
|
||||
font-size: 68.75%;
|
||||
font-size: 137.50%;
|
||||
}
|
||||
|
||||
// [screen large +]: Set base font-size to 12px
|
||||
@include break-from-device(screen large) {
|
||||
font-size: 75%;
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +83,7 @@ body {
|
||||
// Horizontal separators
|
||||
hr {
|
||||
display: block;
|
||||
height: 0.1rem;
|
||||
height: px2rem(1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
@@ -89,7 +95,7 @@ hr {
|
||||
|
||||
// Template-wide grid
|
||||
.md-grid {
|
||||
max-width: 122rem;
|
||||
max-width: px2rem(1220px);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@@ -106,7 +112,7 @@ hr {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 4.8rem;
|
||||
padding-top: px2rem(48px);
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
@@ -118,11 +124,11 @@ hr {
|
||||
// Increase top spacing of content area to give typography more room
|
||||
&__inner {
|
||||
height: 100%;
|
||||
padding-top: 2.4rem + 0.6rem;
|
||||
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: 0.1rem;
|
||||
padding-bottom: px2rem(1px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,13 +214,13 @@ hr {
|
||||
// Skip link
|
||||
.md-skip {
|
||||
position: fixed;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
margin: 1rem;
|
||||
padding: 0.6rem 1rem;
|
||||
clip: rect(0.1rem);
|
||||
transform: translateY(0.8rem);
|
||||
border-radius: 0.2rem;
|
||||
width: px2rem(1px);
|
||||
height: px2rem(1px);
|
||||
margin: px2rem(10px);
|
||||
padding: px2rem(6px) px2rem(10px);
|
||||
clip: rect(px2rem(1px));
|
||||
transform: translateY(px2rem(8px));
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
font-size: ms(-1);
|
||||
|
||||
@@ -27,12 +27,12 @@
|
||||
// Copy to clipboard
|
||||
.md-clipboard {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
right: 0.6rem;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1.6rem;
|
||||
top: px2rem(6px);
|
||||
right: px2rem(6px);
|
||||
width: px2rem(28px);
|
||||
height: px2rem(28px);
|
||||
border-radius: px2rem(2px);
|
||||
font-size: px2rem(16px);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
// Hack: put everything on the GPU to omit flickering
|
||||
@@ -71,13 +71,13 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3.4rem;
|
||||
padding: 0.6rem 1rem;
|
||||
transform: translateX(0.8rem);
|
||||
right: px2rem(34px);
|
||||
padding: px2rem(6px) px2rem(10px);
|
||||
transform: translateX(px2rem(8px));
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
|
||||
opacity 0.175s;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black--light;
|
||||
color: $md-color-white;
|
||||
font-size: ms(-1);
|
||||
@@ -105,10 +105,10 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -0.4rem;
|
||||
right: px2rem(-4px);
|
||||
width: 0;
|
||||
margin-top: -0.4rem;
|
||||
border-width: 0.4rem 0 0.4rem 0.4rem;
|
||||
margin-top: px2rem(-4px);
|
||||
border-width: px2rem(4px) 0 px2rem(4px) px2rem(4px);
|
||||
border-style: solid;
|
||||
border-color: transparent $md-color-black--light;
|
||||
content: "";
|
||||
|
||||
@@ -29,41 +29,41 @@
|
||||
|
||||
// [tablet landscape +]: Add space for table of contents
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-right: 24.2rem;
|
||||
margin-right: px2rem(242px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: initial;
|
||||
margin-left: 24.2rem;
|
||||
margin-left: px2rem(242px);
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Add space for table of contents
|
||||
@include break-from-device(screen) {
|
||||
margin-left: 24.2rem;
|
||||
margin-left: px2rem(242px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 24.2rem;
|
||||
margin-right: px2rem(242px);
|
||||
}
|
||||
}
|
||||
|
||||
// Define spacing
|
||||
&__inner {
|
||||
margin: 0 1.6rem 2.4rem;
|
||||
padding-top: 1.2rem;
|
||||
margin: 0 px2rem(16px) px2rem(24px);
|
||||
padding-top: px2rem(12px);
|
||||
|
||||
// [screen +]: Increase horizontal spacing
|
||||
@include break-from-device(screen) {
|
||||
margin-right: 2.4rem;
|
||||
margin-left: 2.4rem;
|
||||
margin-right: px2rem(24px);
|
||||
margin-left: px2rem(24px);
|
||||
}
|
||||
|
||||
// Hack: add pseudo element for spacing, as the overflow of the content
|
||||
// container may not be hidden due to an imminent offset error on targets
|
||||
&::before {
|
||||
display: block;
|
||||
height: 0.8rem;
|
||||
height: px2rem(8px);
|
||||
content: "";
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
@extend %md-icon__button;
|
||||
|
||||
position: relative;
|
||||
margin: 0.8rem 0;
|
||||
margin: px2rem(8px) 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
|
||||
|
||||
@@ -40,14 +40,14 @@
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
padding: 0.4rem;
|
||||
padding: px2rem(4px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Links to previous and next page
|
||||
&__link {
|
||||
padding-top: 2.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: px2rem(28px);
|
||||
padding-bottom: px2rem(8px);
|
||||
transition: opacity 0.25s;
|
||||
|
||||
// [tablet +]: Set proportional width
|
||||
@@ -104,9 +104,9 @@
|
||||
// Link title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
position: relative;
|
||||
padding: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 4.8rem;
|
||||
padding: 0 px2rem(20px);
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
}
|
||||
|
||||
// Link direction
|
||||
@@ -114,10 +114,10 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: -2rem;
|
||||
padding: 0 2rem;
|
||||
margin-top: px2rem(-20px);
|
||||
padding: 0 px2rem(20px);
|
||||
color: $md-color-white--light;
|
||||
font-size: 1.5rem;
|
||||
font-size: px2rem(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
padding: 0.4rem;
|
||||
padding: px2rem(4px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -145,8 +145,8 @@
|
||||
|
||||
// Copyright and theme information
|
||||
.md-footer-copyright {
|
||||
margin: 0 1.2rem;
|
||||
padding: 0.8rem 0;
|
||||
margin: 0 px2rem(12px);
|
||||
padding: px2rem(8px) 0;
|
||||
color: $md-color-white--lighter;
|
||||
font-size: ms(-1);
|
||||
|
||||
@@ -169,12 +169,12 @@
|
||||
|
||||
// Social media links
|
||||
.md-footer-social {
|
||||
margin: 0 0.8rem;
|
||||
padding: 0.4rem 0 1.2rem;
|
||||
margin: 0 px2rem(8px);
|
||||
padding: px2rem(4px) 0 px2rem(12px);
|
||||
|
||||
// [tablet portrait +]: Show next to copyright information
|
||||
@include break-from-device(tablet portrait) {
|
||||
padding: 1.2rem 0;
|
||||
padding: px2rem(12px) 0;
|
||||
float: right;
|
||||
|
||||
// Adjust for RTL languages
|
||||
@@ -186,9 +186,9 @@
|
||||
// Link with icon
|
||||
&__link {
|
||||
display: inline-block;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
font-size: 1.6rem;
|
||||
width: px2rem(32px);
|
||||
height: px2rem(32px);
|
||||
font-size: px2rem(16px);
|
||||
text-align: center;
|
||||
|
||||
// Adjust line-height to match height for correct alignment
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 4.8rem;
|
||||
height: px2rem(48px);
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
color 0.25s;
|
||||
@@ -54,8 +54,8 @@
|
||||
color 0.25s,
|
||||
box-shadow 0.25s;
|
||||
box-shadow:
|
||||
0 0 0.4rem rgba(0, 0, 0, 0.1),
|
||||
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
|
||||
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
|
||||
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
// Navigation within header
|
||||
.md-header-nav {
|
||||
padding: 0 0.4rem;
|
||||
padding: 0 px2rem(4px);
|
||||
|
||||
// Icon buttons
|
||||
&__button {
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
// Page title
|
||||
& + & {
|
||||
transform: translateX(2.5rem);
|
||||
transform: translateX(px2rem(25px));
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
|
||||
opacity 0.15s;
|
||||
@@ -143,7 +143,7 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-2.5rem);
|
||||
transform: translateX(px2rem(-25px));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,13 +160,13 @@
|
||||
|
||||
// Header title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 4.8rem;
|
||||
padding: 0 px2rem(20px);
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
|
||||
// Show page title
|
||||
&[data-md-state="active"] .md-header-nav__topic {
|
||||
transform: translateX(-2.5rem);
|
||||
transform: translateX(px2rem(-25px));
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
|
||||
opacity 0.15s;
|
||||
@@ -176,7 +176,7 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(2.5rem);
|
||||
transform: translateX(px2rem(25px));
|
||||
}
|
||||
|
||||
// Page title
|
||||
@@ -199,17 +199,17 @@
|
||||
// [tablet landscape +]: Show the reposistory from tablet
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
width: 23rem;
|
||||
max-width: 23rem;
|
||||
margin-left: 2.8rem;
|
||||
padding-right: 1.2rem;
|
||||
width: px2rem(230px);
|
||||
max-width: px2rem(230px);
|
||||
margin-left: px2rem(28px);
|
||||
padding-right: px2rem(12px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 2.8rem;
|
||||
margin-right: px2rem(28px);
|
||||
margin-left: initial;
|
||||
padding-right: initial;
|
||||
padding-left: 1.2rem;
|
||||
padding-left: px2rem(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
|
||||
// Inner wrapper
|
||||
&__inner {
|
||||
margin-top: 2rem;
|
||||
padding: 1.6rem 1.6rem 0.8rem;
|
||||
margin-top: px2rem(20px);
|
||||
padding: px2rem(16px) px2rem(16px) px2rem(8px);
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 0.25s;
|
||||
@@ -43,14 +43,14 @@
|
||||
|
||||
// [tablet -]: Compensate for missing tabs
|
||||
@include break-to-device(tablet) {
|
||||
margin-top: 4.8rem;
|
||||
margin-bottom: 2.4rem;
|
||||
margin-top: px2rem(48px);
|
||||
margin-bottom: px2rem(24px);
|
||||
}
|
||||
|
||||
// Fade-out tabs background upon scrolling
|
||||
[data-md-state="hidden"] & {
|
||||
pointer-events: none;
|
||||
transform: translateY(1.25rem);
|
||||
transform: translateY(px2rem(12.5px));
|
||||
transition:
|
||||
transform 0s 0.4s,
|
||||
opacity 0.1s 0s;
|
||||
@@ -59,7 +59,7 @@
|
||||
|
||||
// Adjust bottom spacing if there are no tabs
|
||||
.md-hero--expand & {
|
||||
margin-bottom: 2.4rem;
|
||||
margin-bottom: px2rem(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,13 +26,13 @@
|
||||
|
||||
// Navigation container
|
||||
.md-nav {
|
||||
font-size: 1.4rem;
|
||||
font-size: px2rem(14px);
|
||||
line-height: 1.3;
|
||||
|
||||
// List title
|
||||
&__title {
|
||||
display: block;
|
||||
padding: 0 1.2rem;
|
||||
padding: 0 px2rem(12px);
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -65,11 +65,11 @@
|
||||
|
||||
// List item
|
||||
&__item {
|
||||
padding: 0 1.2rem;
|
||||
padding: 0 px2rem(12px);
|
||||
|
||||
// Add bottom spacing to last item
|
||||
&:last-child {
|
||||
padding-bottom: 1.2rem;
|
||||
padding-bottom: px2rem(12px);
|
||||
}
|
||||
|
||||
// 2nd+ level items
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.2rem;
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
// List title and item
|
||||
.md-nav__title,
|
||||
.md-nav__item {
|
||||
font-size: 1.6rem;
|
||||
font-size: px2rem(16px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -194,12 +194,12 @@
|
||||
// inside the drawer is always styled accordingly
|
||||
html & .md-nav__title {
|
||||
position: relative;
|
||||
height: 11.2rem;
|
||||
padding: 6rem 1.6rem 0.4rem;
|
||||
height: px2rem(112px);
|
||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
font-weight: 400;
|
||||
line-height: 4.8rem;
|
||||
line-height: px2rem(48px);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -207,17 +207,17 @@
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
width: px2rem(40px);
|
||||
height: px2rem(40px);
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
// Main lists
|
||||
~ .md-nav__list {
|
||||
background-color: $md-color-white;
|
||||
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
|
||||
box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
|
||||
|
||||
// Remove border for first list item
|
||||
& > .md-nav__item:first-child {
|
||||
@@ -235,11 +235,11 @@
|
||||
.md-nav__button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
font-size: 4.8rem;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
width: px2rem(64px);
|
||||
height: px2rem(64px);
|
||||
font-size: px2rem(48px);
|
||||
}
|
||||
|
||||
// Hide back arrow icon
|
||||
@@ -254,13 +254,13 @@
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
right: 0.4rem;
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Site title in main navigation
|
||||
&--site .md-nav__button {
|
||||
right: 0.4rem;
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
@@ -274,7 +274,7 @@
|
||||
// List item
|
||||
.md-nav__item {
|
||||
padding: 0;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
@@ -283,12 +283,12 @@
|
||||
|
||||
// Increase spacing to account for icon
|
||||
&--nested > .md-nav__link {
|
||||
padding-right: 4.8rem;
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 1.6rem;
|
||||
padding-left: 4.8rem;
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Replace icon with right arrow
|
||||
@@ -307,21 +307,21 @@
|
||||
.md-nav__link {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
padding: 1.2rem 1.6rem;
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
|
||||
// Rotate icon
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1.2rem;
|
||||
margin-top: -1.2rem;
|
||||
right: px2rem(12px);
|
||||
margin-top: px2rem(-12px);
|
||||
color: inherit;
|
||||
font-size: 2.4rem;
|
||||
font-size: px2rem(24px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: 1.2rem;
|
||||
left: px2rem(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -341,44 +341,44 @@
|
||||
|
||||
// 3rd level link
|
||||
.md-nav__link {
|
||||
padding-left: 2.8rem;
|
||||
padding-left: px2rem(28px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 2.8rem;
|
||||
padding-right: px2rem(28px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// 4th level link
|
||||
.md-nav .md-nav__link {
|
||||
padding-left: 4rem;
|
||||
padding-left: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 4rem;
|
||||
padding-right: px2rem(40px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// 5th level link
|
||||
.md-nav .md-nav .md-nav__link {
|
||||
padding-left: 5.2rem;
|
||||
padding-left: px2rem(52px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 5.2rem;
|
||||
padding-right: px2rem(52px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// 6th level link
|
||||
.md-nav .md-nav .md-nav .md-nav__link {
|
||||
padding-left: 6.4rem;
|
||||
padding-left: px2rem(64px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 6.4rem;
|
||||
padding-right: px2rem(64px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
@@ -428,7 +428,7 @@
|
||||
// display the table of contents inside the drawer
|
||||
html &__link[for="__toc"] {
|
||||
display: block;
|
||||
padding-right: 4.8rem;
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
// Unrotate icon for table of contents
|
||||
&::after {
|
||||
@@ -449,14 +449,14 @@
|
||||
|
||||
// Adjust for RTL languages
|
||||
html [dir="rtl"] &__link {
|
||||
padding-right: 1.6rem;
|
||||
padding-left: 4.8rem;
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Repository containing source
|
||||
&__source {
|
||||
display: block;
|
||||
padding: 0 0.4rem;
|
||||
padding: 0 px2rem(4px);
|
||||
background-color: mix($md-color-primary, $md-color-black, 75%);
|
||||
color: $md-color-white;
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@ $md-toggle__search--checked:
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding: 0.4rem;
|
||||
padding: px2rem(4px);
|
||||
}
|
||||
|
||||
// Search modal overlay
|
||||
@@ -53,22 +53,22 @@ $md-toggle__search--checked:
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
width: px2rem(36px);
|
||||
height: px2rem(36px);
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 0.3s 0.1s,
|
||||
opacity 0.2s 0.2s;
|
||||
border-radius: 2rem;
|
||||
border-radius: px2rem(20px);
|
||||
background-color: $md-color-white;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: 0.4rem;
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
@@ -181,8 +181,8 @@ $md-toggle__search--checked:
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
position: relative;
|
||||
width: 23rem;
|
||||
padding: 0.2rem 0;
|
||||
width: px2rem(230px);
|
||||
padding: px2rem(2px) 0;
|
||||
float: right;
|
||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
@@ -197,12 +197,12 @@ $md-toggle__search--checked:
|
||||
|
||||
// [tablet landscape]: Do not overlay title
|
||||
@include break-at-device(tablet landscape) {
|
||||
width: 46.8rem;
|
||||
width: px2rem(468px);
|
||||
}
|
||||
|
||||
// [screen +]: Match content width
|
||||
@include break-from-device(screen) {
|
||||
width: 68.8rem;
|
||||
width: px2rem(688px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -213,20 +213,20 @@ $md-toggle__search--checked:
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
}
|
||||
|
||||
// Search input
|
||||
&__input {
|
||||
position: relative;
|
||||
padding: 0 4.4rem 0 7.2rem;
|
||||
padding: 0 px2rem(44px) 0 px2rem(72px);
|
||||
text-overflow: ellipsis;
|
||||
z-index: 2;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding: 0 7.2rem 0 4.4rem;
|
||||
padding: 0 px2rem(72px) 0 px2rem(44px);
|
||||
}
|
||||
|
||||
// Transition on placeholder
|
||||
@@ -248,26 +248,26 @@ $md-toggle__search--checked:
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
font-size: 1.8rem;
|
||||
height: px2rem(48px);
|
||||
font-size: px2rem(18px);
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
width: 100%;
|
||||
height: 3.6rem;
|
||||
padding-left: 4.4rem;
|
||||
height: px2rem(36px);
|
||||
padding-left: px2rem(44px);
|
||||
transition:
|
||||
background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
border-radius: 0.2rem;
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black--lighter;
|
||||
color: inherit;
|
||||
font-size: ms(0);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 4.4rem;
|
||||
padding-right: px2rem(44px);
|
||||
}
|
||||
|
||||
// Icon color
|
||||
@@ -287,7 +287,7 @@ $md-toggle__search--checked:
|
||||
|
||||
// Set light background on active search field
|
||||
#{$md-toggle__search--checked} & {
|
||||
border-radius: 0.2rem 0.2rem 0 0;
|
||||
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
text-overflow: none;
|
||||
@@ -318,12 +318,12 @@ $md-toggle__search--checked:
|
||||
|
||||
// Search icon
|
||||
&[for="__search"] {
|
||||
top: 0.6rem;
|
||||
left: 1rem;
|
||||
top: px2rem(6px);
|
||||
left: px2rem(10px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: 1rem;
|
||||
right: px2rem(10px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
@@ -335,8 +335,8 @@ $md-toggle__search--checked:
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: 1.2rem;
|
||||
left: 1.6rem;
|
||||
top: px2rem(12px);
|
||||
left: px2rem(16px);
|
||||
|
||||
// Show back arrow instead of search icon
|
||||
&[for="__search"]::before {
|
||||
@@ -352,8 +352,8 @@ $md-toggle__search--checked:
|
||||
|
||||
// Reset button
|
||||
&[type="reset"] {
|
||||
top: 0.6rem;
|
||||
right: 1rem;
|
||||
top: px2rem(6px);
|
||||
right: px2rem(10px);
|
||||
transform: scale(0.125);
|
||||
transition:
|
||||
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
@@ -363,13 +363,13 @@ $md-toggle__search--checked:
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: 1rem;
|
||||
left: px2rem(10px);
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: 1.2rem;
|
||||
right: 1.6rem;
|
||||
top: px2rem(12px);
|
||||
right: px2rem(16px);
|
||||
}
|
||||
|
||||
// Show reset button if search is active and input non-empty
|
||||
@@ -389,19 +389,19 @@ $md-toggle__search--checked:
|
||||
&__output {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
border-radius: 0 0 px2rem(2px) px2rem(2px);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: 4.8rem;
|
||||
top: px2rem(48px);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
top: 3.8rem;
|
||||
top: px2rem(38px);
|
||||
transition: opacity 0.4s;
|
||||
opacity: 0;
|
||||
|
||||
@@ -418,18 +418,18 @@ $md-toggle__search--checked:
|
||||
&__scrollwrap {
|
||||
height: 100%;
|
||||
background-color: $md-color-white;
|
||||
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
|
||||
box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// [tablet landscape]: Set absolute width to omit unnecessary reflow
|
||||
@include break-at-device(tablet landscape) {
|
||||
width: 46.8rem;
|
||||
width: px2rem(468px);
|
||||
}
|
||||
|
||||
// [screen +]: Set absolute width to omit unnecessary reflow
|
||||
@include break-from-device(screen) {
|
||||
width: 68.8rem;
|
||||
width: px2rem(688px);
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Limit height to viewport
|
||||
@@ -443,8 +443,8 @@ $md-toggle__search--checked:
|
||||
|
||||
// Override native scrollbar styles
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
@@ -467,19 +467,19 @@ $md-toggle__search--checked:
|
||||
|
||||
// Search metadata
|
||||
&__meta {
|
||||
padding: 0 1.6rem;
|
||||
padding: 0 px2rem(16px);
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(-1);
|
||||
line-height: 3.6rem;
|
||||
line-height: px2rem(36px);
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: 4.4rem;
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 4.4rem;
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
@@ -489,13 +489,13 @@ $md-toggle__search--checked:
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// List item
|
||||
&__item {
|
||||
box-shadow: 0 -0.1rem 0 $md-color-black--lightest;
|
||||
box-shadow: 0 px2rem(-1px) 0 $md-color-black--lightest;
|
||||
}
|
||||
|
||||
// Link inside item
|
||||
@@ -518,24 +518,24 @@ $md-toggle__search--checked:
|
||||
|
||||
// Add a little spacing on the teaser of the last link
|
||||
&:last-child .md-search-result__teaser {
|
||||
margin-bottom: 1.2rem;
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
}
|
||||
|
||||
// Article - document or section
|
||||
&__article {
|
||||
position: relative;
|
||||
padding: 0 1.6rem;
|
||||
padding: 0 px2rem(16px);
|
||||
overflow: auto;
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: 4.4rem;
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: 4.4rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -548,7 +548,7 @@ $md-toggle__search--checked:
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0.2rem;
|
||||
margin: px2rem(2px);
|
||||
transition: opacity 0.25s;
|
||||
color: $md-color-black--light;
|
||||
content: "\E880"; // find_in_page
|
||||
@@ -567,7 +567,7 @@ $md-toggle__search--checked:
|
||||
|
||||
// Title
|
||||
.md-search-result__title {
|
||||
margin: 1.1rem 0;
|
||||
margin: px2rem(11px) 0;
|
||||
font-size: ms(0);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
@@ -588,7 +588,7 @@ $md-toggle__search--checked:
|
||||
// Teaser
|
||||
&__teaser {
|
||||
display: -webkit-box;
|
||||
max-height: 3.3rem;
|
||||
max-height: px2rem(33px);
|
||||
margin: 0.5em 0;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(-1);
|
||||
@@ -600,13 +600,13 @@ $md-toggle__search--checked:
|
||||
|
||||
// [mobile -]: Increase number of lines
|
||||
@include break-to-device(mobile) {
|
||||
max-height: 5rem;
|
||||
max-height: px2rem(50px);
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
// [tablet landscape]: Increase number of lines
|
||||
@include break-at-device(tablet landscape) {
|
||||
max-height: 5rem;
|
||||
max-height: px2rem(50px);
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,8 +35,8 @@ $md-toggle__drawer--checked:
|
||||
// Sidebar container
|
||||
.md-sidebar {
|
||||
position: absolute;
|
||||
width: 24.2rem;
|
||||
padding: 2.4rem 0;
|
||||
width: px2rem(242px);
|
||||
padding: px2rem(24px) 0;
|
||||
overflow: hidden;
|
||||
|
||||
// Hide for print
|
||||
@@ -47,7 +47,7 @@ $md-toggle__drawer--checked:
|
||||
// Lock sidebar to container height (account for fixed header)
|
||||
&[data-md-state="lock"] {
|
||||
position: fixed;
|
||||
top: 4.8rem;
|
||||
top: px2rem(48px);
|
||||
}
|
||||
|
||||
// [tablet -]: Convert navigation to drawer
|
||||
@@ -57,8 +57,8 @@ $md-toggle__drawer--checked:
|
||||
&--primary {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -24.2rem;
|
||||
width: 24.2rem;
|
||||
left: px2rem(-242px);
|
||||
width: px2rem(242px);
|
||||
height: 100%;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
@@ -69,7 +69,7 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
right: -24.2rem;
|
||||
right: px2rem(-242px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
@@ -82,11 +82,11 @@ $md-toggle__drawer--checked:
|
||||
#{$md-toggle__drawer--checked} & {
|
||||
@include z-depth(8);
|
||||
|
||||
transform: translateX(24.2rem);
|
||||
transform: translateX(px2rem(242px));
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-24.2rem);
|
||||
transform: translateX(px2rem(-242px));
|
||||
}
|
||||
|
||||
// Just show drawer, if browser doesn't support 3D transforms
|
||||
@@ -122,11 +122,11 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// [screen +]: Limit to grid
|
||||
@include break-from-device(screen) {
|
||||
margin-left: 122rem;
|
||||
margin-left: px2rem(1220px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 122rem;
|
||||
margin-right: px2rem(1220px);
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
@@ -135,7 +135,7 @@ $md-toggle__drawer--checked:
|
||||
// Wrapper for scrolling on overflow
|
||||
&__scrollwrap {
|
||||
max-height: 100%;
|
||||
margin: 0 0.4rem;
|
||||
margin: 0 px2rem(4px);
|
||||
overflow-y: auto;
|
||||
// Hack: putting the scroll wrapper on the GPU massively reduces jitter
|
||||
// when locking the sidebars into place
|
||||
@@ -157,8 +157,8 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// Override native scrollbar styles
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Style scrollbar thumb
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 1.3rem;
|
||||
height: px2rem(13px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,16 +59,16 @@
|
||||
// Source container
|
||||
.md-source {
|
||||
display: block;
|
||||
padding-right: 1.2rem;
|
||||
padding-right: px2rem(12px);
|
||||
transition: opacity 0.25s;
|
||||
font-size: 1.3rem;
|
||||
font-size: px2rem(13px);
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: initial;
|
||||
padding-left: 1.2rem;
|
||||
padding-left: px2rem(12px);
|
||||
}
|
||||
|
||||
// Hovered source container
|
||||
@@ -79,7 +79,7 @@
|
||||
// Necessary for vertical alignment
|
||||
&::after {
|
||||
display: inline-block;
|
||||
height: 4.8rem;
|
||||
height: px2rem(48px);
|
||||
content: "";
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -87,36 +87,36 @@
|
||||
// Repository platform icon
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
width: px2rem(48px);
|
||||
height: px2rem(48px);
|
||||
content: "";
|
||||
vertical-align: middle;
|
||||
|
||||
// Align SVG, do not scale, as this will incur strange formatting bugs
|
||||
// in Internet Explorer and Edge
|
||||
svg {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-top: 1.2rem;
|
||||
margin-left: 1.2rem;
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
margin-top: px2rem(12px);
|
||||
margin-left: px2rem(12px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: 1.2rem;
|
||||
margin-right: px2rem(12px);
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct alignment, if icon is present
|
||||
+ .md-source__repository {
|
||||
margin-left: -4.4rem;
|
||||
padding-left: 4rem;
|
||||
margin-left: px2rem(-44px);
|
||||
padding-left: px2rem(40px);
|
||||
|
||||
// Adjust for RTL languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: -4.4rem;
|
||||
margin-right: px2rem(-44px);
|
||||
margin-left: initial;
|
||||
padding-right: 4rem;
|
||||
padding-right: px2rem(40px);
|
||||
padding-left: initial;
|
||||
}
|
||||
}
|
||||
@@ -126,7 +126,7 @@
|
||||
&__repository {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-left: 1.2rem;
|
||||
margin-left: px2rem(12px);
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -137,7 +137,7 @@
|
||||
&__facts {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.1rem;
|
||||
font-size: px2rem(11px);
|
||||
font-weight: 700;
|
||||
list-style-type: none;
|
||||
opacity: 0.75;
|
||||
@@ -165,7 +165,7 @@
|
||||
|
||||
// Middle dot before fact
|
||||
&::before {
|
||||
margin: 0 0.2rem;
|
||||
margin: 0 px2rem(2px);
|
||||
content: "\00B7";
|
||||
}
|
||||
|
||||
@@ -180,8 +180,8 @@
|
||||
.md-source-file {
|
||||
display: inline-block;
|
||||
margin: 1em 0.5em 1em 0;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
padding-right: px2rem(5px);
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black--lightest;
|
||||
font-size: ms(-1);
|
||||
list-style-type: none;
|
||||
@@ -193,8 +193,8 @@
|
||||
@extend %md-icon;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
margin-right: px2rem(5px);
|
||||
padding: px2rem(5px);
|
||||
background-color: $md-color-black--lighter;
|
||||
color: $md-color-white;
|
||||
font-size: ms(0);
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
// List of items
|
||||
&__list {
|
||||
margin: 0;
|
||||
margin-left: 0.4rem;
|
||||
margin-left: px2rem(4px);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
@@ -54,20 +54,20 @@
|
||||
// List item
|
||||
&__item {
|
||||
display: inline-block;
|
||||
height: 4.8rem;
|
||||
padding-right: 1.2rem;
|
||||
padding-left: 1.2rem;
|
||||
height: px2rem(48px);
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: px2rem(12px);
|
||||
}
|
||||
|
||||
// Link inside item - could be defined as block elements and aligned via
|
||||
// line height, but this would imply more repaints when scrolling
|
||||
&__link {
|
||||
display: block;
|
||||
margin-top: 1.6rem;
|
||||
margin-top: px2rem(16px);
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 0.25s;
|
||||
font-size: 1.4rem;
|
||||
font-size: px2rem(14px);
|
||||
opacity: 0.7;
|
||||
|
||||
// Active or hovered link
|
||||
@@ -141,7 +141,7 @@
|
||||
// Reset font-size for nested items and induce margin collapse
|
||||
&--nested {
|
||||
display: none;
|
||||
font-size: 1.4rem;
|
||||
font-size: px2rem(14px);
|
||||
overflow: auto;
|
||||
visibility: visible;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user