@alegendstale/holly-components

Version:
Reusable UI components created using lit
87 lines (69 loc) • 1.49 kB
JavaScript
import { css as e } from "lit";
const o = e`
	:host {
		--palette-item-background-color: #000000;
		--palette-item-color: #ffffff;
		--palette-item-font-size: 16px;

		display: flex;
		flex: 1;
		transition: all 0.1s ease-in-out;
		background-color: var(--palette-item-background-color);
		color: var(--palette-item-color);
	}

	/* Animation Size */

	:host(:not([preventHover]):hover) {
		flex-basis: var(--palette-column-flex-basis);
	}

	:host([direction='column']:not([preventHover]):hover) {
		flex-basis: 80px;
	}

	/* Hover States */

	:host(:not([preventHover])) #container > span {
		display: none;
	}

	:host(:not([preventHover]):hover) #container > span {
		display: block;
	}

	:host([hideText]) #container > span {
		display: none;
	}

	:host([hideText]:hover) #container > span {
		display: none;
	}

	/* Container Directions */

	:host([direction='column']) > #container {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	:host([direction='row']) > #container {
		display: flex;
		justify-content: center;
	}

	:host([direction='row'][editMode]) > #container {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#container {
		flex: 1;
		gap: 3%;

		*:first-child {
			justify-self: flex-end;
			align-self: center;
		}

		*:last-child {
			justify-self: flex-start;
			align-self: center;
		}

		span {
			display: block;
			text-align: center;
			font-size: 100%;
			font-weight: bold;
			user-select: none;
		}
	}
`;
export {
  o as default
};