OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed indented hero on animation due to scroll bar

Browse Source
This commit is contained in:
squidfunk 2017-11-22 19:25:37 +01:00 committed by Martin Donath
parent 6dc12758bb
commit f6c0ea670e
12 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/stylesheets/application-palette.d142ea54.css
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/application-palette.fbd935c7.css Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/application.d9f8e096.css
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/application.fc485aed.css Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -46,9 +46,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% 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 %} {% 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 %} {% endif %}
{% endblock %} {% endblock %}
{% block libs %} {% block libs %}

41
src/assets/stylesheets/application-palette.scss
View File

@ -103,6 +103,11 @@ button[data-md-color-accent] {
background-color: $color; background-color: $color;
} }
// Hero teaser
.md-hero {
background-color: $color;
}
// Current or active link // Current or active link
.md-nav__link:active, .md-nav__link:active,
.md-nav__link--active { .md-nav__link--active {
@ -146,7 +151,7 @@ button[data-md-color-accent] {
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
background: $color; background-color: $color;
} }
} }
} }
@ -168,13 +173,14 @@ button[data-md-color-primary="white"] {
color: $md-color-black; color: $md-color-black;
} }
// Search input // Hero teaser
.md-search__input { .md-hero {
background-color: $md-color-black--lightest; background-color: $md-color-white;
color: $md-color-black;
// Search input placeholder // Add a border if there are no tabs
&::placeholder { &--expand {
color: $md-color-black--light; 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 // [tablet -]: Layered navigation
@include break-to-device(tablet) { @include break-to-device(tablet) {
@ -201,6 +221,11 @@ button[data-md-color-primary="white"] {
background-color: $md-color-white; background-color: $md-color-white;
color: $md-color-black; color: $md-color-black;
} }
// Hero teaser
.md-hero {
border-bottom: 0.1rem solid $md-color-black--lightest;
}
} }
// [screen +]: Set background color for tabs // [screen +]: Set background color for tabs
@ -209,7 +234,7 @@ button[data-md-color-primary="white"] {
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
border-bottom: 0.1rem solid $md-color-black--lightest; border-bottom: 0.1rem solid $md-color-black--lightest;
background: $md-color-white; background-color: $md-color-white;
color: $md-color-black; color: $md-color-black;
} }
} }

2
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -79,7 +79,7 @@
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0), transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
opacity 0.175s; opacity 0.175s;
border-radius: 0.2rem; border-radius: 0.2rem;
background: $md-color-black--light; background-color: $md-color-black--light;
color: $md-color-white; color: $md-color-white;
font-size: ms(-1); font-size: ms(-1);
white-space: nowrap; white-space: nowrap;

2
src/assets/stylesheets/layout/_footer.scss
View File

@ -112,7 +112,7 @@
// Non-navigational information // Non-navigational information
.md-footer-meta { .md-footer-meta {
background: opacify($md-color-black, 0.025); background-color: opacify($md-color-black, 0.025);
// Set spacing // Set spacing
&__inner { &__inner {

7
src/assets/stylesheets/layout/_hero.scss
View File

@ -27,10 +27,10 @@
// Hero teaser // Hero teaser
.md-hero { .md-hero {
transition: background 0.25s; transition: background 0.25s;
background: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
font-size: ms(1); font-size: ms(1);
overflow: auto; overflow: hidden;
// Inner wrapper // Inner wrapper
&__inner { &__inner {
@ -39,6 +39,7 @@
transition: transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s; opacity 0.25s;
transition-delay: 0.1s;
// [tablet -]: Compensate for missing tabs // [tablet -]: Compensate for missing tabs
@include break-to-device(tablet) { @include break-to-device(tablet) {
@ -56,7 +57,7 @@
opacity: 0; opacity: 0;
} }
/* Adjust bottom spacing if there are no tabs */ // Adjust bottom spacing if there are no tabs
.md-hero--expand & { .md-hero--expand & {
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
} }

6
src/assets/stylesheets/layout/_source.scss
View File

@ -157,7 +157,7 @@
margin: 1em 0.5em 1em 0; margin: 1em 0.5em 1em 0;
padding-right: 0.5rem; padding-right: 0.5rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: $md-color-black--lightest; background-color: $md-color-black--lightest;
font-size: ms(-1); font-size: ms(-1);
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
@ -170,7 +170,7 @@
display: inline-block; display: inline-block;
margin-right: 0.5rem; margin-right: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background: $md-color-black--lighter; background-color: $md-color-black--lighter;
color: $md-color-white; color: $md-color-white;
font-size: ms(0); font-size: ms(0);
content: "\E86F"; // code content: "\E86F"; // code
@ -203,7 +203,7 @@
// Icon // Icon
&::before { &::before {
background: $md-color-accent; background-color: $md-color-accent;
} }
} }
} }

2
src/assets/stylesheets/layout/_tabs.scss
View File

@ -28,7 +28,7 @@
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 0.25s; transition: background 0.25s;
background: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
overflow: auto; overflow: auto;

2
yarn.lock
View File

@ -2097,7 +2097,7 @@ expand-range@^1.8.1:
dependencies: dependencies:
fill-range "^2.1.0" fill-range "^2.1.0"
expose-loader@^0.7.3: expose-loader@^0.7.4:
version "0.7.4" version "0.7.4"
resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-0.7.4.tgz#9bcdd3878b5da9107930b55a03f65afe90b3314a" resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-0.7.4.tgz#9bcdd3878b5da9107930b55a03f65afe90b3314a"