From 8a8dab259804d148f8848bfd06b2b94e4e5934b0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 26 Aug 2013 15:46:03 -0500 Subject: [PATCH] re-order base css --- dist/framework.css | 263 ++++++++++++----------- scss/framework-structure.scss | 3 +- scss/framework-theme.scss | 2 + scss/framework/_structure-variables.scss | 1 - scss/framework/_theme-variables.scss | 7 +- scss/framework/structure/_bar.scss | 1 + scss/framework/structure/_base.scss | 3 - scss/framework/theme/_base.scss | 10 + 8 files changed, 156 insertions(+), 134 deletions(-) create mode 100644 scss/framework/theme/_base.scss diff --git a/dist/framework.css b/dist/framework.css index 7ad8cdba98..7b74c9c8dd 100644 --- a/dist/framework.css +++ b/dist/framework.css @@ -1,27 +1,4 @@ @charset "UTF-8"; -.alert { - padding: 8px 35px 8px 14px; } - -.alert h4 { - margin: 0; } - -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: 1.42857; } - -.alert-block { - padding-top: 14px; - padding-bottom: 14px; } - -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; } - -.alert-block p + p { - margin-top: 5px; } - html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } @@ -32,8 +9,7 @@ body { right: 0; bottom: 0; left: 0; - margin: 0; - font: 14px/1.25 "Helvetica Neue", sans-serif; } + margin: 0; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -59,7 +35,6 @@ main { 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 @@ -71,59 +46,35 @@ main > * { .content-padded { padding: 10px; } -.ptr-capable { - -webkit-user-drag: element; } +.alert { + padding: 8px 35px 8px 14px; } -.ptr-content { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; - height: 0; } - -.ptr-content .pulling { - display: none; } - -.ptr-content .refreshing { - display: none; } - -/* the page content the panel should move around */ -.panel-page-container { - left: 100px; } - -/* the container of panel content to show */ -.panel-content { - width: 17em; - min-height: 100%; - max-height: 100%; - border-width: 0; - position: absolute; - top: 0; - display: block; } - -.panel-reveal { - z-index: 0; - left: -17em; } - -.button { - position: relative; - display: block; - vertical-align: middle; - text-align: center; - cursor: pointer; +.alert h4 { margin: 0; } - .button.button-inline { - display: inline-block; } - .button.button-borderless { - border: none; } + +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: 1.42857; } + +.alert-block { + padding-top: 14px; + padding-bottom: 14px; } + +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; } + +.alert-block p + p { + margin-top: 5px; } .bar { position: fixed; right: 0; left: 0; z-index: 10; + width: 100%; display: -webkit-box; display: box; -webkit-box-orient: horizontal; @@ -177,52 +128,17 @@ main > * { .has-footer { bottom: 44px; } -/* Bar docked to bottom used for primary app navigation */ -.tabs { - right: 0; - left: 0; - bottom: 0; - height: 50px; - padding: 0; - box-sizing: border-box; - position: fixed; } - -.tabs-inner { - display: -webkit-box; - display: box; - height: 100%; - list-style: none; - -webkit-box-orient: horizontal; - box-orient: horizontal; } - -/* Navigational tab */ -.tab-item { - height: 100%; - text-align: center; - box-sizing: border-box; - -webkit-box-flex: 1; - box-flex: 1; } - .tab-item a { - text-decoration: none; - display: block; - width: 100%; - height: 100%; } - -/* Active state for tab */ -.tab-item.active, .tab-item:active { - background-color: rgba(0, 0, 0, 0.2); } - -/* Icon for tab */ -.tab-item i { +.button { + position: relative; display: block; - margin: 0 auto; } - -/* Label for tab */ -.tab-label { - margin-top: 1px; - font-size: 10px; - font-weight: bold; - color: #fff; } + vertical-align: middle; + text-align: center; + cursor: pointer; + margin: 0; } + .button.button-inline { + display: inline-block; } + .button.button-borderless { + border: none; } .button-group { position: relative; @@ -309,6 +225,97 @@ a.list-item { margin-bottom: 0; line-height: 1.3; } +/* the page content the panel should move around */ +.panel-page-container { + left: 100px; } + +/* the container of panel content to show */ +.panel-content { + width: 17em; + min-height: 100%; + max-height: 100%; + border-width: 0; + position: absolute; + top: 0; + display: block; } + +.panel-reveal { + z-index: 0; + left: -17em; } + +.ptr-capable { + -webkit-user-drag: element; } + +.ptr-content { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + height: 0; } + +.ptr-content .pulling { + display: none; } + +.ptr-content .refreshing { + display: none; } + +/* Bar docked to bottom used for primary app navigation */ +.tabs { + right: 0; + left: 0; + bottom: 0; + height: 50px; + padding: 0; + box-sizing: border-box; + position: fixed; } + +.tabs-inner { + display: -webkit-box; + display: box; + height: 100%; + list-style: none; + -webkit-box-orient: horizontal; + box-orient: horizontal; } + +/* Navigational tab */ +.tab-item { + height: 100%; + text-align: center; + box-sizing: border-box; + -webkit-box-flex: 1; + box-flex: 1; } + .tab-item a { + text-decoration: none; + display: block; + width: 100%; + height: 100%; } + +/* Active state for tab */ +.tab-item.active, .tab-item:active { + background-color: rgba(0, 0, 0, 0.2); } + +/* Icon for tab */ +.tab-item i { + display: block; + margin: 0 auto; } + +/* Label for tab */ +.tab-label { + margin-top: 1px; + font-size: 10px; + font-weight: bold; + color: #fff; } + +body { + font-size: 14px; + line-height: 1.25; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } + +main { + background-color: white; } + .alert { margin-bottom: 1.42857; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); @@ -408,16 +415,6 @@ a.list-item { .bar.bar-dark .tab-item a { color: white; } -.tabs { - font-size: 16px; - height: 60px; } - -.tab-item a { - font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 200; } -.tab-item i { - font-size: 25px; } - .button { color: #222222; border-radius: 2px; @@ -529,8 +526,18 @@ a.list-item { a.list-item { color: #333333; } +.panel-content { + background: #eeeeee; } + .ptr-content { background: #eee; } -.panel-content { - background: #eeeeee; } +.tabs { + font-size: 16px; + height: 60px; } + +.tab-item a { + font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 200; } +.tab-item i { + font-size: 25px; } diff --git a/scss/framework-structure.scss b/scss/framework-structure.scss index 942241b1b1..c5a061f526 100755 --- a/scss/framework-structure.scss +++ b/scss/framework-structure.scss @@ -6,9 +6,10 @@ "framework/structure-variables", "framework/structure/mixins", + "framework/structure/base", + "framework/structure/alerts", "framework/structure/bar", - "framework/structure/base", "framework/structure/button", "framework/structure/button-group", "framework/structure/form", diff --git a/scss/framework-theme.scss b/scss/framework-theme.scss index 6a1839675a..d08529b5c2 100755 --- a/scss/framework-theme.scss +++ b/scss/framework-theme.scss @@ -5,6 +5,8 @@ @import "framework/theme-variables", + "framework/theme/base", + "framework/theme/alerts", "framework/theme/bar", "framework/theme/button", diff --git a/scss/framework/_structure-variables.scss b/scss/framework/_structure-variables.scss index 8d072d5264..f0c4dfab2f 100644 --- a/scss/framework/_structure-variables.scss +++ b/scss/framework/_structure-variables.scss @@ -1,7 +1,6 @@ $baseFontSize: 14px !default; -$baseFontFamily: $sansFontFamily; $fontSizeLarge: ceil($baseFontSize * 1.25); diff --git a/scss/framework/_theme-variables.scss b/scss/framework/_theme-variables.scss index d2627cf31b..e80b8b8afb 100644 --- a/scss/framework/_theme-variables.scss +++ b/scss/framework/_theme-variables.scss @@ -1,9 +1,14 @@ + // Fonts $sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$lightSansFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$lightSansFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default; $serifFontFamily: Georgia, "Times New Roman", Times, serif !default; $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default; +// Base +$baseFontFamily: $sansFontFamily; +$baseBackgroundColor: #fff; + // Typography $lightColor: #fff; diff --git a/scss/framework/structure/_bar.scss b/scss/framework/structure/_bar.scss index 7f282fb76b..e32075d82b 100644 --- a/scss/framework/structure/_bar.scss +++ b/scss/framework/structure/_bar.scss @@ -5,6 +5,7 @@ right: 0; left: 0; z-index: 10; + width: 100%; display: -webkit-box; display: box; diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss index 154e982d58..7e0b03c4b7 100644 --- a/scss/framework/structure/_base.scss +++ b/scss/framework/structure/_base.scss @@ -12,7 +12,6 @@ body { bottom: 0; left: 0; margin: 0; - font: 14px/1.25 "Helvetica Neue", sans-serif; } // Remove tap highlight color on Safari @@ -40,8 +39,6 @@ main { bottom: 0; left: 0; overflow: auto; - background-color: #fff; - -webkit-overflow-scrolling: touch; } diff --git a/scss/framework/theme/_base.scss b/scss/framework/theme/_base.scss new file mode 100644 index 0000000000..267adbfed8 --- /dev/null +++ b/scss/framework/theme/_base.scss @@ -0,0 +1,10 @@ + +body { + font-size: 14px; + line-height: 1.25; + font-family: $baseFontFamily; +} + +main { + background-color: $baseBackgroundColor; +} \ No newline at end of file