mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Added white to primary colors
This commit is contained in:
parent
e6a5e2e160
commit
250f1fd172
@ -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]");
|
||||
|
File diff suppressed because one or more lines are too long
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-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 %}
|
||||
|
@ -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"] {
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user