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

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

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

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

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

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

@ -263,29 +263,6 @@ $codehilite-whitespace: transparent;
flex: 1; flex: 1;
overflow: hidden; 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 // 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 // and tables get this class names by default
.highlight { .highlight {
@extend .codehilite; @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 // 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; display: none;
order: 99; order: 99;
width: 100%; width: 100%;
background-color: var(--md-default-bg-color); background-color: var(--md-code-bg-color);
// Actual content // Actual content
pre { pre {
@ -48,7 +48,7 @@
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0; margin: 1em 0;
border: px2rem(1px) solid var(--md-default-fg-color--lightest); border: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0.2em; border-radius: px2rem(2px);
// Hide radio buttons // Hide radio buttons
> input { > input {
@ -56,7 +56,8 @@
// Active tab label // Active tab label
&:checked + label { &:checked + label {
font-weight: 700; border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
// Show code tab content // Show code tab content
& + .tabbed-content { & + .tabbed-content {
@ -69,7 +70,7 @@
} }
// Emulate original pymdownx.superfences behavior and stretch to full // 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, pre,
.highlight, .highlight,
@ -78,6 +79,11 @@
.codehilitetable { .codehilitetable {
&:only-child { &:only-child {
margin: 0 px2rem(-12px); margin: 0 px2rem(-12px);
// Remove double background
pre {
background: transparent;
}
} }
} }
} }
@ -89,8 +95,14 @@
> label { > label {
width: auto; width: auto;
padding: px2rem(12px); 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-size: ms(-1);
font-weight: 700;
cursor: pointer; cursor: pointer;
// Hovered tab label // Hovered tab label