mytril/dist/styles/list.css

Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit

.myt-list {
	--indent-padding: var(--myt-list-indent-padding);
	--c: var(--myt-list-c);
	--bg: var(--myt-list-bg);

	overflow: auto;
	padding: 0.5rem 0;
	position: relative;
	outline: none;
	background-color: transparent;
}

.myt-list.myt-list--disabled {
	pointer-events: none;
	user-select: none;
}

.myt-list.myt-list--nav {
	--indent-padding: -0.5rem;
	padding-inline: 0.5rem;
}

.myt-list:not(.myt-list--dense) .myt-list-subheader {
	min-height: 2.5rem;
	padding-inline-start: calc(1rem + var(--indent-padding));
}

.myt-list.myt-list--dense .myt-list-subheader {
	min-height: 2.25rem;
	padding-inline-start: calc(1rem + var(--indent-padding));
}

.myt-list:not(.myt-list--tow-line):not(.myt-list--three-line) .myt-list-item-subtitle {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.myt-list.myt-list--tow-line .myt-list-item-subtitle {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.myt-list.myt-list--three-line .myt-list-item-subtitle {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.myt-list.myt-list--nav .myt-list-item {
	border-radius: var(--radius-md);
}

.myt-list-group {
	--list-indent-size: 1rem;
	--parent-padding: var(--indent-padding);
	--prepend-width: 2.5rem;
}

.myt-list-group .myt-list-group--fluid {
	--list-indent-size: 0px;
}

.myt-list-group .myt-list-group--prepend {
	--parent-padding: calc(var(--indent-padding) + var(--prepend-width));
}

.myt-list-group .myt-list-group--fluid .myt-list-group--prepend {
	--parent-padding: var(--indent-padding);
}

.myt-list-group .myt-list-group--items {
	--indent-padding: calc(var(--parent-padding) + var(--list-indent-size));
}

.myt-list-group .myt-list-group--items .myt-list-item {
	padding-inline-start: calc(1rem + var(--indent-padding)) !important;
}

.myt-list-item-subtitle {
	font-size: 0.875rem;
}

.myt-list-item-subtitle {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	opacity: 0.7;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	word-break: initial;
}

.myt-list-item-title {
	hyphens: auto;
	overflow-wrap: normal;
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: normal;
	word-wrap: break-word;
}

.myt-list-item-title {
	font-size: 1rem;
}

.myt-list-item {
	min-height: 3rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.myt-list-item {
	align-items: center;
	display: grid;
	flex: none;
	grid-template-areas: 'prepend content append activator';
	grid-template-columns: max-content 1fr auto auto;
	outline: none;
	max-width: 100%;
	padding: 0.25rem 1rem;
	position: relative;
	text-decoration: none;
	transition: background-color 0.5s;
}

a.myt-list-item {
	color: inherit;
	text-decoration: none;
}

.myt-list-item.myt-list-item--link {
	cursor: pointer;
}

.myt-list-item.myt-list-item--link:hover {
	background-color: color-mix(in oklab, var(--bg) 90%, black);
}

/* .myt-list-item.myt-list-item--link:focus {
	background-color: color-mix(in oklab, var(--c-background-color) 95%, black);
} */

.myt-list-item.myt-list-item--link:active,
.myt-list-item.myt-list-item--link.myt-list-item--active,
.myt-list-item.myt-list-group--activator.myt-list-group--active {
	background-color: color-mix(in oklab, var(--bg) 95%, black);
}

.myt-list-item .myt-list-item--content {
	align-self: center;
	grid-area: content;
	overflow: hidden;
}

.myt-list-item .myt-list-item--prepend {
	align-items: center;
	align-self: center;
	display: flex;
	grid-area: prepend;
}

.myt-list-item .myt-list-item--append {
	align-self: center;
	display: flex;
	align-items: center;
	grid-area: append;
}

.myt-list-item .myt-list-item--activator {
	align-self: center;
	display: flex;
	align-items: center;
	grid-area: activator;
}

.myt-list-item .myt-list-item--prepend > .myt-icon {
	margin-right: 1.125rem;
}

.myt-list-item .myt-list-item--append > .myt-icon {
	margin-left: 1.125rem;
}

.myt-list-subheader {
	align-items: center;
	background: inherit;
	color: color-mix(in oklab, var(--c) 60%, black);
	display: flex;
	font-size: 0.875rem;
	padding-inline-end: 1rem;
	min-height: 2.5rem;
	transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
	transition: color 0.5s;
}

.myt-list-subheader .myt-list-subheader--text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.myt-list-subheader.myt-list-subheader--inset {
	--indent-padding: 3.5rem;
}

.myt-list-subheader.myt-list-subheader--sticky {
	background: inherit;
	left: 0;
	position: sticky;
	top: 0;
	z-index: 1;
}