From a0db2a09229a03dec2032d5c59f5ba36fcb50644 Mon Sep 17 00:00:00 2001 From: scotty Date: Tue, 8 Mar 2016 00:31:56 -0800 Subject: [PATCH] searchbox/vendorStrip responsive fixes --- _layouts/docwithnav.html | 11 +++---- _sass/_base.sass | 62 ++++++++++++++++++++++------------------ _sass/_desktop.sass | 48 +++++++++++++++++++++---------- _sass/_tablet.sass | 35 ++++++++++------------- index.html | 13 ++++----- 5 files changed, 91 insertions(+), 78 deletions(-) diff --git a/_layouts/docwithnav.html b/_layouts/docwithnav.html index e4b7395d02..1b07a42d71 100755 --- a/_layouts/docwithnav.html +++ b/_layouts/docwithnav.html @@ -15,13 +15,10 @@
  • REFERENCE
  • SAMPLES
  • SUPPORT
    • - - + + diff --git a/_sass/_base.sass b/_sass/_base.sass index 10a75955dd..ac61b28d57 100644 --- a/_sass/_base.sass +++ b/_sass/_base.sass @@ -50,7 +50,7 @@ $main-nav-left-button-font-size: 18px $hero-padding-top: 80px $headline-wrapper-margin-bottom: 40px $quickstart-button-padding: 0 50px -$vendor-strip-height: 44px +$vendor-strip-height: 88px $vendor-strip-font-size: 16px @@ -119,7 +119,7 @@ header display: none #viewDocs - border: 1px solid white + border: 2px solid white background-color: transparent transition: 0.3s @@ -260,16 +260,12 @@ header // VENDOR STRIP #vendorStrip + position: relative background-color: transparentize(white, 0.9) font-weight: 100 white-space: nowrap text-align: center - div - vertical-align: middle - height: 100% - display: inline-block - // FOOTER footer width: 100% @@ -393,7 +389,8 @@ section background-color: $dark-grey h5 - margin-bottom: 20px + margin: 20px 0 + line-height: 28px #vendorStrip position: relative @@ -412,22 +409,31 @@ section font-size: 0.75em font-weight: bold - li + li, #search + li + li margin-left: 20px - #search - display: block - position: relative - width: 100% - min-width: 250px - padding: 0 10px - margin: 0 - height: 30px - line-height: 30px - border: 0 - background-color: $dark-grey - font-size: 16px - clear: both + +#docs + #vendorStrip + line-height: 44px + + ul + float: none + + #searchBox + float: none + display: block + width: 80% + margin: 0 auto + height: 44px + line-height: 44px + + #search + width: 100% + padding: 0 10px + height: 30px + line-height: 30px + font-size: 16px #encyclopedia @@ -700,7 +706,7 @@ section background-color: transparent .includecode, .includecode th, .includecode td - padding: 0px !important + padding: 0 !important .includecode th text-align: right !important @@ -711,7 +717,7 @@ section background-color: transparent !important .includecode pre - margin: 0px !important + margin: 0 !important ul li list-style: disc @@ -1057,14 +1063,14 @@ $feature-box-div-margin-bottom: 40px #home #hero margin-bottom: 0 + padding-bottom: 1px main + padding: 0 10px margin-bottom: 30px -#vendorStrip img - max-height: 24px - vertical-align: middle - margin: 0 30px + #vendorStrip + display: none // OCEAN NODES diff --git a/_sass/_desktop.sass b/_sass/_desktop.sass index 7751026190..01a6fd9d75 100644 --- a/_sass/_desktop.sass +++ b/_sass/_desktop.sass @@ -1,26 +1,44 @@ $main-max-width: 1200px +$vendor-strip-height: 44px $video-section-height: 550px @media screen and (min-width: 1025px) #vendorStrip - white-space: nowrap + height: $vendor-strip-height + line-height: $vendor-strip-height - li + li, #search - margin-left: 60px - - #search - display: inline-block - position: relative + #searchBox float: right - width: 24% - min-width: 250px - padding: 0 10px - margin: 8px 30px 0 0 - height: 30px - line-height: 30px - border: 1px solid $light-grey - font-size: 16px + //#search + // display: inline-block + // position: relative + // float: right + // width: 24% + // min-width: 250px + // padding: 0 10px + // margin: 8px 30px 0 0 + // height: 30px + // line-height: 30px + // border: 1px solid $light-grey + // font-size: 16px + // clear: none + + + #home + #hero + #vendorStrip + display: block + + #docs + #hero + #vendorStrip + ul + float: left + + #searchBox + float: right + width: 30% #docsToc diff --git a/_sass/_tablet.sass b/_sass/_tablet.sass index 41a2ba2baf..4b2e3421e7 100644 --- a/_sass/_tablet.sass +++ b/_sass/_tablet.sass @@ -48,7 +48,6 @@ $main-nav-left-button-font-size: 18px $hero-padding-top: 80px $headline-wrapper-margin-bottom: 40px $quickstart-button-padding: 0 50px -$vendor-strip-height: 44px $vendor-strip-font-size: 16px //video @@ -81,6 +80,21 @@ $feature-box-div-width: 45% display: block text-align: center + img + max-height: 24px + vertical-align: middle + margin: 0 30px + + #docs + #vendorStrip + ul + a + font-size: 1em + font-weight: normal + + li + li + margin-left: 60px + #oceanNodes h3 @@ -126,8 +140,6 @@ $feature-box-div-width: 45% #video height: $video-section-height - - #video display: block & > .light-text @@ -187,20 +199,3 @@ $feature-box-div-width: 45% a width: 25% font-size: 22px - - // - // .social - // position: relative - // margin: 80px 0 60px - // - // label - // float: right - // display: inline-block - // height: 50px - // line-height: 50px - // font-weight: 100 - // white-space: nowrap - // - // input - // margin-left: 8px - // width: 300px diff --git a/index.html b/index.html index 7cac5b39c3..32c3e879b9 100644 --- a/index.html +++ b/index.html @@ -17,14 +17,11 @@ title: Accelerate Your Delivery Try Our Hello World
    - -
    - - - - - -
    + + + + +