mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Partially ported palette for CSS variables
This commit is contained in:
squidfunk
parent
1da7195993
commit
9590cc1c2b
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.94ed7ba7.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94ed7ba7.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.cc13a381.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.cc13a381.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.1782b0c8.min.css",
|
||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.ed132eeb.min.css"
|
||||
"assets/stylesheets/main.scss": "assets/stylesheets/main.1e2c5b46.min.css",
|
||||
"assets/stylesheets/palette.scss": "assets/stylesheets/palette.29415394.min.css"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.1e2c5b46.min.css
vendored
Normal file
1
material/assets/stylesheets/main.1e2c5b46.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/palette.29415394.min.css
vendored
Normal file
1
material/assets/stylesheets/palette.29415394.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -43,9 +43,9 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.ed132eeb.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.1e2c5b46.min.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.1782b0c8.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.29415394.min.css' | url }}">
|
||||
{% endif %}
|
||||
{% if palette.primary %}
|
||||
{% import "partials/palette.html" as map %}
|
||||
@ -200,7 +200,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/bundle.94ed7ba7.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.cc13a381.min.js' | url }}"></script>
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
"clipboard.copy",
|
||||
|
||||
@ -45,8 +45,7 @@
|
||||
|
||||
// Accent color shades
|
||||
--md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1);
|
||||
--md-accent-fg-color--light: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
|
||||
--md-accent-fg-color--dark: hsla(#{hex2hsl($clr-indigo-a700)}, 1);
|
||||
--md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
|
||||
--md-accent-bg-color: var(--md-default-bg-color);
|
||||
--md-accent-bg-color--light: var(--md-default-bg-color--light);
|
||||
|
||||
|
||||
@ -293,7 +293,7 @@ $md-toggle__search--checked:
|
||||
color: var(--md-default-fg-color);
|
||||
text-overflow: clip;
|
||||
|
||||
// Placeholder and icon color in active state
|
||||
// Icon and placeholder color in active state
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: var(--md-default-fg-color--light);
|
||||
@ -533,7 +533,7 @@ $md-toggle__search--checked:
|
||||
// Focused or hovered link
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--md-accent-fg-color--light);
|
||||
background-color: var(--md-accent-fg-color--transparent);
|
||||
|
||||
// Slightly transparent icon
|
||||
.md-search-result__article::before {
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
|
||||
@import "modularscale";
|
||||
@import "material-color";
|
||||
@import "material-shadows";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Local imports
|
||||
@ -37,117 +36,43 @@
|
||||
|
||||
@import "config";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: button styles
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-primary],
|
||||
button[data-md-color-accent] {
|
||||
width: px2rem(130px);
|
||||
margin-bottom: px2rem(4px);
|
||||
padding: px2rem(24px) px2rem(8px) px2rem(4px);
|
||||
transition:
|
||||
background-color 250ms,
|
||||
opacity 250ms;
|
||||
border-radius: px2rem(2px);
|
||||
color: var(--md-default-bg-color);
|
||||
font-size: ms(-1);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
// Hovered color tile
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: primary colors
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Build primary colors
|
||||
@each $name, $color in (
|
||||
"red": $clr-red-400,
|
||||
"pink": $clr-pink-500,
|
||||
"purple": $clr-purple-400,
|
||||
"deep-purple": $clr-deep-purple-400,
|
||||
"indigo": $clr-indigo-500,
|
||||
"blue": $clr-blue-500,
|
||||
"light-blue": $clr-light-blue-500,
|
||||
"cyan": $clr-cyan-500,
|
||||
"teal": $clr-teal-500,
|
||||
"green": $clr-green-500,
|
||||
"light-green": $clr-light-green-600,
|
||||
"lime": $clr-lime-600,
|
||||
"yellow": $clr-yellow-800,
|
||||
"amber": $clr-amber-700,
|
||||
"orange": $clr-orange-600,
|
||||
"deep-orange": $clr-deep-orange-400,
|
||||
"brown": $clr-brown-500,
|
||||
"grey": $clr-grey-600,
|
||||
"blue-grey": $clr-blue-grey-600
|
||||
@each $name, $colors in (
|
||||
"red": $clr-red-400 $clr-red-200 $clr-red-600,
|
||||
"pink": $clr-pink-500 $clr-pink-200 $clr-pink-700,
|
||||
"purple": $clr-purple-400 $clr-purple-200 $clr-purple-600,
|
||||
"deep-purple": $clr-deep-purple-400 $clr-deep-purple-200 $clr-deep-purple-500,
|
||||
"indigo": $clr-indigo-500 $clr-indigo-200 $clr-indigo-700,
|
||||
"blue": $clr-blue-500 $clr-blue-200 $clr-blue-700,
|
||||
"light-blue": $clr-light-blue-500 $clr-light-blue-200 $clr-light-blue-700,
|
||||
"cyan": $clr-cyan-500 $clr-cyan-200 $clr-cyan-700,
|
||||
"teal": $clr-teal-500 $clr-teal-200 $clr-teal-700,
|
||||
"green": $clr-green-500 $clr-green-200 $clr-green-700,
|
||||
"light-green": $clr-light-green-500 $clr-light-green-200 $clr-light-green-700,
|
||||
"lime": $clr-lime-500 $clr-lime-200 $clr-lime-700,
|
||||
"yellow": $clr-yellow-400 $clr-yellow-200 $clr-yellow-600,
|
||||
"amber": $clr-amber-500 $clr-amber-200 $clr-amber-700,
|
||||
"orange": $clr-orange-400 $clr-orange-200 $clr-orange-600,
|
||||
"deep-orange": $clr-deep-orange-400 $clr-deep-orange-200 $clr-deep-orange-600,
|
||||
"brown": $clr-brown-500 $clr-brown-200 $clr-brown-700,
|
||||
"grey": $clr-grey-600 $clr-grey-200 $clr-grey-700,
|
||||
"blue-grey": $clr-blue-grey-600 $clr-blue-grey-200 $clr-blue-grey-700
|
||||
) {
|
||||
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-primary="#{$name}"] {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Color palette
|
||||
[data-md-color-primary="#{$name}"] {
|
||||
--md-primary-fg-color: hsla(#{hex2hsl(nth($colors, 1))}, 1);
|
||||
--md-primary-fg-color--light: hsla(#{hex2hsl(nth($colors, 2))}, 1);
|
||||
--md-primary-fg-color--dark: hsla(#{hex2hsl(nth($colors, 3))}, 1);
|
||||
|
||||
// Links in typesetted content
|
||||
.md-typeset a {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Application header (stays always on top)
|
||||
.md-header {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Current or active link
|
||||
.md-nav__link:active,
|
||||
.md-nav__link--active {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Reset active color for nested list titles
|
||||
.md-nav__item--nested > .md-nav__link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Layered navigation
|
||||
@include break-to-device(tablet portrait) {
|
||||
|
||||
// Repository containing source
|
||||
.md-nav__source {
|
||||
background-color: $color; // TODO: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables mix($color, var(--md-default-fg-color), 75%);
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet -]: Layered navigation
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Site title in main navigation
|
||||
html & .md-nav--primary .md-nav__title[for="__drawer"] {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Set background color for tabs
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
background-color: $color;
|
||||
}
|
||||
// Inverted text for lighter shades
|
||||
@if index("lime" "yellow" "amber" "orange", $name) {
|
||||
--md-primary-bg-color: var(--md-default-fg-color);
|
||||
--md-primary-bg-color--light: var(--md-default-fg-color--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -156,14 +81,7 @@ button[data-md-color-accent] {
|
||||
// Rules: white
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-primary="white"] {
|
||||
background-color: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color);
|
||||
box-shadow: 0 0 px2rem(1px) var(--md-default-fg-color--light) inset;
|
||||
}
|
||||
|
||||
// Overrides for black color
|
||||
// Color palette
|
||||
[data-md-color-primary="white"] {
|
||||
|
||||
// Application header (stays always on top)
|
||||
@ -200,7 +118,12 @@ button[data-md-color-primary="white"] {
|
||||
.md-search__input {
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
|
||||
// Search input placeholder
|
||||
// Icon color
|
||||
+ .md-search__icon {
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
@ -240,7 +163,7 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-primary="black"] {
|
||||
background-color: $clr-black;
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
|
||||
// Color palette
|
||||
@ -248,12 +171,12 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Application header (stays always on top)
|
||||
.md-header {
|
||||
background-color: $clr-black;
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
background-color: $clr-black;
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Layered navigation
|
||||
@ -261,7 +184,7 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Repository containing source
|
||||
.md-nav__source {
|
||||
background-color: var(--md-default-bg-color); // TODO: mix($clr-black, var(--md-default-bg-color, 75%);
|
||||
background-color: var(--md-default-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,7 +193,7 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
background-color: var(--md-default-bg-color--lighter);
|
||||
background-color: var(--md-default-bg-color--lightest);
|
||||
}
|
||||
}
|
||||
|
||||
@ -279,7 +202,7 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Site title in main navigation
|
||||
html & .md-nav--primary .md-nav__title[for="__drawer"] {
|
||||
background-color: $clr-black;
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -288,7 +211,7 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Tabs with outline
|
||||
.md-tabs {
|
||||
background-color: $clr-black;
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -317,78 +240,8 @@ button[data-md-color-primary="black"] {
|
||||
"deep-orange": $clr-deep-orange-a200
|
||||
) {
|
||||
|
||||
// Color tile for presentation in theme documentation
|
||||
button[data-md-color-accent="#{$name}"] {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Color palette
|
||||
[data-md-color-accent="#{$name}"] {
|
||||
|
||||
// Typesetted content
|
||||
.md-typeset {
|
||||
|
||||
// Hovered and active links
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
pre code::-webkit-scrollbar-thumb:hover,
|
||||
.codehilite pre::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Copy to clipboard active icon
|
||||
.md-clipboard:hover::before,
|
||||
.md-clipboard:active::before {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Active or targeted back reference
|
||||
.footnote li:hover .footnote-backref:hover,
|
||||
.footnote li:target .footnote-backref {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Active, targeted or focused permalink
|
||||
[id]:hover .headerlink:hover,
|
||||
[id]:target .headerlink,
|
||||
[id] .headerlink:focus {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Focused or hovered link
|
||||
.md-nav__link:focus,
|
||||
.md-nav__link:hover {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Search container scrollbar thumb
|
||||
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Search result link
|
||||
.md-search-result__link {
|
||||
|
||||
// Active or hovered link
|
||||
&[data-md-state="active"],
|
||||
&:hover {
|
||||
background-color: transparentize($color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// Source file icon
|
||||
.md-source-file:hover::before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,13 +94,13 @@
|
||||
|
||||
<!-- Theme-related stylesheets -->
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.scss' | url }}" />
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.scss' | url }}" />
|
||||
|
||||
<!-- Extra color palette -->
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ 'assets/stylesheets/app-palette.scss' | url }}"
|
||||
href="{{ 'assets/stylesheets/palette.scss' | url }}"
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user