forked from MapComplete/MapComplete
48 lines
1.3 KiB
Svelte
48 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import Loading from "./Base/Loading.svelte"
|
|
import Community from "../assets/svg/Community.svelte"
|
|
import Login from "../assets/svg/Login.svelte"
|
|
import Dropdown from "./Base/Dropdown.svelte"
|
|
import { UIEventSource } from "../Logic/UIEventSource"
|
|
import StylesheetTestUnit from "./StylesheetTestUnit.svelte"
|
|
</script>
|
|
|
|
<main class="w-full h-full p-4">
|
|
<div class="flex flex-col gap-y-2">
|
|
<h1>Stylesheet testing grounds</h1>
|
|
|
|
This document exists to explore the style hierarchy.
|
|
|
|
<div class="border-interactive m-2 p-2">
|
|
|
|
<h2>Normal background</h2>
|
|
There are a few styles, such as the
|
|
<span class="literal-code">normal-background</span>
|
|
-style which is used if there is nothing special going on. Some general information, with at most
|
|
<StylesheetTestUnit/>
|
|
</div>
|
|
|
|
<div class="low-interaction flex flex-col">
|
|
<h2>Low interaction</h2>
|
|
<p>
|
|
There are <span class="literal-code">low-interaction</span>
|
|
areas, where some buttons might appear.
|
|
</p>
|
|
|
|
|
|
<StylesheetTestUnit/>
|
|
|
|
</div>
|
|
|
|
<div class="interactive flex flex-col">
|
|
<h2>Interactive area</h2>
|
|
<p>
|
|
There are <span class="literal-code">interactive</span>
|
|
areas, where many buttons and input elements will appear.
|
|
</p>
|
|
|
|
<StylesheetTestUnit/>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|