javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

vertically aligned button icon/text for all scenarios

Browse Source
This commit is contained in:
Adam Bradley
2013-10-28 16:13:49 -05:00
parent c85426e068
commit d33a8b8fe1
9 changed files with 376 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dist/css/ionic-ios7.css vendored
View File

@@ -551,17 +551,17 @@ a.subdued‎ {
height: 44px;
border-width: 0;
border-style: solid;
background-color: white;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
border-bottom: 1px solid #dddddd;
background-color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
background-repeat: no-repeat; } }
.bar.bar-clear {
border: none;
background: none;
@@ -705,19 +705,20 @@ a.subdued‎ {
line-height: 44px; }
.bar .title a {
color: inherit; }
.bar .button {
.bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1;
margin: 0;
padding: 4px 12px;
padding: 2px 8px 0 8px;
min-height: 34px;
background-color: transparent;
font-size: 12px;
line-height: 23px; }
.bar .button.button-clear {
padding: 0 5px;
line-height: 34px; }
line-height: 28px; }
.bar > .button [class^="icon-"],
.bar > .button [class*=" icon-"] {
margin-top: 1px; }
.bar .button-bar {
line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar {
@@ -867,14 +868,6 @@ a.subdued‎ {
box-shadow: none;
font-size: 17px; }
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px; }
.bar .button-icon {
border: 1px solid transparent;
background-color: transparent; }
.bar-header {
top: 0; }
@@ -1885,21 +1878,31 @@ input[type="range"] {
position: relative;
display: inline-block;
margin: 0;
padding: 8px 12px;
padding: 9px 12px 7px 12px;
min-height: 44px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
color: #222222;
vertical-align: middle;
vertical-align: top;
text-align: center;
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
font-size: 16px;
line-height: 24px;
cursor: pointer; }
.button [class^="icon-"],
.button [class*=" icon-"] {
display: inline-block;
padding: 0;
vertical-align: sub;
font-size: 24px;
line-height: 24px; }
.button.button-icon {
padding: 4px 5px;
border: none;
background: none; }
.button.button-icon [class^="icon-"],
.button.button-icon [class*=" icon-"] {
font-size: 32px; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;

47
dist/css/ionic-scoped.css vendored
View File

@@ -1317,17 +1317,17 @@
height: 44px;
border-width: 0;
border-style: solid;
background-color: white;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
border-bottom: 1px solid #dddddd;
background-color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
background-repeat: no-repeat; } }
.ionic .bar.bar-clear {
border: none;
background: none;
@@ -1471,19 +1471,20 @@
line-height: 44px; }
.ionic .bar .title a {
color: inherit; }
.ionic .bar .button {
.ionic .bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1;
margin: 0;
padding: 4px 12px;
padding: 2px 8px 0 8px;
min-height: 34px;
background-color: transparent;
font-size: 12px;
line-height: 23px; }
.ionic .bar .button.button-clear {
padding: 0 5px;
line-height: 34px; }
line-height: 28px; }
.ionic .bar > .button [class^="icon-"],
.ionic .bar > .button [class*=" icon-"] {
margin-top: 1px; }
.ionic .bar .button-bar {
line-height: 18px; }
.ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
@@ -1624,12 +1625,6 @@
background: none;
box-shadow: none;
font-size: 17px; }
.ionic .bar [class^="icon-"],
.ionic .bar [class*=" icon-"] {
font-size: 24px; }
.ionic .bar .button-icon {
border: 1px solid transparent;
background-color: transparent; }
.ionic .bar-header {
top: 0; }
.ionic .bar-footer {
@@ -2583,21 +2578,31 @@
position: relative;
display: inline-block;
margin: 0;
padding: 8px 12px;
padding: 9px 12px 7px 12px;
min-height: 44px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
color: #222222;
vertical-align: middle;
vertical-align: top;
text-align: center;
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
font-size: 16px;
line-height: 24px;
cursor: pointer; }
.ionic .button [class^="icon-"],
.ionic .button [class*=" icon-"] {
display: inline-block;
padding: 0;
vertical-align: sub;
font-size: 24px;
line-height: 24px; }
.ionic .button.button-icon {
padding: 4px 5px;
border: none;
background: none; }
.ionic .button.button-icon [class^="icon-"],
.ionic .button.button-icon [class*=" icon-"] {
font-size: 32px; }
.ionic .button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;

49
dist/css/ionic.css vendored
View File

