From 4c97d6a2653c30960b9aa92fa84a78a6e434ce9d Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 17 Oct 2016 21:03:17 -0200 Subject: [PATCH] Fix not well aligned icons inside fab --- src/components/mdButton/mdButton.scss | 28 +++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss index 59735be..df8745e 100644 --- a/src/components/mdButton/mdButton.scss +++ b/src/components/mdButton/mdButton.scss @@ -18,7 +18,6 @@ $button-icon-size: 40px; padding: 0 16px; display: inline-block; position: relative; - align-items: center; overflow: hidden; user-select: none; cursor: pointer; @@ -65,6 +64,23 @@ $button-icon-size: 40px; box-shadow: $material-shadow-2dp; } + &.md-dense { + min-height: $button-dense-height; + line-height: $button-dense-height; + font-size: 13px; + } + + &.md-icon-button, + &.md-fab { + .md-icon { + margin-top: 1px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + &.md-icon-button { width: $button-icon-size; min-width: $button-icon-size; @@ -85,7 +101,7 @@ $button-icon-size: 40px; min-width: $button-dense-height; height: $button-dense-height; min-height: $button-dense-height; - padding: 0; + padding: 4px; line-height: $button-dense-height; } @@ -123,22 +139,14 @@ $button-icon-size: 40px; } } - &.md-dense { - min-height: $button-dense-height; - line-height: $button-dense-height; - font-size: 13px; - } - &.md-fab { width: $button-fab-size; height: $button-fab-size; min-width: 0; - padding: 0; overflow: hidden; box-shadow: $material-shadow-2dp; border-radius: $button-fab-size; line-height: $button-fab-size; - vertical-align: middle; background-clip: padding-box; transition: $swift-ease-in; transition-property: background-color,