Fixed rendering of nested tabbed code blocks

This commit is contained in:
squidfunk 2018-06-13 09:51:04 +02:00
parent 74e27a21c2
commit 87f9a3a25b
3 changed files with 10 additions and 17 deletions

View File

@ -48,7 +48,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.e8ff00e1.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.4f4f49e8.css">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.6079476c.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.6079476c.css">
{% endif %} {% endif %}

View File

@ -46,16 +46,12 @@
display: flex; display: flex;
position: relative; position: relative;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 0.1rem solid $md-color-black--lightest; margin: 1em 0;
border: 0.1rem solid $md-color-black--lightest;
border-radius: 0.2em; border-radius: 0.2em;
// [mobile +]: Collapse tab labels
@include break-from-device(tablet) {
border: 0.1rem solid $md-color-black--lightest;
}
// Hide radio buttons // Hide radio buttons
& > input { > input {
display: none; display: none;
// Active tab label // Active tab label
@ -70,9 +66,9 @@
} }
// Tab label // Tab label
& > label { > label {
width: auto; width: auto;
padding: 1.2rem 1.6rem; padding: 1.2rem 1.2rem;
transition: color 0.125s; transition: color 0.125s;
font-size: ms(-1); font-size: ms(-1);
cursor: pointer; cursor: pointer;
@ -81,11 +77,6 @@
html &:hover { html &:hover {
color: $md-color-accent; color: $md-color-accent;
} }
// [mobile +]: Collapse tab labels
@include break-from-device(tablet) {
padding: 1.2rem 1.2rem;
}
} }
} }
@ -95,6 +86,8 @@
// [mobile -]: Stretch to whole width // [mobile -]: Stretch to whole width
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em -1.6rem; margin: 1em -1.6rem;
border: 0;
border-top: 0.1rem solid $md-color-black--lightest;
border-radius: 0; border-radius: 0;
// Actual container with code, overflowing // Actual container with code, overflowing