resources/lib/codex/mixins/button-layout-flush.less

   1 //
   2 // Align a quiet button's contents flush with its container.
   3 //
   4 // Example usage would be a quiet button aligned to the end of the UI that launches a menu, whose
   5 // content should line up with the edge of the UI. This requires setting a negative margin equal to
   6 // the button's horizontal padding.
   7 //
   8 // @param {string} direction - The direction that the element is aligned, 'top', 'start', or 'end'
   9 // @param {boolean} is-icon-only - Whether this is an icon-only button
  10 // @param {string} size-button - Button size, 'medium' or 'large'
  11 //
  12 .cdx-mixin-button-layout-flush( @param-direction, @param-is-icon-only: false, @param-size-button: 'medium' ) {
  13         .apply-margin( @param-padding ) {
  14                 & when ( @param-direction = 'top' ) {
  15                         margin-top: -@param-padding;
  16                 }
  17
  18                 & when ( @param-direction = 'start' ) {
  19                         margin-left: -@param-padding;
  20                 }
  21
  22                 & when ( @param-direction = 'end' ) {
  23                         margin-right: -@param-padding;
  24                 }
  25         }
  26
  27         & when ( @param-is-icon-only = false ) {
  28                 // Horizontal button padding is equal to the total horizontal spacing for the button
  29                 // minus the border width. For this margin, we want to include the border width.
  30                 .apply-margin( @spacing-horizontal-button + @border-width-base );
  31         }
  32
  33         & when ( @param-is-icon-only = true ) {
  34                 & when ( @param-size-button = 'medium' ) {
  35                         .apply-margin( @spacing-horizontal-button-icon-only + @border-width-base );
  36                 }
  37
  38                 & when ( @param-size-button = 'large' ) {
  39                         .apply-margin( @spacing-horizontal-button + @border-width-base);
  40                 }
  41         }
  42 }