fixed more issues with marketing/doc topbar

diff --git a/marketing/docs/includes/_documentation_head.php b/marketing/docs/includes/_documentation_head.php
index b91a341f1ca2d132a659d05dda5960705bcce7ea..bbe949bad9356bf14ba771102e2205d13e030604 100644 (file)
--- a/marketing/docs/includes/_documentation_head.php
+++ b/marketing/docs/includes/_documentation_head.php
@@ -58,7 +58,7 @@
 
                <ul class="right">
         <li class="show-for-small">
-          <a href="#">Home</a>
+          <a href="../index.php">Home</a>
         </li>
                        <li>
                          <a href="grid.php" <?php if (isset($featuresTab)) echo 'class="current"'; ?>>Features</a>

diff --git a/marketing/includes/_header.php b/marketing/includes/_header.php
index 2492acbac4b4005c20a7531805d45cc573c2c541..a0e6f80e8e3947534382c8cd6a756031cf23cc27 100644 (file)
--- a/marketing/includes/_header.php
+++ b/marketing/includes/_header.php
@@ -59,9 +59,6 @@
                </div>
 
                <ul class="right">
-        <li class="show-for-small">
-          <a href="#">Home</a>
-        </li>
                        <li>
                          <a href="grid.php" <?php if (isset($featuresTab)) echo 'class="current"'; ?>>Features</a>
                        </li>

diff --git a/marketing/sass/docs/presentation.scss b/marketing/sass/docs/presentation.scss
index d49bc7d074111a54ccbfb48e9a035d66c7fe229c..a3ef9da2b6bdf5d0b713d31715a05de726b32979 100644 (file)
--- a/marketing/sass/docs/presentation.scss
+++ b/marketing/sass/docs/presentation.scss
@@ -53,13 +53,13 @@ header .subheader { position: relative; top: -18px; }
 .top-bar .attached > ul.right > li.download { border-right: 0; }
 .top-bar .attached > ul.right > li.download a { padding: 6px 13px 6px; }
 .top-bar .small.button { height: auto; top: 10px; }
