Repository: incubator-zeppelin Updated Branches: refs/heads/master ddde27a7a -> d6ed41306
ZEPPELIN-462 - Fix Navbar CSS This PR is fixing https://issues.apache.org/jira/browse/ZEPPELIN-462 Navbar alignment has been reworked  And Navbar style on smaller resolutions has been fixed  Author: Damien CORNEAU <[email protected]> This patch had conflicts when merged, resolved by Committer: Lee moon soo <[email protected]> Closes #483 from corneadoug/fix/docCss and squashes the following commits: c648748 [Damien CORNEAU] Fix CSS formating cdd76cd [Damien CORNEAU] Fix Navbar style Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/d6ed4130 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/d6ed4130 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/d6ed4130 Branch: refs/heads/master Commit: d6ed41306ed79cb5aefc0232ef9f4da80be9844f Parents: ddde27a Author: Damien CORNEAU <[email protected]> Authored: Fri Nov 27 14:04:27 2015 +0900 Committer: Lee moon soo <[email protected]> Committed: Sun Nov 29 08:08:35 2015 +0900 ---------------------------------------------------------------------- docs/_includes/themes/zeppelin/_navigation.html | 3 +- docs/assets/themes/zeppelin/css/style.css | 257 +++++++++++-------- 2 files changed, 146 insertions(+), 114 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d6ed4130/docs/_includes/themes/zeppelin/_navigation.html ---------------------------------------------------------------------- diff --git a/docs/_includes/themes/zeppelin/_navigation.html b/docs/_includes/themes/zeppelin/_navigation.html index 10e97e5..5d5cf71 100644 --- a/docs/_includes/themes/zeppelin/_navigation.html +++ b/docs/_includes/themes/zeppelin/_navigation.html @@ -9,7 +9,8 @@ </button> <a class="navbar-brand" href="{{BASE_PATH}}"> <img src="/assets/themes/zeppelin/img/zeppelin_logo.png" width="50" alt="I'm zeppelin"> - Zeppelin <small>(0.6.0-incubating-SNAPSHOT)</small> + <span style="vertical-align:middle">Zeppelin</span> + <span style="vertical-align:baseline"><small>(0.6.0-incubating-SNAPSHOT)</small></span> </a> </div> <nav class="navbar-collapse collapse" role="navigation"> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/d6ed4130/docs/assets/themes/zeppelin/css/style.css ---------------------------------------------------------------------- diff --git a/docs/assets/themes/zeppelin/css/style.css b/docs/assets/themes/zeppelin/css/style.css index b0f594a..ccbd092 100644 --- a/docs/assets/themes/zeppelin/css/style.css +++ b/docs/assets/themes/zeppelin/css/style.css @@ -7,47 +7,57 @@ body { } .jumbotron { - background-color: #3071a9; + background: #3071a9; } .navbar-brand { - padding: 12px 12px; - padding-top: 0px; - padding-bottom: 0px; + padding-top: 10px; + padding-bottom: 10px; } .navbar { - background-color:#3071a9; - border-bottom:0px; - height: 50px; + background: #3071a9; + border-bottom: 0px; + height: 50px; } .navbar-inverse .navbar-nav > li > a { - color: #ffffff; - background-color:#3071a9; + color: white; + background: #3071a9; } -.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { - color: #ffffff; - background-color: #2C6094; + color: white !important; + background: #2C6094 !important; } -.navbar-inverse .navbar-nav > li > a.active:hover, + +.navbar-inverse .navbar-collapse.in .navbar-nav .dropdown-menu > li > a:hover, +.navbar-inverse .navbar-collapse.in .navbar-nav .dropdown-menu > li > a:focus { + color: white !important; + background: #2C6094 !important; +} + +.navbar-inverse .navbar-collapse.in .navbar-nav .dropdown-menu > li > a { + color: white !important; +} + +.navbar-inverse .navbar-collapse.in .navbar-nav .divider { + background: #286090; +} + +.navbar-inverse .navbar-nav > li > a.active:hover, .navbar-inverse .navbar-nav > li > a.active:focus { text-decoration: none; - background-color: #265380; + background: #265380; } .navbar-inverse .navbar-nav > li > a.active { - background-color: #265380; -} - -.navbar-inverse .navbar-brand:hover, -.navbar-inverse .navbar-brand:focus { + background: #265380; } .navbar-inverse .navbar-brand { - color: #fff; + color: white; text-decoration: none; font-size: 32px; } @@ -55,12 +65,12 @@ body { .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #265380; - background-color: #3071a9; + background: #3071a9; } @media (max-width: 768px) { .navbar-collapse.in { - box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4); } .bigFingerButton { @@ -72,7 +82,7 @@ body { } .bigFingerButton { - margin-right: 10px; + margin-right: 10px; } .navbar-inverse .navbar-toggle { @@ -82,14 +92,13 @@ body { .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { border-color: #265380; - background-color: #265380; + background: #265380; } .navbar-inverse .navbar-toggle:focus { - outline-width: 0px; + outline-width: 0; } - /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ @@ -107,6 +116,7 @@ body { .carousel .item { height: 300px; } + .carousel-control { background-image: none !important; } @@ -118,10 +128,12 @@ body { min-width: 100%; height: 300px; } + .carousel-indicators { - margin-top:30px; - margin-bottom:0px; + margin-top: 30px; + margin-bottom: 0; } + @media screen and (min-width: 768px) { .carousel-indicators { margin-bottom: -60px; @@ -131,96 +143,102 @@ body { } } - .jumbotron h1, .jumbotron p { - color: #fff; + color: white; } + .jumbotron .thumbnail { margin-top: 0; } + .jumbotron.small { - padding: 0 0 0 0; - color : #ffffff; + padding: 0 0 0 0; + color: white; } + .jumbotron.small .title{ - float : left; - font-weight : bold; - font-size : 20px; - height : 30px; - margin-right: 20px; + float: left; + font-weight: bold; + font-size: 20px; + height: 30px; + margin-right: 20px; } .jumbotron.small .subtitle{ - font-size : 14px; - height : 30px; - vertical-align:text-bottom; - padding-top:7px; + font-size: 14px; + height: 30px; + vertical-align:text-bottom; + padding-top:7px; } .jumbotron.small .description{ - margin-top: 7px; + margin-top: 7px; } - - /* screenshot img inside of doc */ .screenshot { - width : 800px; + width: 800px; } /* Table on the index page */ .table-container { - position: absolute; + position: absolute; } .table-stack { -/* border: 1px solid #6371a9;*/ - width:200px; padding: 5px 5px 5px 5px; + width: 200px; + padding: 5px; } .table-stack table { - width:100% + width: 100%; } .table-stack tr td{ - border: 1px solid #FFFFFF; - height : 40px; - background-color : #6371a9; - color : #FFFFFF; + border: 1px solid white; + height: 40px; + background: #6371a9; + color: white; } .table-stack .gray { - background-color:#DDDDDD; - color:#777777; + background:#DDDDDD; + color:#777777; } /* Table for property */ .table-configuration { +<<<<<<< HEAD width : 100%; border : 1px solid gray; +======= + width: 800px; + border: 1px solid gray; +>>>>>>> PR_TOOL_MERGE_PR_483 } .table-configuration tr td { - border : 1px solid gray; - padding : 5px 5px 5px 5px; + border: 1px solid gray; + padding: 5px; } .table-configuration tr th { - border : 1px solid gray; - padding : 5px 5px 5px 5px; - background-color: #B0C4DE; + border: 1px solid gray; + padding: 5px; + background: #B0C4DE; } - .rotate270 { - width:15px;padding:10px 0px 0px 0px; - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -ms-transform: rotate(270deg); - -o-transform: rotate(270deg); - transform: rotate(270deg); + width: 15px; + padding: 10px 0 0 0; + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); } /* Custom container */ +<<<<<<< HEAD /* <a> */ .container a { color: #4183C4; } @@ -341,47 +359,57 @@ a.anchor { margin: 12px 0; } +======= +>>>>>>> PR_TOOL_MERGE_PR_483 .container-narrow { margin: 0 auto; -/* max-width: 960px; */ } .container-narrow > hr { - margin: 30px 0; } + margin: 30px 0; +} /* posts index */ .post > h3.title { position: relative; - padding-top: 10px; } + padding-top: 10px; +} .post > h3.title span.date { position: absolute; right: 0; - font-size: 0.9em; } + font-size: 0.9em; +} .post > .more { margin: 10px 0; - text-align: left; } + text-align: left; +} /* post-full*/ .post-full .date { margin-bottom: 20px; - font-weight: bold; } + font-weight: bold; +} /* tag_box */ .tag_box { list-style: none; margin: 0; - overflow: hidden; } + overflow: hidden; +} .tag_box li { - line-height: 28px; } + line-height: 28px; +} .tag_box li i { - opacity: 0.9; } + opacity: 0.9; +} .tag_box.inline li { - float: left; } + float: left; +} .tag_box a { padding: 3px 6px; @@ -390,90 +418,93 @@ a.anchor { color: #555; border-radius: 3px; text-decoration: none; - border: 1px dashed #cccccc; } + border: 1px dashed #cccccc; +} .tag_box a span { vertical-align: super; - font-size: 0.8em; } + font-size: 0.8em; +} .tag_box a:hover { - background-color: #e5e5e5; } + background: #e5e5e5; +} .tag_box a.active { background: #57A957; border: 1px solid #4c964d; - color: #FFF; } - + color: white; +} .jumbotron h1 { - font-family: 'Patua One', cursive; } + font-family: 'Patua One', cursive; +} .jumbotron small { - font-size: 60%; - color: #FFF;} + font-size: 60%; + color: white; +} .navbar-brand { - font-family: 'Patua One', cursive; + font-family: 'Patua One', cursive; } .navbar-brand small { - font-size: 14px; - font-family: 'Helvetica Neue', Helvetica; - color: #FFF; } + font-size: 14px; + font-family: 'Helvetica Neue', Helvetica; + color: white; +} .navbar-collapse.collapse { - max-height: 50px;} + max-height: 50px; +} #apache .caret { - margin-left: 4px; - border-top-color: #FFF; + margin-left: 4px; + border-top-color: white; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { - color: #ffffff; - background-color: #286090; + color: white; + background: #286090; } -/* Custom, iPhone Retina */ -@media only screen and (max-width : 480px) { +/* Custom, iPhone Retina */ +@media only screen and (max-width: 480px) { .jumbotron h1 { display: none; } + .navbar-brand small { - display: none; - color: #FFF; + display: none; + color: white; } } -@media only screen and (max-width : 768px) { +@media only screen and (max-width: 768px) { .navbar .navbar-brand { - padding-bottom: 0; + padding-bottom: 0; } } @media only screen -and (min-width : 768px) -and (max-width : 1024px) { +and (min-width: 768px) +and (max-width: 1024px) { .navbar-brand small { - display: none; + display: none; } + .navbar-collapse.collapse { - padding-right: 0; + padding-right: 0; } } - /* docs dropdown menu */ -#menu { - -} - #menu .dropdown-menu li span { - padding : 3px 10px 10px 10px; + padding: 3px 10px 10px 10px; font-size: 13px; - } #menu .caret { @@ -486,6 +517,6 @@ and (max-width : 1024px) { border-bottom-color: #428bca; } -#menu .navbar-nav { - margin-left:50px; +#menu .navbar-brand { + margin-right: 50px; }
