1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
//
// 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);
}
}
}
|