@@ -1660,17 +1660,17 @@ a.subdued‎ {
height: 44px;
border-width: 0;
border-style: solid;
background-color: white;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
border-bottom: 1px solid #dddddd;
background-color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
background-repeat: no-repeat; } }
.bar.bar-clear {
border: none;
background: none;
@@ -1814,19 +1814,20 @@ a.subdued‎ {
line-height: 44px; }
.bar .title a {
color: inherit; }
.bar .button {
.bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1;
margin: 0;
padding: 4px 12px;
padding: 2px 8px 0 8px;
min-height: 34px;
background-color: transparent;
font-size: 12px;
line-height: 23px; }
.bar .button.button-clear {
padding: 0 5px;
line-height: 34px; }
line-height: 28px; }
.bar > .button [class^="icon-"],
.bar > .button [class*=" icon-"] {
margin-top: 1px; }
.bar .button-bar {
line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar {
@@ -1976,14 +1977,6 @@ a.subdued‎ {
box-shadow: none;
font-size: 17px; }
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px; }
.bar .button-icon {
border: 1px solid transparent;
background-color: transparent; }
.bar-header {
top: 0; }
@@ -3106,21 +3099,31 @@ input[type="range"] {
position: relative;
display: inline-block;
margin: 0;
padding: 8px 12px;
padding: 9px 12px 7px 12px;
min-height: 44px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
color: #222222;
vertical-align: middle;
vertical-align: top;
text-align: center;
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
font-size: 16px;
line-height: 24px;
cursor: pointer; }
.button [class^="icon-"],
.button [class*=" icon-"] {
display: inline-block;
padding: 0;
vertical-align: sub;
font-size: 24px;
line-height: 24px; }
.button.button-icon {
padding: 4px 5px;
border: none;
background: none; }
.button.button-icon [class^="icon-"],
.button.button-icon [class*=" icon-"] {
font-size: 32px; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;

42
scss/ionic/_bar.scss
View File

@@ -18,24 +18,24 @@
height: $bar-height;
border-width: 0;
border-style: solid;
background-color: $bar-bg;
border-top: 1px solid transparent;
border-bottom: 1px solid $bar-default-border-color;
background-color: $bar-bg;
@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
}
&.bar-clear {
border: none;
@@ -109,22 +109,22 @@
color: inherit;
}
.button {
> .button {
@include box-flex(0);
z-index: 1;
margin: 0;
padding: 4px 12px;
padding: 2px 8px 0 8px;
min-height: 34px;
background-color: transparent;
font-size: 12px;
line-height: $bar-button-line-height;
line-height: 28px;
&.button-clear {
padding: 0 5px;
line-height: $bar-button-clear-line-height;
[class^="icon-"],
[class*=" icon-"] {
margin-top: 1px;
}
}
.button-bar {
line-height: $bar-button-bar-line-height;
}
@@ -200,16 +200,6 @@
}
}
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px;
}
.bar .button-icon {
border: $button-border-width solid transparent;
background-color: transparent;
}
// Header at top
.bar-header {
top: 0;

27
scss/ionic/_button.scss
View File

@@ -1,31 +1,43 @@
.button {
position: relative;
display: inline-block;
margin: 0;
padding: $button-padding;
padding: 9px 12px 7px 12px;
min-height: 44px;
border-width: $button-border-width;
border-style: solid;
border-radius: $button-border-radius;
color: $button-color;
vertical-align: middle;
vertical-align: top;
text-align: center;
font-size: $button-font-size;
line-height: $line-height-computed;
text-overflow: ellipsis;
font-size: $button-font-size;
line-height: 24px;
cursor: pointer;
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
padding: 0;
vertical-align: sub;
font-size: 24px;
line-height: 24px;
}
&.button-icon {
padding: $button-clear-padding;
border: none;
background: none;
[class^="icon-"],
[class*=" icon-"] {
font-size: 32px;
}
}
&.button-clear {
@@ -102,6 +114,7 @@
margin-bottom: $button-block-margin;
}
}
.padding > .button.block:first-child {

2
scss/ionic/_mixins.scss
View File

@@ -401,7 +401,7 @@
display: flex;
}
@mixin dislay-inline {
@mixin dislay-inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;

442
test/buttons.html
View File

@@ -24,212 +24,41 @@
<h1 class="title">Buttons</h1>
</header>
<div class="content-wrapper">
<main class="content has-header">
<main class="content has-header">
<div class="padding">
<div class="padding">
<h3>&lt;a&gt; default</h3>
<p>
<a class="button button-default">.button-default</a>
<a class="button button-secondary">.button-secondary</a>
<a class="button button-primary">.button-primary</a>
<a class="button button-info">.button-info</a>
<a class="button button-success">.button-success</a>
<a class="button button-warning">.button-warning</a>
<a class="button button-danger">.button-danger</a>
<a class="button button-dark">.button-dark</a>
</p>
<hr>
<h3>&lt;button&gt; default</h3>
<p>
<button class="button button-default">.button-default</button>
<button class="button button-secondary">.button-secondary</button>
<button class="button button-primary">.button-primary</button>
<button class="button button-info">.button-info</button>
<button class="button button-success">.button-success</button>
<button class="button button-warning">.button-warning</button>
<button class="button button-danger">.button-danger</button>
<button class="button button-dark">.button-dark</button>
</p>
<hr>
<h3>a.block (parent w/ padding)</h3>
<p>
<a class="button block button-default">.button-default</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
<a class="button block button-success">.button-success</a>
<a class="button block button-warning">.button-warning</a>
<a class="button block button-danger">.button-danger</a>
<a class="button block button-dark">.button-dark</a>
</p>
<hr>
<h3>button.block (parent w/ padding)</h3>
<p>
<button class="button block button-default">.button-default</button>
<button class="button block button-secondary">.button-secondary</button>
<button class="button block button-primary">.button-primary</button>
<button class="button block button-info">.button-info</button>
<button class="button block button-success">.button-success</button>
<button class="button block button-warning">.button-warning</button>
<button class="button block button-danger">.button-danger</button>
<button class="button block button-dark">.button-dark</button>
</p>
<hr>
<h3>a.button-icon</h3>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<hr>
<h3>button.button-icon</h3>
<p>
<button class="button button-icon"><i class="icon-home"></i></button>
</p>
<hr>
<h3>a.block.button-icon</h3>
<p>
<a class="button block button-icon"><i class="icon-home"></i></a>
</p>
<hr>
<h3>button.block.button-icon</h3>
<p>
<button class="button block button-icon"><i class="icon-home"></i></button>
</p>
<hr>
<h3>a.button-outline</h3>
<p>
<a class="button button-default button-outline">.button-default</a>
<a class="button button-secondary button-outline">.button-secondary</a>
<a class="button button-primary button-outline">.button-primary</a>
<a class="button button-info button-outline">.button-info</a>
<a class="button button-success button-outline">.button-success</a>
<a class="button button-warning button-outline">.button-warning</a>
<a class="button button-danger button-outline">.button-danger</a>
<a class="button button-dark button-outline">.button-dark</a>
</p>
<hr>
<h3>button.button-outline</h3>
<p>
<button class="button button-default button-outline">.button-default</button>
<button class="button button-secondary button-outline">.button-secondary</button>
<button class="button button-primary button-outline">.button-primary</button>
<button class="button button-info button-outline">.button-info</button>
<button class="button button-success button-outline">.button-success</button>
<button class="button button-warning button-outline">.button-warning</button>
<button class="button button-danger button-outline">.button-danger</button>
<button class="button button-dark button-outline">.button-dark</button>
</p>
<hr>
<h3>a.block.button-outline (parent w/ padding)</h3>
<p>
<a class="button button-default button-outline block">.button-default</a>
<a class="button button-secondary button-outline block">.button-secondary</a>
<a class="button button-primary button-outline block">.button-primary</a>
<a class="button button-info button-outline block">.button-info</a>
<a class="button button-success button-outline block">.button-success</a>
<a class="button button-warning button-outline block">.button-warning</a>
<a class="button button-danger button-outline block">.button-danger</a>
<a class="button button-dark button-outline block">.button-dark</a>
</p>
<hr>
<h3>button.block.button-outline (parent w/ padding)</h3>
<p>
<button class="button button-default button-outline block">.button-default</button>
<button class="button button-secondary button-outline block">.button-secondary</button>
<button class="button button-primary button-outline block">.button-primary</button>
<button class="button button-info button-outline block">.button-info</button>
<button class="button button-success button-outline block">.button-success</button>
<button class="button button-warning button-outline block">.button-warning</button>
<button class="button button-danger button-outline block">.button-danger</button>
<button class="button button-dark button-outline block">.button-dark</button>
</p>
<hr>
<h3>a.button-clear</h3>
<p>
<a class="button button-default button-clear">.button-default</a>
<a class="button button-secondary button-clear">.button-secondary</a>
<a class="button button-primary button-clear">.button-primary</a>
<a class="button button-info button-clear">.button-info</a>
<a class="button button-success button-clear">.button-success</a>
<a class="button button-warning button-clear">.button-warning</a>
<a class="button button-danger button-clear">.button-danger</a>
<a class="button button-dark button-clear">.button-dark</a>
</p>
<hr>
<h3>button.button-clear</h3>
<p>
<button class="button button-default button-clear">.button-default</button>
<button class="button button-secondary button-clear">.button-secondary</button>
<button class="button button-primary button-clear">.button-primary</button>
<button class="button button-info button-clear">.button-info</button>
<button class="button button-success button-clear">.button-success</button>
<button class="button button-warning button-clear">.button-warning</button>
<button class="button button-danger button-clear">.button-danger</button>
<button class="button button-dark button-clear">.button-dark</button>
</p>
<hr>
<h3>a.block.button-clear (parent w/ padding)</h3>
<p>
<a class="button button-default button-clear block">.button-default</a>
<a class="button button-secondary button-clear block">.button-secondary</a>
<a class="button button-primary button-clear block">.button-primary</a>
<a class="button button-info button-clear block">.button-info</a>
<a class="button button-success button-clear block">.button-success</a>
<a class="button button-warning button-clear block">.button-warning</a>
<a class="button button-danger button-clear block">.button-danger</a>
<a class="button button-dark button-clear block">.button-dark</a>
</p>
<hr>
<h3>button.block.button-clear (parent w/ padding)</h3>
<p>
<button class="button button-default button-clear block">.button-default</button>
<button class="button button-secondary button-clear block">.button-secondary</button>
<button class="button button-primary button-clear block">.button-primary</button>
<button class="button button-info button-clear block">.button-info</button>
<button class="button button-success button-clear block">.button-success</button>
<button class="button button-warning button-clear block">.button-warning</button>
<button class="button button-danger button-clear block">.button-danger</button>
<button class="button button-dark button-clear block">.button-dark</button>
</p>
</div>
<h3>&lt;a&gt; default</h3>
<p>
<a class="button button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary"><i class="icon-home"></i></a>
<a class="button button-primary"><i class="icon-home"></i> .button-primary</a>
<a class="button button-info"><i class="icon-home"></i></a>
<a class="button button-success">.button-success</a>
<a class="button button-warning"><i class="icon-home"></i> .button-warning</a>
<a class="button button-danger">.button-danger</a>
<a class="button button-dark"><i class="icon-home"></i> .button-dark</a>
</p>
<hr>
<h3>a.block (parent w/out padding)</h3>
<h3>&lt;button&gt; default</h3>
<p>
<a class="button block button-default">.button-default</a>
<button class="button button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary">.button-secondary</button>
<button class="button button-primary"><i class="icon-home"></i> .button-primary</button>
<button class="button button-info">.button-info</button>
<button class="button button-success"><i class="icon-home"></i></button>
<button class="button button-warning">.button-warning</button>
<button class="button button-danger"><i class="icon-home"></i> .button-danger</button>
<button class="button button-dark"><i class="icon-home"></i></button>
</p>
<hr>
<h3>a.block (parent w/ padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> .button-default</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
@@ -241,40 +70,209 @@
<hr>
<h3>a.block (.button-full on the parent)</h3>
<p class="button-full">
<a class="button button-default">.button-default</a>
<a class="button button-secondary">.button-secondary</a>
<a class="button button-primary">.button-primary</a>
<a class="button button-info">.button-info</a>
<a class="button button-success">.button-success</a>
<a class="button button-warning">.button-warning</a>
<a class="button button-danger">.button-danger</a>
<a class="button button-dark">.button-dark</a>
<h3>button.block (parent w/ padding)</h3>
<p>
<button class="button block button-default"><i class="icon-home"></i> .button-default</button>
<button class="button block button-secondary">.button-secondary</button>
<button class="button block button-primary">.button-primary</button>
<button class="button block button-info">.button-info</button>
<button class="button block button-success">.button-success</button>
<button class="button block button-warning">.button-warning</button>
<button class="button block button-danger">.button-danger</button>
<button class="button block button-dark">.button-dark</button>
</p>
<hr>
<h3>button.block.button-full on each button and nothing on the parent</h3>
<h3>a.button-icon (Borderless, 32px)</h3>
<p>
<button class="button button-full button-default">.button-default</button>
<button class="button button-full button-secondary">.button-secondary</button>
<button class="button button-full button-primary">.button-primary</button>
<button class="button button-full button-info">.button-info</button>
<button class="button button-full button-success">.button-success</button>
<button class="button button-full button-warning">.button-warning</button>
<button class="button button-full button-danger">.button-danger</button>
<button class="button button-full button-dark">.button-dark</button>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<hr>
<h3>button.button-icon (Borderless, 32px)</h3>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
<button class="button button-icon"><i class="icon-home"></i></button>
</p>
</main>
</div>
<hr>
<h3>a.block.button-icon (Borderless, 32px)</h3>
<p>
<a class="button block button-icon"><i class="icon-home"></i></a>
</p>
<hr>
<h3>button.block.button-icon (Borderless, 32px)</h3>
<p>
<button class="button block button-icon"><i class="icon-home"></i></button>
</p>
<hr>
<h3>a.button-outline</h3>
<p>
<a class="button button-default button-outline"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary button-outline">.button-secondary</a>
<a class="button button-primary button-outline">.button-primary</a>
<a class="button button-info button-outline">.button-info</a>
<a class="button button-success button-outline">.button-success</a>
<a class="button button-warning button-outline">.button-warning</a>
<a class="button button-danger button-outline">.button-danger</a>
<a class="button button-dark button-outline">.button-dark</a>
</p>
<hr>
<h3>button.button-outline</h3>
<p>
<button class="button button-default button-outline"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary button-outline">.button-secondary</button>
<button class="button button-primary button-outline">.button-primary</button>
<button class="button button-info button-outline">.button-info</button>
<button class="button button-success button-outline">.button-success</button>
<button class="button button-warning button-outline">.button-warning</button>
<button class="button button-danger button-outline">.button-danger</button>
<button class="button button-dark button-outline">.button-dark</button>
</p>
<hr>
<h3>a.block.button-outline (parent w/ padding)</h3>
<p>
<a class="button button-default button-outline block"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary button-outline block">.button-secondary</a>
<a class="button button-primary button-outline block">.button-primary</a>
<a class="button button-info button-outline block">.button-info</a>
<a class="button button-success button-outline block">.button-success</a>
<a class="button button-warning button-outline block">.button-warning</a>
<a class="button button-danger button-outline block">.button-danger</a>
<a class="button button-dark button-outline block">.button-dark</a>
</p>
<hr>
<h3>button.block.button-outline (parent w/ padding)</h3>
<p>
<button class="button button-default button-outline block"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary button-outline block">.button-secondary</button>
<button class="button button-primary button-outline block">.button-primary</button>
<button class="button button-info button-outline block">.button-info</button>
<button class="button button-success button-outline block">.button-success</button>
<button class="button button-warning button-outline block">.button-warning</button>
<button class="button button-danger button-outline block">.button-danger</button>
<button class="button button-dark button-outline block">.button-dark</button>
</p>
<hr>
<h3>a.button-clear</h3>
<p>
<a class="button button-default button-clear"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary button-clear">.button-secondary</a>
<a class="button button-primary button-clear">.button-primary</a>
<a class="button button-info button-clear">.button-info</a>
<a class="button button-success button-clear">.button-success</a>
<a class="button button-warning button-clear">.button-warning</a>
<a class="button button-danger button-clear">.button-danger</a>
<a class="button button-dark button-clear">.button-dark</a>
</p>
<hr>
<h3>button.button-clear</h3>
<p>
<button class="button button-default button-clear"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary button-clear">.button-secondary</button>
<button class="button button-primary button-clear">.button-primary</button>
<button class="button button-info button-clear">.button-info</button>
<button class="button button-success button-clear">.button-success</button>
<button class="button button-warning button-clear">.button-warning</button>
<button class="button button-danger button-clear">.button-danger</button>
<button class="button button-dark button-clear">.button-dark</button>
</p>
<hr>
<h3>a.block.button-clear (parent w/ padding)</h3>
<p>
<a class="button button-default button-clear block"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary button-clear block">.button-secondary</a>
<a class="button button-primary button-clear block">.button-primary</a>
<a class="button button-info button-clear block">.button-info</a>
<a class="button button-success button-clear block">.button-success</a>
<a class="button button-warning button-clear block">.button-warning</a>
<a class="button button-danger button-clear block">.button-danger</a>
<a class="button button-dark button-clear block">.button-dark</a>
</p>
<hr>
<h3>button.block.button-clear (parent w/ padding)</h3>
<p>
<button class="button button-default button-clear block"><i class="icon-home"></i> .button-default</button>
<button class="button button-secondary button-clear block">.button-secondary</button>
<button class="button button-primary button-clear block">.button-primary</button>
<button class="button button-info button-clear block">.button-info</button>
<button class="button button-success button-clear block">.button-success</button>
<button class="button button-warning button-clear block">.button-warning</button>
<button class="button button-danger button-clear block">.button-danger</button>
<button class="button button-dark button-clear block">.button-dark</button>
</p>
</div>
<hr>
<h3>a.block (parent w/out padding)</h3>
<p>
<a class="button block button-default"><i class="icon-home"></i> .button-default</a>
<a class="button block button-secondary">.button-secondary</a>
<a class="button block button-primary">.button-primary</a>
<a class="button block button-info">.button-info</a>
<a class="button block button-success">.button-success</a>
<a class="button block button-warning">.button-warning</a>
<a class="button block button-danger">.button-danger</a>
<a class="button block button-dark">.button-dark</a>
</p>
<hr>
<h3>a.block (.button-full on the parent)</h3>
<p class="button-full">
<a class="button button-default"><i class="icon-home"></i> .button-default</a>
<a class="button button-secondary">.button-secondary</a>
<a class="button button-primary">.button-primary</a>
<a class="button button-info">.button-info</a>
<a class="button button-success">.button-success</a>
<a class="button button-warning">.button-warning</a>
<a class="button button-danger">.button-danger</a>
<a class="button button-dark">.button-dark</a>
</p>
<hr>
<h3>button.block.button-full on each button and nothing on the parent</h3>
<p>
<button class="button button-full button-default"><i class="icon-home"></i> .button-default</button>
<button class="button button-full button-secondary">.button-secondary</button>
<button class="button button-full button-primary">.button-primary</button>
<button class="button button-full button-info">.button-info</button>
<button class="button button-full button-success">.button-success</button>
<button class="button button-full button-warning">.button-warning</button>
<button class="button button-full button-danger">.button-danger</button>
<button class="button button-full button-dark">.button-dark</button>
</p>
<hr>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p>
</main>
</body>
</html>

57
test/headers.html
View File

@@ -23,15 +23,23 @@
<h1 class="title">Really really really really really really really really long title!</h1>
<a class="button"><i class="icon-home"></i> Home</a>
</header>
<div class="bar bar-header-secondary bar-success">
<a class="button">
<i class="icon-home"></i> Home
</a>
<div class="button-bar">
<a class="button">Success</a>
<a class="button">Warning</a>
<a class="button">Danger</a>
</div>
<a class="button">
Favorites
</a>
</div>
<header class="bar bar-header bar-default">
<a class="button button-icon">
<a class="button button-default">
<i class="icon-home"></i> Home
</a>
<div class="button-bar">
@@ -39,29 +47,38 @@
<a class="button">Warning</a>
<a class="button">Danger</a>
</div>
<a class="button">
<i class="icon-star"></i> Favorites
</a>
</header>
<div class="bar bar-header bar-default">
<a class="button button-icon">
<i class="icon-home"></i>
</a>
<div class="button-bar">
<a href="#" class="button button-clear">Edit</a>
<a href="#" class="button button-clear">Teach</a>
<a href="#" class="button button-clear">Delete</a>
</div>
<a class="button button-icon">
<i class="icon-home"></i>
</a>
</div>
<header class="bar bar-header bar-default">
<a class="button button-default">
<i class="icon-home"></i>
</a>
<div class="button-bar">
<a class="button">Success</a>
<a class="button">Warning</a>
<a class="button">Danger</a>
</div>
<a class="button">
<i class="icon-star"></i>
</a>
</header>
<div class="bar bar-header bar-default">
<div class="button-bar">
<a href="#" class="button button-clear">Edit</a>
<a href="#" class="button button-clear">Teach</a>
<a href="#" class="button button-clear">Delete</a>
</div>
</div>
<div class="bar bar-header bar-secondary">
<div class="button-bar">
<a href="#" class="button button-clear">Edit</a>
<a href="#" class="button button-clear">Teach</a>
<a href="#" class="button button-clear">Delete</a>
</div>
</div>
<main class="content padding has-header">
<p>Content element must have "has-header" as a classname.</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>
</section>

8
test/index.html
View File

@@ -20,17 +20,17 @@
<p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
<p><a class="button button-block button-default" href="buttons.html"><i class="icon-star"></i> Buttons</a></p>
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
<p><a class="button button-block button-default" href="cards.html"><i class="icon-star"></i> Cards</a></p>
<p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star"></i> Headers</a></p>
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star"></i> Input: Radio Buttons</a></p>
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon-star-empty"></i> Pull To Refresh</a></p>