@wikimedia/codex/mixins/button-layout-flush.less

Codex Design System for Wikimedia

//
// Align a quiet button's contents flush with its container.
//
// Example usage would be a quiet button aligned to the end of the UI that launches a menu, whose
// content should line up with the edge of the UI. This requires setting a negative margin equal to
// the button's horizontal padding.
//
// @param {string} direction - The direction that the element is aligned, 'top', 'start', or 'end'
// @param {boolean} is-icon-only - Whether this is an icon-only button
// @param {string} size-button - Button size, 'medium' or 'large'
//
.cdx-mixin-button-layout-flush( @param-direction, @param-is-icon-only: false, @param-size-button: 'medium' ) {
	.apply-margin( @param-padding ) {
		& when ( @param-direction = 'top' ) {
			margin-top: calc( -1 * @param-padding );
		}

		& when ( @param-direction = 'start' ) {
			margin-left: calc( -1 * @param-padding );
		}

		& when ( @param-direction = 'end' ) {
			margin-right: calc( -1 * @param-padding );
		}
	}

	& when ( @param-is-icon-only = false ) {
		// Horizontal button padding is equal to the total horizontal spacing for the button
		// minus the border width. For this margin, we want to include the border width.
		.apply-margin( @spacing-horizontal-button + @border-width-base );
	}

	& when ( @param-is-icon-only = true ) {
		& when ( @param-size-button = 'small' ) {
			.apply-margin( @spacing-12 + @border-width-base);
		}

		& when ( @param-size-button = 'medium' ) {
			.apply-margin( @spacing-horizontal-button-icon-only + @border-width-base );
		}

		& when ( @param-size-button = 'large' ) {
			.apply-margin( @spacing-horizontal-button + @border-width-base);
		}
	}
}