rvtr/wiki
1
Fork 0
mirror of https://github.com/rvtr/wiki.git synced 2025-10-31 06:31:13 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve tab CSS

Browse Source
This commit is contained in:
Pk11 2021-10-15 20:30:45 -05:00
parent af2723500c
commit db84c5d722
4 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_includes/tabs.html
View File

@ -1,7 +1,8 @@
<div class="tab-container"> <div class="tab-container">
<!-- <div class="tab-container-border"></div> -->
{% for tab in page.tabs[include.index] %} {% for tab in page.tabs[include.index] %}
<input id="tab-{{ tab[0] }}" class="d-none" name="tabs" type="radio" {% if forloop.first %}checked{% endif %}> <input id="tab-{{ tab[0] }}" class="d-none" name="tabs" type="radio" {% if forloop.first %}checked{% endif %}>
<label for="tab-{{ tab[0] }}" class="tab-link btn btn-outline-secondary" onclick="setTab('{{ tab[0] }}')">{{ tab[1] }}</label> <label for="tab-{{ tab[0] }}" class="tab-link" onclick="setTab('{{ tab[0] }}')">{{ tab[1] }}</label>
<div class="tab">{{ include.tabs[forloop.index0] | markdownify }}</div> <div class="tab">{{ include.tabs[forloop.index0] | markdownify }}</div>
{% endfor %} {% endfor %}
</div> </div>

43
_sass/base.scss
View File

@ -539,35 +539,44 @@ a.footnote::after {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.tab-link.btn { .tab-link {
margin-right: 0.25rem; border: 1px solid $borders;
padding: 0.5rem 1rem;
margin-bottom: -1px;
transition: 150ms ease;
}
.tab-link:not(:first-of-type) {
border-left-width: 0px;
}
.tab-link:first-of-type {
border-top-left-radius: 0.25rem;
}
.tab-link:last-of-type {
border-top-right-radius: 0.25rem;
} }
.tab { .tab {
display: none; display: none;
order: 99; order: 99;
padding-top: 1rem; padding: 1rem 1rem 0 1rem;
margin-bottom: 1rem;
width: 100%; width: 100%;
border: 1px solid $borders;
border-radius: 0 0.25rem 0.25rem 0.25rem;
} }
input:checked + label + .tab { input:checked + .tab-link + .tab {
display: block; display: block;
} }
abel { input:checked + .tab-link:not(:hover):not(:active):not(:focus) {
margin-right: 0.25rem; background-color: $borders;
border-color: $borders;
} }
.tab-link:hover, .tab-link:active, .tab-link:focus {
input:checked + label.btn-outline-secondary { color: $borders-hover-color;
color: #fff; background-color: $borders-hover;
background-color: #6c757d; border-color: $borders-hover;
border-color: #6c757d;
}
input:checked + label.btn-outline-secondary:hover, input:checked + label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus {
color: #fff;
background-color: #5c636a;
border-color: #565e64;
} }
} }

2
assets/css/dark.scss
View File

@ -7,6 +7,8 @@ $main-bg: #333;
$main-color: #ccc; $main-color: #ccc;
$header-color: #ddd; $header-color: #ddd;
$borders: #555; $borders: #555;
$borders-hover: #777;
$borders-hover-color: #fff;
$light-borders: #444; $light-borders: #444;
$blockquote-color: #999; $blockquote-color: #999;
$code-bg: #5559; $code-bg: #5559;

2
assets/css/light.scss
View File

@ -7,6 +7,8 @@ $main-bg: #fff;
$main-color: #222; $main-color: #222;
$header-color: #222; $header-color: #222;
$borders: #bbb; $borders: #bbb;
$borders-hover: #666;
$borders-hover-color: #fff;
$light-borders: #dee2e6; $light-borders: #dee2e6;
$blockquote-color: #666; $blockquote-color: #666;
$code-bg: #ccc6; $code-bg: #ccc6;