@alegendstale/holly-components/dist/components/color-palette/color-palette.styles.js

Reusable UI components created using lit

import { css as t } from "lit";
const o = t`
	:host {
		display: block;
		width: fit-content;
	}

	:host([direction='row']) #palette {
		flex-direction: column;
	}

	/* Edit Mode */
	:host([editMode]) #palette {
		overflow-x: auto;
	}

	// Invalid Palette
	:host(:not([status='Valid'])) #palette {
	}

	/* Palette Container */

	#container {
		cursor: pointer;
		position: relative;
		background-color: #000;
		contain: paint;
	}

	#container.palette-scroll {
		overflow-x: auto;
	}

	/* Palette */

	#palette {
		/* fallback vars */
		--palette-height: 150px;
		--palette-width: 700px;
		--palette-background-color: transparent;
		--palette-color: #000;
		--palette-column-flex-basis: 80px;
		--palette-corners: 5px;

		display: flex;
		flex-direction: row;
		border-radius: var(--palette-corners);
		overflow: hidden;
		cursor: pointer;
		height: var(--palette-height);
		width: var(--palette-width);
		position: relative;
		scrollbar-width: thin;

		/* Drag & Drop */

		& > .is-dragging {
			opacity: 0;
		}

		& > #invalid {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			height: var(--palette-height);
			width: var(--palette-width);
			background-color: #000000c0;
			border-radius: var(--palette-corners);

			& > span {
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				background-color: #000;
				width: 100%;
				height: 30%;
				text-align: center;
				user-select: none;
			}
		}
	}

	@keyframes pulse {
		50% {
			background-color: #ffff0080;
		}
	}
`;
export {
  o as default
};