An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
fsckcss/src/demos/Modal.svelte

60 lines
1.1 KiB

<script>
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { fade } from 'svelte/transition';
export let visible = false;
</script>
<style>
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(244,244,244,0.75);
padding: 0px;
}
modal-content {
flex-direction: column;
background: white;
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 300px;
min-height: 300px;
max-width: 300px;
width: 100%;
z-index: 20;
padding: 0.5em;
}
</style>
<content>
<button on:click={ () => visible = true }>Click Me!</button>
</content>
{#if visible}
<modal on:click={ () => visible = false }>
<modal-content>
<h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content>
</modal>
{/if}
<CodeView source="/code/Modal" />