javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #141 - button-block

Browse Source
This commit is contained in:
Max Lynch
2013-11-15 21:23:25 -06:00
parent 7b317fb7ff
commit d349c100fb
3 changed files with 110 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/css/ionic.css vendored
View File

@ -4381,7 +4381,7 @@ input[type="range"] {
vertical-align: inherit; vertical-align: inherit;
font-size: 24px; font-size: 24px;
line-height: 40px; } line-height: 40px; }
.button.block, .button.button-full { .button.button-block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
.button.button-light { .button.button-light {
@ -4656,9 +4656,19 @@ input[type="range"] {
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px #fff; } text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child { .padding > .button.button-block:first-child {
margin-top: 0; } 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-full > .button { .button-full > .button {
display: block; display: block;
@ -4668,7 +4678,7 @@ input[type="range"] {
border-left-width: 0; border-left-width: 0;
border-radius: 0; } border-radius: 0; }
button.block, button.button-block,
button.button-full, button.button-full,
.button-full > button.button { .button-full > button.button {
width: 100%; } width: 100%; }

18
scss/_button.scss
View File

@ -38,7 +38,7 @@
line-height: $button-height - $button-border-width - 1; line-height: $button-height - $button-border-width - 1;
} }
&.block, &.button-full { &.button-block, &.button-full {
margin-top: $button-block-margin; margin-top: $button-block-margin;
margin-bottom: $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; margin-top: 0;
} }
.button-block {
display: block;
clear: both;
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}
}
.button-full, .button-full,
.button-full > .button { .button-full > .button {
display: block; display: block;
@ -180,7 +192,7 @@
border-radius: 0; border-radius: 0;
} }
button.block, button.button-block,
button.button-full, button.button-full,
.button-full > button.button { .button-full > button.button {
width: 100%; width: 100%;

164
test/buttons.html
View File

@ -156,34 +156,34 @@
<hr> <hr>
<h3>a.block (parent w/ padding)</h3> <h3>a.button-block (parent w/ padding)</h3>
<p> <p>
<a class="button block"><i class="icon ion-home"></i> Default</a> <a class="button button-block"><i class="icon ion-home"></i> Default</a>
<a class="button block button-light">.button-light</a> <a class="button button-block button-light">.button-light</a>
<a class="button block button-stable">.button-stable</a> <a class="button button-block button-stable">.button-stable</a>
<a class="button block button-positive">.button-positive</a> <a class="button button-block button-positive">.button-positive</a>
<a class="button block button-calm">.button-calm</a> <a class="button button-block button-calm">.button-calm</a>
<a class="button block button-balanced">.button-balanced</a> <a class="button button-block button-balanced">.button-balanced</a>
<a class="button block button-assertive">.button-assertive</a> <a class="button button-block button-assertive">.button-assertive</a>
<a class="button block button-energized">.button-energized</a> <a class="button button-block button-energized">.button-energized</a>
<a class="button block button-royal">.button-royal</a> <a class="button button-block button-royal">.button-royal</a>
<a class="button block button-dark">.button-dark</a> <a class="button button-block button-dark">.button-dark</a>
</p> </p>
<hr> <hr>
<h3>button.block (parent w/ padding)</h3> <h3>button.button-block (parent w/ padding)</h3>
<p> <p>
<button class="button block"><i class="icon ion-home"></i> Default</button> <button class="button button-block"><i class="icon ion-home"></i> Default</button>
<button class="button block button-light">.button-light</button> <button class="button button-block button-light">.button-light</button>
<button class="button block button-stable">.button-stable</button> <button class="button button-block button-stable">.button-stable</button>
<button class="button block button-positive">.button-positive</button> <button class="button button-block button-positive">.button-positive</button>
<button class="button block button-calm">.button-calm</button> <button class="button button-block button-calm">.button-calm</button>
<button class="button block button-balanced">.button-balanced</button> <button class="button button-block button-balanced">.button-balanced</button>
<button class="button block button-assertive">.button-assertive</button> <button class="button button-block button-assertive">.button-assertive</button>
<button class="button block button-energized">.button-energized</button> <button class="button button-block button-energized">.button-energized</button>
<button class="button block button-royal">.button-royal</button> <button class="button button-block button-royal">.button-royal</button>
<button class="button block button-dark">.button-dark</button> <button class="button button-block button-dark">.button-dark</button>
</p> </p>
<hr> <hr>
@ -202,16 +202,16 @@
<hr> <hr>
<h3>a.block.button-icon (Borderless, 32px)</h3> <h3>a.button-block.button-icon (Borderless, 32px)</h3>
<p> <p>
<a class="button block button-icon"><i class="icon ion-home"></i></a> <a class="button button-block button-icon"><i class="icon ion-home"></i></a>
</p> </p>
<hr> <hr>
<h3>button.block.button-icon (Borderless, 32px)</h3> <h3>button.button-block.button-icon (Borderless, 32px)</h3>
<p> <p>
<button class="button block button-icon"><i class="icon ion-home"></i></button> <button class="button button-block button-icon"><i class="icon ion-home"></i></button>
</p> </p>
<hr> <hr>
@ -248,34 +248,34 @@
<hr> <hr>
<h3>a.block.button-outline (parent w/ padding)</h3> <h3>a.button-block.button-outline (parent w/ padding)</h3>
<p> <p>
<a class="button button-outline block"><i class="icon ion-home"></i> Default</a> <a class="button button-outline button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-outline block">.button-light</a> <a class="button button-light button-outline button-block">.button-light</a>
<a class="button button-stable button-outline block">.button-stable</a> <a class="button button-stable button-outline button-block">.button-stable</a>
<a class="button button-positive button-outline block">.button-positive</a> <a class="button button-positive button-outline button-block">.button-positive</a>
<a class="button button-calm button-outline block">.button-calm</a> <a class="button button-calm button-outline button-block">.button-calm</a>
<a class="button button-balanced button-outline block">.button-balanced</a> <a class="button button-balanced button-outline button-block">.button-balanced</a>
<a class="button button-assertive button-outline block">.button-assertive</a> <a class="button button-assertive button-outline button-block">.button-assertive</a>
<a class="button button-energized button-outline block">.button-energized</a> <a class="button button-energized button-outline button-block">.button-energized</a>
<a class="button button-royal button-outline block">.button-royal</a> <a class="button button-royal button-outline button-block">.button-royal</a>
<a class="button button-dark button-outline block">.button-dark</a> <a class="button button-dark button-outline button-block">.button-dark</a>
</p> </p>
<hr> <hr>
<h3>button.block.button-outline (parent w/ padding)</h3> <h3>button.button-block.button-outline (parent w/ padding)</h3>
<p> <p>
<button class="button button-outline block"><i class="icon ion-home"></i> Default</button> <button class="button button-outline button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-outline block">.button-light</button> <button class="button button-light button-outline button-block">.button-light</button>
<button class="button button-stable button-outline block">.button-stable</button> <button class="button button-stable button-outline button-block">.button-stable</button>
<button class="button button-positive button-outline block">.button-positive</button> <button class="button button-positive button-outline button-block">.button-positive</button>
<button class="button button-calm button-outline block">.button-calm</button> <button class="button button-calm button-outline button-block">.button-calm</button>
<button class="button button-balanced button-outline block">.button-balanced</button> <button class="button button-balanced button-outline button-block">.button-balanced</button>
<button class="button button-assertive button-outline block">.button-assertive</button> <button class="button button-assertive button-outline button-block">.button-assertive</button>
<button class="button button-energized button-outline block">.button-energized</button> <button class="button button-energized button-outline button-block">.button-energized</button>
<button class="button button-royal button-outline block">.button-royal</button> <button class="button button-royal button-outline button-block">.button-royal</button>
<button class="button button-dark button-outline block">.button-dark</button> <button class="button button-dark button-outline button-block">.button-dark</button>
</p> </p>
<hr> <hr>
@ -312,57 +312,57 @@
<hr> <hr>
<h3>a.block.button-clear (parent w/ padding)</h3> <h3>a.button-block.button-clear (parent w/ padding)</h3>
<p> <p>
<a class="button button-clear block"><i class="icon ion-home"></i> Default</a> <a class="button button-clear button-block"><i class="icon ion-home"></i> Default</a>
<a class="button button-light button-clear block">.button-light</a> <a class="button button-light button-clear button-block">.button-light</a>
<a class="button button-stable button-clear block">.button-stable</a> <a class="button button-stable button-clear button-block">.button-stable</a>
<a class="button button-positive button-clear block">.button-positive</a> <a class="button button-positive button-clear button-block">.button-positive</a>
<a class="button button-calm button-clear block">.button-calm</a> <a class="button button-calm button-clear button-block">.button-calm</a>
<a class="button button-balanced button-clear block">.button-balanced</a> <a class="button button-balanced button-clear button-block">.button-balanced</a>
<a class="button button-assertive button-clear block">.button-assertive</a> <a class="button button-assertive button-clear button-block">.button-assertive</a>
<a class="button button-energized button-clear block">.button-energized</a> <a class="button button-energized button-clear button-block">.button-energized</a>
<a class="button button-royal button-clear block">.button-royal</a> <a class="button button-royal button-clear button-block">.button-royal</a>
<a class="button button-dark button-clear block">.button-dark</a> <a class="button button-dark button-clear button-block">.button-dark</a>
</p> </p>
<hr> <hr>
<h3>button.block.button-clear (parent w/ padding)</h3> <h3>button.button-block.button-clear (parent w/ padding)</h3>
<p> <p>
<button class="button button-clear block"><i class="icon ion-home"></i> Default</button> <button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-clear block">.button-light</button> <button class="button button-light button-clear block">.button-light</button>
<button class="button button-stable button-clear block">.button-stable</button> <button class="button button-stable button-clear button-block">.button-stable</button>
<button class="button button-positive button-clear block">.button-positive</button> <button class="button button-positive button-clear button-block">.button-positive</button>
<button class="button button-calm button-clear block">.button-calm</button> <button class="button button-calm button-clear button-block">.button-calm</button>
<button class="button button-balanced button-clear block">.button-balanced</button> <button class="button button-balanced button-clear button-block">.button-balanced</button>
<button class="button button-assertive button-clear block">.button-assertive</button> <button class="button button-assertive button-clear button-block">.button-assertive</button>
<button class="button button-energized button-clear block">.button-energized</button> <button class="button button-energized button-clear button-block">.button-energized</button>
<button class="button button-royal button-clear block">.button-royal</button> <button class="button button-royal button-clear button-block">.button-royal</button>
<button class="button button-dark button-clear block">.button-dark</button> <button class="button button-dark button-clear button-block">.button-dark</button>
</p> </p>
</div> </div>
<hr> <hr>
<h3>a.block (parent w/out padding)</h3> <h3>a.button-block (parent w/out padding)</h3>
<p> <p>
<a class="button block"><i class="icon ion-home"></i> Default</a> <a class="button button-block"><i class="icon ion-home"></i> Default</a>
<a class="button block button-light">.button-light</a> <a class="button button-block button-light">.button-light</a>
<a class="button block button-stable">.button-stable</a> <a class="button button-block button-stable">.button-stable</a>
<a class="button block button-positive">.button-positive</a> <a class="button button-block button-positive">.button-positive</a>
<a class="button block button-calm">.button-calm</a> <a class="button button-block button-calm">.button-calm</a>
<a class="button block button-balanced">.button-balanced</a> <a class="button button-block button-balanced">.button-balanced</a>
<a class="button block button-assertive">.button-assertive</a> <a class="button button-block button-assertive">.button-assertive</a>
<a class="button block button-energized">.button-energized</a> <a class="button button-block button-energized">.button-energized</a>
<a class="button block button-royal">.button-royal</a> <a class="button button-block button-royal">.button-royal</a>
<a class="button block button-dark">.button-dark</a> <a class="button button-block button-dark">.button-dark</a>
</p> </p>
<hr> <hr>
<h3>a.block (.button-full on the parent)</h3> <h3>a.button-block (.button-full on the parent)</h3>
<p class="button-full"> <p class="button-full">
<a class="button"><i class="icon ion-home"></i> Default</a> <a class="button"><i class="icon ion-home"></i> Default</a>
<a class="button button-light">.button-light</a> <a class="button button-light">.button-light</a>
@ -378,7 +378,7 @@
<hr> <hr>
<h3>button.block.button-full on each button and nothing on the parent</h3> <h3>button.button-block.button-full on each button and nothing on the parent</h3>
<p> <p>
<button class="button button-full"><i class="icon ion-home"></i> Default</button> <button class="button button-full"><i class="icon ion-home"></i> Default</button>
<button class="button button-full button-light">.button-light</button> <button class="button button-full button-light">.button-light</button>