599 lines
19 KiB
Vue
599 lines
19 KiB
Vue
<template>
|
|
<aside
|
|
:class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
|
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
|
|
id="indicator-icon" @click="toggleActionbar">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
|
</div>
|
|
<nav class="actions">
|
|
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="search" @click="toggleSearched">
|
|
<div class="icon" id="search-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Search-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="filter" @click="toggleFiltered">
|
|
<div class="icon" id="filter-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Filter-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="instances" @click="changeToInstancelist">
|
|
<div class="icon" id="instances-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Instances-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="solutions" @click="changeToSolutions">
|
|
<div class="icon" id="instances-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Instances-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="attachmentsIcon && false"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
|
<div class="icon" id="attachments-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Attachments-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="sellIcon && false" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="sell">
|
|
<div class="icon" id="sell-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Sell-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="archiveIcon && false"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
|
<div class="icon" id="archive-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Archive-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="addIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
|
<div class="icon" id="new-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="addInstanceIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance"
|
|
@click="addInstance">
|
|
<div class="icon" id="new-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="addEmployeeIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-employee"
|
|
@click="addEmployee">
|
|
<div class="icon" id="new-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="addDepartmentIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-department"
|
|
@click="addDepartment">
|
|
<div class="icon" id="new-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
|
</Transition>
|
|
</button>
|
|
<router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
|
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
|
|
@click="addSolution">
|
|
<div class="icon" id="new-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
|
|
</Transition>
|
|
</button>
|
|
</router-link>
|
|
<button v-if="notAllInstancesIcon && !addIcon"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="allInstances"
|
|
@click="changeToAllInstances">
|
|
<div class="icon" id="instances-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Instances-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">See all</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="departmentsIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="departments"
|
|
@click="changeToDepartments">
|
|
<div class="icon" id="departments-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Departments-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Departments</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="employeesIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="employees"
|
|
@click="changeToEmployees">
|
|
<div class="icon" id="employees-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Employees-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="editIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
|
|
@click="toggleEditable">
|
|
<div class="icon" id="edit-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Edit-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="editUserIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
|
id="editUser" @click="toggleEditableUser">
|
|
<div class="icon" id="edit-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Edit-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
|
</Transition>
|
|
</button>
|
|
<button v-if="deleteIcon && !loggedInUserReaderBool"
|
|
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
|
|
<div class="icon" id="delete-icon">
|
|
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
|
src="/icons/actionbar-icons/Delete-Icon.svg" />
|
|
</div>
|
|
<Transition name="fade">
|
|
<pre v-if="isExpanded"
|
|
:class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
|
</Transition>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { computed } from 'vue';
|
|
|
|
const changeToSet = computed(() => store.state.changeToSet);
|
|
const addIcon = computed(() => store.state.addIcon);
|
|
const addInstanceIcon = computed(() => store.state.addInstanceIcon);
|
|
const addEmployeeIcon = computed(() => store.state.addEmployeeIcon);
|
|
const addDepartmentIcon = computed(() => store.state.addDepartmentIcon);
|
|
const addSolutionIcon = computed(() => store.state.addSolutionIcon);
|
|
const solutionIcon = computed(() => store.state.solutionIcon);
|
|
const filterIcon = computed(() => store.state.filterIcon);
|
|
const searchIcon = computed(() => store.state.searchIcon);
|
|
const instancesIcon = computed(() => store.state.instancesIcon);
|
|
const attachmentsIcon = computed(() => store.state.attachmentsIcon);
|
|
const sellIcon = computed(() => store.state.sellIcon);
|
|
const archiveIcon = computed(() => store.state.archiveIcon);
|
|
const editIcon = computed(() => store.state.editIcon);
|
|
const departmentsIcon = computed(() => store.state.departmentsIcon);
|
|
const employeesIcon = computed(() => store.state.employeesIcon);
|
|
const editUserIcon = computed(() => store.state.editUserIcon);
|
|
const deleteIcon = computed(() => store.state.deleteIcon);
|
|
const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
|
|
|
|
const loggedInUserDarkModeBoolean = ref('');
|
|
const isExpanded = ref(true);
|
|
const modeChanged = computed(() => store.state.updateDarkMode);
|
|
const loggedInUserReaderBool = ref(true);
|
|
|
|
// get accesss to the store
|
|
const store = useStore()
|
|
const toggleEditable = () => {
|
|
store.commit('toggleEditable');
|
|
};
|
|
const toggleEditableUser = () => {
|
|
store.commit('toggleEditableUser');
|
|
};
|
|
const deleteFunc = () => {
|
|
store.commit('doDelete');
|
|
};
|
|
|
|
const toggleActionbar = () => {
|
|
isExpanded.value = !isExpanded.value;
|
|
};
|
|
const toggleFiltered = () => {
|
|
store.commit('deactivateSearch');
|
|
store.commit('toggleFiltered');
|
|
};
|
|
const toggleSearched = () => {
|
|
store.commit('deactivateSearch');
|
|
store.commit('toggleSearchable');
|
|
};
|
|
const add = () => {
|
|
store.commit('add');
|
|
};
|
|
|
|
const addSolution = () => {
|
|
store.commit('add');
|
|
};
|
|
|
|
const addInstance = () => {
|
|
store.commit('addInstance');
|
|
};
|
|
|
|
const addDepartment = () => {
|
|
store.commit('addDepartment');
|
|
};
|
|
|
|
const addEmployee = () => {
|
|
store.commit('addEmployee');
|
|
};
|
|
|
|
const changeToSolutions = () => {
|
|
store.commit('changeToSolutionlistAsset');
|
|
};
|
|
|
|
const changeToDepartments = () => {
|
|
store.commit('changeToDepartmentlist');
|
|
};
|
|
|
|
const changeToEmployees = () => {
|
|
store.commit('changeToCustomerEmployeelist');
|
|
};
|
|
|
|
const changeToInstancelist = () => {
|
|
store.commit('deactivateSearch');
|
|
store.commit('changeToInstancelist');
|
|
}
|
|
|
|
const changeToAllInstances = () => {
|
|
store.commit('deactivateSearch');
|
|
store.commit('changeToInstancelist');
|
|
store.commit('seeAllIcon');
|
|
}
|
|
|
|
// const changeToSettingsPage = () => {
|
|
// store.commit('changeToSettings');
|
|
// if (changeToSet.value) {
|
|
// store.commit('toggleChangeToSet');
|
|
// }
|
|
// console.log('set')
|
|
// }
|
|
|
|
// watch(changeToSet, changeToSettingsPage)
|
|
|
|
const getSession = async () => {
|
|
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
|
|
if (loggedInUserDarkModeBool == 1) {
|
|
loggedInUserDarkModeBoolean.value = true;
|
|
} else {
|
|
loggedInUserDarkModeBoolean.value = false;
|
|
}
|
|
const readerBool = getItem('logged-in-user-readerBool');
|
|
if (readerBool == 1) {
|
|
loggedInUserReaderBool.value = true;
|
|
} else {
|
|
loggedInUserReaderBool.value = false;
|
|
}
|
|
}
|
|
|
|
function getItem(item) {
|
|
if (process.client) {
|
|
return localStorage.getItem(item)
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
watch(modeChanged, getSession)
|
|
|
|
onMounted(async () => {
|
|
await getSession();
|
|
store.commit('changeToAssetlist')
|
|
if (changeToSet.value) {
|
|
store.commit('toggleChangeToSet');
|
|
store.commit('changeToSettings');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: "Actionbar",
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
aside.actionbar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: sticky;
|
|
top: 3.75rem;
|
|
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: 1.875rem 0.625rem;
|
|
gap: 1.25rem;
|
|
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;
|
|
}
|
|
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.25rem 0;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
overflow: clip;
|
|
}
|
|
|
|
|
|
button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-self: stretch;
|
|
height: 1.875rem;
|
|
border-radius: 0.625rem;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.125rem;
|
|
border: none;
|
|
transition: 0.2s ease-in-out;
|
|
overflow: clip;
|
|
}
|
|
|
|
.button-darkmode {
|
|
background-color: #2C2C2C;
|
|
}
|
|
|
|
.button-lightmode {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.button-darkmode:hover,
|
|
.indicator-darkmode:hover {
|
|
background-color: #444444;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-lightmode:hover,
|
|
.indicator-lightmode:hover {
|
|
background-color: #ACACAC;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.is-not-expanded>button {
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
.icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
/*width: 0.875rem;*/
|
|
height: 1.875rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.is-not-expanded .icon {
|
|
align-self: center;
|
|
}
|
|
|
|
#indicator-icon {
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
border-radius: 0.3125rem;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
|
|
.is-not-expanded #indicator-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
|
|
img {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
object-fit: contain;
|
|
object-position: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-darkmode {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
#indicator-icon>img {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
|
|
.label {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
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;
|
|
}
|
|
|
|
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-enter-to,
|
|
.fade-leave-from {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fade-enter-active {
|
|
transition: all 0.75s;
|
|
overflow: clip;
|
|
animation: fade-in 0.5s linear forwards;
|
|
}
|
|
|
|
.fade-leave-active {
|
|
transition: all 0.75s;
|
|
animation: fade-out 0.5s linear forwards;
|
|
}
|
|
|
|
.fade-move {
|
|
transition: transform 5s
|
|
}
|
|
|
|
@keyframes expand {
|
|
from {
|
|
max-inline-size: 3.125rem;
|
|
max-width: 3.125rem;
|
|
}
|
|
|
|
to {
|
|
max-inline-size: 9.0625rem;
|
|
max-width: 9.0625rem;
|
|
}
|
|
}
|
|
|
|
@keyframes contract {
|
|
from {
|
|
max-inline-size: 9.0625rem;
|
|
max-width: 9.0625rem;
|
|
}
|
|
|
|
to {
|
|
max-inline-size: 3.125rem;
|
|
max-width: 3.125rem;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
max-width: 0;
|
|
max-inline-size: 0;
|
|
}
|
|
|
|
to {
|
|
max-width: 7.5rem;
|
|
width: fit-content;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
max-width: 7.5rem;
|
|
width: fit-content;
|
|
}
|
|
|
|
to {
|
|
max-width: 0;
|
|
max-inline-size: 0;
|
|
}
|
|
}
|
|
</style> |