diff --git a/_assets/css/_styles.scss b/_assets/css/_styles.scss index 1f21903..2f16ab9 100644 --- a/_assets/css/_styles.scss +++ b/_assets/css/_styles.scss @@ -324,20 +324,13 @@ strong { } // Hat menu -.TK-Hat { +nav.TK-Nav { position: absolute; top: 0; width: 100%; - z-index: 1050; - transition: transform .1s; -} - -.TK-Hat-Brand { - display: inline-block; - - svg { - vertical-align: top; - } + border-bottom-color: rgb(239, 240, 241); + border-bottom-style: solid; + border-bottom-width: 1px; } /* Main Menu */ @@ -350,10 +343,18 @@ $hover-text: darken($text-color, 10%); $selection-size: 3px; transition: padding-top .1s; - padding-top: 50px; + padding-top: 20px; + margin-bottom: 20px; .scroll & { - padding-top: 0; + background-color: #FFFFFF; + padding-top: 10px; + padding-bottom: 10px; + position: fixed; + top: 0; + width: 100%; + z-index: 10; + box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.2); } a { @@ -457,19 +458,19 @@ $hover-text: darken($text-color, 10%); } &.brand-platform-teststudiodev { - background: transparent url(image_path("logo-teststudiodev.svg")) no-repeat 0 50%; + background: transparent url(image_path("logo-teststudiodev.svg")) no-repeat 0 50%; } &.brand-platform-teststudio-apis { - background: transparent url(image_path("logo-teststudio-apis.svg")) no-repeat 0 50%; + background: transparent url(image_path("logo-teststudio-apis.svg")) no-repeat 0 50%; } &.brand-platform-justdecompile { - background: transparent url(image_path("logo-justdecompile.svg")) no-repeat 0 50%; + background: transparent url(image_path("logo-justdecompile.svg")) no-repeat 0 50%; } &.brand-platform-justmock { - background: transparent url(image_path("logo-justmock.svg")) no-repeat 0 50%; + background: transparent url(image_path("logo-justmock.svg")) no-repeat 0 50%; } &::before { @@ -540,19 +541,19 @@ $hover-text: darken($text-color, 10%); } &.brand-platform-teststudiodev { - background-image: url(image_path("logo-scroll-teststudiodev.svg")); + background-image: url(image_path("logo-scroll-teststudiodev.svg")); } &.brand-platform-teststudio-apis { - background-image: url(image_path("logo-scroll-teststudio-apis.svg")); + background-image: url(image_path("logo-scroll-teststudio-apis.svg")); } &.brand-platform-justdecompile { - background-image: url(image_path("logo-scroll-justdecompile.svg")); + background-image: url(image_path("logo-scroll-justdecompile.svg")); } &.brand-platform-justmock { - background-image: url(image_path("logo-scroll-justmock.svg")); + background-image: url(image_path("logo-scroll-justmock.svg")); } } @@ -623,19 +624,19 @@ $hover-text: darken($text-color, 10%); } &.brand-platform-teststudiodev { - background: transparent url(image_path("logo-scroll-teststudiodev.svg")) no-repeat 0 8px; + background: transparent url(image_path("logo-scroll-teststudiodev.svg")) no-repeat 0 8px; } &.brand-platform-teststudio-apis { - background: transparent url(image_path("logo-scroll-teststudio-apis.svg")) no-repeat 0 8px; + background: transparent url(image_path("logo-scroll-teststudio-apis.svg")) no-repeat 0 8px; } &.brand-platform-justdecompile { - background: transparent url(image_path("logo-scroll-justdecompile.svg")) no-repeat 0 8px; + background: transparent url(image_path("logo-scroll-justdecompile.svg")) no-repeat 0 8px; } &.brand-platform-justmock { - background: transparent url(image_path("logo-scroll-justmock.svg")) no-repeat 0 8px; + background: transparent url(image_path("logo-scroll-justmock.svg")) no-repeat 0 8px; } } @@ -764,7 +765,6 @@ $hover-text: darken($text-color, 10%); /* Main Wrapper */ -.content-wrapper, .overview { padding-top: 50px; } @@ -1205,25 +1205,26 @@ article { } h1, .h1 { - margin-top: 20px; - margin-bottom: 10px; - line-height: .95em; + margin-top: 20px; + margin-bottom: 10px; + line-height: .95em; } h2, .h2 { - line-height: .95em; - margin-top: 20px; - margin-bottom: 10px; - } + line-height: .95em; + margin-top: 20px; + margin-bottom: 10px; + } + h3, .h3, &.api-reference .editor h3 { font-size: 22px; line-height: 1em; font-weight: 400; letter-spacing: -0.02em; - margin-top: 20px; - margin-bottom: 10px; - } + margin-top: 20px; + margin-bottom: 10px; + } &.api-reference .editor h3 { margin: 0; @@ -1234,7 +1235,7 @@ article { line-height: 1.222em; font-weight: 500; letter-spacing: -0.02em; - margin-top: 20px; + margin-top: 20px; margin-bottom: 10px; } @@ -1293,7 +1294,7 @@ article { } img { - margin: 0; + margin: 0; } } @@ -1534,7 +1535,7 @@ $border-color: #d9d9d9; } &.affix { - margin-top: 90px; + margin-top: 120px; position: fixed; top: 0; z-index: 1015; @@ -2668,31 +2669,28 @@ $callout-bg: #d7dfe3; /* Global Search */ .global-search { - background-color: #fff; - border-bottom: 1px solid #d2d5d7; + border-bottom: 2px solid #00b5dc; display: block; - position: absolute; - top: 0; - left: 100%; - right: 90px; + right: 30px; overflow: hidden; + margin-left: 15px; transition: left .2s; - .scroll & { - border-bottom: 0; - } - &.show-search { left: -10%; } + .scroll & { + top: 8px; + } + input { width: 100%; - height: 39px; + height: 34px; padding-left: 40px; padding-right: 15px; border: 0; - font-size: 19px; + font-size: 14px; font-family: $font-light; outline: none; background-image: url(image_path("search.svg")); @@ -2812,12 +2810,12 @@ a.all-components { font-family: $font-regular; text-align: left; color: #333; + padding: 1px 40px 0 !important; padding-left: 15px; margin-left: 15px; margin-right: 10px; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 15px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.04); background-color: #fff; - background-image: url(image_path("hamburger.svg")); + background-image: url(image_path("article-menu.svg")); background-repeat: no-repeat; background-position: left 11px top 50%; @@ -2844,6 +2842,14 @@ a.all-components { } } +span.all-components-expanded-icon { + position: absolute; + top: 10px; + left: 80px; + background-image: url(image_path('group-expand-collapse.svg')); + background-repeat: no-repeat; +} + .col-xl-8, .col-xl-10 { position: relative; padding-left: 15px; @@ -3022,13 +3028,20 @@ a.all-components { /* Media Queries */ /* ####################################################################################################### */ -@media (min-width: 768px) { /* Styles for width >= 768px */ +@media (max-width: 767px) { + .global-search { + position: absolute; + left: 100px; + } +} - // Hat menu - .TK-Hat { - .scroll & { - transform: translateY(-100%); - } +@media (min-width: 768px) { /* Styles for width >= 768px */ + nav.TK-Nav { + position: fixed; + } + + span.all-components-expanded-icon { + display: none; } #navbar { @@ -3212,17 +3225,18 @@ a.all-components { font-size: 13px; font-weight: 500; } - - h1, .h1, - h2, .h2, - h3, .h3, - h4, .h4, - h5, .h5, - h6, .h6 { - margin-top: 30px; - margin-bottom: 14px; - } + + h1, .h1, + h2, .h2, + h3, .h3, + h4, .h4, + h5, .h5, + h6, .h6 { + margin-top: 20px; + margin-bottom: 14px; + } } + .component-item { padding-left: 0; padding-top: 36px; @@ -3327,7 +3341,7 @@ a.all-components { h4, .h4, h5, .h5, h6, .h6 { - margin-top: 40px; + margin-top: 20px; margin-bottom: 16px; } } diff --git a/_assets/images/article-menu.svg b/_assets/images/article-menu.svg new file mode 100644 index 0000000..fc9eb32 --- /dev/null +++ b/_assets/images/article-menu.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/_assets/js/side-nav.js b/_assets/js/side-nav.js index e3ce2d3..a6f2103 100644 --- a/_assets/js/side-nav.js +++ b/_assets/js/side-nav.js @@ -85,18 +85,19 @@ function setSideNavPosition() { var windowHeight = $window.height(); var scrollFold = $window.scrollTop() + windowHeight; - var top = Math.min($('.navbar').height(), $('aside.TK-Hat').height()); + var top = $('nav.TK-Nav').height(); + if (window.screen.availWidth < 768) { + if (window.scrollY > 0) { + top = $('#navbar').outerHeight(); + } else { + top += $('#navbar').outerHeight(true); + } + } + var footerHeight = $('div#footer').outerHeight(true); var feedbackOffsetTop = document.body.scrollHeight - footerHeight; var bottom = Math.max(0, Math.min(footerHeight, scrollFold - feedbackOffsetTop)); - if (window.screen.availWidth < 768) { - bottom = 0; - if (!$('body.scroll').length) { - top = HEADER_HEIGHT; - } - } - var sideNavigation = $(".side-nav"); sideNavigation.css('top', top); sideNavigation.css('bottom', bottom); @@ -105,7 +106,7 @@ function setSideNavPosition() { $(function () { $(window).scroll(setSideNavPosition) .resize(setSideNavPosition); - + $(document).ready(function () { setSideNavPosition(); }); diff --git a/_assets/js/top-menu.js b/_assets/js/top-menu.js index dec97af..f29e0db 100644 --- a/_assets/js/top-menu.js +++ b/_assets/js/top-menu.js @@ -2,13 +2,3 @@ var NAVBAR_HEIGHT = 70; var HEADER_HEIGHT = 100; var FOOTER_DISTANCE = 20; var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); - -$(function() { - $(".TK-Hat") - .on("mouseenter", ".TK-Hat-Menu-Item", function(e) { - $(e.currentTarget).children(".TK-Dropdown").addClass("TK-Dropdown--Active"); - }) - .on("mouseleave", ".TK-Hat-Menu-Item", function(e) { - $(e.currentTarget).children(".TK-Dropdown").removeClass("TK-Dropdown--Active"); - }); -}); diff --git a/_data/top_navigations.yml b/_data/top_navigations.yml new file mode 100644 index 0000000..70ee6ec --- /dev/null +++ b/_data/top_navigations.yml @@ -0,0 +1 @@ +"justmock":
diff --git a/_includes/nav.html b/_includes/nav.html index 2c412c7..56930bd 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,108 +1,9 @@ - - - + + +