marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

refactor to ui components

Browse Source
This commit is contained in:
Marco Crapts
2023-05-26 16:43:12 +02:00
parent a642fcd1fb
commit c3bd807bff
13 changed files with 122 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/TopBar/Hamburger.vue
View File

@@ -41,80 +41,3 @@ const emit = defineEmits<{
transition-duration: 0.2s;
}
</style>
<!--
$hamburger-layer-color: white;
$hamburger-layer-width: 25px;
$hamburger-layer-height: 3px;
$hamburger-layer-spacing: 3px;
$hamburger-padding-x: 0px;
$hamburger-padding-y: 0px;
$hamburger-scale-speed: calc(200ms / 0.22s);
@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
@if index($hamburger-types, spin-r) {
/*
* Spin Reverse
*/
.hamburger--spin-r {
.hamburger-inner {
transition-duration: ($hamburger-scale-speed * 0.22s);
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
&::before {
transition: top
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.25s)
ease-in,
opacity ($hamburger-scale-speed * 0.1s) ease-in;
}
&::after {
transition: bottom
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.25s)
ease-in,
transform
($hamburger-scale-speed * 0.22s)
cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
}
&.is-active {
.hamburger-inner {
transform: rotate(-225deg);
transition-delay: ($hamburger-scale-speed * 0.12s);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
&::before {
top: 0;
opacity: 0;
transition: top ($hamburger-scale-speed * 0.1s) ease-out,
opacity
($hamburger-scale-speed * 0.1s)
($hamburger-scale-speed * 0.12s)
ease-out;
}
&::after {
bottom: 0;
transform: rotate(90deg);
transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
transform
($hamburger-scale-speed * 0.22s)
($hamburger-scale-speed * 0.12s)
cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
}
}
}
button.hamburger {
outline: none !important;
line-height: 1;
opacity: 0.9;
border-radius: 2rem;
}
.hamburger-box {
display: block;
}
</style> -->

4
src/components/TopBar/Settings.vue
View File

@@ -45,7 +45,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
{{ sourceLabels[source] }}
</a>
</li>
<Modal>
<UIModal>
<template #activator="{ open }">
<li @click="open" class="text-base">
<a>
@@ -63,7 +63,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
<button class="btn-sm btn" @click="close">Cancel</button>
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
</template>
</Modal>
</UIModal>
</ul>
</div>
</OnClickOutside>