Fix several CSS compatibility issues in Safari (#841)

* Fix button margin default for Safari compatibility

* Add Safari vendor prefixes that are somehow still necessary

* Add workaround for Safari not rendering text selection

* Replace <h3> and <p> placeholder labels in floating menus with <TextLabel>

* Replace <span> elements with <TextLabel> and set its cursor for Safari
This commit is contained in:
Keavon Chambers
2022-11-06 00:50:45 -07:00
parent 3f98d1c896
commit 4c16efb33d
25 changed files with 92 additions and 69 deletions
@@ -1,6 +1,7 @@
<template>
<button
:class="['icon-button', `size-${size}`, { disabled, active, 'sharp-right-corners': sharpRightCorners }]"
class="icon-button"
:class="[`size-${size}`, { disabled, active, 'sharp-right-corners': sharpRightCorners }]"
@click="(e: MouseEvent) => action(e)"
:disabled="disabled"
:title="tooltip"
@@ -16,6 +17,7 @@
justify-content: center;
align-items: center;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: none;
border-radius: 2px;
@@ -6,7 +6,7 @@
:data-disabled="disabled || undefined"
data-text-button
:title="tooltip"
:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
@click="(e: MouseEvent) => action(e)"
:tabindex="disabled ? -1 : 0"
>
@@ -22,6 +22,7 @@
align-items: center;
flex: 0 0 auto;
height: 24px;
margin: 0;
padding: 0 8px;
box-sizing: border-box;
border: none;