klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-04 23:11:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

better tab style

Browse Source
This commit is contained in:
imperosol 2024-12-01 18:14:09 +01:00
parent 04b4b34bfe
commit 1c79c25262
2 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
core/static/core/style.scss
View File

@ -290,29 +290,39 @@ body {
} }
.tabs { .tabs {
border-radius: 5px;
.tab-headers { .tab-headers {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
.tab-header{ background-color: $primary-neutral-light-color;
margin: 0; padding: 3px 12px 12px;
flex: 1 1; column-gap: 20px;
border-radius: 5px 5px 0 0; border-top-left-radius: 5px;
font-size: 100%; border-top-right-radius: 5px;
@media (max-width: 800px) { .tab-header {
flex-wrap: wrap; border: none;
padding-right: 0;
padding-left: 0;
font-size: 120%;
background-color: unset;
position: relative;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
border-radius: 2px;
transition: all 0.2s ease-in-out;
} }
&.active { &:hover:after {
background-color: $white-color; border-bottom-color: darken($primary-neutral-light-color, 20%);
border: 1px solid $primary-neutral-dark-color;
border-bottom: none;
} }
&:not(.active) { &.active:after {
background-color: $primary-neutral-dark-color; border-bottom-color: $primary-dark-color;
color: darken($white-color, 5%);
&:hover {
background-color: lighten($primary-neutral-dark-color, 15%);
}
} }
} }
} }

6
core/templates/core/macros.jinja
View File

@ -303,7 +303,7 @@
{% endwith %} {% endwith %}
#} #}
<div <div
class="tabs" class="tabs shadow"
x-data="{selected: '{{ tab_list[0][0] }}'}" x-data="{selected: '{{ tab_list[0][0] }}'}"
x-modelable="selected" x-modelable="selected"
{{ attrs }} {{ attrs }}
@ -319,9 +319,9 @@
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
<div class="tab-content shadow"> <div class="tab-content">
{% for title, content in tab_list %} {% for title, content in tab_list %}
<section x-show="selected === '{{ title }}'" class=""> <section x-show="selected === '{{ title }}'">
{{ content }} {{ content }}
</section> </section>
{% endfor %} {% endfor %}