bf83c58982
- Add more documentation. - Use `main.scss` instead of importing components individually. This improves productivity without compilation errors due to missing imports and allows for easier future file/folder changes and refactorings inside `./styles`. - Use partials with underscored naming. Because it documents that the files should not be individually imported. - Introduce `third-party-extensions` folder to group styles that overwrites third party components. - Refactor variable names from generic to specific. - Use Sass modules (`@use` and `@forward`) over depreciated `@import` syntax. - Separate font assets from Sass files (`styles/`). Create `assets/` folder that will contain both. - Create `_globals.css` for global styling of common element instead of using `App.vue`.
38 lines
706 B
Vue
38 lines
706 B
Vue
<template>
|
|
<div class="list">
|
|
<div v-if="label">{{ label }}:</div>
|
|
<div class="items">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class MenuOptionList extends Vue {
|
|
@Prop() public label: string;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
$gap: 0.25rem;
|
|
.list {
|
|
font-family: $font-normal;
|
|
display: flex;
|
|
align-items: center;
|
|
.items {
|
|
* + *::before {
|
|
content: '|';
|
|
padding-right: $gap;
|
|
padding-left: $gap;
|
|
}
|
|
}
|
|
> *:not(:last-child) {
|
|
margin-right: $gap;
|
|
}
|
|
}
|
|
</style> |