OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improved pymdownx.tabbed styles and palettes

Browse Source
This commit is contained in:
squidfunk 2020-02-25 22:17:23 +01:00
parent 913e9f4369
commit 590612939a
13 changed files with 84 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/javascripts/bundle.506c8aca.min.js.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.506c8aca.min.js → material/assets/javascripts/bundle.94ed7ba7.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.94ed7ba7.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

6
material/assets/manifest.json
View File

@ -1,8 +1,8 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.506c8aca.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.506c8aca.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.94ed7ba7.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94ed7ba7.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.5a1ee6a4.min.css"
"assets/stylesheets/app.scss": "assets/stylesheets/app.ed132eeb.min.css"
}

1
material/assets/stylesheets/app.5a1ee6a4.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.ed132eeb.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -43,7 +43,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.5a1ee6a4.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.ed132eeb.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.1782b0c8.min.css' | url }}">
{% endif %}
@ -200,7 +200,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.506c8aca.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.94ed7ba7.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

13
src/assets/javascripts/actions/main/scrollable/index.ts
View File

@ -20,6 +20,19 @@
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Helper types
* ------------------------------------------------------------------------- */
/**
* Global augmentations
*/
declare global {
interface CSSStyleDeclaration {
webkitOverflowScrolling: "touch" | ""
}
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */

44
src/assets/stylesheets/app-palette.scss
View File

@ -51,7 +51,7 @@ button[data-md-color-accent] {
background-color 250ms,
opacity 250ms;
border-radius: px2rem(2px);
color: var(--md-color-background);
color: var(--md-default-bg-color);
font-size: ms(-1);
text-align: left;
cursor: pointer;
@ -128,7 +128,7 @@ button[data-md-color-accent] {
// 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-color-text), 75%);
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%);
}
}
@ -158,9 +158,9 @@ button[data-md-color-accent] {
// Color tile for presentation in theme documentation
button[data-md-color-primary="white"] {
background-color: var(--md-color-background);
color: var(--md-color-text);
box-shadow: 0 0 px2rem(1px) var(--md-color-text--light) inset;
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
@ -168,18 +168,18 @@ button[data-md-color-primary="white"] {
// Application header (stays always on top)
.md-header {
background-color: var(--md-color-background);
color: var(--md-color-text);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
}
// Hero teaser
.md-hero {
background-color: var(--md-color-background);
color: var(--md-color-text);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
// Add a border if there are no tabs
&--expand {
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
}
@ -188,8 +188,8 @@ button[data-md-color-primary="white"] {
// Repository containing source
.md-nav__source {
background-color: var(--md-color-text--lightest);
color: var(--md-color-text);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color);
}
}
@ -198,11 +198,11 @@ button[data-md-color-primary="white"] {
// Search input
.md-search__input {
background-color: var(--md-color-text--lightest);
background-color: var(--md-default-fg-color--lightest);
// Search input placeholder
&::placeholder {
color: var(--md-color-text--light);
color: var(--md-default-fg-color--light);
}
}
}
@ -212,13 +212,13 @@ button[data-md-color-primary="white"] {
// Site title in main navigation
html & .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--md-color-background);
color: var(--md-color-text);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
}
// Hero teaser
.md-hero {
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
}
@ -227,9 +227,9 @@ button[data-md-color-primary="white"] {
// Tabs with outline
.md-tabs {
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
background-color: var(--md-color-background);
color: var(--md-color-text);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
}
}
}
@ -261,7 +261,7 @@ button[data-md-color-primary="black"] {
// Repository containing source
.md-nav__source {
background-color: var(--md-color-background); // TODO: mix($clr-black, var(--md-color-background, 75%);
background-color: var(--md-default-bg-color); // TODO: mix($clr-black, var(--md-default-bg-color, 75%);
}
}
@ -270,7 +270,7 @@ button[data-md-color-primary="black"] {
// Search input
.md-search__input {
background-color: var(--md-color-background--lighter);
background-color: var(--md-default-bg-color--lighter);
}
}

1
src/assets/stylesheets/base/_typeset.scss
View File

@ -419,6 +419,7 @@ kbd {
display: inline-block;
max-width: 100%;
border-radius: px2rem(2px);
background: var(--md-default-bg-color);
font-size: ms(-1);
box-shadow: inset 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
overflow: auto;

23
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -263,29 +263,6 @@ $codehilite-whitespace: transparent;
flex: 1;
overflow: hidden;
}
// TODO: refactor
[data-linenos] {
&::before {
display: inline-block;
position: sticky;
left: px2rem(-12px);
margin-right: px2rem(12px);
margin-left: px2rem(-12px);
padding-left: px2rem(12px);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: #F6F6F6;
color: var(--md-default-fg-color--lighter);
content: attr(data-linenos);
user-select: none;
@include break-to-device(mobile) {
left: px2rem(-32px);
margin-left: px2rem(-32px);
padding-left: px2rem(32px);
}
}
}
}
// Scoped in typesetted content to match specificity of regular content

23
src/assets/stylesheets/extensions/pymdown/_highlight.scss
View File

@ -29,6 +29,29 @@
// and tables get this class names by default
.highlight {
@extend .codehilite;
// Inline line numbers
[data-linenos] {
&::before {
display: inline-block;
position: sticky;
left: px2rem(-12px);
margin-right: px2rem(12px);
margin-left: px2rem(-12px);
padding-left: px2rem(12px);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--lighter);
content: attr(data-linenos);
user-select: none;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
left: px2rem(-32px);
margin-left: px2rem(-32px);
padding-left: px2rem(32px);
}
}
}
}
// Same as above, but for code blocks with line numbers enabled

22
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -32,7 +32,7 @@
display: none;
order: 99;
width: 100%;
background-color: var(--md-default-bg-color);
background-color: var(--md-code-bg-color);
// Actual content
pre {
@ -48,7 +48,7 @@
flex-wrap: wrap;
margin: 1em 0;
border: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0.2em;
border-radius: px2rem(2px);
// Hide radio buttons
> input {
@ -56,7 +56,8 @@
// Active tab label
&:checked + label {
font-weight: 700;
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
// Show code tab content
& + .tabbed-content {
@ -69,7 +70,7 @@
}
// Emulate original pymdownx.superfences behavior and stretch to full
// width and height when when a code block is the only child of a tab
// width and height when a code block is the only child of a tab
> {
pre,
.highlight,
@ -78,6 +79,11 @@
.codehilitetable {
&:only-child {
margin: 0 px2rem(-12px);
// Remove double background
pre {
background: transparent;
}
}
}
}
@ -89,8 +95,14 @@
> label {
width: auto;
padding: px2rem(12px);
transition: color 125ms;
padding-bottom: px2rem(10px);
transition:
color 125ms,
border 250ms;
border-bottom: px2rem(2px) solid transparent;
color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700;
cursor: pointer;
// Hovered tab label