mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Added helper function for rem calculation and set base font size to 20px
This commit is contained in:
squidfunk
parent
1b45a24113
commit
2007484306
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application.0279f501.css
Normal file
1
material/assets/stylesheets/application.0279f501.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -53,9 +53,9 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.572ca0f0.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.0279f501.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.22915126.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.224b79ff.css' | url }}">
|
||||
{% endif %}
|
||||
{% if palette.primary %}
|
||||
{% import "partials/palette.html" as map %}
|
||||
@ -190,7 +190,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/application.6460bce7.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/application.daa9a053.js' | url }}"></script>
|
||||
{% if lang.t("search.language") != "en" %}
|
||||
{% set languages = lang.t("search.language").split(",") %}
|
||||
{% if languages | length and languages[0] != "" %}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user