gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-29 14:25:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

add new modal size

Browse Source
This commit is contained in:
Pavel Laptev 2024-08-16 15:20:55 +02:00 committed by Mattias Granlund
parent 5b2a58a35a
commit f4541cbb94
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/src/lib/modal/Modal.svelte
View File

@ -6,7 +6,7 @@
import type { Snippet } from 'svelte';
interface Props {
width?: 'default' | 'small' | 'large';
width?: 'default' | 'large' | 'small' | 'xsmall';
title?: string;
icon?: keyof typeof iconsJson;
onclose?: () => void;
@ -35,9 +35,10 @@
<div use:portal={'body'} role="presentation" class="modal-container" class:open>
<div
class="modal-content"
class:s-default={width === 'default'}
class:s-small={width === 'small'}
class:s-large={width === 'large'}
class:default={width === 'default'}
class:large={width === 'large'}
class:small={width === 'small'}
class:xsmall={width === 'xsmall'}
class:round-top-corners={!title}
use:clickOutside={{
handler: close
@ -149,17 +150,21 @@
}
}
/* modifiers */
/* MODIFIERS */
.s-large {
width: 840px;
}
.s-default {
.modal-content.default {
width: 580px;
}
.s-small {
.modal-content.large {
width: 840px;
}
.modal-content.small {
width: 380px;
}
.modal-content.xsmall {
width: 310px;
}
</style>