diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index 2b42d8debc..4f0e1d851d 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -37,6 +37,14 @@ ul { .content-padded { padding: 10px; } +.button { + position: relative; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + margin: 0; } + .bar { position: fixed; right: 0; @@ -47,7 +55,7 @@ ul { -webkit-box-orient: horizontal; box-orient: horizontal; box-sizing: border-box; - height: 50px; + height: 98px; /* .title + .button:last-child, .button + .button:last-child, @@ -67,7 +75,7 @@ ul { */ line-height: 20px; margin: 0; - padding: 15px 0px; + padding: 39px 0px; text-align: center; white-space: nowrap; font-size: 18px; @@ -90,18 +98,54 @@ ul { /* 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; } + top: 98px; } .bar ~ .content { bottom: 51px; } -.button { - position: relative; - display: inline-block; - vertical-align: middle; +/* 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%; + padding-top: 9px; text-align: center; - cursor: pointer; - margin: 0; } + box-sizing: border-box; + -webkit-box-flex: 1; + box-flex: 1; } + +/* Active state for tab */ +.tab-item.active { + box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); } + +/* 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; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); } .button-group { position: relative; @@ -205,34 +249,59 @@ a.list-item:hover, a.list-item:focus { background-color: white; border-color: #dddddd; color: #333333; } + .bar.bar-default .tab-item a { + color: #333333; } .bar.bar-secondary { background-color: whitesmoke; border-color: #cccccc; color: #333333; } + .bar.bar-secondary .tab-item a { + color: #333333; } .bar.bar-primary { background-color: #6999e9; border-color: #5981c5; color: white; } + .bar.bar-primary .tab-item a { + color: white; } .bar.bar-info { background-color: #60d2e6; border-color: #51b3c4; color: white; } + .bar.bar-info .tab-item a { + color: white; } .bar.bar-success { background-color: #89c163; border-color: #71a052; color: white; } + .bar.bar-success .tab-item a { + color: white; } .bar.bar-warning { background-color: #f0b840; border-color: #cf9a29; color: white; } + .bar.bar-warning .tab-item a { + color: white; } .bar.bar-danger { background-color: #de5645; border-color: #bc4435; color: white; } + .bar.bar-danger .tab-item a { + color: white; } .bar.bar-dark { background-color: #444444; border-color: #111111; color: white; } + .bar.bar-dark .tab-item a { + color: white; } + +.tabs { + font-size: 20px; + height: 98px; } + +.tab-item a { + font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; } +.tab-item i { + font-size: 40px; } .button { color: #222222; diff --git a/example/bar.html b/example/bar.html index 0eea5918ec..d34b607ab9 100644 --- a/example/bar.html +++ b/example/bar.html @@ -48,5 +48,41 @@

Willkommen!

+ diff --git a/js/framework/framework-tabs.js b/js/framework/framework-tabs.js new file mode 100644 index 0000000000..9668f550ff --- /dev/null +++ b/js/framework/framework-tabs.js @@ -0,0 +1,20 @@ +(function(window, document, framework) { + framework.Tabs = function() {} + + framework.Tabs.prototype._onTouchStart = function(event) { + console.log('Touch start!', event); + if(event.target && event.target.classList.contains('button')) { + event.target.classList.add('active'); + } + }; + framework.Tabs.prototype._onTouchEnd = function(event) { + console.log('Touch end!', event); + if(event.target && event.target.classList.contains('button')) { + event.target.classList.remove('active'); + } + }; + + document.addEventListener('touchstart', framework.Button.prototype._onTouchStart); + document.addEventListener('touchend', framework.Button.prototype._onTouchEnd); + +})(this, document, this.FM = this.FM || {}); diff --git a/scss/framework-structure.scss b/scss/framework-structure.scss index 92266556f2..fac369d490 100755 --- a/scss/framework-structure.scss +++ b/scss/framework-structure.scss @@ -7,8 +7,11 @@ "framework/structure/mixins", "framework/structure/base", - "framework/structure/bar", + "framework/structure/button", + + "framework/structure/bar", + "framework/structure/tabs", "framework/structure/button-group", diff --git a/scss/framework-theme-default.scss b/scss/framework-theme-default.scss index 5476350567..1687a73c25 100755 --- a/scss/framework-theme-default.scss +++ b/scss/framework-theme-default.scss @@ -5,6 +5,7 @@ @import "framework/theme/default/variables", "framework/theme/default/bar", + "framework/theme/default/tabs", "framework/theme/default/button", "framework/theme/default/icon", "framework/theme/default/listview", diff --git a/scss/framework/structure/_tabs.scss b/scss/framework/structure/_tabs.scss new file mode 100644 index 0000000000..81cddc1442 --- /dev/null +++ b/scss/framework/structure/_tabs.scss @@ -0,0 +1,49 @@ +/* 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%; + padding-top: 9px; + text-align: center; + box-sizing: border-box; + -webkit-box-flex: 1; + box-flex: 1; +} + +/* Active state for tab */ +.tab-item.active { + box-shadow: inset 0 0 20px rgba(0, 0, 0, .5); +} + +/* 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; + text-shadow: 0 1px rgba(0, 0, 0, .3); +} diff --git a/scss/framework/structure/_variables.scss b/scss/framework/structure/_variables.scss index 5985de2265..d377b49849 100644 --- a/scss/framework/structure/_variables.scss +++ b/scss/framework/structure/_variables.scss @@ -1,4 +1,5 @@ $sansFontFamily: "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; @@ -14,8 +15,8 @@ $baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px $contentPadding: 10px; // Bar stuff -$barHeight: 50px !default; -$barLineHeight: 50px !default; +$barHeight: 98px !default; +$barLineHeight: 98px !default; $barTitleFontSize: $fontSizeLarge; $barTitleLineHeightComputed: $baseLineHeightComputed; $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); diff --git a/scss/framework/theme/default/_bar.scss b/scss/framework/theme/default/_bar.scss index 00a63efc7f..68905a7169 100644 --- a/scss/framework/theme/default/_bar.scss +++ b/scss/framework/theme/default/_bar.scss @@ -16,41 +16,67 @@ background-color: $barDefaultBackground; border-color: $barDefaultBorderColor; color: $darkColor; + .tab-item a { + color: $darkColor; + } } &.bar-secondary { background-color: $barSecondaryBackground; border-color: $barSecondaryBorderColor; color: $darkColor; + .tab-item a { + color: $darkColor; + } } &.bar-primary { background-color: $barPrimaryBackground; border-color: $barPrimaryBorderColor; color: $lightColor; + .tab-item a { + color: $lightColor; + } } &.bar-info { background-color: $barInfoBackground; border-color: $barInfoBorderColor; color: $lightColor; + .tab-item a { + color: $lightColor; + } } &.bar-success { background-color: $barSuccessBackground; border-color: $barSuccessBorderColor; color: $lightColor; + .tab-item a { + color: $lightColor; + } } &.bar-warning { background-color: $barWarningBackground; border-color: $barWarningBorderColor; color: $lightColor; + .tab-item a { + color: $lightColor; + } } &.bar-danger { background-color: $barDangerBackground; border-color: $barDangerBorderColor; color: $lightColor; + + .tab-item a { + color: $lightColor; + } } &.bar-dark { background-color: $barDarkBackground; border-color: $barDarkBorderColor; color: $lightColor; + + .tab-item a { + color: $lightColor; + } } /* diff --git a/scss/framework/theme/default/_tabs.scss b/scss/framework/theme/default/_tabs.scss new file mode 100644 index 0000000000..48a09ee994 --- /dev/null +++ b/scss/framework/theme/default/_tabs.scss @@ -0,0 +1,15 @@ +.tabs { + font-size: 20px; + height: 98px; + + +} +.tab-item { + a { + font-family: $lightSansFontFamily; + } + i { + font-size: 40px; + } +} +