rolfiee/wiki
1
Fork 0
mirror of https://github.com/rolfiee/wiki.git synced 2025-06-18 19:25:38 -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>

59
_sass/base.scss
View File

@ -273,7 +273,7 @@ html:not([dir=rtl]) {
margin-right: 0!important; margin-right: 0!important;
padding-right: 0.25rem; padding-right: 0.25rem;
} }
.btn-qr { .btn-qr {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -303,7 +303,7 @@ html[dir=rtl] {
margin-left: 0!important; margin-left: 0!important;
padding-left: 0.25rem; padding-left: 0.25rem;
} }
.btn-qr { .btn-qr {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@ -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;
} }
} }
@ -575,10 +584,10 @@ a.footnote::after {
// FAQs // FAQs
#faq-container { #faq-container {
margin-bottom: 1rem; margin-bottom: 1rem;
> details.accordian-item { > details.accordian-item {
margin-bottom: 0; margin-bottom: 0;
> summary.accordion-button { > summary.accordion-button {
color: $header-color; color: $header-color;
@ -606,7 +615,7 @@ a.footnote::after {
} }
} }
} }
> .faq { > .faq {
background-color: $active-accordian-bg-color; background-color: $active-accordian-bg-color;
} }
@ -615,7 +624,7 @@ a.footnote::after {
summary.accordion-button { summary.accordion-button {
color: $active-accordian-header-color; color: $active-accordian-header-color;
background-color: $active-accordian-header-bg-color; background-color: $active-accordian-header-bg-color;
&::after { &::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg); transform: rotate(-180deg);

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;