fix(v-btn): fixed fab styles in ie11 (#3127)

* fix(v-btn): fixed fab styles in ie11

fixed a bug where the fab styles were not proper on i11. also fixed a bug where btns would shift
when clicked in ie11

fixes #3068

* remove redundant height declaration and fixed ie11 bug

* fixed size variants in ie11

* adjusted logic to only set width when necessary

* fixed bug with content highlight v-toolbar-items

* final tweak for ie11

src/stylus/components/_buttons.styl

@@ -54,6 +54,22 @@ theme(button, "btn")
  transition: $primary-transition
  width: 100%
 
+/** Sizes */
+.btn
+ &--small
+ font-size: $button-small-font-size
+ height: $button-small-height
+
+ .btn__content
+ padding: $button-small-padding
+
+ &--large
+ font-size: $button-large-font-size
+ height: $button-large-height
+
+ .btn__content
+ padding: $button-large-padding
+
 /** Content */
 .btn
  &--active,
@@ -67,13 +83,14 @@ theme(button, "btn")
  border-radius: inherit
  color: inherit
  display: flex
- height: 100%
+ height: inherit
  flex: 1 0 auto
  justify-content: center
  margin: 0 auto
  padding: $button-padding
  transition: $primary-transition
  white-space: nowrap
+ width: inherit
 
 /** Icons */
 .btn .btn__content .icon
@@ -92,29 +109,32 @@ theme(button, "btn")
  &:active
  elevation(8)
 
+ // Fixes bug where IE11 moves
+ // button content when clicked
+ // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
+ &:active,
+ &:focus
+ .btn__content
+ position: relative
+ top: 0
+ left: 0
+
  &--icon
  background: transparent
  box-shadow: none !important
  border-radius: 50%
  justify-content: center
- height: $button-height
- width: $button-height
  min-width: 0
-
- .btn__content:before
- border-radius: 50%
+ width: $button-height
 
  &.btn--small
  width: $button-small-height
 
- .btn__content
- height: $button-small-height
-
  &.btn--large
  width: $button-large-height
 
-  .btn__content
-  height: $button-large-height
+ .btn__content:before
+ border-radius: 50%
 
  &--floating
  border-radius: 50%
@@ -164,17 +184,15 @@ theme(button, "btn")
  transform: none
 
  .icon
- height: $button-floating-icon-width
- width: $button-floating-icon-width
+ height: inherit
+ width: inherit
 
  &.btn--small
  height: $button-floating-small-width
  width: $button-floating-small-width
 
  .icon
  font-size: $button-floating-small-icon-width
- height: $button-floating-small-icon-width
- width: $button-floating-small-icon-width
 
  &.btn--floating .icon
  left: 'calc(50% - %s)' % ($button-floating-small-icon-width / 2)
@@ -187,8 +205,6 @@ theme(button, "btn")
 
  .icon
  font-size: $button-floating-large-icon-width
- height: $button-floating-large-icon-width
- width: $button-floating-large-icon-width
 
  &.btn--floating .icon
  left: 'calc(50% - %s)' % ($button-floating-large-icon-width / 2)
@@ -253,22 +269,6 @@ theme(button, "btn")
  box-shadow: none !important
  pointer-events: none
 
-/** Sizes */
-.btn
- &--small
- font-size: $button-small-font-size
- height: $button-small-height
-
- .btn__content
- padding: $button-small-padding
-
- &--large
- font-size: $button-large-font-size
- height: $button-large-height
-
- .btn__content
- padding: $button-large-padding
-
 .btn--icon
  .btn__content
  padding: 0

src/stylus/components/_toolbar.styl

@@ -20,7 +20,7 @@ theme(toolbar, "toolbar")
  .input-group--solo
  .input-group__details
  display: none
- 
+
  .input-group--single-line:not(.input-group--solo)
  padding: 0
 
@@ -64,13 +64,17 @@ theme(toolbar, "toolbar")
 
  &__items
  display: flex
- height: 100%
+ height: inherit
  max-width: 100%
  padding: 0
-
- .menu,
+
  .btn
- height: 100%
+ align-items: stretch
+
+ .btn,
+ .menu,
+ .menu__activator
+ height: inherit
  margin: 0
 
  @media $display-breakpoints.xs-only
@@ -113,7 +117,7 @@ theme(toolbar, "toolbar")
  display: inline-flex
  margin: 16px
  width: auto
- 
+
  &--clipped
  z-index: 3