starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-26 11:21:16 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Tweak checkbox and autocomplete styles

Browse Source
This commit is contained in:
Gregory Schier
2024-03-19 17:08:06 -07:00
parent 57e1f641a7
commit 829d10d7b9
4 changed files with 20 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src-web/components/core/Checkbox.tsx
View File

@@ -35,7 +35,7 @@ export function Checkbox({
aria-hidden
className={classNames(
'opacity-50 appearance-none w-4 h-4 flex-shrink-0 border border-[currentColor]',
'rounded focus:border-focus focus:opacity-100 outline-none ring-0',
'rounded hocus:border-focus hocus:bg-focus/[5%] hocus:opacity-100 outline-none ring-0',
)}
type="checkbox"
disabled={disabled}
@@ -45,23 +45,6 @@ export function Checkbox({
<Icon size="sm" icon={indeterminate ? 'minus' : checked ? 'check' : 'empty'} />
</div>
</div>
{/*<button*/}
{/* role="checkbox"*/}
{/* aria-checked={checked ? 'true' : 'false'}*/}
{/* disabled={disabled}*/}
{/* onClick={handleClick}*/}
{/* title={title}*/}
{/* className={classNames(*/}
{/* className,*/}
{/* 'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',*/}
{/* 'focus:border-focus',*/}
{/* 'disabled:opacity-disabled',*/}
{/* checked && 'bg-gray-200/10',*/}
{/* // Remove focus style*/}
{/* 'outline-none',*/}
{/* )}*/}
{/*>*/}
{/*</button>*/}
{!hideLabel && title}
</HStack>
);

11
src-web/components/core/Editor/Editor.css
View File

@@ -185,18 +185,18 @@
}
.cm-tooltip.cm-tooltip-hover {
@apply shadow-lg bg-gray-200 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
@apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
@apply px-2 py-1;
a {
@apply text-yellow-500 font-bold;
@apply text-gray-800;
&:hover {
@apply underline;
}
&::after {
@apply text-yellow-600 bg-yellow-600 h-3 w-3 ml-1;
@apply text-gray-800 bg-gray-800 h-3 w-3 ml-1;
content: '';
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
@@ -206,8 +206,9 @@
}
/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip-autocomplete {
@apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip.cm-completionInfo {
@apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
.cm-completionIcon {
@apply italic font-mono;