|
| 1 | +<template> |
| 2 | + <div class="sidebar"> |
| 3 | + <div class="search"> |
| 4 | + <div> |
| 5 | + <input type="text" id="search" placeholder="Search (Not Implemented)" /> |
| 6 | + </div> |
| 7 | + </div> |
| 8 | + <div class="links"> |
| 9 | + <div class="header">Get Started</div> |
| 10 | + <RouterLink to="/docs/overview">Overview</RouterLink> |
| 11 | + <RouterLink to="/docs/values">Values</RouterLink> |
| 12 | + <RouterLink to="/docs/stack">Stack</RouterLink> |
| 13 | + </div> |
| 14 | + </div> |
| 15 | +</template> |
| 16 | + |
| 17 | +<style scoped lang="postcss"> |
| 18 | +.sidebar { |
| 19 | + @apply flex; |
| 20 | + @apply flex-col; |
| 21 | + @apply justify-start; |
| 22 | + @apply items-start; |
| 23 | +
|
| 24 | + @apply w-[260px]; |
| 25 | + @apply h-full; |
| 26 | +
|
| 27 | + @apply pl-[20px]; |
| 28 | + @apply py-4; |
| 29 | +
|
| 30 | + @apply bg-slate-50; |
| 31 | + @apply dark:bg-slate-950; |
| 32 | +
|
| 33 | + @apply text-slate-600; |
| 34 | + @apply hover:text-slate-700; |
| 35 | + @apply dark:text-slate-300; |
| 36 | + @apply dark:hover:text-gray-50; |
| 37 | +
|
| 38 | + @apply border-2; |
| 39 | + @apply border-l-0; |
| 40 | + @apply border-slate-200; |
| 41 | + @apply dark:border-slate-900; |
| 42 | +
|
| 43 | + .search { |
| 44 | + @apply mb-6; |
| 45 | + @apply pr-[20px]; |
| 46 | +
|
| 47 | + label { |
| 48 | + @apply block; |
| 49 | +
|
| 50 | + @apply mb-2; |
| 51 | +
|
| 52 | + @apply text-sm; |
| 53 | + @apply font-medium; |
| 54 | + @apply text-gray-900; |
| 55 | + @apply dark:text-white; |
| 56 | + } |
| 57 | +
|
| 58 | + input { |
| 59 | + @apply block; |
| 60 | +
|
| 61 | + @apply w-full; |
| 62 | +
|
| 63 | + @apply p-2.5; |
| 64 | +
|
| 65 | + @apply rounded-lg; |
| 66 | +
|
| 67 | + @apply dark:bg-slate-800; |
| 68 | +
|
| 69 | + @apply border; |
| 70 | + @apply border-gray-200; |
| 71 | + @apply dark:border-gray-600; |
| 72 | +
|
| 73 | + @apply placeholder-gray-700; |
| 74 | + @apply dark:placeholder-gray-300; |
| 75 | +
|
| 76 | + @apply text-sm; |
| 77 | + @apply text-gray-900; |
| 78 | + @apply dark:text-white; |
| 79 | +
|
| 80 | + @apply focus:ring-blue-500; |
| 81 | + @apply focus:border-blue-500; |
| 82 | + @apply dark:focus:ring-blue-500; |
| 83 | + @apply dark:focus:border-blue-500; |
| 84 | + } |
| 85 | + } |
| 86 | +
|
| 87 | + .links { |
| 88 | + @apply w-full; |
| 89 | +
|
| 90 | + .header { |
| 91 | + @apply pb-1; |
| 92 | + @apply pl-3; |
| 93 | +
|
| 94 | + font-size: 14px; |
| 95 | + @apply font-bold; |
| 96 | + @apply tracking-wide; |
| 97 | + @apply text-gray-800; |
| 98 | + @apply dark:text-gray-200; |
| 99 | + } |
| 100 | +
|
| 101 | + a { |
| 102 | + @apply transition; |
| 103 | + @apply block; |
| 104 | + @apply rounded-l-lg; |
| 105 | +
|
| 106 | + @apply w-full; |
| 107 | +
|
| 108 | + @apply pl-3; |
| 109 | + @apply py-0.5; |
| 110 | +
|
| 111 | + font-size: 16px; |
| 112 | + line-height: 1.75rem; |
| 113 | + @apply text-gray-500; |
| 114 | + @apply dark:text-gray-400; |
| 115 | +
|
| 116 | + @apply hover:text-gray-800; |
| 117 | + @apply dark:hover:text-gray-300; |
| 118 | + } |
| 119 | +
|
| 120 | + a.active { |
| 121 | + @apply border-r-4; |
| 122 | + @apply text-slate-900; |
| 123 | + @apply dark:text-white; |
| 124 | +
|
| 125 | + @apply bg-orange-200; |
| 126 | + @apply dark:bg-orange-600; |
| 127 | +
|
| 128 | + @apply border-orange-500; |
| 129 | + @apply dark:border-orange-800; |
| 130 | + } |
| 131 | + } |
| 132 | +} |
| 133 | +</style> |
0 commit comments