@mirweb/mir-web-components 2.13.0 → 2.14.0
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.
- package/dist/assets/scss/globals.scss +1 -5
- package/dist/assets/scss/index.scss +1 -0
- package/dist/assets/scss/utility-nav.scss +57 -0
- package/dist/components/atoms/flag-icon/flag-icon.vue +31 -0
- package/dist/components/atoms/flag-icon/flags.ts +21 -0
- package/dist/components/index.ts +1 -0
- package/dist/components/molecules/modal/modal.vue +51 -1
- package/dist/components/organisms/header/header.vue +144 -43
- package/dist/components/organisms/language-switcher/language-switcher.vue +55 -6
- package/dist/main.css +1 -1
- package/package.json +1 -1
|
@@ -156,11 +156,7 @@
|
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
&--dark {
|
|
159
|
-
background-
|
|
160
|
-
linear-gradient(155deg, #143a67 0%, $blue-900 100%);
|
|
161
|
-
background-repeat: repeat-x, no-repeat;
|
|
162
|
-
background-size: 984px, cover;
|
|
163
|
-
background-position: center top;
|
|
159
|
+
background-color: $blue-900;
|
|
164
160
|
}
|
|
165
161
|
}
|
|
166
162
|
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
@use "variables" as *;
|
|
2
|
+
|
|
3
|
+
// Desktop utility nav bar — hidden on mobile
|
|
4
|
+
.utility-nav-bar {
|
|
5
|
+
display: none;
|
|
6
|
+
|
|
7
|
+
@include md {
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: flex-end;
|
|
10
|
+
align-items: center;
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 5px;
|
|
13
|
+
left: 0;
|
|
14
|
+
right: 0;
|
|
15
|
+
max-width: $max-width;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
padding: 0;
|
|
18
|
+
height: var(--utility-nav-height, 30px);
|
|
19
|
+
opacity: var(--utility-nav-opacity, 1);
|
|
20
|
+
overflow: visible;
|
|
21
|
+
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
|
22
|
+
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
23
|
+
z-index: 10;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.utility-nav-items {
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: row;
|
|
30
|
+
align-items: center;
|
|
31
|
+
gap: 0;
|
|
32
|
+
list-style: none;
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
|
|
36
|
+
li {
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Pipe separator between top-level items only (direct children)
|
|
42
|
+
> li:not(:last-child)::after {
|
|
43
|
+
content: "";
|
|
44
|
+
height: 10px;
|
|
45
|
+
margin: 0 10px;
|
|
46
|
+
background-color: $blue-900;
|
|
47
|
+
font-size: $font-size-xsm;
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
width: 2px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Scope link styles to utility nav only — smaller than main nav
|
|
53
|
+
a {
|
|
54
|
+
font-size: $font-size-xsm;
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="flag-icon" v-html="flagSvg" aria-hidden="true" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script setup lang="ts">
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { flags, type FlagCode } from "./flags";
|
|
8
|
+
|
|
9
|
+
export type Props = {
|
|
10
|
+
name: FlagCode;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const props = defineProps<Props>();
|
|
14
|
+
|
|
15
|
+
const flagSvg = computed(() => flags[props.name] ?? "");
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<style lang="scss" scoped>
|
|
19
|
+
.flag-icon {
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
width: 20px;
|
|
23
|
+
height: 15px;
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
|
|
26
|
+
:deep(svg) {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// SVGs sourced from Universal Robots @sirius/common icon library
|
|
2
|
+
// All flags are 32×24 viewBox with rounded clip-path and subtle border overlay
|
|
3
|
+
// Note: 'es' uses simplified 3-band version (coat of arms is 200KB at source)
|
|
4
|
+
// Note: 'tw' uses ROC (Taiwan) flag with 12-pointed white sun on blue canton
|
|
5
|
+
|
|
6
|
+
export const flags: Record<string, string> = {
|
|
7
|
+
us: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd"><path fill="#BD3D44" d="M0 0h32v1.85H0V0Zm0 3.695h32v1.85H0v-1.85Zm0 3.69h32v1.85H0v-1.85Zm0 3.69h32v1.85H0v-1.85Zm0 3.7h32v1.84H0v-1.84Zm0 3.685h32v1.85H0v-1.85Zm0 3.69h32V24H0v-1.85Z"/><path fill="#fff" d="M0 1.85h32v1.845H0V1.85Zm0 3.69h32v1.845H0V5.54Zm0 3.69h32v1.85H0V9.23Zm0 3.695h32v1.85H0v-1.85Zm0 3.69h32v1.85H0v-1.85Zm0 3.69h32v1.85H0v-1.85Z"/><path fill="#192F5D" d="M0 0h18.24v12.925H0V0Z"/><path fill="#fff" d="m1.52.55.17.515h.53l-.43.315.165.515-.435-.32-.43.315.16-.51-.435-.315h.545L1.52.55Zm3.04 0 .165.515h.54l-.435.315.16.515-.43-.32-.435.315.165-.51-.43-.315h.53L4.56.55Zm3.04 0 .165.515H8.3l-.43.315.165.515-.435-.32-.435.315.165-.51-.435-.315h.54L7.6.55Zm3.04 0 .165.515h.54l-.435.315.165.515-.435-.32-.435.315.17-.51-.44-.315h.535l.17-.515Zm3.04 0 .165.515h.535l-.43.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535L13.68.55Zm3.04 0 .165.515h.54l-.44.315.17.515-.435-.32-.435.315.17-.51-.44-.315h.54L16.72.55ZM3.04 1.85l.165.51h.545l-.435.31.16.515-.425-.315-.435.315.155-.515-.42-.31h.535l.155-.51Zm3.04 0 .17.51h.535l-.44.31.17.515-.435-.315-.435.315.165-.515-.435-.31h.54l.165-.51Zm3.04 0 .165.51h.54l-.435.31.165.515-.435-.315-.435.315.165-.515-.43-.31h.53l.17-.51Zm3.04 0 .17.51h.535l-.44.31.17.515-.435-.315-.43.315.16-.515-.435-.31H12l.16-.51Zm3.04 0 .165.51h.54l-.435.31.165.515-.435-.315-.435.315.165-.515-.43-.31h.535l.165-.51ZM1.52 3.13l.17.52h.53l-.43.315.165.51-.435-.315-.43.315.16-.51-.435-.315h.545l.16-.52Zm3.04 0 .165.52h.54l-.435.315.16.51-.43-.315-.435.315.165-.515-.43-.315h.53l.17-.515Zm3.04 0 .165.515H8.3l-.43.315.165.51-.435-.315-.435.315.165-.515-.435-.315h.54l.165-.51Zm3.04 0 .165.515h.54l-.435.315.165.51-.435-.315-.435.315.17-.515-.44-.315h.535l.17-.51Zm3.04 0 .165.515h.535l-.43.315.165.51-.435-.315-.435.315.165-.515-.43-.315h.535l.165-.51Zm3.04 0 .165.515h.54l-.44.315.17.51-.435-.315-.435.315.17-.515-.44-.315h.54l.165-.51ZM3.04 4.43l.165.51h.545l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535l.16-.51Zm3.04 0 .17.51h.535l-.44.315.17.515-.435-.32-.435.315.165-.51-.435-.315h.54l.165-.51Zm3.04 0 .165.51h.54l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.53l.17-.51Zm3.04 0 .17.51h.535l-.435.315.165.515-.435-.32-.43.315.16-.51-.435-.315H12l.16-.51Zm3.04 0 .165.51h.54l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535l.165-.51ZM1.52 5.725l.17.51h.53l-.43.315.165.515-.435-.32-.43.315.16-.51-.435-.315h.545l.16-.51Zm3.04 0 .165.51h.54l-.435.315.16.51-.43-.315-.435.315.165-.51-.43-.315h.53l.17-.51Zm3.04 0 .165.51H8.3l-.43.315.165.515-.435-.32-.435.315.165-.51-.435-.315h.54l.165-.51Zm3.04 0 .165.51h.54l-.435.315.165.515-.435-.32-.435.315.17-.51-.44-.315h.535l.17-.51Zm3.04 0 .165.51h.535l-.43.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535l.165-.51Zm3.04 0 .165.51h.54l-.44.315.17.515-.435-.32-.435.315.165-.51-.44-.315h.54l.17-.51ZM3.04 7.015l.165.515h.545l-.435.31.165.515-.435-.32-.435.32.165-.515-.43-.315h.535l.16-.51Zm3.04 0 .17.515h.535l-.44.31.17.515-.435-.32-.435.32.165-.515-.435-.315h.54l.165-.51Zm3.04 0 .165.515h.54l-.435.31.165.515-.435-.32-.435.32.165-.515-.43-.315h.53l.17-.51Zm3.04 0 .17.515h.535l-.435.31.165.515-.435-.32-.43.32.16-.515-.435-.315H12l.16-.51Zm3.04 0 .165.515h.54l-.435.31.165.515-.435-.32-.435.32.165-.515-.43-.315h.535l.165-.51ZM1.52 8.305l.17.515h.53l-.43.315.165.505-.435-.31-.43.31.16-.51-.435-.315h.545l.16-.51Zm3.04 0 .165.515h.54l-.435.315.165.505-.435-.31-.435.31.17-.51-.435-.315h.53l.17-.51Zm3.04 0 .165.515H8.3l-.43.315.165.505-.435-.31-.435.31.165-.51-.435-.315h.54l.165-.51Zm3.04 0 .165.515h.54l-.435.315.165.505-.435-.31-.435.31.17-.51-.44-.315h.535l.17-.51Zm3.04 0 .165.515h.535l-.43.315.165.505-.435-.31-.435.31.165-.51-.43-.315h.535l.165-.51Zm3.04 0 .165.515h.54l-.44.315.17.505-.435-.31-.435.31.17-.51-.44-.315h.54l.165-.51ZM3.04 9.6l.165.51h.545l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535l.16-.51Zm3.04 0 .17.51h.535l-.44.315.17.515-.435-.32-.435.315.165-.51-.435-.315h.54l.165-.51Zm3.04 0 .165.51h.54l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.53l.17-.51Zm3.04 0 .17.51h.535l-.435.315.165.515-.435-.32-.43.315.16-.51-.435-.315H12l.16-.51Zm3.04 0 .165.51h.54l-.435.315.165.515-.435-.32-.435.315.165-.51-.43-.315h.535l.165-.51ZM1.52 10.895l.17.51h.53l-.43.315.165.51-.435-.315-.43.315.16-.515-.435-.315h.545l.16-.505Zm3.04 0 .165.51h.54l-.435.315.165.51-.435-.315-.435.315.17-.515-.435-.315h.53l.17-.505Zm3.04 0 .165.51H8.3l-.42.315.165.51-.435-.315-.435.315.165-.515-.435-.315h.54l.155-.505Zm3.04 0 .165.51h.54l-.435.315.165.51-.435-.315-.435.315.17-.515-.44-.315h.535l.17-.505Zm3.04 0 .165.51h.535l-.43.315.165.51-.435-.315-.435.315.165-.515-.43-.315h.535l.165-.505Zm3.04 0 .165.51h.54l-.44.315.17.51-.435-.315-.435.315.17-.515-.44-.315h.54l.165-.505Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
8
|
+
dk: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#C8102E" d="M0 0h32v24H0V0Z"/><path fill="#fff" d="M10 0h5v24h-5V0Z"/><path fill="#fff" d="M0 9.5h32v5H0v-5Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
9
|
+
de: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#FFCE00" d="M0 16h32v8H0v-8Z"/><path fill="#000001" d="M0 0h32v8H0V0Z"/><path fill="#D00" d="M0 8h32v8H0V8Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
10
|
+
es: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#AA151B" d="M0 0h32v24H0V0Z"/><path fill="#F1BF00" d="M0 6h32v12H0V6Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
11
|
+
it: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h32v24H0V0Z"/><path fill="#009246" d="M0 0h10.665v24H0V0Z"/><path fill="#CE2B37" d="M21.335 0H32v24H21.335V0Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
12
|
+
fr: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h32v24H0V0Z"/><path fill="#002654" d="M0 0h10.665v24H0V0Z"/><path fill="#CE1126" d="M21.335 0H32v24H21.335V0Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
13
|
+
kr: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M0 0h32.006v24H0V0Z" clip-rule="evenodd"/><path fill="#CD2E3A" fill-rule="evenodd" d="M10.995 8.677a6 6 0 1 1 9.983 6.659l-9.983-6.659Z" clip-rule="evenodd"/><path fill="#0047A0" fill-rule="evenodd" d="M10.995 8.677a6 6 0 0 0 9.983 6.659 3 3 0 1 0-4.991-3.33l-4.992-3.329Z" clip-rule="evenodd"/><path fill="#CD2E3A" d="M15.987 12.007a3 3 0 1 0-4.992-3.33 3 3 0 0 0 4.992 3.33Z"/><path fill="#000" d="m6.01 15.47.696-.47 2.816 4.175-.696.47-2.816-4.176Zm-1.005.677.696-.47 1.304 1.934-.696.469-1.304-1.933Zm1.512 2.243.696-.47 1.304 1.933-.696.47-1.304-1.934ZM4 16.825l.696-.47 2.816 4.176-.696.469L4 16.825Zm24.022-9.65-.696.47-1.304-1.934.696-.469 1.304 1.933ZM26.51 4.933l-.696.47-1.304-1.934.696-.469 1.304 1.933Zm.507 2.92-.696.47-2.816-4.176.696-.47 2.816 4.176Zm-1.005.677-.696.47-1.304-1.933.696-.47 1.304 1.934ZM24.5 6.289l-.696.469L22.5 4.825l.696-.47 1.303 1.934ZM25.206 21l-.696-.47 1.304-1.932.696.47L25.206 21Zm1.512-2.242-.696-.47 1.304-1.932.696.47-1.304 1.932ZM24.2 20.322l-.695-.47 1.304-1.932.695.47-1.303 1.932Zm1.513-2.242-.696-.47 1.304-1.932.696.47-1.304 1.932Zm-2.517 1.564-.696-.47 1.304-1.932.696.47-1.304 1.932Zm1.512-2.242-.696-.47L25.316 15l.696.47-1.304 1.932ZM8.826 4.356l.696.47L6.706 9l-.696-.47 2.816-4.174Zm-1.005-.678.696.47L5.7 8.321l-.696-.47L7.82 3.677ZM6.816 3l.696.47-2.816 4.174L4 7.174 6.816 3Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
14
|
+
jp: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M0 0h32v24H0V0Z" clip-rule="evenodd"/><path fill="#BC002D" d="M16 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
15
|
+
cn: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#EE1C25" d="M0 0h32v24H0V0Z"/><path fill="#FF0" d="M3.84 8.88 6 2.4l2.16 6.48L2.4 4.92h7.2L3.84 8.88Zm9.369-6.356-2.223.493 1.482-1.728-.145 2.325-1.234-2.058 2.12.968Zm2.243 2.843-2.24-.408 2.037-1.017-1.036 2.087-.339-2.376 1.578 1.714Zm-.327 3.989L13.246 8.07l2.275-.098-1.797 1.483.66-2.308.741 2.21ZM12.3 11.962l-1.237-1.912 2.136.788-2.23.674 1.5-1.874-.17 2.324Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
16
|
+
pl: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M32 24H0V0h32v24Z"/><path fill="#DC143C" d="M32 24H0V12h32v12Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
17
|
+
cz: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h32v12H0V0Z"/><path fill="#D7141A" d="M0 12h32v12H0V12Z"/><path fill="#11457E" d="M18 12 0 0v24l18-12Z"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
18
|
+
tw: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 24" style="display: block;"><g clip-path="url(#a)"><rect width="32" height="24" fill="#FE0000"/><rect width="16" height="12" fill="#000095"/><polygon fill="white" points="8,3.2 8.336,4.744 9.4,3.576 8.919,5.081 10.424,4.6 9.256,5.664 10.8,6 9.256,6.336 10.424,7.4 8.919,6.919 9.4,8.424 8.336,7.256 8,8.8 7.664,7.256 6.6,8.424 7.081,6.919 5.576,7.4 6.744,6.336 5.2,6 6.744,5.664 5.576,4.6 7.081,5.081 6.6,3.576 7.664,4.744"/></g><rect width="31" height="23" x=".5" y=".5" stroke="#000" stroke-opacity=".2" rx="2.5"/><defs><clipPath id="a"><rect width="32" height="24" fill="#fff" rx="3"/></clipPath></defs></svg>`,
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export type FlagCode = keyof typeof flags;
|
package/dist/components/index.ts
CHANGED
|
@@ -13,6 +13,7 @@ export { default as AtomSlider } from "./atoms/slider/slider.vue";
|
|
|
13
13
|
export { default as AtomTextarea } from "./atoms/textarea/textarea.vue";
|
|
14
14
|
export { default as AtomTextField } from "./atoms/text-field/text-field.vue";
|
|
15
15
|
export { default as AtomVideo } from "./atoms/video/video.vue";
|
|
16
|
+
export { default as AtomFlagIcon } from "./atoms/flag-icon/flag-icon.vue";
|
|
16
17
|
export { default as MoleculeAddress } from "./molecules/address/address.vue";
|
|
17
18
|
export { default as MoleculeBulletList } from "./molecules/bullet-list/bullet-list.vue";
|
|
18
19
|
export { default as MoleculeCard } from "./molecules/card/card.vue";
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
</template>
|
|
32
32
|
|
|
33
33
|
<script setup lang="ts">
|
|
34
|
+
import { watch, onUnmounted } from "vue";
|
|
34
35
|
import AtomButton from "../../atoms/button/button.vue";
|
|
35
36
|
|
|
36
37
|
const props = withDefaults(
|
|
@@ -49,6 +50,44 @@ const emit = defineEmits(["update:show"]);
|
|
|
49
50
|
const toggleShow = () => {
|
|
50
51
|
emit("update:show", !props.show);
|
|
51
52
|
};
|
|
53
|
+
|
|
54
|
+
const lockScroll = () => {
|
|
55
|
+
if (typeof window === "undefined") return;
|
|
56
|
+
const scrollY = window.scrollY;
|
|
57
|
+
document.body.dataset.modalScrollY = String(scrollY);
|
|
58
|
+
document.body.style.position = "fixed";
|
|
59
|
+
document.body.style.top = `-${scrollY}px`;
|
|
60
|
+
document.body.style.width = "100%";
|
|
61
|
+
document.body.style.overflowY = "scroll";
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const unlockScroll = () => {
|
|
65
|
+
if (typeof window === "undefined") return;
|
|
66
|
+
if (!document.body.dataset.modalScrollY) return;
|
|
67
|
+
const scrollY = parseInt(document.body.dataset.modalScrollY);
|
|
68
|
+
delete document.body.dataset.modalScrollY;
|
|
69
|
+
document.body.style.position = "";
|
|
70
|
+
document.body.style.top = "";
|
|
71
|
+
document.body.style.width = "";
|
|
72
|
+
document.body.style.overflowY = "";
|
|
73
|
+
window.scrollTo(0, scrollY);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
watch(
|
|
77
|
+
() => props.show,
|
|
78
|
+
(isShown) => {
|
|
79
|
+
if (isShown) {
|
|
80
|
+
lockScroll();
|
|
81
|
+
} else {
|
|
82
|
+
unlockScroll();
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{ immediate: true },
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
onUnmounted(() => {
|
|
89
|
+
unlockScroll();
|
|
90
|
+
});
|
|
52
91
|
</script>
|
|
53
92
|
|
|
54
93
|
<style scoped lang="scss">
|
|
@@ -67,6 +106,7 @@ const toggleShow = () => {
|
|
|
67
106
|
|
|
68
107
|
&-default {
|
|
69
108
|
align-items: center;
|
|
109
|
+
padding: 16px;
|
|
70
110
|
}
|
|
71
111
|
|
|
72
112
|
&-search {
|
|
@@ -80,12 +120,22 @@ const toggleShow = () => {
|
|
|
80
120
|
background: $white;
|
|
81
121
|
padding: 30px 15px;
|
|
82
122
|
min-height: 100px;
|
|
83
|
-
min-width: 200px;
|
|
84
123
|
position: relative;
|
|
85
124
|
max-width: 566px;
|
|
86
125
|
box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.06);
|
|
87
126
|
border-radius: $border-radius;
|
|
88
127
|
|
|
128
|
+
.search {
|
|
129
|
+
min-width: 200px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&:not(.search) {
|
|
133
|
+
width: 100%;
|
|
134
|
+
box-sizing: border-box;
|
|
135
|
+
max-height: 90vh;
|
|
136
|
+
overflow-y: auto;
|
|
137
|
+
}
|
|
138
|
+
|
|
89
139
|
button {
|
|
90
140
|
position: absolute;
|
|
91
141
|
top: 15px;
|
|
@@ -4,9 +4,25 @@
|
|
|
4
4
|
:class="{
|
|
5
5
|
'header--hide-burger': !hasBurgerContent,
|
|
6
6
|
'header--align-secondary-right': !hasBurgerContent,
|
|
7
|
+
'header--has-cta': hasHeaderCta,
|
|
7
8
|
}"
|
|
8
9
|
>
|
|
9
10
|
<nav aria-label="Main navigation">
|
|
11
|
+
<!-- Utility nav bar (desktop only) -->
|
|
12
|
+
<div v-if="$slots['utility-nav-items'] || useDropdown" class="utility-nav-bar">
|
|
13
|
+
<ul class="utility-nav-items">
|
|
14
|
+
<slot name="utility-nav-items"></slot>
|
|
15
|
+
<li v-if="useDropdown" id="menu-dropdown" ref="dropdownDiv">
|
|
16
|
+
<button class="nav-dropdown-btn" @click="toggleDropDown">
|
|
17
|
+
<slot name="dropdown-title"></slot>
|
|
18
|
+
</button>
|
|
19
|
+
<div v-show="showDropDown" class="dropdown-content">
|
|
20
|
+
<slot name="dropdown-links"></slot>
|
|
21
|
+
</div>
|
|
22
|
+
</li>
|
|
23
|
+
<slot name="utility-nav-trailing"></slot>
|
|
24
|
+
</ul>
|
|
25
|
+
</div>
|
|
10
26
|
<!-- Main nav -->
|
|
11
27
|
<div class="nav-wrapper">
|
|
12
28
|
<div class="mir-link-logo">
|
|
@@ -16,27 +32,12 @@
|
|
|
16
32
|
<slot name="main-nav-items"></slot>
|
|
17
33
|
</ul>
|
|
18
34
|
<div class="secondary-nav-items">
|
|
19
|
-
<!--
|
|
20
|
-
<div v-if="
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
v-if="showDropDown === false"
|
|
25
|
-
src="https://a.storyblok.com/f/230581/9x6/8cecdca15f/arrow-down.svg?cv=1695125714195"
|
|
26
|
-
alt="dropdown arrow"
|
|
27
|
-
/>
|
|
28
|
-
<img
|
|
29
|
-
v-else
|
|
30
|
-
src="https://a.storyblok.com/f/230581/9x6/8cecdca15f/arrow-down.svg?cv=1695125714195"
|
|
31
|
-
alt="dropdown arrow"
|
|
32
|
-
style="transform: rotate(180deg)"
|
|
33
|
-
/>
|
|
34
|
-
</button>
|
|
35
|
-
<div v-show="showDropDown" class="dropdown-content">
|
|
36
|
-
<slot name="dropdown-links"></slot>
|
|
37
|
-
</div>
|
|
35
|
+
<!-- header CTA -->
|
|
36
|
+
<div v-if="hasHeaderCta" class="nav-cta-wrapper">
|
|
37
|
+
<atom-link link-type="primary">
|
|
38
|
+
<a :href="headerCtaUrl">{{ headerCtaText }}</a>
|
|
39
|
+
</atom-link>
|
|
38
40
|
</div>
|
|
39
|
-
|
|
40
41
|
<!-- nav search -->
|
|
41
42
|
<div v-if="search" class="nav-search-wrapper">
|
|
42
43
|
<button
|
|
@@ -138,6 +139,12 @@
|
|
|
138
139
|
<slot name="link-logo"></slot>
|
|
139
140
|
</div>
|
|
140
141
|
|
|
142
|
+
<!-- Mobile header CTA -->
|
|
143
|
+
<div v-if="hasHeaderCta" class="mobile-cta-wrapper">
|
|
144
|
+
<atom-link :link-type="burgerState ? 'secondary' : 'primary'">
|
|
145
|
+
<a :href="headerCtaUrl">{{ headerCtaText }}</a>
|
|
146
|
+
</atom-link>
|
|
147
|
+
</div>
|
|
141
148
|
<div v-if="search" class="mobile-search-wrapper">
|
|
142
149
|
<button
|
|
143
150
|
ref="mobileSearchButton"
|
|
@@ -234,10 +241,13 @@
|
|
|
234
241
|
v-show="hasBurgerContent && burgerState"
|
|
235
242
|
class="mobile-menu-content-wrapper"
|
|
236
243
|
>
|
|
237
|
-
<ul>
|
|
244
|
+
<ul class="mobile-nav-list--main">
|
|
238
245
|
<slot name="mobile-main-nav-items"></slot>
|
|
239
246
|
</ul>
|
|
240
|
-
<ul class="mobile-
|
|
247
|
+
<ul v-if="$slots['mobile-utility-nav-items']" class="mobile-nav-list--utility">
|
|
248
|
+
<slot name="mobile-utility-nav-items"></slot>
|
|
249
|
+
</ul>
|
|
250
|
+
<ul class="mobile-nav-list--dropdown mobile-dropdown-content">
|
|
241
251
|
<slot name="mobile-dropdown-title"></slot>
|
|
242
252
|
<slot name="mobile-dropdown-links"></slot>
|
|
243
253
|
</ul>
|
|
@@ -299,11 +309,24 @@ const props = defineProps({
|
|
|
299
309
|
type: Boolean,
|
|
300
310
|
default: false,
|
|
301
311
|
},
|
|
312
|
+
headerCtaText: {
|
|
313
|
+
type: String,
|
|
314
|
+
default: "",
|
|
315
|
+
},
|
|
316
|
+
headerCtaUrl: {
|
|
317
|
+
type: String,
|
|
318
|
+
default: "",
|
|
319
|
+
},
|
|
302
320
|
});
|
|
303
321
|
let burgerState = ref(props.burgerState);
|
|
304
322
|
|
|
305
|
-
// Hide burger automatically when there's nothing to show in it (no nav links, no dropdown)
|
|
306
|
-
|
|
323
|
+
// Hide burger automatically when there's nothing to show in it (no nav links, no dropdown).
|
|
324
|
+
// Use ref(true) as the SSR-safe default — computed(() => slots[...]()) causes hydration
|
|
325
|
+
// attribute mismatches because slot functions evaluate differently during SSR vs hydration.
|
|
326
|
+
// The correct value is resolved client-side in onMounted.
|
|
327
|
+
const hasBurgerContent = ref(true);
|
|
328
|
+
|
|
329
|
+
function resolveBurgerContent() {
|
|
307
330
|
const mainNav = slots["main-nav-items"]?.();
|
|
308
331
|
const mobileMainNav = slots["mobile-main-nav-items"]?.();
|
|
309
332
|
const hasNavItems =
|
|
@@ -319,11 +342,16 @@ const hasBurgerContent = computed(() => {
|
|
|
319
342
|
(dropLinks?.length ?? 0) > 0 ||
|
|
320
343
|
(mobileDropTitle?.length ?? 0) > 0 ||
|
|
321
344
|
(mobileDropLinks?.length ?? 0) > 0;
|
|
322
|
-
|
|
345
|
+
hasBurgerContent.value = hasNavItems || hasDropdownItems;
|
|
346
|
+
return;
|
|
323
347
|
}
|
|
324
348
|
|
|
325
|
-
|
|
326
|
-
}
|
|
349
|
+
hasBurgerContent.value = hasNavItems;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
const hasHeaderCta = computed(
|
|
353
|
+
() => !!props.headerCtaText && !!props.headerCtaUrl,
|
|
354
|
+
);
|
|
327
355
|
let search = ref(props.search);
|
|
328
356
|
let showDropDown = ref(props.showDropDown);
|
|
329
357
|
let showPortalSwitcherDropDown = ref(props.showPortalSwitcherDropDown);
|
|
@@ -357,6 +385,7 @@ watch(
|
|
|
357
385
|
);
|
|
358
386
|
// Close dropdown when clicking outside
|
|
359
387
|
onMounted(() => {
|
|
388
|
+
resolveBurgerContent();
|
|
360
389
|
clickEventListener = (e: MouseEvent) => {
|
|
361
390
|
if (!(e.target as HTMLElement).closest("#menu-dropdown")) {
|
|
362
391
|
showDropDown.value = false;
|
|
@@ -378,6 +407,11 @@ onUnmounted(() => {
|
|
|
378
407
|
if (clickEventListener !== null) {
|
|
379
408
|
window.removeEventListener("click", clickEventListener);
|
|
380
409
|
}
|
|
410
|
+
document.body.style.overflow = "";
|
|
411
|
+
});
|
|
412
|
+
|
|
413
|
+
watch(burgerState, (isOpen) => {
|
|
414
|
+
document.body.style.overflow = isOpen ? "hidden" : "";
|
|
381
415
|
});
|
|
382
416
|
|
|
383
417
|
// Emit both the burgerState and showDropDown state to the parent component
|
|
@@ -445,8 +479,8 @@ defineExpose({
|
|
|
445
479
|
}
|
|
446
480
|
|
|
447
481
|
.main-nav-items a {
|
|
448
|
-
font-size: $font-size-
|
|
449
|
-
font-weight:
|
|
482
|
+
font-size: $font-size-sm;
|
|
483
|
+
font-weight: 600;
|
|
450
484
|
}
|
|
451
485
|
|
|
452
486
|
#menu-dropdown {
|
|
@@ -456,20 +490,23 @@ defineExpose({
|
|
|
456
490
|
}
|
|
457
491
|
button {
|
|
458
492
|
font-size: $font-size-xsm;
|
|
459
|
-
font-weight:
|
|
493
|
+
font-weight: 600;
|
|
460
494
|
}
|
|
461
495
|
}
|
|
462
496
|
.mobile-menu-content-wrapper {
|
|
497
|
+
flex: 1;
|
|
498
|
+
overflow-y: auto;
|
|
499
|
+
padding-bottom: 30px;
|
|
463
500
|
li {
|
|
464
501
|
margin-bottom: 14px;
|
|
465
502
|
}
|
|
466
|
-
|
|
503
|
+
.mobile-nav-list--main {
|
|
467
504
|
margin-top: 35px;
|
|
468
505
|
}
|
|
469
|
-
|
|
506
|
+
.mobile-nav-list--utility {
|
|
470
507
|
margin-top: 60px;
|
|
471
508
|
}
|
|
472
|
-
|
|
509
|
+
.mobile-nav-list--dropdown {
|
|
473
510
|
margin-top: 60px;
|
|
474
511
|
}
|
|
475
512
|
h4 {
|
|
@@ -489,17 +526,33 @@ defineExpose({
|
|
|
489
526
|
}
|
|
490
527
|
#menu-dropdown {
|
|
491
528
|
position: relative;
|
|
492
|
-
display:
|
|
529
|
+
display: flex;
|
|
530
|
+
align-items: center;
|
|
493
531
|
li {
|
|
494
532
|
list-style-type: none;
|
|
495
533
|
}
|
|
534
|
+
.nav-dropdown-btn {
|
|
535
|
+
padding: 0;
|
|
536
|
+
height: auto;
|
|
537
|
+
width: auto;
|
|
538
|
+
min-width: unset;
|
|
539
|
+
}
|
|
496
540
|
}
|
|
497
541
|
|
|
498
|
-
.mir-link-logo
|
|
542
|
+
.mir-link-logo {
|
|
543
|
+
width: var(--logo-width, 125px);
|
|
544
|
+
flex-shrink: 0;
|
|
545
|
+
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
546
|
+
}
|
|
547
|
+
.mir-link-logo img,
|
|
548
|
+
.mobile-mir-link-logo svg {
|
|
499
549
|
object-fit: contain;
|
|
500
550
|
object-position: left;
|
|
551
|
+
width: 100%;
|
|
552
|
+
height: auto;
|
|
501
553
|
}
|
|
502
|
-
.mobile-mir-link-logo img
|
|
554
|
+
.mobile-mir-link-logo img,
|
|
555
|
+
.mobile-mir-link-logo svg {
|
|
503
556
|
object-fit: contain;
|
|
504
557
|
max-width: 120px;
|
|
505
558
|
object-position: left;
|
|
@@ -517,9 +570,9 @@ defineExpose({
|
|
|
517
570
|
border-radius: 40px;
|
|
518
571
|
cursor: pointer;
|
|
519
572
|
display: flex;
|
|
520
|
-
height:
|
|
573
|
+
height: 30px;
|
|
521
574
|
justify-content: center;
|
|
522
|
-
width:
|
|
575
|
+
width: 30px;
|
|
523
576
|
@include md {
|
|
524
577
|
&:hover,
|
|
525
578
|
&:active,
|
|
@@ -530,11 +583,26 @@ defineExpose({
|
|
|
530
583
|
}
|
|
531
584
|
}
|
|
532
585
|
}
|
|
586
|
+
|
|
587
|
+
nav {
|
|
588
|
+
height: 100%;
|
|
589
|
+
}
|
|
533
590
|
}
|
|
534
591
|
}
|
|
535
592
|
.nav-search-wrapper {
|
|
593
|
+
align-items: center;
|
|
594
|
+
display: flex;
|
|
536
595
|
max-width: 114px;
|
|
537
596
|
}
|
|
597
|
+
.nav-cta-wrapper {
|
|
598
|
+
display: flex;
|
|
599
|
+
align-items: center;
|
|
600
|
+
flex-shrink: 0;
|
|
601
|
+
|
|
602
|
+
a {
|
|
603
|
+
white-space: nowrap;
|
|
604
|
+
}
|
|
605
|
+
}
|
|
538
606
|
.nav-wrapper {
|
|
539
607
|
display: none;
|
|
540
608
|
gap: 0px;
|
|
@@ -545,8 +613,9 @@ defineExpose({
|
|
|
545
613
|
margin: auto;
|
|
546
614
|
|
|
547
615
|
@include md {
|
|
616
|
+
align-items: center;
|
|
548
617
|
display: flex;
|
|
549
|
-
|
|
618
|
+
height: 100%;
|
|
550
619
|
}
|
|
551
620
|
}
|
|
552
621
|
|
|
@@ -561,6 +630,7 @@ defineExpose({
|
|
|
561
630
|
}
|
|
562
631
|
}
|
|
563
632
|
.main-nav-items {
|
|
633
|
+
align-items: center;
|
|
564
634
|
display: flex;
|
|
565
635
|
white-space: nowrap;
|
|
566
636
|
gap: 30px;
|
|
@@ -572,12 +642,13 @@ defineExpose({
|
|
|
572
642
|
|
|
573
643
|
.dropdown-content {
|
|
574
644
|
position: absolute;
|
|
645
|
+
top: calc(100% + 10px);
|
|
575
646
|
background-color: $white;
|
|
576
647
|
min-width: 160px;
|
|
577
648
|
box-shadow: $box-shadow;
|
|
578
649
|
border-radius: $border-radius;
|
|
579
650
|
padding: 10px 15px;
|
|
580
|
-
right:
|
|
651
|
+
right: 0;
|
|
581
652
|
:deep(li) {
|
|
582
653
|
padding: 7.5px 0;
|
|
583
654
|
:deep(a) {
|
|
@@ -649,8 +720,9 @@ defineExpose({
|
|
|
649
720
|
.nav-dropdown-btn {
|
|
650
721
|
background: none;
|
|
651
722
|
border: none;
|
|
723
|
+
color: $blue-900;
|
|
652
724
|
cursor: pointer;
|
|
653
|
-
font-size: $font-size-
|
|
725
|
+
font-size: $font-size-sm;
|
|
654
726
|
font-family: $font-opensans;
|
|
655
727
|
font-weight: 600;
|
|
656
728
|
min-width: 170px;
|
|
@@ -746,20 +818,38 @@ defineExpose({
|
|
|
746
818
|
|
|
747
819
|
// Mobile menu styles
|
|
748
820
|
.mobile-nav-wrapper {
|
|
749
|
-
padding:
|
|
821
|
+
padding: 5px 30px 0 30px;
|
|
750
822
|
|
|
751
823
|
@include md {
|
|
752
824
|
display: none;
|
|
753
825
|
}
|
|
754
826
|
.mobile-logo-search-burger-wrapper {
|
|
755
827
|
display: grid;
|
|
756
|
-
grid-template-columns: 1fr 44px 44px
|
|
828
|
+
grid-template-columns: 1fr 44px 44px;
|
|
757
829
|
grid-template-rows: 1fr;
|
|
758
830
|
align-items: center;
|
|
759
831
|
width: 100%;
|
|
760
832
|
max-width: $max-width;
|
|
761
833
|
margin: auto;
|
|
762
834
|
|
|
835
|
+
.mobile-cta-wrapper {
|
|
836
|
+
display: flex;
|
|
837
|
+
align-items: center;
|
|
838
|
+
|
|
839
|
+
:deep(.button--secondary) {
|
|
840
|
+
color: $white;
|
|
841
|
+
border-color: $white;
|
|
842
|
+
|
|
843
|
+
&:hover,
|
|
844
|
+
&:active,
|
|
845
|
+
&:focus,
|
|
846
|
+
&:target {
|
|
847
|
+
color: $white;
|
|
848
|
+
border-color: $white;
|
|
849
|
+
}
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
|
|
763
853
|
.mobile-search-wrapper {
|
|
764
854
|
width: 44px;
|
|
765
855
|
height: 44px;
|
|
@@ -790,6 +880,9 @@ defineExpose({
|
|
|
790
880
|
right: 0;
|
|
791
881
|
left: 0;
|
|
792
882
|
z-index: 9;
|
|
883
|
+
display: flex;
|
|
884
|
+
flex-direction: column;
|
|
885
|
+
overflow: hidden;
|
|
793
886
|
}
|
|
794
887
|
.mobile-nav-wrapper.mirsaic-mobile-bg::before {
|
|
795
888
|
opacity: 1;
|
|
@@ -800,6 +893,14 @@ defineExpose({
|
|
|
800
893
|
grid-template-columns: 1fr 44px;
|
|
801
894
|
}
|
|
802
895
|
|
|
896
|
+
/* When CTA is present, add auto column for it */
|
|
897
|
+
.header--has-cta .mobile-logo-search-burger-wrapper {
|
|
898
|
+
grid-template-columns: 1fr auto 44px 44px;
|
|
899
|
+
}
|
|
900
|
+
.header--has-cta.header--hide-burger .mobile-logo-search-burger-wrapper {
|
|
901
|
+
grid-template-columns: 1fr auto 44px;
|
|
902
|
+
}
|
|
903
|
+
|
|
803
904
|
.header--hide-burger .mobile-menu-content-wrapper {
|
|
804
905
|
display: none;
|
|
805
906
|
}
|
|
@@ -37,28 +37,77 @@ defineProps({
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
&__content {
|
|
40
|
-
padding:
|
|
40
|
+
padding: 24px 20px 40px;
|
|
41
41
|
height: 100%;
|
|
42
42
|
display: flex;
|
|
43
43
|
flex-direction: column;
|
|
44
|
-
gap:
|
|
44
|
+
gap: 1.25rem;
|
|
45
45
|
justify-content: flex-start;
|
|
46
|
+
|
|
47
|
+
@include sm {
|
|
48
|
+
padding: 40px 60px 60px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&__headline {
|
|
53
|
+
font-size: $font-size-md;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
color: $blue-900;
|
|
56
|
+
margin: 0;
|
|
57
|
+
text-align: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__paragraph {
|
|
61
|
+
margin: 0;
|
|
62
|
+
text-align: center;
|
|
63
|
+
padding-bottom: 24px;
|
|
64
|
+
border-bottom: 1px solid $grey-200;
|
|
46
65
|
}
|
|
47
66
|
|
|
48
67
|
&__links {
|
|
49
68
|
:deep(ul) {
|
|
50
69
|
display: grid;
|
|
51
|
-
grid-template-columns:
|
|
52
|
-
|
|
70
|
+
grid-template-columns: 1fr;
|
|
71
|
+
padding-top: 1.5rem;
|
|
72
|
+
row-gap: .75rem;
|
|
53
73
|
|
|
54
74
|
@include sm {
|
|
75
|
+
grid-template-columns: repeat(2, 1fr);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@include md {
|
|
55
79
|
grid-template-columns: repeat(3, 1fr);
|
|
56
80
|
}
|
|
81
|
+
|
|
57
82
|
li {
|
|
83
|
+
border-radius: $border-radius;
|
|
84
|
+
padding: 1rem;
|
|
85
|
+
|
|
86
|
+
&:has(a.router-link-active) {
|
|
87
|
+
background-color: $grey-100;
|
|
88
|
+
}
|
|
89
|
+
|
|
58
90
|
a {
|
|
59
|
-
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
font-weight: 500;
|
|
94
|
+
gap: .75rem;
|
|
95
|
+
width: 100%;
|
|
96
|
+
color: $blue-900;
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
|
|
60
99
|
&.router-link-active {
|
|
61
|
-
|
|
100
|
+
&::after {
|
|
101
|
+
content: "✓";
|
|
102
|
+
margin-left: auto;
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
color: $blue-900;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
span {
|
|
109
|
+
font-weight: 300;
|
|
110
|
+
text-decoration: underline;
|
|
62
111
|
}
|
|
63
112
|
}
|
|
64
113
|
}
|
package/dist/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*:where(:not(html,iframe,canvas,img,svg,video,audio,div.card):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}html{line-height:1.15;-webkit-text-size-adjust:100%;font-size:16px}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp{font-family:monospace,monospace;font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}h1{font-size:44px;line-height:52px;font-family:"Oscine",sans-serif;font-weight:300;color:#0c0931}@media screen and (min-width: 581px){h1{font-size:3.75rem;line-height:66px}}h2{font-size:1.875rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:36px;color:#0c0931}h3{font-size:1.375rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:27px;color:#0c0931}h4{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:600;line-height:24px;color:#0c0931}p{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:24px;color:#0c0931}small{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}button{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:600}a{font-size:inherit;font-family:"OpenSans",sans-serif}label{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}.button{border:none;cursor:pointer;font-weight:600;text-align:center;display:inline-block;vertical-align:middle;font-size:.875rem;line-height:27px}.button:disabled{opacity:.3;cursor:auto;pointer-events:none}.button--primary{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:target{background-color:#105aa8;box-shadow:0px 0px 15px #cbeefa}.button--primary-dark{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-dark:hover,.button--primary-dark:active,.button--primary-dark:focus,.button--primary-dark:target{background-color:#105aa8;box-shadow:0 0 15px #1a76bc}.button--primary-danger{min-width:120px;padding:3px 15px;background-color:#dd564d;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-danger:hover,.button--primary-danger:active,.button--primary-danger:focus,.button--primary-danger:target{background-color:#cf3228;box-shadow:0px 0px 15px #cbeefa}.button--secondary{min-width:120px;padding:3px 15px;color:#1a76bc;border:1px solid #1a76bc;border-radius:.4rem;transition:color .3s ease,border .3s ease}.button--secondary:hover,.button--secondary:active,.button--secondary:focus,.button--secondary:target{color:#105aa8;border:1px solid #105aa8}.button--secondary-dark{color:#fff;border:1px solid #fff;min-width:120px;padding:3px 15px;border-radius:.4rem}.font-size-xxsm{font-size:.75rem}.font-size-xsm{font-size:.875rem}.font-size-sm{font-size:1rem}.font-size-md{font-size:1.375rem}.font-size-lg{font-size:1.875rem}.font-size-xlg{font-size:3.75rem}.product-sub-nav-wrapper__inner{padding:2px 30px 10px 30px}@media screen and (min-width: 984px){.product-sub-nav-wrapper__inner{padding:1em 0 1em 0}}.product-sub-nav-wrapper h3{font-weight:700;color:#003087;font-size:1.875rem}.product-sub-nav--items-wrapper{width:100%}@media screen and (min-width: 984px){.product-sub-nav--items-wrapper{width:auto}}.splide__slide{color:#0c0931}.mirsaic--light{background-image:url("https://a.storyblok.com/f/230581/1202x489/1cad3b882a/mirsaic-light.svg?cv=1695126163505"),linear-gradient(155deg, #effafe 0%, #ffffff 60%);background-repeat:repeat-x,no-repeat;background-size:984px auto,100% 763px;background-position:center top}.mirsaic--dark{background-
|
|
1
|
+
*:where(:not(html,iframe,canvas,img,svg,video,audio,div.card):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}html{line-height:1.15;-webkit-text-size-adjust:100%;font-size:16px}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp{font-family:monospace,monospace;font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}h1{font-size:44px;line-height:52px;font-family:"Oscine",sans-serif;font-weight:300;color:#0c0931}@media screen and (min-width: 581px){h1{font-size:3.75rem;line-height:66px}}h2{font-size:1.875rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:36px;color:#0c0931}h3{font-size:1.375rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:27px;color:#0c0931}h4{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:600;line-height:24px;color:#0c0931}p{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:24px;color:#0c0931}small{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}button{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:600}a{font-size:inherit;font-family:"OpenSans",sans-serif}label{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}.button{border:none;cursor:pointer;font-weight:600;text-align:center;display:inline-block;vertical-align:middle;font-size:.875rem;line-height:27px}.button:disabled{opacity:.3;cursor:auto;pointer-events:none}.button--primary{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:target{background-color:#105aa8;box-shadow:0px 0px 15px #cbeefa}.button--primary-dark{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-dark:hover,.button--primary-dark:active,.button--primary-dark:focus,.button--primary-dark:target{background-color:#105aa8;box-shadow:0 0 15px #1a76bc}.button--primary-danger{min-width:120px;padding:3px 15px;background-color:#dd564d;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-danger:hover,.button--primary-danger:active,.button--primary-danger:focus,.button--primary-danger:target{background-color:#cf3228;box-shadow:0px 0px 15px #cbeefa}.button--secondary{min-width:120px;padding:3px 15px;color:#1a76bc;border:1px solid #1a76bc;border-radius:.4rem;transition:color .3s ease,border .3s ease}.button--secondary:hover,.button--secondary:active,.button--secondary:focus,.button--secondary:target{color:#105aa8;border:1px solid #105aa8}.button--secondary-dark{color:#fff;border:1px solid #fff;min-width:120px;padding:3px 15px;border-radius:.4rem}.font-size-xxsm{font-size:.75rem}.font-size-xsm{font-size:.875rem}.font-size-sm{font-size:1rem}.font-size-md{font-size:1.375rem}.font-size-lg{font-size:1.875rem}.font-size-xlg{font-size:3.75rem}.product-sub-nav-wrapper__inner{padding:2px 30px 10px 30px}@media screen and (min-width: 984px){.product-sub-nav-wrapper__inner{padding:1em 0 1em 0}}.product-sub-nav-wrapper h3{font-weight:700;color:#003087;font-size:1.875rem}.product-sub-nav--items-wrapper{width:100%}@media screen and (min-width: 984px){.product-sub-nav--items-wrapper{width:auto}}.splide__slide{color:#0c0931}.mirsaic--light{background-image:url("https://a.storyblok.com/f/230581/1202x489/1cad3b882a/mirsaic-light.svg?cv=1695126163505"),linear-gradient(155deg, #effafe 0%, #ffffff 60%);background-repeat:repeat-x,no-repeat;background-size:984px auto,100% 763px;background-position:center top}.mirsaic--dark{background-color:#0c0931}table{width:100%;font-family:"OpenSans",sans-serif;font-size:1rem}table strong{font-weight:600}table a{color:#1a76bc;text-decoration:underline}table thead{background-color:#cbeefa}table thead th{padding:10px}table tbody td{padding:20px 10px}table tbody tr:nth-child(odd) td{background-color:#effafe}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Lt.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}.utility-nav-bar{display:none}@media screen and (min-width: 984px){.utility-nav-bar{display:flex;justify-content:flex-end;align-items:center;position:absolute;top:5px;left:0;right:0;max-width:984px;margin:0 auto;padding:0;height:var(--utility-nav-height, 30px);opacity:var(--utility-nav-opacity, 1);overflow:visible;transition:height .35s cubic-bezier(0.4, 0, 0.2, 1),opacity .35s cubic-bezier(0.4, 0, 0.2, 1);z-index:10}}.utility-nav-items{display:flex;flex-direction:row;align-items:center;gap:0;list-style:none;margin:0;padding:0}.utility-nav-items li{display:flex;align-items:center}.utility-nav-items>li:not(:last-child)::after{content:"";height:10px;margin:0 10px;background-color:#0c0931;font-size:.875rem;pointer-events:none;width:2px}.utility-nav-items a{font-size:.875rem;font-weight:600}
|