From 246f33e56880eb16d62951b81065ee786a6b16b1 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 23 Aug 2013 15:57:32 -0500 Subject: [PATCH] List view and some structure vars --- dist/framework-with-theme.css | 96 ++++++++++++++++++++++-- example/app.css | 3 + example/index.html | 14 +++- scss/framework-structure.scss | 1 + scss/framework/structure/_bar.scss | 31 ++++++++ scss/framework/structure/_base.scss | 30 +++++++- scss/framework/structure/_listview.scss | 89 ++++++++++++++++++++++ scss/framework/structure/_variables.scss | 21 ++++++ scss/framework/theme/default/_bar.scss | 3 + 9 files changed, 280 insertions(+), 8 deletions(-) create mode 100644 example/app.css create mode 100644 scss/framework/structure/_variables.scss diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index 8558babe0b..732c1fe6ed 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -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; } - @media screen and (orientation: landscape) { - .bar { - padding: 5px; } } + padding: 10px; + /* + Disabled temporarily because it's annoying for testing. + @media screen and (orientation : landscape) { + padding: $barPaddingLandscape; + } + */ } .bar.bar-default { background-color: white; border-bottom: 1px solid #dddddd; } diff --git a/example/app.css b/example/app.css new file mode 100644 index 0000000000..11717a8b04 --- /dev/null +++ b/example/app.css @@ -0,0 +1,3 @@ +a { + color: #222; +} \ No newline at end of file diff --git a/example/index.html b/example/index.html index 881180be5e..70c395cf10 100644 --- a/example/index.html +++ b/example/index.html @@ -21,16 +21,28 @@ + + +
- +

Willkommen!

+ + +
+

Here is some content

diff --git a/scss/framework-structure.scss b/scss/framework-structure.scss index d4d51e9b6f..dafb8e75d5 100755 --- a/scss/framework-structure.scss +++ b/scss/framework-structure.scss @@ -3,6 +3,7 @@ // Components @import + "framework/structure/variables", "framework/structure/base", "framework/structure/bar", "framework/structure/button", diff --git a/scss/framework/structure/_bar.scss b/scss/framework/structure/_bar.scss index 68e50e4693..3ed1edb831 100644 --- a/scss/framework/structure/_bar.scss +++ b/scss/framework/structure/_bar.scss @@ -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; + } + */ } diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss index f1bd980f75..3b9f80dc5c 100644 --- a/scss/framework/structure/_base.scss +++ b/scss/framework/structure/_base.scss @@ -17,4 +17,32 @@ body { // Remove tap highlight color on Safari a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} \ No newline at end of file +} + +.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; +} diff --git a/scss/framework/structure/_listview.scss b/scss/framework/structure/_listview.scss index e69de29bb2..361efeda5d 100644 --- a/scss/framework/structure/_listview.scss +++ b/scss/framework/structure/_listview.scss @@ -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; +} \ No newline at end of file diff --git a/scss/framework/structure/_variables.scss b/scss/framework/structure/_variables.scss new file mode 100644 index 0000000000..d628dc9fff --- /dev/null +++ b/scss/framework/structure/_variables.scss @@ -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; diff --git a/scss/framework/theme/default/_bar.scss b/scss/framework/theme/default/_bar.scss index d97cb8ba3e..32670f9808 100644 --- a/scss/framework/theme/default/_bar.scss +++ b/scss/framework/theme/default/_bar.scss @@ -4,9 +4,12 @@ padding: $barPaddingPortrait; + /* + Disabled temporarily because it's annoying for testing. @media screen and (orientation : landscape) { padding: $barPaddingLandscape; } + */ &.bar-default {