Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00
Code Issues Releases Wiki Activity

Added white to primary colors

Browse Source
This commit is contained in:
squidfunk 2017-11-19 17:41:06 +01:00 committed by Martin Donath
parent e6a5e2e160
commit 250f1fd172
6 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/getting-started.md
View File

@ -159,8 +159,8 @@ theme:
Color names are case-insensitive, but must match the names of the Material
Design color palette. Valid values are: `red`, `pink`, `purple`, `deep purple`,
`indigo`, `blue`, `light blue`, `cyan`, `teal`, `green`, `light green`, `lime`,
`yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey` and `blue grey`.
The last three colors can only be used as a primary color.
`yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey`, `blue grey` and
`white`. The four three colors can only be used as a primary color.
If the color is set via this configuration, an additional CSS file that
defines the color palette is automatically included. If you want to keep things
@ -195,6 +195,7 @@ Click on a tile to change the primary color of the theme:
<button data-md-color-primary="brown">Brown</button>
<button data-md-color-primary="grey">Grey</button>
<button data-md-color-primary="blue-grey">Blue Grey</button>
<button data-md-color-primary="white">White</button>
<script>
var buttons = document.querySelectorAll("button[data-md-color-primary]");

1
material/assets/stylesheets/application-3e082b9545.palette.css
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-e056ea954c.css
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-e056ea954c.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3368aa6b74.css">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3e082b9545.palette.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-95ad5566f9.palette.css">
{% endif %}
{% endblock %}
{% block libs %}

7
src/assets/stylesheets/application.palette.scss
View File

@ -152,6 +152,13 @@ button[data-md-color-accent] {
}
}
// Color tile for presentation in theme documentation
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;
}
// Overrides for white color
[data-md-color-primary="white"] {

18
src/assets/stylesheets/layout/_header.scss
View File

@ -31,7 +31,9 @@
right: 0;
left: 0;
height: 4.8rem;
transition: background-color 0.25s;
transition:
background-color 0.25s,
color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
box-shadow:
@ -43,9 +45,7 @@
// Always show shadow, in case JavaScript is not available
.no-js & {
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.1),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
box-shadow: none;
}
// [screen +]: Show shadow depending on scroll offset
@ -54,7 +54,10 @@
// Show and animate shadow
&[data-md-state="shadow"] {
transition: box-shadow 0.25s;
transition:
background-color 0.25s,
color 0.25,
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);
@ -144,6 +147,11 @@
z-index: -1;
pointer-events: none;
}
// Induce ellipsis, if no JavaScript is available
.no-js & {
position: initial;
}
}
// Header title - set line height to match icon for correct alignment