diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 907c16d235..bd6c70d1be 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -4381,7 +4381,7 @@ input[type="range"] { vertical-align: inherit; font-size: 24px; line-height: 40px; } - .button.block, .button.button-full { + .button.button-block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } .button.button-light { @@ -4656,9 +4656,19 @@ input[type="range"] { box-shadow: none; text-shadow: 0px 0px 10px #fff; } -.padding > .button.block:first-child { +.padding > .button.button-block:first-child { margin-top: 0; } +.button-block { + display: block; + clear: both; } + .button-block:after { + display: block; + visibility: hidden; + clear: both; + height: 0; + content: "."; } + .button-full, .button-full > .button { display: block; @@ -4668,7 +4678,7 @@ input[type="range"] { border-left-width: 0; border-radius: 0; } -button.block, +button.button-block, button.button-full, .button-full > button.button { width: 100%; } diff --git a/scss/_button.scss b/scss/_button.scss index fd68861a8e..a5c769e5e9 100644 --- a/scss/_button.scss +++ b/scss/_button.scss @@ -38,7 +38,7 @@ line-height: $button-height - $button-border-width - 1; } - &.block, &.button-full { + &.button-block, &.button-full { margin-top: $button-block-margin; margin-bottom: $button-block-margin; } @@ -166,10 +166,22 @@ } } -.padding > .button.block:first-child { +.padding > .button.button-block:first-child { margin-top: 0; } +.button-block { + display: block; + clear: both; + &:after { + display: block; + visibility: hidden; + clear: both; + height: 0; + content: "."; + } +} + .button-full, .button-full > .button { display: block; @@ -180,7 +192,7 @@ border-radius: 0; } -button.block, +button.button-block, button.button-full, .button-full > button.button { width: 100%; diff --git a/test/buttons.html b/test/buttons.html index ff845ae0e3..e135c7caa8 100644 --- a/test/buttons.html +++ b/test/buttons.html @@ -156,34 +156,34 @@
- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark
- - - - - - - - - - + + + + + + + + + +
- +
- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark
- - - - - - - - - - + + + + + + + + + +
- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark
- + - - - - - - - - + + + + + + + +
- Default - .button-light - .button-stable - .button-positive - .button-calm - .button-balanced - .button-assertive - .button-energized - .button-royal - .button-dark + Default + .button-light + .button-stable + .button-positive + .button-calm + .button-balanced + .button-assertive + .button-energized + .button-royal + .button-dark