diff --git a/dist/android-theme.css b/dist/android-theme.css index e8f29a9..e3101f5 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -10,12 +10,12 @@ .content { background: #111111; - background: -moz-linear-gradient(top, #111111 0%, #222222 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #222222)); - background: -webkit-linear-gradient(top, #111111 0%, #222222 100%); - background: -o-linear-gradient(top, #111111 0%, #222222 100%); - background: -ms-linear-gradient(top, #111111 0%, #222222 100%); - background: linear-gradient(to bottom, #111111 0%, #222222 100%); + background: -moz-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #2b2b2b)); + background: -webkit-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -o-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -ms-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); } @@ -24,10 +24,20 @@ background-color: #111111; border-bottom: 1px solid #565656; } +[class*="bar-"].bar-header-secondary { + top: 51px; +} +[class*="bar-"].bar-footer-secondary { + bottom: 51px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 71px; +} .bar-tab { height: 70px; border-top: 1px solid #565656; + border-bottom: 0; } .title { @@ -38,7 +48,7 @@ } .popover .bar-nav { - border-bottom: 1px solid rgba(0, 0, 0, 0.15); + border-bottom: 1px solid #565656; } .table-view .table-view-cell { diff --git a/dist/ios-theme.css b/dist/ios-theme.css index e57d16c..73b4460 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -18,6 +18,15 @@ -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); } +[class*="bar-"].bar-header-secondary { + top: 44px; +} +[class*="bar-"].bar-footer-secondary { + bottom: 44px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 50px; +} .bar-tab { border-top: 0; diff --git a/dist/ratchet.css b/dist/ratchet.css index 86cc086..b781661 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -297,16 +297,16 @@ strong { background-color: white; } [class*="bar-"].bar-header-secondary { - top: 44px; + top: 45px; } [class*="bar-"].bar-footer { bottom: 0; } [class*="bar-"].bar-footer-secondary { - bottom: 44px; + bottom: 45px; } [class*="bar-"].bar-footer-secondary-tab { - bottom: 50px; + bottom: 51px; } .bar-nav { diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 392f931..4197013 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -15,7 +15,7 @@ // Modifier class to dock any bar below .bar-nav &.bar-header-secondary { - top: $bar-base-height; + top: $bar-base-height + 1; } // Modifier class to dock any bar to bottom of viewport @@ -25,12 +25,12 @@ // Modifier class to dock any bar above a standard bar &.bar-footer-secondary { - bottom: $bar-base-height; + bottom: $bar-base-height + 1; } // Modifier class to dock any bar above a .bar-tab &.bar-footer-secondary-tab { - bottom: $bar-tab-height; + bottom: $bar-tab-height + 1; } } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 9f23b63..b813e6a 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -40,7 +40,7 @@ $border-radius: 0; // -------------------------------------------------- .content { - @include gradient($chrome-color,#222); + @include gradient($chrome-color,lighten($chrome-color, 10%)); } // Bars @@ -50,10 +50,26 @@ $border-radius: 0; height: $bar-base-height; background-color: $chrome-color; border-bottom: $border-default; + + // Modifier class to dock any bar below .bar-nav + &.bar-header-secondary { + top: $bar-base-height + 1; + } + + // Modifier class to dock any bar above a standard bar + &.bar-footer-secondary { + bottom: $bar-base-height + 1; + } + + // Modifier class to dock any bar above a .bar-tab + &.bar-footer-secondary-tab { + bottom: $bar-tab-height + 1; + } } .bar-tab { height: $bar-tab-height; border-top: $border-default; + border-bottom: 0; } // Left aligned text in the .bar-nav .title { @@ -68,7 +84,7 @@ $border-radius: 0; // -------------------------------------------------- .popover .bar-nav { - border-bottom: 1px solid rgba(0,0,0,.15); + border-bottom: $border-default; } diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index f6e33f9..9173baa 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -20,6 +20,10 @@ $default-color: #929292; $positive-color: #4cd964; $negative-color: #dd524d; +// Bars +$bar-base-height: 44px; +$bar-tab-height: 50px; + // iOS style transitions $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods @@ -39,8 +43,25 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods border-bottom: 0; background-color: $chrome-color; @include box-shadow(0 0 1px rgba(0,0,0,.85)); -} + // Modifier class to dock any bar below .bar-nav + &.bar-header-secondary { + top: $bar-base-height; + } + + // Modifier class to dock any bar above a standard bar + &.bar-footer-secondary { + bottom: $bar-base-height; + } + + // Modifier class to dock any bar above a .bar-tab + &.bar-footer-secondary-tab { + bottom: $bar-tab-height; + } +} +.bar-nav { + display: block; +} .bar-tab { border-top: 0; @include box-shadow(0 0 -1px rgba(0,0,0,.85));