b08a6b5cec
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
everywhere without using any other color:
- It changes tooltip background from black to darker primary
colors.
- It overrides unset styles from tree component
- It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
achieve that:
- It introduces new "light" variants of main colors
- It switches to colors with different variants (e.g. in Dialogs it
uses primary color as button as it has variants that can be
activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<modal
|
|
:name="name"
|
|
:scrollable="true"
|
|
:adaptive="true"
|
|
height="auto">
|
|
<div class="dialog">
|
|
<div class="dialog__content">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="dialog__close-button">
|
|
<font-awesome-icon :icon="['fas', 'times']" @click="$modal.hide(name)"/>
|
|
</div>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class Dialog extends Vue {
|
|
private static idCounter = 0;
|
|
|
|
public name = (++Dialog.idCounter).toString();
|
|
|
|
public show(): void {
|
|
this.$modal.show(this.name);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/fonts.scss";
|
|
@import "@/presentation/styles/colors.scss";
|
|
|
|
.dialog {
|
|
color: $color-surface;
|
|
font-family: $normal-font;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__content {
|
|
color: $color-on-surface;
|
|
width: 100%;
|
|
margin: 5%;
|
|
}
|
|
|
|
&__close-button {
|
|
color: $color-primary-dark;
|
|
width: auto;
|
|
font-size: 1.5em;
|
|
margin-right: 0.25em;
|
|
align-self: flex-start;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
</style>
|