mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
List view and some structure vars
This commit is contained in:
Max Lynch
94
dist/framework-with-theme.css
vendored
94
dist/framework-with-theme.css
vendored
@ -14,6 +14,30 @@ body {
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
|
||||
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
|
||||
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
|
||||
.content > * {
|
||||
-webkit-transform: translateZ(0px);
|
||||
transform: translateZ(0px); }
|
||||
|
||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
Note: For these to work, content must come after both bars in the markup */
|
||||
.bar ~ .content {
|
||||
top: 44px; }
|
||||
|
||||
.bar ~ .content {
|
||||
bottom: 51px; }
|
||||
|
||||
.bar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -23,17 +47,40 @@ a {
|
||||
display: box;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
/*
|
||||
.title + .button:last-child,
|
||||
.button + .button:last-child,
|
||||
.button.pull-right {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
*/ }
|
||||
.bar .title {
|
||||
/*
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
*/
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 15px 0px;
|
||||
text-align: center;
|
||||
white-space: nowrap; }
|
||||
white-space: nowrap;
|
||||
font-size: 18px;
|
||||
-webkit-box-flex: 3;
|
||||
-moz-box-flex: 3;
|
||||
box-flex: 3; }
|
||||
.bar .title a {
|
||||
color: inherit; }
|
||||
.bar .button {
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
box-flex: 0; }
|
||||
|
||||
.bar-header {
|
||||
top: 0; }
|
||||
@ -49,13 +96,50 @@ a {
|
||||
cursor: pointer;
|
||||
margin: 0; }
|
||||
|
||||
.list {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0; }
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #dddddd; }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
.list-item > .badge {
|
||||
float: right; }
|
||||
.list-item > i {
|
||||
float: right; }
|
||||
.list-item > .badge + .badge {
|
||||
margin-right: 5px; }
|
||||
.list-item.active, .list-item.active:hover, .list-item.active:focus {
|
||||
z-index: 2; }
|
||||
.list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
|
||||
color: inherit; }
|
||||
|
||||
a.list-item:hover, a.list-item:focus {
|
||||
text-decoration: none; }
|
||||
|
||||
.list-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px; }
|
||||
|
||||
.list-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3; }
|
||||
|
||||
.bar {
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding: 10px; }
|
||||
padding: 10px;
|
||||
/*
|
||||
Disabled temporarily because it's annoying for testing.
|
||||
@media screen and (orientation : landscape) {
|
||||
.bar {
|
||||
padding: 5px; } }
|
||||
padding: $barPaddingLandscape;
|
||||
}
|
||||
*/ }
|
||||
.bar.bar-default {
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #dddddd; }
|
||||
|
||||
3
example/app.css
Normal file
3
example/app.css
Normal file
@ -0,0 +1,3 @@
|
||||
a {
|
||||
color: #222;
|
||||
}
|
||||
@ -21,16 +21,28 @@
|
||||
<link rel="stylesheet" href="../dist/framework-with-theme.css">
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
|
||||
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body ontouchstart="">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<a class="button-prev" href="#">
|
||||
<a class="button button-previous" href="#">
|
||||
<i class="icon-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="title">Willkommen!</h1>
|
||||
<a class="button button-next" href="#">
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</header>
|
||||
<div class="content">
|
||||
<ul class="list">
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
<p>
|
||||
Here is some content
|
||||
</p>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
// Components
|
||||
@import
|
||||
"framework/structure/variables",
|
||||
"framework/structure/base",
|
||||
"framework/structure/bar",
|
||||
"framework/structure/button",
|
||||
|
||||
@ -13,21 +13,52 @@
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
height: $barHeight;
|
||||
|
||||
// Title inside of a bar is centered
|
||||
.title {
|
||||
/*
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
*/
|
||||
|
||||
line-height: $barTitleLineHeightComputed;
|
||||
|
||||
margin: 0;
|
||||
padding: $barPaddingVertical 0px;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: $barTitleFontSize;
|
||||
|
||||
-webkit-box-flex: 3;
|
||||
-moz-box-flex: 3;
|
||||
box-flex: 3;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.button {
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
box-flex: 0;
|
||||
}
|
||||
|
||||
// Place the last button in a bar on the right of the bar
|
||||
/*
|
||||
.title + .button:last-child,
|
||||
.button + .button:last-child,
|
||||
.button.pull-right {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -18,3 +18,31 @@ body {
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
|
||||
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
|
||||
.content > * {
|
||||
-webkit-transform: translateZ(0px);
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
Note: For these to work, content must come after both bars in the markup */
|
||||
.bar ~ .content {
|
||||
top: 44px;
|
||||
}
|
||||
.bar ~ .content {
|
||||
bottom: 51px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
.list {
|
||||
// No need to set list-style: none; since .list-item is block level
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
}
|
||||
|
||||
// Individual list items
|
||||
// -------------------------
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -1px;
|
||||
|
||||
//background-color: $list-group-bg;
|
||||
border: $listItemBorder;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
//@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
//@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
// Align badges within list items
|
||||
> .badge {
|
||||
float: right;
|
||||
}
|
||||
|
||||
> i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
> .badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
// [converter] extracted a& to a.list-item
|
||||
|
||||
// Active class on item itself, not parent
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
//color: $list-group-active-color;
|
||||
//background-color: $list-group-active-bg;
|
||||
//border-color: $list-group-active-border;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-item-text {
|
||||
//color: lighten($list-group-active-bg, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Linked list items
|
||||
a.list-item {
|
||||
//color: $list-group-link-color;
|
||||
|
||||
.list-item-heading {
|
||||
//color: $list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
//background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom content options
|
||||
// -------------------------
|
||||
|
||||
.list-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
21
scss/framework/structure/_variables.scss
Normal file
21
scss/framework/structure/_variables.scss
Normal file
@ -0,0 +1,21 @@
|
||||
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
||||
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
|
||||
$baseFontSize: 14px !default;
|
||||
$baseFontFamily: $sansFontFamily;
|
||||
|
||||
$fontSizeLarge: ceil($baseFontSize * 1.25);
|
||||
|
||||
$baseLineHeight: 1.428571429; // 20/14
|
||||
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
||||
|
||||
$barHeight: 50px !default;
|
||||
$barLineHeight: 50px !default;
|
||||
$barTitleFontSize: $fontSizeLarge;
|
||||
$barTitleLineHeightComputed: $baseLineHeightComputed;
|
||||
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
|
||||
|
||||
|
||||
// Lists
|
||||
$listItemBorder: 1px solid #ddd;
|
||||
@ -4,9 +4,12 @@
|
||||
|
||||
padding: $barPaddingPortrait;
|
||||
|
||||
/*
|
||||
Disabled temporarily because it's annoying for testing.
|
||||
@media screen and (orientation : landscape) {
|
||||
padding: $barPaddingLandscape;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
&.bar-default {
|
||||
|
||||
Reference in New Issue
Block a user