Derping on status bar stuff.

11 years ago · 7f4bad4210
8 changed files with 33 additions and 6 deletions
--- a/dist/theme-classic.css
+++ b/dist/theme-classic.css
@ -8,6 +8,10 @@
 * =====================================================
 */

+.bar-header-secondary ~ .content {
+  padding-top: 108px;
+}
+
 [class*="bar-"] {
  background-color: rgba(30, 176, 233, 0.98);
 }
@ -15,6 +19,15 @@
  background-color: rgba(245, 245, 245, 0.98);
 }

+.bar-title {
+  top: 20px;
+  box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
+}
+
+[class*="bar-"].bar-header-secondary {
+  top: 64px;
+}
+
 .title {
  color: #fff;
 }
--- a/examples/app-classic/checkout.html
+++ b/examples/app-classic/checkout.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/examples/app-classic/choose-movie.html
+++ b/examples/app-classic/choose-movie.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/examples/app-classic/choose-theater.html
+++ b/examples/app-classic/choose-theater.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/examples/app-classic/index.html
+++ b/examples/app-classic/index.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/examples/app-classic/settings.html
+++ b/examples/app-classic/settings.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/examples/app-classic/theaters.html
+++ b/examples/app-classic/theaters.html
@ -5,7 +5,7 @@
    <title>Movie finder</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
--- a/lib/sass/theme-classic.scss
+++ b/lib/sass/theme-classic.scss
@ -14,6 +14,13 @@ $default-color:  rgba(0, 0, 0, .3);
 $positive-color: #34ba15;
 $negative-color: #e71e1e;

+// Global
+// --------------------------------------------------
+
+.bar-header-secondary ~ .content {
+  padding-top: 108px;
+}
+

 // Bars
 // --------------------------------------------------
@ -25,6 +32,13 @@ $negative-color: #e71e1e;
    background-color: rgba(245,245,245,.98);
  }
 }
+.bar-title {
+  top: 20px;
+  box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
+}
+[class*="bar-"].bar-header-secondary {
+  top: 64px;
+}
 .title {
  color: #fff;
 }