mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
item buttons
This commit is contained in:
Adam Bradley
56
dist/css/ionic-ios7.css
vendored
56
dist/css/ionic-ios7.css
vendored
@ -1245,6 +1245,58 @@ button.item:active,
|
||||
.item.active {
|
||||
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,
|
||||
button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
@ -1275,7 +1327,9 @@ button.item:after {
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
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; }
|
||||
|
||||
.item-avatar {
|
||||
|
||||
52
dist/css/ionic-scoped.css
vendored
52
dist/css/ionic-scoped.css
vendored
@ -2125,6 +2125,54 @@
|
||||
.ionic button.item:active,
|
||||
.ionic .item.active {
|
||||
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 button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
@ -2154,7 +2202,9 @@
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
.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; }
|
||||
.ionic .item-avatar {
|
||||
padding-left: 70px;
|
||||
|
||||
56
dist/css/ionic.css
vendored
56
dist/css/ionic.css
vendored
@ -2648,6 +2648,58 @@ button.item:active,
|
||||
.item.active {
|
||||
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,
|
||||
button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
@ -2678,7 +2730,9 @@ button.item:after {
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
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; }
|
||||
|
||||
.item-avatar {
|
||||
|
||||
@ -225,6 +225,56 @@ button.item:active,
|
||||
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,
|
||||
button.item:after {
|
||||
/* 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
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -53,12 +53,19 @@
|
||||
<span class="badge badge-info">5</span>
|
||||
</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>
|
||||
Call Ma
|
||||
<span class="item-note">
|
||||
Cell
|
||||
</span>
|
||||
<button class="button button-success">
|
||||
<i class="icon-ios7-telephone"></i>
|
||||
</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 href="#" class="item item-icon-left">
|
||||
|
||||
Reference in New Issue
Block a user