-
Notifications
You must be signed in to change notification settings - Fork 46
/
AppHeader.vue
76 lines (73 loc) · 6.74 KB
/
AppHeader.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<template>
<Header css="HeaderOverrides" isSticky>
<template v-slot:logoleft>
<a class="logo" href="/">
<svg
width="139"
height="26"
viewBox="0 0 139 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.57333 15.8804L3.75477 20H0.488792L8.50529 1.85155H11.7713L19.7506 20H16.4847L14.6661 15.8804H5.57333ZM13.4414 13.0227L10.1383 5.56289L6.83518 13.0227H13.4414ZM124.936 17.5165C126.229 17.5165 127.249 17.0742 127.998 16.1897C128.769 15.3052 129.155 14.1031 129.155 12.5835V3.36392H131.978V12.6856C131.978 15.0443 131.332 16.8814 130.039 18.1969C128.746 19.5124 127.045 20.1701 124.936 20.1701C122.827 20.1701 121.126 19.5124 119.833 18.1969C118.54 16.8814 117.894 15.0443 117.894 12.6856V3.36392H120.683V12.5835C120.683 14.1258 121.069 15.3278 121.84 16.1897C122.589 17.0742 123.62 17.5165 124.936 17.5165ZM135.412 3.36392H138.236V20H135.412V3.36392Z"
fill="#34A5F8"
/>
<path
d="M34.2769 6.19381V18.2186C34.2769 20.5938 33.6336 22.4124 32.347 23.6742C31.0604 24.9361 29.3408 25.567 27.1882 25.567C25.1594 25.567 23.279 24.9113 21.547 23.6L22.9202 21.4103C24.3058 22.4247 25.679 22.932 27.0398 22.932C30.0089 22.932 31.4934 21.4474 31.4934 18.4784V16.6969C31.0728 17.5134 30.4542 18.1691 29.6377 18.6639C28.8212 19.134 27.9181 19.3691 26.9284 19.3691C25.0975 19.3691 23.5882 18.7381 22.4006 17.4763C21.2377 16.1897 20.6563 14.5938 20.6563 12.6887C20.6563 10.7588 21.2377 9.16289 22.4006 7.90103C23.5882 6.61443 25.0975 5.97113 26.9284 5.97113C28.7594 5.97113 30.2439 6.72577 31.382 8.23505V6.19381H34.2769ZM27.4109 16.734C28.5738 16.734 29.5264 16.3381 30.2686 15.5464C31.0109 14.7299 31.382 13.7278 31.382 12.5402C31.382 11.3278 30.9985 10.3258 30.2315 9.53402C29.4893 8.71753 28.5367 8.30928 27.3738 8.30928C26.2109 8.30928 25.2707 8.7299 24.5532 9.57113C23.8604 10.3876 23.514 11.3773 23.514 12.5402C23.514 13.7278 23.8728 14.7299 24.5903 15.5464C25.3078 16.3381 26.248 16.734 27.4109 16.734ZM41.3852 20H38.4903V6.19381H41.3852V8.68041C41.8553 7.83917 42.4986 7.1835 43.3151 6.7134C44.1563 6.21856 45.0471 5.97113 45.9873 5.97113C47.5955 5.97113 48.8697 6.45361 49.8099 7.41856C50.7501 8.3835 51.2202 9.7567 51.2202 11.5381V20H48.2883V12.4289C48.2883 9.88041 47.2367 8.60619 45.1336 8.60619C44.0697 8.60619 43.179 8.95258 42.4615 9.64536C41.744 10.3134 41.3852 11.266 41.3852 12.5031V20ZM61.6063 17.6247C62.8681 17.6247 63.9073 17.2041 64.7238 16.3629C65.565 15.5216 65.9857 14.433 65.9857 13.0969C65.9857 11.7608 65.565 10.6722 64.7238 9.83093C63.9073 8.98969 62.8681 8.56907 61.6063 8.56907C60.3444 8.56907 59.3052 8.98969 58.4887 9.83093C57.6723 10.6722 57.264 11.7608 57.264 13.0969C57.264 14.433 57.6723 15.5093 58.4887 16.3258C59.3052 17.1918 60.3444 17.6247 61.6063 17.6247ZM61.6063 20.2227C59.5279 20.2227 57.796 19.5423 56.4104 18.1814C55.0248 16.7959 54.332 15.101 54.332 13.0969C54.332 11.0928 55.0248 9.41031 56.4104 8.04948C57.796 6.66392 59.5279 5.97113 61.6063 5.97113C63.6846 5.97113 65.4166 6.66392 66.8021 8.04948C68.1877 9.41031 68.8805 11.0928 68.8805 13.0969C68.8805 15.0268 68.1877 16.7093 66.8021 18.1443C65.4166 19.5299 63.6846 20.2227 61.6063 20.2227ZM76.9206 20.2227C74.6937 20.2227 72.6896 19.5299 70.9082 18.1443L72.3185 15.8804C73.902 17.0928 75.4608 17.699 76.9948 17.699C77.6381 17.699 78.1453 17.5505 78.5164 17.2536C78.9123 16.932 79.1102 16.5361 79.1102 16.066C79.1102 15.3732 78.1948 14.7546 76.3639 14.2103C76.3144 14.1856 76.2525 14.1608 76.1783 14.1361C76.1288 14.1113 76.0917 14.099 76.0669 14.099C73.1968 13.332 71.7618 12.033 71.7618 10.2021C71.7618 8.91546 72.2443 7.88866 73.2092 7.12165C74.1989 6.35464 75.4979 5.97113 77.1061 5.97113C78.6896 5.97113 80.1989 6.44124 81.634 7.38144L80.5577 9.53402C79.4443 8.79175 78.2195 8.42062 76.8834 8.42062C75.3247 8.42062 74.5453 8.91546 74.5453 9.90515C74.5453 10.3258 74.6937 10.6351 74.9907 10.833C75.3123 11.0062 75.8319 11.1794 76.5494 11.3526C77.6381 11.6495 78.5535 11.9464 79.2958 12.2433C79.7907 12.466 80.2236 12.701 80.5948 12.9485C81.535 13.5918 82.0051 14.5691 82.0051 15.8804C82.0051 17.167 81.5226 18.2186 80.5577 19.0351C79.6175 19.8268 78.4051 20.2227 76.9206 20.2227ZM88.8814 8.53196V15.5464C88.8814 16.2144 89.0546 16.7464 89.4009 17.1423C89.7721 17.5134 90.2669 17.699 90.8855 17.699C91.4546 17.699 92.0484 17.3897 92.6669 16.7711L93.8546 18.8495C92.8154 19.7649 91.6896 20.2227 90.4772 20.2227C89.2154 20.2227 88.1515 19.7897 87.2855 18.9237C86.4195 18.033 85.9865 16.8825 85.9865 15.4722V8.53196H84.2422V6.19381H85.9865V1.85155H88.8814V6.19381H92.5185V8.53196H88.8814ZM99.0766 20H96.1818V6.19381H99.0766V20ZM95.8106 2.11134C95.8106 1.61649 95.9838 1.19588 96.3302 0.849485C96.7013 0.47835 97.1467 0.292783 97.6663 0.292783C98.1611 0.292783 98.5818 0.47835 98.9281 0.849485C99.2993 1.19588 99.4848 1.61649 99.4848 2.11134C99.4848 2.63093 99.2993 3.07629 98.9281 3.44742C98.5818 3.79381 98.1611 3.96701 97.6663 3.96701C97.1467 3.96701 96.7137 3.78144 96.3673 3.41031C95.9962 3.06392 95.8106 2.63093 95.8106 2.11134ZM102.391 13.0969C102.391 11.0186 103.108 9.31134 104.543 7.97526C105.978 6.63917 107.747 5.97113 109.85 5.97113C111.929 5.97113 113.685 6.68866 115.121 8.12371L113.413 10.2392C112.226 9.2 111.026 8.68041 109.813 8.68041C108.576 8.68041 107.512 9.08866 106.622 9.90515C105.756 10.6969 105.323 11.7237 105.323 12.9856C105.323 14.2722 105.756 15.3608 106.622 16.2515C107.512 17.1175 108.601 17.5505 109.888 17.5505C111.174 17.5505 112.399 16.9691 113.562 15.8062L115.269 17.6619C113.512 19.3691 111.57 20.2227 109.442 20.2227C107.463 20.2227 105.793 19.567 104.432 18.2557C103.071 16.9196 102.391 15.2 102.391 13.0969Z"
fill="black"
/>
</svg>
</a>
<HeaderNav css="HeaderNavOverrides">
<ul class="menu">
<li>
<a href="#" class="pre-pipe">Theming</a>
<span class="pipe"></span>
</li>
<li>
<a href="#system">System</a>
</li>
<li>
<a href="#inputs">Inputs</a>
</li>
<li>
<a href="#layoutsandnavigation">Layout & Navigation</a>
</li>
<li>
<a href="#tables">Tables</a>
</li>
</ul>
</HeaderNav>
</template>
</Header>
</template>
<script>
import Header from "agnosticui/Header.vue";
import HeaderNav from "agnosticui/HeaderNav.vue";
export default {
name: "AppHeader",
components: {
Header,
HeaderNav,
},
};
</script>
<style>
.HeaderNavOverrides .pre-pipe {
margin-right: var(--Space-32);
}
.HeaderNavOverrides .pipe {
display: inline;
padding: 0;
border-left: solid 1px var(--agnosticui-gray-mid-dark);
}
.HeaderOverrides .logo,
.HeaderNavOverrides .menu a {
background: initial;
font-weight: 300;
}
.HeaderOverrides .logo {
line-height: 0;
}
</style>