-.top-bar a:hover { color: white; }
 .top-bar .attached > ul.right > li.download:hover > a { background-color: #2284A1; }
 .top-bar .attached > .name > span > a.toggle-nav { right: -45px !important; }
 @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url('../images/plus-toggle-2-retina.png?1340846519'); background-size: 100% 100%; } }
 @media only screen and (max-width: 1024px) and (min-width: 768px) {
   .top-bar { height: 45px !important; }
   .top-bar .attached { height: auto; }
+  .top-bar .attached > ul.right { overflow: visible !important; height: 45px !important; }
   .top-bar .attached > .name { height: auto; padding: 0 !important; margin-top: 0; text-indent: 0 !important; }
   .top-bar .attached > .name span { width: auto; padding: 0 !important; text-indent: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
   .top-bar .attached > .name span > a { width: auto; padding: 0 !important; text-indent: 0 !important; }
@@ -71,14 +71,18 @@ header .subheader { position: relative; top: -18px; }
   .top-bar .attached > .name span { padding-left: 0 !important; }
 }
 @media only screen and (max-width: 767px) {
-  .top-bar { overflow: hidden; height: 45px; }
-  .top-bar.expanded { height: auto !important; }
+  .top-bar { position: relative; overflow: hidden;
+    &:after { @include css-triangle(8px, #fff, top); position: absolute; right: 20px; top: 19px; }
+  }
+  .top-bar.expanded { height: auto !important;
+    &:after { @include css-triangle(8px, #888, bottom); top: 10px; }
+  }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
   .top-bar .attached > .name > span > a.toggle-nav { right: -45px !important; }
 }
-@media only screen and (orientation: portrait) {
+@media only screen and (orientation: portrait) and (min-device-width: 768px) {
   .top-bar { overflow: hidden; height: 45px; }
   .top-bar.expanded { height: auto !important; }
   .touch .top-bar .attached { height: 45px !important; }

diff --git a/marketing/sass/presentation.scss b/marketing/sass/presentation.scss
index 9e76e8e0c4e0688fedd0e470612d450d6ccaaa5f..f6539a0d12914de58af46fd6ff42647d5993b8f6 100644 (file)
--- a/marketing/sass/presentation.scss
+++ b/marketing/sass/presentation.scss
@@ -118,6 +118,7 @@ header#homepage .button:hover { background: #006582; }
 @media only screen and (max-width: 1024px) and (min-width: 768px) {
   .top-bar { height: 45px !important; }
   .top-bar .attached { height: auto; }
+  .top-bar .attached > ul.right { overflow: visible !important; height: 45px !important; }
   .top-bar .attached > .name { height: auto; padding: 0 !important; margin-top: 0; text-indent: 0 !important; }
   .top-bar .attached > .name span { width: auto; padding: 0 !important; text-indent: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
   .top-bar .attached > .name span > a { width: auto; padding: 0 !important; text-indent: 0 !important; }
@@ -129,8 +130,12 @@ header#homepage .button:hover { background: #006582; }
   .top-bar .attached > .name span { padding-left: 0 !important; }
 }
 @media only screen and (max-width: 767px) {
-  .top-bar { overflow: hidden; height: 45px; }
-  .top-bar.expanded { height: auto !important; }
+  .top-bar { position: relative; overflow: hidden; height: 45px;
+    &:after { @include css-triangle(8px, #fff, top); position: absolute; right: 20px; top: 19px; }
+  }
+  .top-bar.expanded { height: auto !important;
+    &:after { @include css-triangle(8px, #888, bottom); top: 10px; }
+  }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }

diff --git a/marketing/stylesheets/docs/presentation.css b/marketing/stylesheets/docs/presentation.css
index dc16101a0632dfa35f82bdeced4f1d3e19251e57..2990b25192cb4dadeffa366517ccf1bb9f0ec677 100644 (file)
--- a/marketing/stylesheets/docs/presentation.css
+++ b/marketing/stylesheets/docs/presentation.css
@@ -977,8 +977,6 @@ header .subheader { position: relative; top: -18px; }
 
 .top-bar .small.button { height: auto; top: 10px; }
 
-.top-bar a:hover { color: white; }
-
 .top-bar .attached > ul.right > li.download:hover > a { background-color: #2284A1; }
 
 .top-bar .attached > .name > span > a.toggle-nav { right: -45px !important; }
@@ -986,6 +984,7 @@ header .subheader { position: relative; top: -18px; }
 @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url("../images/plus-toggle-2-retina.png?1340846519"); background-size: 100% 100%; } }
 @media only screen and (max-width: 1024px) and (min-width: 768px) { .top-bar { height: 45px !important; }
   .top-bar .attached { height: auto; }
+  .top-bar .attached > ul.right { overflow: visible !important; height: 45px !important; }
   .top-bar .attached > .name { height: auto; padding: 0 !important; margin-top: 0; text-indent: 0 !important; }
   .top-bar .attached > .name span { width: auto; padding: 0 !important; text-indent: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
   .top-bar .attached > .name span > a { width: auto; padding: 0 !important; text-indent: 0 !important; }
@@ -993,13 +992,15 @@ header .subheader { position: relative; top: -18px; }
   .top-bar .attached > ul > li > a.button { height: auto !important; } }
 @media only screen and (device-width: 1280px) { .top-bar { height: 45px !important; }
   .top-bar .attached > .name span { padding-left: 0 !important; } }
-@media only screen and (max-width: 767px) { .top-bar { overflow: hidden; height: 45px; }
+@media only screen and (max-width: 767px) { .top-bar { position: relative; overflow: hidden; }
+  .top-bar:after { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: white transparent transparent transparent; position: absolute; right: 20px; top: 19px; }
   .top-bar.expanded { height: auto !important; }
+  .top-bar.expanded:after { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: transparent transparent #888888 transparent; top: 10px; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
   .top-bar .attached > .name > span > a.toggle-nav { right: -45px !important; } }
-@media only screen and (orientation: portrait) { .top-bar { overflow: hidden; height: 45px; }
+@media only screen and (orientation: portrait) and (min-device-width: 768px) { .top-bar { overflow: hidden; height: 45px; }
   .top-bar.expanded { height: auto !important; }
   .touch .top-bar .attached { height: 45px !important; }
   .touch .top-bar .attached > ul.right { overflow: hidden; height: 45px !important; } }

diff --git a/marketing/stylesheets/presentation.css b/marketing/stylesheets/presentation.css
index f0addef38909a53f1ee06bd6824e05b709443c27..09f7ca0afe3557c3e783fab80ae0301881beb499 100644 (file)
--- a/marketing/stylesheets/presentation.css
+++ b/marketing/stylesheets/presentation.css
@@ -1063,6 +1063,7 @@ header#homepage .button:hover { background: #006582; }
 @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url("../images/plus-toggle-2-retina.png?1340846519"); background-size: 100% 100%; } }
 @media only screen and (max-width: 1024px) and (min-width: 768px) { .top-bar { height: 45px !important; }
   .top-bar .attached { height: auto; }
+  .top-bar .attached > ul.right { overflow: visible !important; height: 45px !important; }
   .top-bar .attached > .name { height: auto; padding: 0 !important; margin-top: 0; text-indent: 0 !important; }
   .top-bar .attached > .name span { width: auto; padding: 0 !important; text-indent: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
   .top-bar .attached > .name span > a { width: auto; padding: 0 !important; text-indent: 0 !important; }
@@ -1070,8 +1071,10 @@ header#homepage .button:hover { background: #006582; }
   .top-bar .attached > ul > li > a.button { height: auto !important; } }
 @media only screen and (device-width: 1280px) { .top-bar { height: 45px !important; }
   .top-bar .attached > .name span { padding-left: 0 !important; } }
-@media only screen and (max-width: 767px) { .top-bar { overflow: hidden; height: 45px; }
+@media only screen and (max-width: 767px) { .top-bar { position: relative; overflow: hidden; height: 45px; }
+  .top-bar:after { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: white transparent transparent transparent; position: absolute; right: 20px; top: 19px; }
   .top-bar.expanded { height: auto !important; }
+  .top-bar.expanded:after { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: transparent transparent #888888 transparent; top: 10px; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }