Skip to content

Commit

Permalink
fix(button): alignment between anchor buttons and normal buttons
Browse files Browse the repository at this point in the history
* Currently a normal button is not properly aligning with an anchor button (only when using a flexbox layout parent)
  The buttons should align properly without using flexbox, since those are actually inline-blocks.
  See: http://codepen.io/DevVersion/pen/GqBrYb

* This accounts also for icon buttons. Having a normal icon button and an anchor button makes the icon alignment incorrect and inconsistent.
  See: http://codepen.io/DevVersion/pen/dXjVgQ?editors=1010

Fixes angular#2440.
  • Loading branch information
devversion committed Jul 30, 2016
1 parent 1eb1037 commit e51f02e
Showing 1 changed file with 21 additions and 14 deletions.
35 changes: 21 additions & 14 deletions src/components/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,36 @@ button.md-button::-moz-focus-inner {
}

.md-button {
display: inline-block;
position: relative; // Required for absolute canvas child elements.
cursor: pointer;

/** Alignment adjustments */
min-height: $button-line-height;
min-width: $button-min-width;
line-height: $button-line-height;

vertical-align: middle;
align-items: center;
text-align: center;

border-radius: $button-border-radius;
box-sizing: border-box;
color: currentColor;

/* Reset default button appearance */
user-select: none;
position: relative; //for child absolute-positioned <canvas>

outline: none;
border: 0;
display: inline-block;
align-items: center;

/** Custom styling for button */
padding: $button-padding;
margin: $button-margin;
line-height: $button-line-height;
min-height: $button-line-height;

background: transparent;
color: currentColor;
white-space: nowrap;
// override for FAB, icon buttons, etc.
min-width: $button-min-width;

text-align: center;

// Always uppercase buttons
/* Uppercase text content */
text-transform: uppercase;
font-weight: 500;
font-size: $body-font-size-base;
Expand All @@ -57,8 +64,8 @@ button.md-button::-moz-focus-inner {
font-family: inherit;
text-decoration: none;

cursor: pointer;
overflow: hidden; // for ink containment
// Ink Ripple should not create any overflow.
overflow: hidden;

transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function;
Expand Down

0 comments on commit e51f02e

Please sign in to comment.