diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index 732c1fe6ed..9019db9800 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -14,6 +14,10 @@ body { a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } +ul { + margin: 0; + padding: 0; } + .content { position: fixed; top: 0; @@ -30,14 +34,6 @@ a { -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; @@ -88,6 +84,14 @@ a { .bar-footer { bottom: 0; } +/* 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: 50px; } + +.bar ~ .content { + bottom: 51px; } + .button { position: relative; display: inline-block; @@ -110,7 +114,7 @@ a { margin-bottom: 0; } .list-item > .badge { float: right; } - .list-item > i { + .list-item > i:last-child { float: right; } .list-item > .badge + .badge { margin-right: 5px; } @@ -122,6 +126,9 @@ a { a.list-item:hover, a.list-item:focus { text-decoration: none; } +.list-divider { + padding: 5px 15px; } + .list-item-heading { margin-top: 0; margin-bottom: 5px; } @@ -157,3 +164,8 @@ a.list-item:hover, a.list-item:focus { border: 1px solid #dddddd; } .button-default:active { background-color: #eeeeee; } + +.list-divider { + background-color: whitesmoke; + color: #222222; + font-weight: bold; } diff --git a/example/index.html b/example/index.html index 70c395cf10..8d516f347c 100644 --- a/example/index.html +++ b/example/index.html @@ -42,6 +42,15 @@ Sasafras + + Candy + + +
Here is some content diff --git a/scss/framework/structure/_bar.scss b/scss/framework/structure/_bar.scss index 3ed1edb831..da2e70ae04 100644 --- a/scss/framework/structure/_bar.scss +++ b/scss/framework/structure/_bar.scss @@ -73,3 +73,11 @@ } +/* 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: $barHeight; +} +.bar ~ .content { + bottom: 51px; +} diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss index 3b9f80dc5c..5f71244745 100644 --- a/scss/framework/structure/_base.scss +++ b/scss/framework/structure/_base.scss @@ -19,6 +19,8 @@ a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } +ul { margin: 0; padding: 0; } + .content { position: fixed; top: 0; @@ -37,12 +39,3 @@ a { -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; -} diff --git a/scss/framework/structure/_listview.scss b/scss/framework/structure/_listview.scss index 361efeda5d..1f1a8c27b5 100644 --- a/scss/framework/structure/_listview.scss +++ b/scss/framework/structure/_listview.scss @@ -31,7 +31,8 @@ float: right; } - > i { + // Align icons to the right + > i:last-child { float: right; } @@ -76,6 +77,10 @@ a.list-item { } } +.list-divider { + padding: 5px 15px; +} + // Custom content options // ------------------------- @@ -86,4 +91,4 @@ a.list-item { .list-item-text { margin-bottom: 0; line-height: 1.3; -} \ No newline at end of file +} diff --git a/scss/framework/theme/default/_listview.scss b/scss/framework/theme/default/_listview.scss index e69de29bb2..afb725c2b0 100644 --- a/scss/framework/theme/default/_listview.scss +++ b/scss/framework/theme/default/_listview.scss @@ -0,0 +1,5 @@ +.list-divider { + background-color: $listDividerBackground; + color: $listDividerColor; + font-weight: bold; +} diff --git a/scss/framework/theme/default/_variables.scss b/scss/framework/theme/default/_variables.scss index 89b20068a3..6adaab2e69 100644 --- a/scss/framework/theme/default/_variables.scss +++ b/scss/framework/theme/default/_variables.scss @@ -23,4 +23,11 @@ $barDefaultBackground: #fff; $barDefaultBorderBottom: 1px solid #ddd; $barSecondaryBackground: #f5f5f5; -$barSecondaryBorderBottom: 1px solid #ccc; \ No newline at end of file +$barSecondaryBorderBottom: 1px solid #ccc; + +// +// Lists +$listDividerBackground: #f5f5f5; +$listDividerColor: #222; + +