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

Small header tweak

Browse Source
This commit is contained in:
Max Lynch
2013-09-09 12:09:22 -05:00
parent bcaef572fe
commit 2d14bdc2f7
3 changed files with 9 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
dist/ionic.css vendored
View File

@ -114,6 +114,8 @@ ul {
left: 0;
line-height: 44px;
margin: 0;
min-width: 30px;
text-overflow: ellipsis;
text-align: center;
white-space: nowrap;
font-size: 18px; }
@ -1112,160 +1114,6 @@ a.list-item {
-moz-transition: -moz-transform 200ms ease;
transition: transform 200ms ease; }
.panel {
margin-bottom: 20px;
background-color: white;
border: 1px solid transparent;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
.panel-body {
padding: 15px;
*zoom: 1; }
.panel-body:before, .panel-body:after {
display: table;
content: "";
line-height: 0; }
.panel-body:after {
clear: both; }
.panel > .list-group {
margin-bottom: 0; }
.panel > .list-group .list-group-item {
border-width: 1px 0; }
.panel > .list-group .list-group-item:first-child {
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0; }
.panel > .list-group .list-group-item:last-child {
border-bottom: 0; }
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0; }
.panel {
/*
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
*/ }
.panel > .table {
margin-bottom: 0; }
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topright: 1px;
border-top-right-radius: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topleft: 1px;
border-top-left-radius: 1px; }
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px; }
.panel-title > a {
color: inherit; }
.panel-footer {
padding: 10px 15px;
background-color: whitesmoke;
border-top: 1px solid #dddddd;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomright: 1px;
border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-left-radius: 1px; }
.panel-group .panel {
margin-bottom: 0;
border-radius: 2px;
overflow: hidden; }
.panel-group .panel + .panel {
margin-top: 5px; }
.panel-group .panel-heading {
border-bottom: 0; }
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd; }
.panel-group .panel-footer {
border-top: 0; }
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd; }
.panel-default {
border-color: #dddddd; }
.panel-default > .panel-heading {
color: #333333;
background-color: whitesmoke;
border-color: #dddddd; }
.panel-default > .panel-heading + .panel-collapse .panel-body {
border-top-color: #dddddd; }
.panel-default > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #dddddd; }
.panel-primary {
border-color: #428bca; }
.panel-primary > .panel-heading {
color: white;
background-color: #428bca;
border-color: #428bca; }
.panel-primary > .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca; }
.panel-primary > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca; }
.panel-success {
border-color: #5cb85c; }
.panel-success > .panel-heading {
color: white;
background-color: #5cb85c;
border-color: #5cb85c; }
.panel-success > .panel-heading + .panel-collapse .panel-body {
border-top-color: #5cb85c; }
.panel-success > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #5cb85c; }
.panel-warning {
border-color: #f0ad4e; }
.panel-warning > .panel-heading {
color: white;
background-color: #f0ad4e;
border-color: #f0ad4e; }
.panel-warning > .panel-heading + .panel-collapse .panel-body {
border-top-color: #f0ad4e; }
.panel-warning > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #f0ad4e; }
.panel-danger {
border-color: #d9534f; }
.panel-danger > .panel-heading {
color: white;
background-color: #d9534f;
border-color: #d9534f; }
.panel-danger > .panel-heading + .panel-collapse .panel-body {
border-top-color: #d9534f; }
.panel-danger > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d9534f; }
.panel-info {
border-color: #5bc0de; }
.panel-info > .panel-heading {
color: white;
background-color: #5bc0de;
border-color: #5bc0de; }
.panel-info > .panel-heading + .panel-collapse .panel-body {
border-top-color: #5bc0de; }
.panel-info > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #5bc0de; }
.ptr-capable {
-webkit-user-drag: element; }

4
example/headers.html
View File

@ -18,9 +18,9 @@
<a class="button button-clear">Back</a>
<a class="button button-clear">This</a>
</div>
<h1 class="title">Life Choices</h1>
<h1 class="title">Really really really really really really really really long title!</h1>
<div class="buttons">
<a class="button button-success">Forward</a>
<a class="button">Forward</a>
</div>
</header>
<div class="bar bar-header-secondary bar-dark">

5
scss/ionic/structure/_bar.scss
View File

@ -29,6 +29,11 @@
margin: 0;
//padding: $barPaddingVertical 0px;
min-width: 30px;
// Go into ellipsis if too small
text-overflow: ellipsis;
text-align: center;
white-space: nowrap;
font-size: $barTitleFontSize;