fix(button): bar-button uses inner span as flexbox

- Fixed block/full buttons, now there are display: block
- Fixes <ion-segment-button> warnings
This commit is contained in:
Manu Mtz.-Almeida
2016-02-09 01:53:34 +01:00
parent b0a8045af0
commit 38a3be438f
11 changed files with 81 additions and 75 deletions

View File

@@ -97,7 +97,6 @@ $button-ios-small-icon-font-size: 1.3em !default;
margin-right: 0;
}
// iOS Full Button
// --------------------------------------------------
@@ -105,11 +104,10 @@ $button-ios-small-icon-font-size: 1.3em !default;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-left: none;
border-right: none;
border-right-width: 0;
border-left-width: 0;
}
// iOS Outline Button
// --------------------------------------------------

View File

@@ -110,28 +110,25 @@ $button-md-small-icon-font-size: 1.4em !default;
font-size: $button-md-small-icon-font-size;
}
// Material Design Block Button
// --------------------------------------------------
.button-block {
margin-left: 0;
margin-right: 0;
}
// Material Design Full Button
// --------------------------------------------------
.button-full {
border-radius: 0;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
// Material Design Block Button
// --------------------------------------------------
.button-block {
margin-right: 0;
margin-left: 0;
}
// Material Design Outline Button
// --------------------------------------------------

View File

@@ -29,17 +29,18 @@ $button-round-border-radius: 64px !default;
@include appearance(none);
}
span.button-inner {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
.button-inner {
width: 100%;
height: 100%;
display: flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
a.button {
a.button, a[button] {
text-decoration: none;
}
@@ -54,7 +55,7 @@ a.button {
// --------------------------------------------------
.button-block {
display: flex;
display: block;
clear: both;
width: 100%;
@@ -68,6 +69,7 @@ a.button {
// --------------------------------------------------
.button-full {
display: block;
width: 100%;
}