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 {
border-radius: 5px;
.tab-headers {
display: flex;
flex-flow: row wrap;
.tab-header{
margin: 0;
flex: 1 1;
border-radius: 5px 5px 0 0;
font-size: 100%;
background-color: $primary-neutral-light-color;
padding: 3px 12px 12px;
column-gap: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
@media (max-width: 800px) {
flex-wrap: wrap;
.tab-header {
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 {
background-color: $white-color;
border: 1px solid $primary-neutral-dark-color;
border-bottom: none;
}
&:not(.active) {
background-color: $primary-neutral-dark-color;
color: darken($white-color, 5%);
&:hover {
background-color: lighten($primary-neutral-dark-color, 15%);
&:hover:after {
border-bottom-color: darken($primary-neutral-light-color, 20%);
}
&.active:after {
border-bottom-color: $primary-dark-color;
}
}
}

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

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