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

item buttons

Browse Source
This commit is contained in:
Adam Bradley
2013-11-04 08:34:59 -06:00
parent e8bd9a5dee
commit bd0d298720
5 changed files with 225 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1245,6 +1245,58 @@ button.item:active,
.item.active { .item.active {
background-color: #F7F7F7; } background-color: #F7F7F7; }
.item-button-left {
padding-left: 75px; }
.item-button-left > .button,
.item-button-left .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
left: 7.5px;
font-size: 32px;
min-height: 32px; }
.item-button-left > .button i,
.item-button-left .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
.item-button-right {
padding-right: 75px; }
.item-button-right > .button,
.item-button-right .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
right: 15px;
font-size: 32px;
min-height: 32px; }
.item-button-right > .button i,
.item-button-right .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
a.item:after, a.item:after,
button.item:after { button.item:after {
/* By default, both <a> and <button> have right side arrow icons */ /* By default, both <a> and <button> have right side arrow icons */
@ -1275,7 +1327,9 @@ button.item:after {
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
a.item-icon-right:after, a.item-icon-right:after,
button.item-icon-right:after { button.item-icon-right:after,
a.item-button-right:after,
button.item-button-right:after {
display: none; } display: none; }
.item-avatar { .item-avatar {

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

@ -2125,6 +2125,54 @@
.ionic button.item:active, .ionic button.item:active,
.ionic .item.active { .ionic .item.active {
background-color: #F7F7F7; } background-color: #F7F7F7; }
.ionic .item-button-left {
padding-left: 75px; }
.ionic .item-button-left > .button,
.ionic .item-button-left .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
left: 7.5px;
font-size: 32px;
min-height: 32px; }
.ionic .item-button-left > .button i,
.ionic .item-button-left .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
.ionic .item-button-right {
padding-right: 75px; }
.ionic .item-button-right > .button,
.ionic .item-button-right .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
right: 15px;
font-size: 32px;
min-height: 32px; }
.ionic .item-button-right > .button i,
.ionic .item-button-right .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
.ionic a.item:after, .ionic a.item:after,
.ionic button.item:after { .ionic button.item:after {
/* By default, both <a> and <button> have right side arrow icons */ /* By default, both <a> and <button> have right side arrow icons */
@ -2154,7 +2202,9 @@
speak: none; speak: none;
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
.ionic a.item-icon-right:after, .ionic a.item-icon-right:after,
.ionic button.item-icon-right:after { .ionic button.item-icon-right:after,
.ionic a.item-button-right:after,
.ionic button.item-button-right:after {
display: none; } display: none; }
.ionic .item-avatar { .ionic .item-avatar {
padding-left: 70px; padding-left: 70px;

56
dist/css/ionic.css vendored
View File

@ -2648,6 +2648,58 @@ button.item:active,
.item.active { .item.active {
background-color: #F7F7F7; } background-color: #F7F7F7; }
.item-button-left {
padding-left: 75px; }
.item-button-left > .button,
.item-button-left .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
left: 7.5px;
font-size: 32px;
min-height: 32px; }
.item-button-left > .button i,
.item-button-left .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
.item-button-right {
padding-right: 75px; }
.item-button-right > .button,
.item-button-right .item-content > .button {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 7.5px;
right: 15px;
font-size: 32px;
min-height: 32px; }
.item-button-right > .button i,
.item-button-right .item-content > .button i {
position: relative;
line-height: 31px;
left: auto; }
a.item:after, a.item:after,
button.item:after { button.item:after {
/* By default, both <a> and <button> have right side arrow icons */ /* By default, both <a> and <button> have right side arrow icons */
@ -2678,7 +2730,9 @@ button.item:after {
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
a.item-icon-right:after, a.item-icon-right:after,
button.item-icon-right:after { button.item-icon-right:after,
a.item-button-right:after,
button.item-button-right:after {
display: none; } display: none; }
.item-avatar { .item-avatar {

54
scss/ionic/_items.scss
View File

@ -225,6 +225,56 @@ button.item:active,
background-color: #F7F7F7; background-color: #F7F7F7;
} }
// Item Button
// -------------------------------
.item-button-left {
padding-left: $item-padding * 5;
}
.item-button-left > .button,
.item-button-left .item-content > .button {
@include display-flex();
@include align-items(center);
position: absolute;
top: $item-padding / 2;
left: $item-padding / 2;
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
}
}
.item-button-right {
padding-right: $item-padding * 5;
}
.item-button-right > .button,
.item-button-right .item-content > .button {
@include display-flex();
@include align-items(center);
position: absolute;
top: $item-padding / 2;
right: $item-padding;
font-size: $item-icon-font-size;
min-height: $item-icon-font-size;
i {
position: relative;
line-height: $item-icon-font-size - 1;
left: auto;
}
}
// Auto Right Arrow Icon
// -------------------------------
a.item:after, a.item:after,
button.item:after { button.item:after {
/* By default, both <a> and <button> have right side arrow icons */ /* By default, both <a> and <button> have right side arrow icons */
@ -249,7 +299,9 @@ button.item:after {
// do not show the default right arrow when they want their own right side icon // do not show the default right arrow when they want their own right side icon
a.item-icon-right:after, a.item-icon-right:after,
button.item-icon-right:after { button.item-icon-right:after,
a.item-button-right:after,
button.item-button-right:after {
display: none; display: none;
} }

15
test/lists.html
View File

@ -53,12 +53,19 @@
<span class="badge badge-info">5</span> <span class="badge badge-info">5</span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left item-button-right">
<i class="icon-chatbubble-working icon-primary"></i> <i class="icon-chatbubble-working icon-primary"></i>
Call Ma Call Ma
<span class="item-note"> <button class="button button-success">
Cell <i class="icon-ios7-telephone"></i>
</span> </button>
</a>
<a href="#" class="item item-button-left">
<button class="button button-success">
<i class="icon-ios7-telephone"></i>
</button>
Me Button
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">