1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

feat(UI): active tab animation

This commit is contained in:
2021-06-28 18:34:39 +02:00
parent 0110756204
commit 978a7c5f5b
8 changed files with 78 additions and 76 deletions

View File

@@ -132,6 +132,30 @@ body {
.tab {
.tab-item {
position: relative;
display: flex;
justify-content: center;
&.active {
.tab-link {
border-color: transparent;
}
&::after {
width: 100%;
}
}
&::after {
content: "";
height: 2px;
width: 0;
transition: width 0.2s;
background-color: $primary-color;
position: absolute;
bottom: 0;
}
.btn-clear {
margin-top: -0.1rem;
font-size: 0.6rem;

View File

@@ -363,26 +363,6 @@
margin: 0;
.settingbar-element {
height: $settingbar-width;
width: 100%;
margin: 0;
border-left: 3px solid transparent;
opacity: 0.5;
transition: opacity 0.2s;
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
&:hover {
opacity: 1;
}
&.selected {
border-left-color: $body-font-color-dark;
opacity: 1;
}
.settingbar-element-icon {
&.badge::after {
bottom: -10px;

View File

@@ -147,26 +147,6 @@
margin: 0;
.settingbar-element {
height: $settingbar-width;
width: 100%;
margin: 0;
border-left: 3px solid transparent;
opacity: 0.5;
transition: opacity 0.2s;
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
&:hover {
opacity: 1;
}
&.selected {
border-left-color: $body-font-color-dark;
opacity: 1;
}
.settingbar-element-icon {
&.badge::after {
bottom: -10px;