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

button icon updates

Browse Source
This commit is contained in:
Adam Bradley
2013-10-21 14:20:46 -05:00
parent 097063f4c6
commit 6b44d9e946
5 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -634,7 +634,8 @@ address {
.bar .title + .buttons { .bar .title + .buttons {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; } right: 5px;
bottom: 5px; }
.bar-default .button { .bar-default .button {
color: #333333; color: #333333;
@ -774,11 +775,14 @@ address {
.bar [class^="icon-"], .bar [class^="icon-"],
.bar [class*=" icon-"] { .bar [class*=" icon-"] {
font-size: 24px; } font-size: 20px; }
.bar .button-icon { .bar .button-icon {
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; } background-color: transparent; }
.bar .button-icon [class^="icon-"],
.bar .button-icon [class*=" icon-"] {
font-size: 24px; }
.bar-header { .bar-header {
top: 0; } top: 0; }

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

@ -1402,7 +1402,8 @@
.ionic .bar .title + .buttons { .ionic .bar .title + .buttons {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; } right: 5px;
bottom: 5px; }
.ionic .bar-default .button { .ionic .bar-default .button {
color: #333333; color: #333333;
background-color: white; background-color: white;
@ -1533,10 +1534,13 @@
font-size: 17px; } font-size: 17px; }
.ionic .bar [class^="icon-"], .ionic .bar [class^="icon-"],
.ionic .bar [class*=" icon-"] { .ionic .bar [class*=" icon-"] {
font-size: 24px; } font-size: 20px; }
.ionic .bar .button-icon { .ionic .bar .button-icon {
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; } background-color: transparent; }
.ionic .bar .button-icon [class^="icon-"],
.ionic .bar .button-icon [class*=" icon-"] {
font-size: 24px; }
.ionic .bar-header { .ionic .bar-header {
top: 0; } top: 0; }
.ionic .bar-footer { .ionic .bar-footer {

8
dist/css/ionic.css vendored
View File

@ -1743,7 +1743,8 @@ address {
.bar .title + .buttons { .bar .title + .buttons {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; } right: 5px;
bottom: 5px; }
.bar-default .button { .bar-default .button {
color: #333333; color: #333333;
@ -1883,11 +1884,14 @@ address {
.bar [class^="icon-"], .bar [class^="icon-"],
.bar [class*=" icon-"] { .bar [class*=" icon-"] {
font-size: 24px; } font-size: 20px; }
.bar .button-icon { .bar .button-icon {
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; } background-color: transparent; }
.bar .button-icon [class^="icon-"],
.bar .button-icon [class*=" icon-"] {
font-size: 24px; }
.bar-header { .bar-header {
top: 0; } top: 0; }

8
scss/ionic/_bar.scss
View File

@ -117,6 +117,7 @@
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px;
} }
} }
@ -177,12 +178,17 @@
.bar [class^="icon-"], .bar [class^="icon-"],
.bar [class*=" icon-"] { .bar [class*=" icon-"] {
font-size: 24px; font-size: 20px;
} }
.bar .button-icon { .bar .button-icon {
border: $button-border-width solid transparent; border: $button-border-width solid transparent;
background-color: transparent; background-color: transparent;
[class^="icon-"],
[class*=" icon-"] {
font-size: 24px;
}
} }
// Header at top // Header at top

10
test/headers.html
View File

@ -21,7 +21,7 @@
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<a class="button">Back</a> <a class="button">Back</a>
<h1 class="title">Really really really really really really really really long title!</h1> <h1 class="title">Really really really really really really really really long title!</h1>
<a class="button"><i class="icon-home"></i></a> <a class="button"><i class="icon-home"></i> Home</a>
</header> </header>
<div class="bar bar-header-secondary bar-success"> <div class="bar bar-header-secondary bar-success">
<div class="button-bar"> <div class="button-bar">
@ -31,13 +31,17 @@
</div> </div>
</div> </div>
<header class="bar bar-header bar-default"> <header class="bar bar-header bar-default">
<a class="button button-icon"><i class="icon-home"></i></a> <a class="button button-icon">
<i class="icon-home"></i> Home
</a>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>
<a class="button">Warning</a> <a class="button">Warning</a>
<a class="button">Danger</a> <a class="button">Danger</a>
</div> </div>
<a class="button">This</a> <a class="button">
<i class="icon-star"></i>
</a>
</header> </header>
<div class="bar bar-header bar-default"> <div class="bar bar-header bar-default">
<div class="button-bar"> <div class="button-bar">