mytril/dist/styles/expansion-panels.css

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

.myt-expansion-panels {
	--c: var(--myt-expansion-panel-c);
	--bg: var(--myt-expansion-panel-bg);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	width: 100%;
	position: relative;
	z-index: 1;
}

.myt-expansion-panels .myt-expansion-panel {
	border-radius: var(--myt-expansion-panel-br);
	color: var(--c);
	background-color: var(--bg);
	transition:
		color 0.5s,
		background-color 0.5s;
}

.myt-expansion-panels .myt-expansion-panel {
	border-radius: var(--myt-expansion-panel-br);
	color: var(--c);
	background-color: var(--bg);
	transition:
		color 0.5s,
		background-color 0.5s;
}

.myt-expansion-panels:not(.myt-expansion-panels--expansion):not(.myt-expansion-panels--spacer)
	.myt-expansion-panel:first-child:not(:last-child),
.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:first-child:not(:last-child):not(.myt-expansion-panel--active) {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.myt-expansion-panels:not(.myt-expansion-panels--expansion):not(.myt-expansion-panels--spacer)
	.myt-expansion-panel:not(:first-child):not(:last-child),
.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:not(:first-child):not(:last-child):not(.myt-expansion-panel--active) {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.myt-expansion-panels:not(.myt-expansion-panels--expansion):not(.myt-expansion-panels--spacer)
	.myt-expansion-panel:last-child:not(:first-child),
.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:last-child:not(:first-child):not(.myt-expansion-panel--active) {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:first-child.myt-expansion-panel--active {
	margin-bottom: 1rem;
}

.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:not(:first-child):not(:last-child).myt-expansion-panel--active {
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.myt-expansion-panels.myt-expansion-panels--expansion
	.myt-expansion-panel:last-child.myt-expansion-panel--active {
	margin-top: 1rem;
}

.myt-expansion-panels.myt-expansion-panels--spacer .myt-expansion-panel:not(:last-child) {
	margin-bottom: 1rem;
}

.myt-expansion-panels.myt-expansion-panels--hide-icon
	.myt-expansion-panel
	.myt-expansion-panel--title
	> .myt-expansion-panel--icon {
	display: none !important;
}

.myt-expansion-panels.myt-expansion-panels--readonly
	.myt-expansion-panel
	.myt-expansion-panel--title {
	cursor: default;
	pointer-events: none;
	user-select: none;
}

.myt-expansion-panel {
	flex: 1 0 100%;
	max-width: 100%;
	position: relative;
	transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
	transition-property: margin-top, border-radius, border, max-width;
	border-radius: var(--radius-md);
}

.myt-expansion-panel > button,
.myt-expansion-panel > [type='button'] {
	font: inherit;
	overflow: visible;
	background-color: transparent;
	border-style: none;
	cursor: pointer;
	color: inherit;
}

.myt-expansion-panel .myt-expansion-panel--title {
	align-items: center;
	text-align: start;
	border-radius: inherit;
	display: flex;
	font-size: 0.9375rem;
	min-height: 3rem;
	outline: none;
	padding: 1rem 1.5rem;
	position: relative;
	transition: 0.3s min-height margin-bottom margin-top border-radius cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	justify-content: space-between;
}

.myt-expansion-panel .myt-expansion-panel--text {
	display: flex;
}

.myt-expansion-panel .myt-expansion-panel--text .myt-expansion-panel--text-wrapper {
	padding: 0.5rem 1.5rem 1rem;
	flex: 1 1 auto;
	max-width: 100%;
}

.myt-expansion-panel .myt-expansion-panel--icon {
	display: inline-flex;
	margin-bottom: -0.25rem;
	margin-top: -0.25rem;
	-webkit-user-select: none;
	user-select: none;
	margin-inline-start: auto;
}

.myt-expansion-panel .myt-expansion-panel--title.myt-expansion-panel--disabled,
.myt-expansion-panel .myt-expansion-panel--title[disabled],
.myt-expansion-panel .myt-expansion-panel--title:disabled {
	pointer-events: none;
	user-select: none;
}

.myt-expansion-panel .myt-expansion-panel--title.myt-expansion-panel--disabled > *,
.myt-expansion-panel .myt-expansion-panel--title[disabled] > *,
.myt-expansion-panel .myt-expansion-panel--title:disabled > * {
	opacity: 0.6;
}