@codecavepro/brand 3.5.3 → 3.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
|
|
|
14
14
|
type: 'button',
|
|
15
15
|
})
|
|
16
16
|
|
|
17
|
-
const buttonBaseClass = `flex items-center justify-center
|
|
17
|
+
const buttonBaseClass = `flex items-center justify-center text-center
|
|
18
18
|
${props.isDisabled
|
|
19
19
|
? 'cursor-not-allowed opacity-60'
|
|
20
20
|
: 'cursor-pointer'}
|
|
@@ -79,13 +79,22 @@ const handleCloseMenu = () => {
|
|
|
79
79
|
<template>
|
|
80
80
|
<div>
|
|
81
81
|
<div class="fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary">
|
|
82
|
-
<div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh max-h-
|
|
82
|
+
<div :class="['px-5 flex flex-col gap-2 transition-all', isMenuOpen ? 'pb-5 h-dvh max-h-90' : 'pb-0']">
|
|
83
83
|
<div class="flex justify-between items-center py-1.5 shrink-0">
|
|
84
84
|
<a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
|
|
85
85
|
<img :src="logo" alt="CODECAVE" />
|
|
86
86
|
</a>
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
|
|
88
|
+
<button
|
|
89
|
+
@click="isMenuOpen = !isMenuOpen"
|
|
90
|
+
:aria-label="messages.mobileMenu.toggle"
|
|
91
|
+
:aria-expanded="isMenuOpen"
|
|
92
|
+
:class="[
|
|
93
|
+
'burger-menu',
|
|
94
|
+
isMenuOpen ? 'text-action' : 'text-heading'
|
|
95
|
+
]"
|
|
96
|
+
>
|
|
97
|
+
<span :class="isMenuOpen ? 'cross' : 'burger'"></span>
|
|
89
98
|
</button>
|
|
90
99
|
</div>
|
|
91
100
|
<nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-hidden text-sm">
|
|
@@ -123,21 +132,39 @@ const handleCloseMenu = () => {
|
|
|
123
132
|
<style scoped>
|
|
124
133
|
.burger-menu {
|
|
125
134
|
display: flex;
|
|
126
|
-
|
|
127
|
-
|
|
135
|
+
align-items: center;
|
|
136
|
+
justify-content: center;
|
|
128
137
|
padding: 0.625rem;
|
|
129
138
|
width: 3rem;
|
|
130
139
|
height: 3rem;
|
|
131
140
|
}
|
|
132
141
|
|
|
133
|
-
.burger
|
|
134
|
-
.burger-menu::after,
|
|
135
|
-
.burger-menu span {
|
|
136
|
-
content: '';
|
|
142
|
+
.burger {
|
|
137
143
|
width: 100%;
|
|
138
144
|
height: 0.1rem;
|
|
139
145
|
background-color: currentColor;
|
|
140
146
|
border-radius: 3rem;
|
|
147
|
+
box-shadow:
|
|
148
|
+
0 -0.4rem 0 currentColor,
|
|
149
|
+
0 0.4rem 0 currentColor;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.cross {
|
|
153
|
+
width: 100%;
|
|
154
|
+
height: 0.1rem;
|
|
155
|
+
background-color: currentColor;
|
|
156
|
+
border-radius: 3rem;
|
|
157
|
+
transform: rotate(45deg);
|
|
158
|
+
position: relative;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.cross::after {
|
|
162
|
+
content: '';
|
|
163
|
+
position: absolute;
|
|
164
|
+
inset: 0;
|
|
165
|
+
background-color: currentColor;
|
|
166
|
+
border-radius: 3rem;
|
|
167
|
+
transform: rotate(90deg);
|
|
141
168
|
}
|
|
142
169
|
|
|
143
170
|
.services-scroll {
|
|
@@ -26,7 +26,7 @@ defineProps<{
|
|
|
26
26
|
<h3 class="font-bold text-heading group-active:text-hovered group-hover:text-hovered transition-colors">
|
|
27
27
|
{{ item.name }}
|
|
28
28
|
</h3>
|
|
29
|
-
<p class="text-body-secondary-lighter
|
|
29
|
+
<p class="text-body-secondary-lighter">
|
|
30
30
|
{{ item.description }}
|
|
31
31
|
</p>
|
|
32
32
|
</div>
|
package/package.json
CHANGED