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

Centralized box-shadow definitions

Browse Source
This commit is contained in:
squidfunk 2021-11-21 22:50:55 +01:00
parent 58ab9a875e
commit 9e7b48a21f
21 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/stylesheets/main.038078fb.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.038078fb.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/main.0c73cc44.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.0c73cc44.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -34,7 +34,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.0c73cc44.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.038078fb.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

4
material/overrides/assets/stylesheets/main.db932f97.min.css → material/overrides/assets/stylesheets/main.80c832e2.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/overrides/assets/stylesheets/main.80c832e2.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/overrides/assets/stylesheets/main.db932f97.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/overrides/main.html
View File

@ -3,7 +3,7 @@
-#}
{% extends "base.html" %}
{% block extrahead %}
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.db932f97.min.css' | url }}">
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.80c832e2.min.css' | url }}">
{% endblock %}
{% block announce %}
<a href="https://twitter.com/squidfunk">

15
src/assets/stylesheets/main/_colors.scss
View File

@ -104,4 +104,19 @@
--md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
--md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
}
// Shadow depth 1
--md-shadow-z1:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);
// Shadow depth 2
--md-shadow-z2:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);
// Shadow depth 3
--md-shadow-z3:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);
}

3
src/assets/stylesheets/main/_typeset.scss
View File

@ -291,8 +291,6 @@ kbd {
// Tooltip
&[title]:is(:focus, :hover)::after {
@include z-depth(2);
position: absolute;
left: 0;
display: inline-block;
@ -305,6 +303,7 @@ kbd {
font-size: px2rem(14px);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
box-shadow: var(--md-shadow-z3);
content: attr(title);
}
}

4
src/assets/stylesheets/main/extensions/markdown/_admonition.scss
View File

@ -71,9 +71,7 @@ $admonitions: (
background-color: var(--md-admonition-bg-color);
border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.05);
box-shadow: var(--md-shadow-z1);
// [print]: Omit shadow as it may lead to rendering errors
@media print {

3
src/assets/stylesheets/main/layout/_dialog.scss
View File

@ -26,8 +26,6 @@
// Dialog
.md-dialog {
@include z-depth(2);
position: fixed;
right: px2rem(16px);
bottom: px2rem(16px);
@ -37,6 +35,7 @@
padding: px2rem(8px) px2rem(12px);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
box-shadow: var(--md-shadow-z3);
transform: translateY(100%);
opacity: 0;
transition:

16
src/assets/stylesheets/main/layout/_form.scss
View File

@ -61,17 +61,17 @@
height: px2rem(36px);
padding: 0 px2rem(12px);
font-size: px2rem(16px);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.1);
transition: box-shadow 250ms;
border-bottom: px2rem(2px) solid var(--md-default-fg-color--lighter);
border-radius: px2rem(2px) px2rem(2px) 0 0;
box-shadow: var(--md-shadow-z1);
transition:
border 250ms,
box-shadow 250ms;
// Input on focus/hover
&:is(:focus, :hover) {
box-shadow:
0 px2rem(8px) px2rem(20px) hsla(0, 0%, 0%, 0.15),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.15);
border-bottom-color: var(--md-accent-fg-color);
box-shadow: var(--md-shadow-z2);
}
// Stretch to full width

5
src/assets/stylesheets/main/layout/_search.scss
View File

@ -493,8 +493,7 @@
// Show output when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
@include z-depth(6);
box-shadow: var(--md-shadow-z3);
opacity: 1;
}
}
@ -597,7 +596,7 @@
// Search result item
&__item {
box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest);
// Omit border on first child
&:first-child {

4
src/assets/stylesheets/main/layout/_select.scss
View File

@ -39,9 +39,7 @@
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
box-shadow: var(--md-shadow-z2);
transform: translate3d(-50%, px2rem(6px), 0);
opacity: 0;
transition:

3
src/assets/stylesheets/main/layout/_sidebar.scss
View File

@ -64,8 +64,7 @@
// Show sidebar when drawer is active
[data-md-toggle="drawer"]:checked ~ .md-container & {
@include z-depth(8);
box-shadow: var(--md-shadow-z3);
transform: translateX(px2rem(242px));
// Adjust for right-to-left languages

4
src/assets/stylesheets/main/layout/_tooltip.scss
View File

@ -66,9 +66,7 @@
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
box-shadow: var(--md-shadow-z2);
transform: translateY(px2rem(-8px));
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;

4
src/assets/stylesheets/main/layout/_top.scss
View File

@ -36,9 +36,7 @@
background-color: var(--md-default-bg-color);
border-radius: px2rem(32px);
outline: none;
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
box-shadow: var(--md-shadow-z2);
transform: translate(-50%, 0);
transition:
color 125ms,

4
src/assets/stylesheets/main/layout/_version.scss
View File

@ -100,9 +100,7 @@
list-style-type: none;
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
box-shadow: var(--md-shadow-z2);
opacity: 0;
transition:
max-height 0ms 500ms,

10
src/overrides/assets/stylesheets/main/layout/_iconsearch.scss
View File

@ -32,23 +32,19 @@
position: relative;
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.1);
box-shadow: var(--md-shadow-z1);
transition: box-shadow 125ms;
// Icon search on focus/hover
&:focus-within,
&:hover {
box-shadow:
0 px2rem(8px) px2rem(20px) hsla(0, 0%, 0%, 0.15),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.15);
box-shadow: var(--md-shadow-z2);
}
// Icon search input
.md-input {
background: var(--md-default-bg-color);
box-shadow: 0 0 px2rem(12px) hsla(0, 0%, 0%, 0.07);
box-shadow: none;
// Slate theme, i.e. dark mode
[data-md-color-scheme="slate"] & {