adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

smoothed out navbar slide (unfinished)

Browse Source
This commit is contained in:
Johanna Kuehner
2024-02-23 21:58:32 +01:00
parent 8a77f18237
commit e4aa11b902
4 changed files with 216 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@ -19,12 +19,13 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, template, body, #__nuxt, #__layout {
height: 100vh;
min-height: 100vh;
width: 100vw;
height: 100%;
min-height: 100%;
width: 100%;
background-color: #212121;
font-size: 1rem;

149
layouts/Actionbar.vue
View File

@ -1,16 +1,12 @@
<template>
<aside
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
<aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
</div>
<nav class="actions">
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
<div class="icon" id="search-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Search-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@ -18,8 +14,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter">
<div class="icon" id="filter-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Filter-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@ -27,8 +22,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
<div class="icon" id="instances-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Instances-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@ -36,8 +30,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<div class="icon" id="attachments-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Attachments-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@ -45,8 +38,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
<div class="icon" id="sell-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Sell-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@ -54,8 +46,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
<div class="icon" id="archive-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Archive-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
@ -63,8 +54,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new">
<div class="icon" id="new-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Add-New-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@ -72,8 +62,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
<div class="icon" id="edit-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Edit-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
@ -81,8 +70,7 @@
</button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
<div class="icon" id="delete-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Delete-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@ -93,8 +81,12 @@
</template>
<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
const darkMode = ref(true)
const isExpanded = ref(true)
// get accesss to the store
const store = useStore()
const toggleEditable = () => {
@ -103,26 +95,17 @@ const toggleEditable = () => {
const deleteAsset = () => {
store.commit('doDeleteAsset');
};
const toggleActionbar = () => {
isExpanded.value = !isExpanded.value;
};
</script>
<script>
export default {
name: "Actionbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleActionbar() {
this.isExpanded = !this.isExpanded;
},
},
}
</script>
@ -147,37 +130,30 @@ aside.actionbar {
justify-content: center;
padding: 1.875rem 0.625rem;
gap: 1.25rem;
transition: all 10s ease-in-out 0s;
overflow: clip;
}
.actionbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
.actionbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF;
}
aside.is-expanded {
animation: expand 0.5s linear both;
}
aside.is-not-expanded {
animation: contract 0.5s linear both;
width: stretch;
inline-size: stretch;
}
.actions {
display: flex;
flex-direction: column;
padding: 1.25rem 0;
align-items: flex-start;
justify-content: center;
padding: 1.25rem 0;
gap: 1.25rem;
overflow: clip;
}
@ -191,34 +167,21 @@ button {
border-radius: 0.625rem;
align-items: center;
justify-content: flex-start;
gap: 0.125rem;
border: none;
transition: 0.2s ease-in-out;
overflow: clip;
gap: 0.125rem
}
.button-darkmode { background-color: #2C2C2C; }
.button-lightmode { background-color: #FFFFFF; }
.button-darkmode {
background-color: #2C2C2C;
}
.button-darkmode:hover,
.indicator-darkmode:hover { background-color: #444444; }
.button-lightmode {
background-color: #FFFFFF;
}
.button-lightmode:hover,
.indicator-lightmode:hover { background-color: #ACACAC; }
.button-darkmode:hover,
.indicator-darkmode:hover {
background-color: #444444;
}
.button-lightmode:hover,
.indicator-lightmode:hover {
background-color: #ACACAC;
}
.is-not-expanded>button {
align-self: center;
gap: 0.5rem;
}
.is-not-expanded>button { align-self: center; }
.icon {
@ -229,7 +192,9 @@ button {
align-items: center;
justify-content: center;
padding: 0 0.5rem;
transition: padding 0.5s linear
}
.is-not-expanded .icon {
align-self: center;
}
#indicator-icon {
@ -237,16 +202,9 @@ button {
height: 1.875rem;
border-radius: 0.3125rem;
transition: 0.2s ease-in-out;
}
}
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
.is-not-expanded .icon {
align-self: center;
padding: 0 0.375rem;
}
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
}
img {
width: 0.875rem;
@ -255,44 +213,31 @@ img {
object-position: center;
overflow: hidden;
}
#indicator-icon>img {
height: 1.25rem;
}
.img-darkmode {
filter: invert(100%);
}
.img-darkmode { filter: invert(100%); }
#indicator-icon>img { height: 1.25rem; }
.label {
display: inline-flex;
min-width: 0;
padding: 0rem 0.3125rem 0rem 0rem;
letter-spacing: 5%;
padding: 0rem 0.625rem 0rem 0rem;
align-self: center;
letter-spacing: 0.02rem;
white-space: nowrap;
font: 400 0.875rem/1.25rem Overpass, sans-serif;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
}
.label-darkmode { color: #FFFFFF; }
.label-lightmode { color: #000000; }
.fade-enter-from,
.fade-leave-to {
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
max-width: 0;
}
.fade-enter-active {
@ -312,8 +257,8 @@ img {
@keyframes expand {
from {
max-inline-size: 3.25rem;
max-width: 3.25rem;
max-inline-size: 3.125rem;
max-width: 3.125rem;
}
to {
@ -329,8 +274,8 @@ img {
}
to {
max-inline-size: 3.25rem;
max-width: 3.25rem;
max-inline-size: 3.125rem;
max-width: 3.125rem;
}
}

286
layouts/Navigationbar.vue
View File

@ -1,67 +1,64 @@
<template>
<aside
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div class="toggleNavbar">
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
</div>
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="ToggleSidebar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div>
</div>
<div class="menus">
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
<router-link to="/home" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
<div class="icon" id="home-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Home-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
</Transition>
</router-link>
</nav>
<nav id="site-menu">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="checklists-button">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
<div class="icon" id="checklists-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Checklists-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
</Transition>
</router-link>
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()"
id="assets-button">
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" id="assets-button">
<div class="icon" id="assets-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Assets-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
</Transition>
</nuxt-link>
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="solutions-button">
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<div class="icon" id="solutions-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Solutions-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
</Transition>
</router-link>
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="accounting-button">
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
<div class="icon" id="accounting-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Accounting-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
</Transition>
</router-link>
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="clients-button">
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
<div class="icon" id="clients-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Clients-Icon.svg" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
</Transition>
</router-link>
</nav>
</div>
@ -102,47 +99,37 @@ export default {
box-sizing: border-box;
}
aside {
aside.navbar {
display: flex;
flex-direction: column;
position: sticky;
top: 5rem;
width: 3.125rem;
transition: 0.5s ease-in-out;
}
height: fit-content;
width: fit-content;
inline-size: fit-content;
border-radius: 0.625rem;
flex: 0 0 0;
align-items: stretch;
justify-content: center;
padding: 0.9375rem;
gap: 0.625rem;
overflow: clip;
overflow-clip-margin: 0.625rem;
}
aside.is-expanded {
width: 12.5rem;
}
.is-expanded .label {
opacity: 1;
transition: 0.5s ease-in-out;
}
animation: expand 0.5s linear both;
}
aside.is-not-expanded {
animation: contract 0.5s linear both;
}
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
transition: 0.5s ease-in-out;
}
.navbar {
display: flex;
flex-direction: column;
height: fit-content;
border-radius: 0.625rem;
align-items: stretch;
justify-content: center;
gap: 0.625rem;
padding: 0.9375rem;
margin: 0;
}
}
.navbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C;
}
}
.navbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF;
@ -155,75 +142,67 @@ aside.is-expanded {
height: 2.5rem;
align-items: center;
justify-content: space-between;
overflow: clip;
overflow-clip-margin: 0.625rem;
}
.menus {
display: flex;
flex-direction: column;
position: relative;
justify-content: flex;
padding: 1.25rem 0;
align-items: flex-start;
justify-content: center;
gap: 1.875rem;
transition: 0.5s ease-in-out;
align-items: center;
overflow: clip;
overflow-clip-margin: 0.625rem;
}
nav {
display: flex;
flex-direction: column;
justify-content: center;
align-self: stretch;
padding: 0.9375rem 0;
align-items: flex-start;
justify-content: center;
gap: 1.875rem;
width: 92%;
}
overflow: clip;
overflow-clip-margin: 0.625rem;
}
.menu-darkmode {
border-bottom: 0.0625rem solid #8E8E8E;
}
.menu-lightmode {
border-bottom: 0.0625rem solid #BABABA;
}
.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; }
.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
button,
.button,
a {
display: flex;
flex-direction: row;
align-self: stretch;
height: 2.1875rem;
border-radius: 0.3125rem;
border-radius: 0.625rem;
align-items: center;
justify-content: flex-start;
gap: 0.3125rem;
border: none;
transition: 0.5s ease-in-out;
text-decoration: none;
width: 100%;
}
.button-darkmode {
background-color: #2C2C2C;
}
.button-lightmode {
background-color: #FFFFFF;
}
transition: 0.2s ease-in-out;
overflow: clip;
overflow-clip-margin: 0.625rem;
}
.button-darkmode { background-color: #2C2C2C; }
.button-lightmode { background-color: #FFFFFF; }
.button-darkmode:hover,
.indicator-darkmode:hover,
.back-darkmode:hover {
background-color: #444444;
}
.back-darkmode:hover { background-color: #444444; }
.button-lightmode:hover,
.indicator-lightmode:hover,
.back-lightmode:hover {
background-color: #ACACAC;
}
.back-lightmode:hover { background-color: #ACACAC; }
.is-not-expanded>button { align-self: center; }
.icon {
display: flex;
@ -232,24 +211,18 @@ a {
height: 2.1875rem;
align-items: center;
justify-content: center;
transition: 0.2s ease-in-out;
}
}
#back-icon,
#indicator-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.3125rem;
transition-duration: 0.5s;
transition: 0.2s ease-out;
}
transition: 0.2s ease-in-out;
}
.back-darkmode:hover,
.back-lightmode:hover,
.indicator-darkmode:hover,
.indicator-lightmode:hover {
cursor: pointer;
}
.indicator-lightmode:hover { cursor: pointer; }
img {
@ -258,28 +231,95 @@ img {
object-fit: contain;
object-position: center;
overflow: hidden;
transition: 0.2s ease-out;
}
}
.img-darkmode { filter: invert(100%); }
.img-darkmode {
filter: invert(100%);
}
.label {
letter-spacing: 5%;
display: inline-flex;
min-width: 0;
padding: 0rem 0.625rem 0rem 0.3125rem;
align-self: center;
letter-spacing: 0.03rem;
white-space: nowrap;
margin: auto 0;
font: 600 0.875rem/1.25rem Overpass, sans-serif;
}
.label-darkmode { color: #FFFFFF; }
.label-lightmode { color: #000000; }
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transition: opacity 0.5s ease-out;
padding: 0;
}
.label-darkmode {
color: #FFFFFF;
.fade-enter-to,
.fade-leave-from {
opacity: 1;
padding: 0rem 0.625rem 0rem 0.3125rem;
}
.label-lightmode {
color: #000000;
.fade-enter-active {
transition: all 0.75s linear;
animation: fade-in 0.5s linear forwards;
}
.fade-leave-active {
transition: all 0.75s linear;
animation: fade-out 0.5s linear forwards;
}
.fade-move {
transition: transform 5s
}
@keyframes expand {
from {
max-inline-size: 4.0625rem;
max-width: 4.0625rem;
}
to {
max-inline-size: 15rem;
max-width: 15rem;
}
}
@keyframes contract {
from {
max-inline-size: 15rem;
max-width: 15rem;
}
to {
max-inline-size: 4.0625rem;
max-width: 4.0625rem;
}
}
@keyframes fade-in {
from {
max-width: 0;
max-inline-size: 0;
}
to {
max-width: 10rem;
width: fit-content;
}
}
@keyframes fade-out {
from {
max-width: 10rem;
width: fit-content;
}
to {
max-width: 0;
max-inline-size: 0;
}
}
</style>

6
package-lock.json generated
View File

@ -6114,9 +6114,9 @@
"dev": true
},
"node_modules/ip": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
"integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
"dev": true
},
"node_modules/ipaddr.js": {