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

Omorphia Cleanup + Adding missing styles (#18)

Browse Source 
* Add missing knossos styles + some knossos cleanup

* remove yarn.lock

* Update output syntax
This commit is contained in:
Geometrically
2023-03-13 11:40:41 -07:00
committed by GitHub
parent c8a30e793a
commit 1b81a1f4a6
25 changed files with 882 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
lib/components/base/Button.vue
View File

@@ -16,10 +16,6 @@ const props = defineProps({
type: Function,
default: null,
},
design: {
type: String,
default: 'default',
},
color: {
type: String,
default: 'default',
@@ -30,57 +26,41 @@ const props = defineProps({
},
})
const defaultDesign = computed(() => props.design === 'default')
const accentedButton = computed(
() => defaultDesign.value && ['danger', 'primary'].includes(props.color)
() => ['danger', 'primary'].includes(props.color)
)
</script>
<template>
<!-- <nuxt-link-->
<!-- v-if="link && link.startsWith('/')"-->
<!-- class="omorphia__button button-base button-color-base padding-block-sm padding-inline-lg radius-sm"-->
<!-- :class="{-->
<!-- 'icon-only': props.iconOnly,-->
<!-- 'bg-raised': raised,-->
<!-- 'bg-red': danger,-->
<!-- 'bg-brand': primary,-->
<!-- 'color-accent-contrast': danger || primary,-->
<!-- }"-->
<!-- :to="link"-->
<!-- :target="external ? '_blank' : '_self'"-->
<!-- >-->
<!-- <slot />-->
<!-- <Icon v-if="external && !props.iconOnly" class="external-icon" icon="external" />-->
<!-- <Icon v-if="!$slots.default" icon="unknown" />-->
<!-- </nuxt-link>-->
<a
<router-link
v-if="link"
class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
class="btn"
:class="{
'standard-button': defaultDesign,
'icon-only': props.iconOnly,
'bg-raised': defaultDesign && color === 'raised',
'bg-red': defaultDesign && color === 'danger',
'bg-brand': defaultDesign && color === 'primary',
'btn-raised': color === 'raised',
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'color-accent-contrast': accentedButton,
}"
:href="link"
:to="link"
:target="external ? '_blank' : '_self'"
>
<slot />
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
<UnknownIcon v-if="!$slots.default" />
</a>
</router-link>
<button
v-else
class="omorphia__button button-base padding-block-sm padding-inline-lg radius-md"
class="btn"
:class="{
'standard-button': defaultDesign,
'icon-only': props.iconOnly,
'bg-raised': defaultDesign && color === 'raised',
'bg-red': defaultDesign && color === 'danger',
'bg-brand': defaultDesign && color === 'primary',
'btn-raised': color === 'raised',
'btn-danger': color === 'danger',
'btn-primary': color === 'primary',
'btn-secondary': color === 'secondary',
'btn-highlight': color === 'highlight',
'color-accent-contrast': accentedButton,
}"
@click="action"
@@ -95,41 +75,4 @@ const accentedButton = computed(
background: none;
color: var(--color-base);
}
.omorphia__button {
display: flex;
align-items: center;
cursor: pointer;
width: fit-content;
height: fit-content;
text-decoration: none;
:deep(svg) {
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5rem;
}
:deep(.external-icon) {
width: 0.75rem;
height: 0.75rem;
margin-bottom: auto;
margin-left: 0.25rem;
margin-right: 0;
}
&.icon-only {
padding: 0;
height: 2.25rem;
width: 2.25rem;
:deep(svg) {
min-width: 1.25rem;
max-width: 1.25rem;
min-height: 1.25rem;
max-height: 1.25rem;
margin: auto;
}
}
}
</style>