Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2025-02-17 18:49:21 +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 Color names are case-insensitive, but must match the names of the Material
Design color palette. Valid values are: `red`, `pink`, `purple`, `deep purple`, Design color palette. Valid values are: `red`, `pink`, `purple`, `deep purple`,
`indigo`, `blue`, `light blue`, `cyan`, `teal`, `green`, `light green`, `lime`, `indigo`, `blue`, `light blue`, `cyan`, `teal`, `green`, `light green`, `lime`,
`yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey` and `blue grey`. `yellow`, `amber`, `orange`, `deep orange`, `brown`, `grey`, `blue grey` and
The last three colors can only be used as a primary color. `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 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 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="brown">Brown</button>
<button data-md-color-primary="grey">Grey</button> <button data-md-color-primary="grey">Grey</button>
<button data-md-color-primary="blue-grey">Blue Grey</button> <button data-md-color-primary="blue-grey">Blue Grey</button>
<button data-md-color-primary="white">White</button>
<script> <script>
var buttons = document.querySelectorAll("button[data-md-color-primary]"); 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 %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% 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 %} {% 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 %} {% endif %}
{% endblock %} {% endblock %}
{% block libs %} {% 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 // Overrides for white color
[data-md-color-primary="white"] { [data-md-color-primary="white"] {

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

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