43 lines
1.5 KiB
Plaintext
43 lines
1.5 KiB
Plaintext
//
|
|
// 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);
|
|
}
|
|
}
|
|
}
|