✏️ Editing: flexy.scss Writable

/**
 * container possible states with data-flexy attribute:
 * no: future slider, to be initialized
 * no:scalerotate: future slider with scaleRotate effect
 * empty string: flexy is initialized properly
 *
 * One can customize content of the :after attribute in order to enable/disable
 * the slider effect of flexy. The JS will detect this moment and remove/restore
 * the data-flexy attribute.
 */

.flexy-container:not([data-flexy]) {

.flexy-items {
		flex-wrap: wrap;
	}
}

.flexy,
.flexy-pills {
	position: relative;
	user-select: none;
}

[data-flexy*='no'] {

.flexy-items > * {
		transform: translate3d(calc(-100% * var(--current-item, 0)), 0, 0);
	}
}

[data-flexy*='no'][data-wrap*='viewport'] {

.flexy-items > * {
		order: 2;
		transform: translate3d(-100%, 0, 0);
	}

.flexy-items > *:last-child {
		order: 1;
	}
}

.flexy-items {
	display: flex;
	gap: 0;
	will-change: transform, max-height;
	margin-inline: calc(var(--flexy-items-gap, 0px) / -2);

> * {
		cursor: grab;
		flex: 0 0 var(--flexy-item-width, 100%);
		max-width: var(--flexy-item-width, 100%);
		padding-inline: calc(var(--flexy-items-gap, 0px) / 2);
	}
}

// Dont allow items to be higher than the container while moving
[data-flexy-moving] {
	.flexy-items {
		align-items: start;

.flexy-item {
			transition: min-height 0.2s ease;
			min-height: var(--flexy-view-height);
		}
	}
}

.flexy-view {
	height: var(--flexy-view-height, initial);
	transition: height 0.2s ease;
}

[data-flexy=""]:not([data-flexy-moving]) {
	.flexy-items > *:not(.flexy-item-is-visible) {
		height: 1px;
	}
}

// Disable click event while dragging
[data-flexy-dragging] {
	cursor: ew-resize;

.flexy-items > * {
		pointer-events: none;
	}
}

// Flexy view
[data-flexy-view='boxed'] {
	overflow: hidden;
}

// flexy pills
.flexy-pills ol,
.flex-control-nav:has(img) {
	display: flex;
	flex-direction: var(--pills-direction);
	justify-content: var(--pills-horizontal-alignment);
	flex-wrap: var(--pills-wrap, wrap);
	list-style: none;
	padding: 0;
	margin-bottom: 0;

li {
		flex-shrink: 0;
		width: var(--thumbs-width, 20%);
		cursor: pointer;
	}
}

// flexy pills slider
.flexy-pills [data-flexy] {
	overflow: hidden;
	--pills-wrap: nowrap;
}

// data type circle
.flexy-pills[data-type='circle'] {
	max-width: var(--pills-container-width, 180px);
	margin-top: 30px;
	margin-inline: auto;

ol:not([data-flexy]),
	ol[data-flexy*="paused"] {
		--pills-horizontal-alignment: center;
	}

li {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		padding: 0;

&:before {
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 100%;
			box-shadow: inset 0 0 0 5px var(--flexy-initial-pill-color, rgba(44, 62, 80, 0.9));
			transition: box-shadow 0.2s ease, transform 0.2s ease;
		}

&.active {
			&:before {
				transform: scale3d(2, 2, 1);
				box-shadow: inset 0 0 0 1px var(--flexy-active-pill-color, rgba(44, 62, 80, 0.9));
			}
		}
	}
}

// arrows
.flexy-container {

&:not([data-flexy]),
	&[data-flexy*="no"] {

.flexy > [class*='flexy-arrow'] {
			@media (any-hover: hover) {
				visibility: hidden;
			}
		}
	}
}

[class*='flexy-arrow'] {
	position: absolute;
	top: var(--flexy-nav-arrow-top-offset, calc(50% - 20px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 100%;
	color: var(--flexy-nav-arrow-color, var(--theme-text-color));
	box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.03);
	background: var(--flexy-nav-background-color, #fff);
	transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

svg {
		pointer-events: none;
	}

@media (any-hover: hover) {
		opacity: 0;
		transform: rotate(var(--rotate, 0)) translateX(var(--translate-x, 0));
		
		&:hover {
			color: var(--flexy-nav-arrow-hover-color, #fff);
			background: var(--flexy-nav-background-hover-color, var(--theme-palette-color-1));
		}
	}
}

.flexy-arrow-prev {
	left: 20px;
	--translate-x: -10px;
}

.flexy-arrow-next {
	right: 20px;
	--translate-x: 10px;
}

[class*='flexy']:hover > [class*='flexy-arrow'] {
	opacity: 1;
	--translate-x: 0;
}

.flexy-pills {
	--flexy-nav-arrow-top-offset: calc(50% - 20px + var(--thumbs-spacing, 15px) / 2);

ol:is(:not([data-flexy]), [data-flexy*='paused']) {

~ [class*='arrow'] {
			visibility: hidden;
		}
	}
}

// slider layout
.is-layout-slider {

.flexy-items {
		--flexy-items-gap: var(--grid-columns-gap, 30px);
		--flexy-item-width: var(--grid-columns-width);
	}

.flexy-item {
		display: flex;

// don not remove this width
		// https://creativethemes.slack.com/archives/GTG15AXAQ/p1732721539849779
		> * {
			width: 100%;
		}
	}
}

🔐 Sid Gifari File Manager Pro