eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix package.json + NavRow indicator

Browse Source
This commit is contained in:
venashial
2022-06-21 22:37:26 -07:00
parent 06780c2805
commit bd3dd69ae1
4 changed files with 25 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/routes/components/NavRow.md
View File

@@ -35,22 +35,20 @@
import { NavRow } from 'omorphia' import { NavRow } from 'omorphia'
</script> </script>
<div class="card card--strip card--pad-x"> <NavRow
<NavRow level={1}
level={1} links={[
links={[ {
{ href: '/Button',
href: '/Button', label: 'Button',
label: 'Button', },
}, {
{ href: '/Chips',
href: '/Chips', label: 'Chips',
label: 'Chips', },
}, {
{ href: '/NavRow',
href: '/NavRow', label: 'NavRow',
label: 'NavRow', },
}, ]} />
]} />
</div>
``` ```

4
package.json
View File

@@ -31,8 +31,8 @@
}, },
"homepage": "https://omorphia.modrinth.com", "homepage": "https://omorphia.modrinth.com",
"exports": { "exports": {
".": "./src/index", ".": "./index.js",
"./utils": "./src//utils/index.ts", "./utils": "./src/utils/index.ts",
"./styles.postcss": "./src/styles.postcss", "./styles.postcss": "./src/styles.postcss",
"./plugins": "./src/plugins/index.js", "./plugins": "./src/plugins/index.js",
"./config/postcss": "./src/config/postcss.cjs", "./config/postcss": "./src/config/postcss.cjs",

2
src/components/Avatar.svelte
View File

@@ -71,11 +71,13 @@
&-xs { &-xs {
--size: 2.5rem; --size: 2.5rem;
box-shadow: var(--shadow-inset), var(--shadow-raised); box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
} }
&-sm { &-sm {
--size: 3rem; --size: 3rem;
box-shadow: var(--shadow-inset), var(--shadow-raised); box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
} }
&-md { &-md {

14
src/components/NavRow.svelte
View File

@@ -67,6 +67,7 @@
{/each} {/each}
<div <div
class="navigation__indicator" class="navigation__indicator"
style:visibility={indicatorReady && activeIndex !== -1 ? 'visible' : 'hidden'}
style:left={linkElements style:left={linkElements
.slice(0, activeIndex) .slice(0, activeIndex)
.map((element, index) => element.offsetWidth + 16) .map((element, index) => element.offsetWidth + 16)
@@ -86,7 +87,6 @@
&__link { &__link {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-text-light); color: var(--color-text-light);
transition: color 0.3s ease-in-out;
position: relative; position: relative;
&.is-active { &.is-active {
@@ -101,11 +101,13 @@
width: 100%; width: 100%;
border-radius: var(--rounded-max); border-radius: var(--rounded-max);
height: 0.25rem; height: 0.25rem;
transition: background-color 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
background-color: var(--color-brand);
opacity: 0;
} }
&:hover::after { &:hover::after {
background-color: var(--color-brand-light); opacity: 0.5;
} }
} }
@@ -127,11 +129,5 @@
transition: width 0.3s ease-out, left 0.3s ease-out; transition: width 0.3s ease-out, left 0.3s ease-out;
visibility: hidden; visibility: hidden;
} }
&:not(.static-indicator) {
.navigation__indicator {
visibility: visible;
}
}
} }
</style> </style>