button-layout-flush.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

button-layout-flush.less
View Options

	//
	// 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: -@param-padding;
	}

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

	& when ( @param-direction = 'end' ) {
	margin-right: -@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 = 'medium' ) {
	.apply-margin( @spacing-horizontal-button-icon-only + @border-width-base );
	}

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