@alegendstale/holly-components

Version:

Reusable UI components created using lit

55 lines (47 loc) • 1.01 kB

JavaScript

import { css as o } from "lit";
const e = o`
	:host([stabilizeWhileEditing]:hover) {
		flex-basis: 0 !important;
	}

	:host(:not([stabilizeWhileEditing])) #container {
		display: none;
	}

	:host(:not([stabilizeWhileEditing]):hover) #container {
		display: flex;
	}

	#container {
		input {
			color: var(--palette-item-color);
			font-size: var(--palette-item-font-size);
			font-weight: bold;
			user-select: none;
			border: none;
			background-color: transparent;
			field-sizing: content;
			min-width: 2rem;
			max-width: 5rem;
			cursor: pointer;
			text-align: center;
		}

		/* Color Trash Button */
		#trash {
			background-color: var(--palette-item-background-color);
			color: var(--palette-item-color);
			box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset;
			cursor: pointer;

			border: none;
			border-radius: 5px;
			padding: 4px 12px;

			&:hover {
				background-color: rgb(75, 75, 75);
			}

			svg {
				width: 18px;
				height: 18px;
			}
		}
	}
`;
export {
  e as default
};