d5bbc321f9
Key changes: - Change main font to Roboto Slab for enhanced readability. - Change code font to 'Source Code Pro' for consistent monospace code rendering. - Import and set code font explicitly for uniform appearance across platforms. - Update Slabo 27px (logo font) version from v6 to v14. - Update Yesteryear (cursive font) version from v8 to v18. - Drop support for historic browser-specific formats, retaining only WOFF2 for modern and TTF for legacy browsers. - Use `font-display: swap` to improve perceived load times and minimize layout shifts. Supporting changes: - Simplify font-weight usage to 'normal' and 'bold' for consistency. - Adjust inline code padding for better scalability and prevent overflow. - Introduce `$font-main` as main font variable. - Remove specification of main font as it's best practice to rely on the default font defined on `body` style. - Specify font in code area to ensure it uses the code font consistently as the rest of the application. - Remove local font search through `local` to simplify the import logic and prioritize consistency over performance. - Import bold font explicitly (`font-weight: 700`) for smooth and consistent rendering. - Move `font-family` definitions to `_typography.scss` to better adhere to the common standards and conventions. - Refactor font variables to have `font-family-` prefix instead of `font-` to improve clarity and differentiation between `font-size` variables. - Rename 'artistic' font to 'cursive' for preciseness and clarity. - Use smaller font sizes to match the new main font size, as Roboto Slab is relatively larger. - Add missing fallbacks for serif fonts to improve fault tolerance. - Change padding slightly on toggle switch for revert buttons to align well with new main font and its sizing.
73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<template>
|
|
<!-- Use `button` instead of DIV as it is semantically correct and accessibility best-practice -->
|
|
<button
|
|
v-non-collapsing
|
|
type="button"
|
|
class="flat-button"
|
|
:class="{
|
|
disabled,
|
|
}"
|
|
@click="onClicked"
|
|
>
|
|
<AppIcon v-if="icon" :icon="icon" />
|
|
<span v-if="label">{{ label }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
|
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
|
|
export default defineComponent({
|
|
components: { AppIcon },
|
|
directives: { NonCollapsing },
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
icon: {
|
|
type: String as PropType<IconName | undefined>,
|
|
default: undefined,
|
|
required: false,
|
|
},
|
|
},
|
|
emits: [
|
|
'click',
|
|
],
|
|
setup(props, { emit }) {
|
|
function onClicked() {
|
|
if (props.disabled) {
|
|
return;
|
|
}
|
|
emit('click');
|
|
}
|
|
return { onClicked };
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.flat-button {
|
|
display: inline-flex;
|
|
gap: 0.5em;
|
|
&.disabled {
|
|
@include flat-button($disabled: true);
|
|
}
|
|
&:not(.disabled) {
|
|
@include flat-button($disabled: false);
|
|
}
|
|
}
|
|
</style>
|