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 %}
{% 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 %}

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

@ -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;
}
}

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),
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;

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

@ -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 {

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

@ -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;
}

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

@ -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;
}
}
}

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

@ -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;

2
yarn.lock
View File

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