mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Fixed indented hero on animation due to scroll bar
This commit is contained in:
parent
6dc12758bb
commit
f6c0ea670e
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
2
material/assets/stylesheets/application.fc485aed.css
Normal file
2
material/assets/stylesheets/application.fc485aed.css
Normal file
File diff suppressed because one or more lines are too long
@ -46,9 +46,9 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.d9f8e096.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.fc485aed.css">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.d142ea54.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.fbd935c7.css">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block libs %}
|
||||
|
@ -103,6 +103,11 @@ button[data-md-color-accent] {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Current or active link
|
||||
.md-nav__link:active,
|
||||
.md-nav__link--active {
|
||||
@ -146,7 +151,7 @@ button[data-md-color-accent] {
|
||||
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
background: $color;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -168,13 +173,14 @@ button[data-md-color-primary="white"] {
|
||||
color: $md-color-black;
|
||||
}
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
background-color: $md-color-black--lightest;
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
|
||||
// Search input placeholder
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
// Add a border if there are no tabs
|
||||
&--expand {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
}
|
||||
|
||||
@ -193,6 +199,20 @@ button[data-md-color-primary="white"] {
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet portrait +]: Change color of search input
|
||||
@include break-from-device(tablet landscape) {
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
background-color: $md-color-black--lightest;
|
||||
|
||||
// Search input placeholder
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet -]: Layered navigation
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
@ -201,6 +221,11 @@ button[data-md-color-primary="white"] {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Set background color for tabs
|
||||
@ -209,7 +234,7 @@ button[data-md-color-primary="white"] {
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
border-bottom: 0.1rem solid $md-color-black--lightest;
|
||||
background: $md-color-white;
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
}
|
||||
}
|
||||
|
@ -79,7 +79,7 @@
|
||||
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
|
||||
opacity 0.175s;
|
||||
border-radius: 0.2rem;
|
||||
background: $md-color-black--light;
|
||||
background-color: $md-color-black--light;
|
||||
color: $md-color-white;
|
||||
font-size: ms(-1);
|
||||
white-space: nowrap;
|
||||
|
@ -112,7 +112,7 @@
|
||||
|
||||
// Non-navigational information
|
||||
.md-footer-meta {
|
||||
background: opacify($md-color-black, 0.025);
|
||||
background-color: opacify($md-color-black, 0.025);
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
|
@ -27,10 +27,10 @@
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
transition: background 0.25s;
|
||||
background: $md-color-primary;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
font-size: ms(1);
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
|
||||
// Inner wrapper
|
||||
&__inner {
|
||||
@ -39,6 +39,7 @@
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 0.25s;
|
||||
transition-delay: 0.1s;
|
||||
|
||||
// [tablet -]: Compensate for missing tabs
|
||||
@include break-to-device(tablet) {
|
||||
@ -56,7 +57,7 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Adjust bottom spacing if there are no tabs */
|
||||
// Adjust bottom spacing if there are no tabs
|
||||
.md-hero--expand & {
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
@ -157,7 +157,7 @@
|
||||
margin: 1em 0.5em 1em 0;
|
||||
padding-right: 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
background: $md-color-black--lightest;
|
||||
background-color: $md-color-black--lightest;
|
||||
font-size: ms(-1);
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
@ -170,7 +170,7 @@
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: $md-color-black--lighter;
|
||||
background-color: $md-color-black--lighter;
|
||||
color: $md-color-white;
|
||||
font-size: ms(0);
|
||||
content: "\E86F"; // code
|
||||
@ -203,7 +203,7 @@
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
background: $md-color-accent;
|
||||
background-color: $md-color-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -28,7 +28,7 @@
|
||||
.md-tabs {
|
||||
width: 100%;
|
||||
transition: background 0.25s;
|
||||
background: $md-color-primary;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
overflow: auto;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user