shelving/ui/style/Flex.module.css

Toolkit for using data in JavaScript.

@import "base.css";

@layer defaults {
	.flex {
		/* Contents */
		flex-direction: row;
		gap: var(--flex-gap, var(--space-small));
		justify-content: stretch;
		align-items: center;

		/* Children grow by default */
		> * {
			flex: var(--grow-normal) 1 auto;
		}

		/* Add default icon sizing. */
		> [data-slot="icon"] {
			inline-size: var(--flex-icon-size, var(--size-icon));
			block-size: var(--flex-icon-size, var(--size-icon));
			flex: none;
		}
	}
}

@layer variants {
	.flex {
		/* Box */
		display: flex;

		/* Variants */
		&.wrap {
			flex-wrap: wrap;
		}
		&.left {
			justify-content: start;
		}
		&.center {
			justify-content: center;
		}
		&.right {
			justify-content: end;
		}
		&.stretch {
			justify-content: stretch;
		}
		&.reverse {
			flex-direction: row-reverse;
		}
		&.column {
			flex-direction: column;
			justify-content: center;
			align-items: stretch;

			&.left {
				align-items: start;
			}
			&.center {
				align-items: center;
			}
			&.right {
				align-items: end;
			}
			&.stretch {
				align-items: stretch;
			}
			&.reverse {
				flex-direction: column-reverse;
			}
		}

		/* Children */
		> * {
			margin: 0;
		}
	}
}