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

button updates

Browse Source
This commit is contained in:
Adam Bradley
2013-10-15 12:25:58 -05:00
parent 938d823a28
commit 55b270bffe
9 changed files with 390 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -393,12 +393,36 @@ body, .ionic-body {
.padded { .padded {
padding: 10px; } padding: 10px; }
.padded-top {
padding-top: 10px; }
.padded-right {
padding-right: 10px; }
.padded-bottom {
padding-bottom: 10px; }
.padded-left {
padding-left: 10px; }
.padded-2 { .padded-2 {
padding: 20px; } padding: 20px; }
.inset { .inset {
margin: 10px; } margin: 10px; }
.inset-top {
margin-top: 10px; }
.inset-right {
margin-right: 10px; }
.inset-bottom {
margin-bottom: 10px; }
.inset-left {
margin-left: 10px; }
.inset-2 { .inset-2 {
margin: 20px; } margin: 20px; }
@ -534,24 +558,24 @@ address {
line-height: 1.42857; } line-height: 1.42857; }
.bar { .bar {
position: absolute;
left: 0;
right: 0;
z-index: 10;
display: -webkit-box;
display: box;
width: 100%;
height: 44px;
padding: 5px;
box-sizing: border-box;
background-color: white;
border-style: solid;
border-width: 0;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-o-user-select: none; -o-user-select: none;
user-select: none; } user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
background-color: white; }
.bar.bar-header { .bar.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px; }
.bar.bar-footer { .bar.bar-footer {
@ -606,31 +630,32 @@ address {
color: white; } color: white; }
.bar .title { .bar .title {
position: absolute; position: absolute;
z-index: 0;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
line-height: 44px; left: 0;
z-index: 0;
margin: 0; margin: 0;
min-width: 30px; min-width: 30px;
text-overflow: ellipsis;
text-align: center; text-align: center;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 17px; } font-size: 17px;
line-height: 44px; }
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar .button { .bar .button {
box-flex: 1; box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
background-color: transparent; z-index: 1;
line-height: 23px; margin: 0;
font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; } background-color: transparent;
font-size: 12px;
line-height: 23px; }
.bar .button.button-clear { .bar .button.button-clear {
line-height: 34px; padding: 0 5px;
padding: 0 5px; } line-height: 34px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
@ -780,8 +805,8 @@ address {
font-size: 17px; } font-size: 17px; }
.bar .button-icon { .bar .button-icon {
background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent;
font-size: 24px; } font-size: 24px; }
.bar-header { .bar-header {
@ -793,11 +818,11 @@ address {
.bar-tabs { .bar-tabs {
padding: 0; } padding: 0; }
.bar-header-secondary { .bar-subheader {
top: 44px; top: 44px;
display: block; } display: block; }
.bar-footer-secondary { .bar-subfooter {
bottom: 44px; bottom: 44px;
display: block; } display: block; }
@ -1554,9 +1579,11 @@ input[type="checkbox"][readonly] {
display: block; display: block;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
padding: 8px 12px; padding: 8px 12px;
border-width: 1px; width: 100%;
border-width: 0;
border-style: solid; border-style: solid;
border-radius: 2px; border-top-width: 1px;
border-bottom-width: 1px;
color: #222222; color: #222222;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@ -1769,13 +1796,21 @@ input[type="checkbox"][readonly] {
a.button { a.button {
text-decoration: none; } text-decoration: none; }
.inset .button,
.padded .button {
border-right-width: 1px;
border-left-width: 1px;
border-radius: 2px; }
.button-group { .button-group {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; } vertical-align: middle; }
.button-group > .button { .button-group > .button {
position: relative; position: relative;
float: left; } display: inline-block;
float: left;
width: auto; }
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active { .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
z-index: 2; } z-index: 2; }
.button-group > .button:focus { .button-group > .button:focus {
@ -1846,9 +1881,9 @@ a.button {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; display: block;
width: 0;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 8px 16px;
width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;

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

@ -1117,10 +1117,26 @@
display: none !important; } display: none !important; }
.ionic .padded { .ionic .padded {
padding: 10px; } padding: 10px; }
.ionic .padded-top {
padding-top: 10px; }
.ionic .padded-right {
padding-right: 10px; }
.ionic .padded-bottom {
padding-bottom: 10px; }
.ionic .padded-left {
padding-left: 10px; }
.ionic .padded-2 { .ionic .padded-2 {
padding: 20px; } padding: 20px; }
.ionic .inset { .ionic .inset {
margin: 10px; } margin: 10px; }
.ionic .inset-top {
margin-top: 10px; }
.ionic .inset-right {
margin-right: 10px; }
.ionic .inset-bottom {
margin-bottom: 10px; }
.ionic .inset-left {
margin-left: 10px; }
.ionic .inset-2 { .ionic .inset-2 {
margin: 20px; } margin: 20px; }
.ionic .rounded { .ionic .rounded {
@ -1255,24 +1271,24 @@
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
margin-bottom: 10px; } margin-bottom: 10px; }
.ionic .bar { .ionic .bar {
position: absolute;
left: 0;
right: 0;
z-index: 10;
display: -webkit-box;
display: box;
width: 100%;
height: 44px;
padding: 5px;
box-sizing: border-box;
background-color: white;
border-style: solid;
border-width: 0;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-o-user-select: none; -o-user-select: none;
user-select: none; } user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
background-color: white; }
.ionic .bar.bar-header { .ionic .bar.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px; }
.ionic .bar.bar-footer { .ionic .bar.bar-footer {
@ -1327,31 +1343,32 @@
color: white; } color: white; }
.ionic .bar .title { .ionic .bar .title {
position: absolute; position: absolute;
z-index: 0;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
line-height: 44px; left: 0;
z-index: 0;
margin: 0; margin: 0;
min-width: 30px; min-width: 30px;
text-overflow: ellipsis;
text-align: center; text-align: center;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 17px; } font-size: 17px;
line-height: 44px; }
.ionic .bar .title a { .ionic .bar .title a {
color: inherit; } color: inherit; }
.ionic .bar .button { .ionic .bar .button {
box-flex: 1; box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
background-color: transparent; z-index: 1;
line-height: 23px; margin: 0;
font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; } background-color: transparent;
font-size: 12px;
line-height: 23px; }
.ionic .bar .button.button-clear { .ionic .bar .button.button-clear {
line-height: 34px; padding: 0 5px;
padding: 0 5px; } line-height: 34px; }
.ionic .bar .button-bar { .ionic .bar .button-bar {
line-height: 18px; } line-height: 18px; }
.ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar { .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
@ -1492,8 +1509,8 @@
box-shadow: none; box-shadow: none;
font-size: 17px; } font-size: 17px; }
.ionic .bar .button-icon { .ionic .bar .button-icon {
background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent;
font-size: 24px; } font-size: 24px; }
.ionic .bar-header { .ionic .bar-header {
top: 0; } top: 0; }
@ -1501,10 +1518,10 @@
bottom: 0; } bottom: 0; }
.ionic .bar-tabs { .ionic .bar-tabs {
padding: 0; } padding: 0; }
.ionic .bar-header-secondary { .ionic .bar-subheader {
top: 44px; top: 44px;
display: block; } display: block; }
.ionic .bar-footer-secondary { .ionic .bar-subfooter {
bottom: 44px; bottom: 44px;
display: block; } display: block; }
.ionic .tabs { .ionic .tabs {
@ -2189,9 +2206,11 @@
display: block; display: block;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
padding: 8px 12px; padding: 8px 12px;
border-width: 1px; width: 100%;
border-width: 0;
border-style: solid; border-style: solid;
border-radius: 2px; border-top-width: 1px;
border-bottom-width: 1px;
color: #222222; color: #222222;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@ -2402,13 +2421,20 @@
margin: 10px 0 10px 0; } margin: 10px 0 10px 0; }
.ionic a.button { .ionic a.button {
text-decoration: none; } text-decoration: none; }
.ionic .inset .button,
.ionic .padded .button {
border-right-width: 1px;
border-left-width: 1px;
border-radius: 2px; }
.ionic .button-group { .ionic .button-group {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; } vertical-align: middle; }
.ionic .button-group > .button { .ionic .button-group > .button {
position: relative; position: relative;
float: left; } display: inline-block;
float: left;
width: auto; }
.ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active { .ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active {
z-index: 2; } z-index: 2; }
.ionic .button-group > .button:focus { .ionic .button-group > .button:focus {
@ -2469,9 +2495,9 @@
-webkit-box-flex: 1; -webkit-box-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; display: block;
width: 0;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 8px 16px;
width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;

99
dist/css/ionic.css vendored
View File

@ -1450,12 +1450,36 @@ body, .ionic-body {
.padded { .padded {
padding: 10px; } padding: 10px; }
.padded-top {
padding-top: 10px; }
.padded-right {
padding-right: 10px; }
.padded-bottom {
padding-bottom: 10px; }
.padded-left {
padding-left: 10px; }
.padded-2 { .padded-2 {
padding: 20px; } padding: 20px; }
.inset { .inset {
margin: 10px; } margin: 10px; }
.inset-top {
margin-top: 10px; }
.inset-right {
margin-right: 10px; }
.inset-bottom {
margin-bottom: 10px; }
.inset-left {
margin-left: 10px; }
.inset-2 { .inset-2 {
margin: 20px; } margin: 20px; }
@ -1621,24 +1645,24 @@ address {
margin-bottom: 10px; } margin-bottom: 10px; }
.bar { .bar {
position: absolute;
left: 0;
right: 0;
z-index: 10;
display: -webkit-box;
display: box;
width: 100%;
height: 44px;
padding: 5px;
box-sizing: border-box;
background-color: white;
border-style: solid;
border-width: 0;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-o-user-select: none; -o-user-select: none;
user-select: none; } user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
background-color: white; }
.bar.bar-header { .bar.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px; }
.bar.bar-footer { .bar.bar-footer {
@ -1693,31 +1717,32 @@ address {
color: white; } color: white; }
.bar .title { .bar .title {
position: absolute; position: absolute;
z-index: 0;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
line-height: 44px; left: 0;
z-index: 0;
margin: 0; margin: 0;
min-width: 30px; min-width: 30px;
text-overflow: ellipsis;
text-align: center; text-align: center;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 17px; } font-size: 17px;
line-height: 44px; }
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar .button { .bar .button {
box-flex: 1; box-flex: 1;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-moz-box-flex: 0; -moz-box-flex: 0;
background-color: transparent; z-index: 1;
line-height: 23px; margin: 0;
font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; } background-color: transparent;
font-size: 12px;
line-height: 23px; }
.bar .button.button-clear { .bar .button.button-clear {
line-height: 34px; padding: 0 5px;
padding: 0 5px; } line-height: 34px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
@ -1867,8 +1892,8 @@ address {
font-size: 17px; } font-size: 17px; }
.bar .button-icon { .bar .button-icon {
background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent;
font-size: 24px; } font-size: 24px; }
.bar-header { .bar-header {
@ -1880,11 +1905,11 @@ address {
.bar-tabs { .bar-tabs {
padding: 0; } padding: 0; }
.bar-header-secondary { .bar-subheader {
top: 44px; top: 44px;
display: block; } display: block; }
.bar-footer-secondary { .bar-subfooter {
bottom: 44px; bottom: 44px;
display: block; } display: block; }
@ -2672,9 +2697,11 @@ input[type="checkbox"][readonly] {
display: block; display: block;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
padding: 8px 12px; padding: 8px 12px;
border-width: 1px; width: 100%;
border-width: 0;
border-style: solid; border-style: solid;
border-radius: 2px; border-top-width: 1px;
border-bottom-width: 1px;
color: #222222; color: #222222;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
@ -2887,13 +2914,21 @@ input[type="checkbox"][readonly] {
a.button { a.button {
text-decoration: none; } text-decoration: none; }
.inset .button,
.padded .button {
border-right-width: 1px;
border-left-width: 1px;
border-radius: 2px; }
.button-group { .button-group {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; } vertical-align: middle; }
.button-group > .button { .button-group > .button {
position: relative; position: relative;
float: left; } display: inline-block;
float: left;
width: auto; }
.button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active { .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
z-index: 2; } z-index: 2; }
.button-group > .button:focus { .button-group > .button:focus {
@ -2964,9 +2999,9 @@ a.button {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; display: block;
width: 0;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 8px 16px;
width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;

43
scss/ionic/_bar.scss
View File

@ -1,22 +1,22 @@
.bar { .bar {
@include user-select(none);
position: absolute; position: absolute;
left: 0;
right: 0; right: 0;
left: 0;
z-index: 10; z-index: 10;
display: -webkit-box; display: -webkit-box;
display: box; display: box;
box-sizing: border-box;
padding: $bar-padding-portrait;
width: 100%; width: 100%;
height: $bar-height; height: $bar-height;
padding: $bar-padding-portrait; border-width: 0;
box-sizing: border-box; border-style: solid;
background-color: $bar-bg; background-color: $bar-bg;
border-style: solid;
border-width: 0;
@include user-select(none);
&.bar-header { &.bar-header {
border-bottom-width: 1px; border-bottom-width: 1px;
@ -60,25 +60,25 @@
// Title inside of a bar is centered // Title inside of a bar is centered
.title { .title {
position: absolute; position: absolute;
z-index: 0;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
left: 0;
line-height: $bar-height; z-index: 0;
margin: 0; margin: 0;
//padding: $barPaddingVertical 0px; //padding: $barPaddingVertical 0px;
min-width: 30px; min-width: 30px;
text-align: center;
// Go into ellipsis if too small // Go into ellipsis if too small
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center;
white-space: nowrap; white-space: nowrap;
font-size: $bar-title-font-size; font-size: $bar-title-font-size;
line-height: $bar-height;
} }
.title a { .title a {
@ -87,15 +87,16 @@
.button { .button {
@include box-flex(0); @include box-flex(0);
background-color: transparent;
line-height: $bar-button-line-height;
font-size: 12px;
padding: 4px 12px;
z-index: 1; z-index: 1;
margin: 0;
padding: 4px 12px;
background-color: transparent;
font-size: 12px;
line-height: $bar-button-line-height;
&.button-clear { &.button-clear {
line-height: $bar-button-clear-line-height;
padding: 0 5px; padding: 0 5px;
line-height: $bar-button-clear-line-height;
} }
} }
@ -175,8 +176,8 @@
} }
.bar .button-icon { .bar .button-icon {
background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent;
font-size: 24px; font-size: 24px;
} }
@ -195,11 +196,11 @@
padding: 0; padding: 0;
} }
.bar-header-secondary { .bar-subheader {
top: $bar-height; top: $bar-height;
display: block; display: block;
} }
.bar-footer-secondary { .bar-subfooter {
bottom: $bar-height; bottom: $bar-height;
display: block; display: block;
} }

11
scss/ionic/_button-group.scss
View File

@ -5,7 +5,9 @@
> .button { > .button {
position: relative; position: relative;
display: inline-block;
float: left; float: left;
width: auto;
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover, &:hover,
&:focus, &:focus,
@ -20,7 +22,6 @@
} }
} }
.button-group { .button-group {
.button + .button, .button + .button,
.button + .button-group, .button + .button-group,
@ -64,25 +65,23 @@
} }
.button-bar { .button-bar {
@include box-flex(1); @include box-flex(1);
@include box-orient(horizontal); @include box-orient(horizontal);
display: -webkit-box; display: -webkit-box;
display: box; display: box;
} }
.button-bar > .button { .button-bar > .button {
@include box-flex(1); @include box-flex(1);
display: block; display: block;
// Fix for unequal widths of buttons
width: 0;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 8px 16px;
// Fix for unequal widths of buttons
width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;

13
scss/ionic/_button.scss
View File

@ -4,10 +4,12 @@
margin: $button-block-margin; margin: $button-block-margin;
padding: $button-padding; padding: $button-padding;
width: 100%;
border-width: $button-border-width; border-width: 0;
border-style: solid; border-style: solid;
border-radius: $button-border-radius; border-top-width: $button-border-width;
border-bottom-width: $button-border-width;
color: $button-color; color: $button-color;
@ -116,3 +118,10 @@
a.button { a.button {
text-decoration: none; text-decoration: none;
} }
.inset .button,
.padded .button {
border-right-width: $button-border-width;
border-left-width: $button-border-width;
border-radius: $button-border-radius;
}

44
scss/ionic/_util.scss
View File

@ -3,22 +3,66 @@
display: none !important; display: none !important;
} }
// Padded
// -------------------------------
.padded { .padded {
padding: $content-padding; padding: $content-padding;
} }
.padded-top {
padding-top: $content-padding;
}
.padded-right {
padding-right: $content-padding;
}
.padded-bottom {
padding-bottom: $content-padding;
}
.padded-left {
padding-left: $content-padding;
}
.padded-2 { .padded-2 {
padding: $content-padding * 2; padding: $content-padding * 2;
} }
// Inset
// -------------------------------
.inset { .inset {
margin: $inset-margin; margin: $inset-margin;
} }
.inset-top {
margin-top: $inset-margin;
}
.inset-right {
margin-right: $inset-margin;
}
.inset-bottom {
margin-bottom: $inset-margin;
}
.inset-left {
margin-left: $inset-margin;
}
.inset-2 { .inset-2 {
margin: $inset-margin * 2; margin: $inset-margin * 2;
} }
// Rounded
// -------------------------------
.rounded { .rounded {
border-radius: $border-radius-base; border-radius: $border-radius-base;
} }

34
test/button-groups.html
View File

@ -5,33 +5,27 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet"> <link href="../dist/css/ionic.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
</head> </head>
<body> <body>
<section>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Button Group</h1> <h1 class="title">Button Group</h1>
</header> </header>
<main class="content padded has-header"> <div class="content-wrapper">
<p> <main class="content padded has-header">
<div class="button-group"> <p>
<a class="button button-primary">Success</a> <div class="button-group">
<a class="button button-primary">Warning</a> <a class="button button-primary">Success</a>
<a class="button button-primary">Danger</a> <a class="button button-primary">Warning</a>
<a class="button button-primary">Dark</a> <a class="button button-primary">Danger</a>
</div> <a class="button button-primary">Dark</a>
</p> </div>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> </p>
</main> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>
</section> </div>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body> </body>
</html> </html>

176
test/buttons.html
View File

@ -14,9 +14,99 @@
</header> </header>
<div class="content-wrapper"> <div class="content-wrapper">
<main class="content padded has-header"> <main class="content has-header">
<h3>Default (Block)</h3> <div class="padded">
<h3>Default (Block w/ parent .padded)</h3>
<p>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
</p>
<h3>Inline (.button-inline override)</h3>
<p>
<a class="button button-default button-inline">Default</a>
<a class="button button-secondary button-inline">Secondary</a>
<a class="button button-primary button-inline">Primary</a>
<a class="button button-info button-inline">Info</a>
<a class="button button-success button-inline">Success</a>
<a class="button button-warning button-inline">Warning</a>
<a class="button button-danger button-inline">Danger</a>
<a class="button button-dark button-inline">Dark</a>
</p>
<h3>Icon (Inline Default)</h3>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<h3>Icon (.button-block override)</h3>
<p>
<a class="button button-icon button-block"><i class="icon-home"></i></a>
</p>
<h3>Outline (Inline Default)</h3>
<p>
<a class="button button-default button-outline">Default</a>
<a class="button button-secondary button-outline">Secondary</a>
<a class="button button-primary button-outline">Primary</a>
<a class="button button-info button-outline">Info</a>
<a class="button button-success button-outline">Success</a>
<a class="button button-warning button-outline">Warning</a>
<a class="button button-danger button-outline">Danger</a>
<a class="button button-dark button-outline">Dark</a>
</p>
<h3>Outline (.button-block override)</h3>
<p>
<a class="button button-default button-outline button-block">Default</a>
<a class="button button-secondary button-outline button-block">Secondary</a>
<a class="button button-primary button-outline button-block">Primary</a>
<a class="button button-info button-outline button-block">Info</a>
<a class="button button-success button-outline button-block">Success</a>
<a class="button button-warning button-outline button-block">Warning</a>
<a class="button button-danger button-outline button-block">Danger</a>
<a class="button button-dark button-outline button-block">Dark</a>
</p>
<h3>Clear (Inline Default)</h3>
<p>
<a class="button button-default button-clear">Default</a>
<a class="button button-secondary button-clear">Secondary</a>
<a class="button button-primary button-clear">Primary</a>
<a class="button button-info button-clear">Info</a>
<a class="button button-success button-clear">Success</a>
<a class="button button-warning button-clear">Warning</a>
<a class="button button-danger button-clear">Danger</a>
<a class="button button-dark button-clear">Dark</a>
</p>
<h3>Clear (.button-block override)</h3>
<p>
<a class="button button-default button-clear button-block">Default</a>
<a class="button button-secondary button-clear button-block">Secondary</a>
<a class="button button-primary button-clear button-block">Primary</a>
<a class="button button-info button-clear button-block">Info</a>
<a class="button button-success button-clear button-block">Success</a>
<a class="button button-warning button-clear button-block">Warning</a>
<a class="button button-danger button-clear button-block">Danger</a>
<a class="button button-dark button-clear button-block">Dark</a>
</p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p>
</div>
<h3>Default (Block w/out padded)</h3>
<p> <p>
<a class="button button-default">Default</a> <a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a> <a class="button button-secondary">Secondary</a>
@ -28,78 +118,16 @@
<a class="button button-dark">Dark</a> <a class="button button-dark">Dark</a>
</p> </p>
<h3>Inline (.button-inline override)</h3> <h3>Default (Block w/out padded and parent .inset)</h3>
<p> <p class="inset">
<a class="button button-default button-inline">Default</a> <a class="button button-default">Default</a>
<a class="button button-secondary button-inline">Secondary</a> <a class="button button-secondary">Secondary</a>
<a class="button button-primary button-inline">Primary</a> <a class="button button-primary">Primary</a>
<a class="button button-info button-inline">Info</a> <a class="button button-info">Info</a>
<a class="button button-success button-inline">Success</a> <a class="button button-success">Success</a>
<a class="button button-warning button-inline">Warning</a> <a class="button button-warning">Warning</a>
<a class="button button-danger button-inline">Danger</a> <a class="button button-danger">Danger</a>
<a class="button button-dark button-inline">Dark</a> <a class="button button-dark">Dark</a>
</p>
<h3>Icon (Inline Default)</h3>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<h3>Icon (.button-block override)</h3>
<p>
<a class="button button-icon button-block"><i class="icon-home"></i></a>
</p>
<h3>Outline (Inline Default)</h3>
<p>
<a class="button button-default button-outline">Default</a>
<a class="button button-secondary button-outline">Secondary</a>
<a class="button button-primary button-outline">Primary</a>
<a class="button button-info button-outline">Info</a>
<a class="button button-success button-outline">Success</a>
<a class="button button-warning button-outline">Warning</a>
<a class="button button-danger button-outline">Danger</a>
<a class="button button-dark button-outline">Dark</a>
</p>
<h3>Outline (.button-block override)</h3>
<p>
<a class="button button-default button-outline button-block">Default</a>
<a class="button button-secondary button-outline button-block">Secondary</a>
<a class="button button-primary button-outline button-block">Primary</a>
<a class="button button-info button-outline button-block">Info</a>
<a class="button button-success button-outline button-block">Success</a>
<a class="button button-warning button-outline button-block">Warning</a>
<a class="button button-danger button-outline button-block">Danger</a>
<a class="button button-dark button-outline button-block">Dark</a>
</p>
<h3>Clear (Inline Default)</h3>
<p>
<a class="button button-default button-clear">Default</a>
<a class="button button-secondary button-clear">Secondary</a>
<a class="button button-primary button-clear">Primary</a>
<a class="button button-info button-clear">Info</a>
<a class="button button-success button-clear">Success</a>
<a class="button button-warning button-clear">Warning</a>
<a class="button button-danger button-clear">Danger</a>
<a class="button button-dark button-clear">Dark</a>
</p>
<h3>Clear (.button-block override)</h3>
<p>
<a class="button button-default button-clear button-block">Default</a>
<a class="button button-secondary button-clear button-block">Secondary</a>
<a class="button button-primary button-clear button-block">Primary</a>
<a class="button button-info button-clear button-block">Info</a>
<a class="button button-success button-clear button-block">Success</a>
<a class="button button-warning button-clear button-block">Warning</a>
<a class="button button-danger button-clear button-block">Danger</a>
<a class="button button-dark button-clear button-block">Dark</a>
</p>
<p>
<a class="button button-secondary" href="index.html">Homepage</a>
</p> </p>
</main> </main>