EditBox stroke width in px (#42)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-08-20 13:36:34 +03:00 committed by GitHub
parent 28d65ec277
commit ee3534a4bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 19 deletions

View File

@ -52,15 +52,11 @@
}
}
function convertRemToPx(rem: number) {
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
}
function computeSize (t: EventTarget | null) {
const target = t as HTMLInputElement
const value = target.value.charCodeAt(target.value.length - 1) === 10 ? convertRemToPx(1.125) : 0
const value = target.value.charCodeAt(target.value.length - 1) === 10 ? 1.125 : 0
text.innerHTML = label.replaceAll(' ', '&nbsp;')
target.style.height = text.clientHeight + value + convertRemToPx(.5) + 'px'
target.style.height = `calc(${text.clientHeight}px + ${value + .5}rem)`
}
onMount(() => {

View File

@ -32,7 +32,7 @@
const target = t as HTMLInputElement
const value = target.value
text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
target.style.width = text.clientWidth + (parseFloat(getComputedStyle(document.documentElement).fontSize) * .5) + 'px'
target.style.width = text.clientWidth + 8 + 'px'
}
onMount(() => {
@ -69,9 +69,9 @@
input {
height: 1.25rem;
margin: -.25rem;
padding: .125rem;
border: .125rem solid transparent;
margin: -4px;
padding: 2px;
border: 2px solid transparent;
border-radius: .125rem;
&:focus {

View File

@ -29,10 +29,6 @@
close()
}
}
function convertRemToPx(rem: number) {
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
}
$: {
if (modalHTML) {
@ -41,13 +37,13 @@
let style: string = 'popup-'
if (rect.top > document.body.clientHeight - rect.bottom) {
// style += 'top-'
modalHTML.style.bottom = document.body.clientHeight - rect.top + convertRemToPx(.75) + 'px'
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
// arrowHTML.style.top = rect.top - convertRemToPx(.75) + 'px'
// arrowHTML.style.left = rect.left + rect.width / 2 + 'px'
// arrowHTML.classList.add('popup-top')
} else {
// style += 'bottom-'
modalHTML.style.top = rect.bottom + convertRemToPx(.75) + 'px'
modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
// arrowHTML.style.top = '0px'
}
if (rect.left > document.body.clientWidth - rect.right) {

View File

@ -48,14 +48,14 @@
textarea {
width: auto;
min-height: 4.5rem;
margin: -.25rem;
padding: .125rem;
margin: -4px;
padding: 2px;
font-family: inherit;
font-size: inherit;
line-height: 150%;
color: var(--theme-caption-color);
background-color: transparent;
border: .125rem solid transparent;
border: 2px solid transparent;
border-radius: .125rem;
outline: none;
overflow-y: scroll;