acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-01-26 07:40:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: fix spacing on rep selection (#340)

Browse Source
This commit is contained in:
Barbara Gomes 2023-04-02 14:49:07 -04:00 committed by GitHub
parent 8ea0ae6e1e
commit 1ebb902894
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/lib/components/dropdown.svelte
View File

@ -7,6 +7,7 @@
let cls: string | undefined = undefined
export { cls as class }
export let disabled: boolean | undefined = undefined
export let rep: boolean | undefined = undefined
let showDropdown = false
let dropdownElement: HTMLElement
@ -40,7 +41,7 @@
</div>
<div class={`root ${cls}`}>
<ul class={showDropdown ? '' : 'hidden'}>
<ul class={`${showDropdown ? '' : 'hidden'} ${rep ? 'rep' : ''} ${cls}`}>
<slot />
</ul>
</div>
@ -61,6 +62,10 @@
background-color: rgba(var(--color-body-bg-rgb), 0.93);
overflow: hidden;
&.rep {
inset: calc(100% - var(--spacing-12)) calc(var(--spacing-24) * -1) auto auto;
}
@media (min-width: 450px) {
min-width: min(calc(100vw - 48px), 350px);
}

2
packages/ui/src/lib/components/persona_edit_rep.svelte
View File

@ -23,7 +23,7 @@
<InfoScreen {title} {onBack} {onClose}>
<Container>
<h2>Reputation level</h2>
<Dropdown>
<Dropdown rep>
<Select slot="button" label="Reputation level" value={`Minimum ${minReputation} REP`} />
<DropdownItem

2
packages/ui/src/lib/components/select.svelte
View File

@ -33,6 +33,7 @@
font-size: var(--font-size-normal);
white-space: nowrap;
color: var(--color-body-text);
margin: var(--spacing-24) calc(var(--spacing-24) * -1) var(--spacing-12);
.label {
font-size: var(--font-size-sm);
@ -46,6 +47,7 @@
justify-content: space-between;
align-items: center;
width: 100%;
font-family: var(--font-serif);
}
& :global(svg) {