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

Some more bar styles

Browse Source
This commit is contained in:
Max Lynch
2013-08-23 14:07:29 -05:00
parent 4586851e42
commit fc645bfa8d
5 changed files with 122 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
dist/framework-with-theme.css vendored
View File

@ -14,6 +14,33 @@ body {
a { a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.bar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
box-sizing: border-box; }
.bar .title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
text-align: center;
white-space: nowrap; }
.bar .title a {
color: inherit; }
.bar-header {
top: 0; }
.bar-footer {
bottom: 0; }
.button { .button {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -22,6 +49,20 @@ a {
cursor: pointer; cursor: pointer;
margin: 0; } margin: 0; }
.bar {
background-color: white;
border-bottom: 1px solid #dddddd;
padding: 10px; }
@media screen and (orientation: landscape) {
.bar {
padding: 5px; } }
.bar.bar-default {
background-color: white;
border-bottom: 1px solid #dddddd; }
.bar.bar-secondary {
background-color: whitesmoke;
border-bottom: 1px solid #cccccc; }
.button { .button {
color: #222222; color: #222222;
border-radius: 2px; border-radius: 2px;

4
example/index.html
View File

@ -22,7 +22,7 @@
<script src="app.js"></script> <script src="app.js"></script>
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
<header class="bar-header"> <header class="bar bar-header bar-secondary">
<a class="button-prev" href="#"> <a class="button-prev" href="#">
Previous Previous
</a> </a>
@ -36,7 +36,7 @@
<form> <form>
</form> </form>
</div> </div>
<footer class="bar-footer"> <footer class="bar bar-footer">
</footer> </footer>
</body> </body>
</html> </html>

43
scss/framework/structure/_bar.scss
View File

@ -1,3 +1,44 @@
.bar {
// Use Flexbox for our header and footer bars
.bar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
box-sizing: border-box;
// Title inside of a bar is centered
.title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
text-align: center;
white-space: nowrap;
} }
.title a {
color: inherit;
}
}
// Header at top
.bar-header {
top: 0;
}
// Footer at bottom
.bar-footer {
bottom: 0;
}

20
scss/framework/theme/default/_bar.scss
View File

@ -0,0 +1,20 @@
.bar {
background-color: $barBackground;
border-bottom: $barBorderBottom;
padding: $barPaddingPortrait;
@media screen and (orientation : landscape) {
padding: $barPaddingLandscape;
}
&.bar-default {
background-color: $barDefaultBackground;
border-bottom: $barDefaultBorderBottom;
}
&.bar-secondary {
background-color: $barSecondaryBackground;
border-bottom: $barSecondaryBorderBottom;
}
}

16
scss/framework/theme/default/_variables.scss
View File

@ -1,3 +1,4 @@
//
// Buttons // Buttons
$buttonColor: #222; $buttonColor: #222;
$buttonPadding: 10px 10px; $buttonPadding: 10px 10px;
@ -8,3 +9,18 @@ $buttonDefaultBackground: #fff;
$buttonDefaultBackgroundActive: #eee; $buttonDefaultBackgroundActive: #eee;
$buttonDefaultBorder: #ddd; $buttonDefaultBorder: #ddd;
//
// Bars
$barPaddingPortrait: 10px;
$barPaddingLandscape : 5px;
$barBackground: white;
$barBorderBottom: 1px solid #ddd;
// Bar variations
$barDefaultBackground: #fff;
$barDefaultBorderBottom: 1px solid #ddd;
$barSecondaryBackground: #f5f5f5;
$barSecondaryBorderBottom: 1px solid #ccc;