-
+
+ Sasafras
+
+
+
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 {