168 lines
3.9 KiB
Vue
168 lines
3.9 KiB
Vue
<template>
|
|
<aside class="actionbar">
|
|
<div class="icon" id="indicator-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
|
|
</div>
|
|
<nav class="actions">
|
|
<button id="search">
|
|
<div class="icon" id="search-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Search</pre>
|
|
</button>
|
|
<button id="filter">
|
|
<div class="icon" id="filter-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Filter</pre>
|
|
</button>
|
|
<button id="instances">
|
|
<div class="icon" id="instances-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Instances</pre>
|
|
</button>
|
|
<button id="attachments">
|
|
<div class="icon" id="attachments-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Attachments</pre>
|
|
</button>
|
|
<button id="sell">
|
|
<div class="icon" id="sell-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Sell</pre>
|
|
</button>
|
|
<button id="archive">
|
|
<div class="icon" id="archive-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Archive</pre>
|
|
</button>
|
|
<button id="new">
|
|
<div class="icon" id="new-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">New</pre>
|
|
</button>
|
|
<button id="edit">
|
|
<div class="icon" id="edit-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Edit</pre>
|
|
</button>
|
|
<button id="delete">
|
|
<div class="icon" id="delete-icon">
|
|
<img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
|
|
</div>
|
|
<pre class="label">Delete</pre>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "Actionbar",
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.actionbar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: sticky;
|
|
top: 5rem;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
border-radius: 0.625rem;
|
|
padding: 1.875rem 0.625rem;
|
|
gap: 1.25rem;
|
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
|
background-color: #2c2c2c;
|
|
}
|
|
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
padding: 1.25rem 0;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
|
|
button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height: 1.875rem;
|
|
border-radius: 0.625rem;
|
|
border: none;
|
|
background-color: #2c2c2c;
|
|
transition-duration: 0.5s;
|
|
}
|
|
button:hover {
|
|
background-color: #444444;
|
|
}
|
|
|
|
|
|
.icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
}
|
|
#indicator-icon {
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
border-radius: 0.3125rem;
|
|
background-color: #2c2c2c;
|
|
transition-duration: 0.5s;
|
|
}
|
|
#indicator-icon:hover {
|
|
background-color: #444444;
|
|
}
|
|
|
|
.icon > img {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
filter: invert(100%);
|
|
object-fit: contain;
|
|
object-position: center;
|
|
overflow: hidden;
|
|
}
|
|
#indicator-icon > img {
|
|
height: 1.25rem;
|
|
}
|
|
|
|
|
|
.label {
|
|
color: #fff;
|
|
letter-spacing: 5%;
|
|
align-self: center;
|
|
white-space: nowrap;
|
|
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
|
}
|
|
|
|
|
|
</style> |