{%- comment -%} Include as: {%- include css/activation.scss.liquid -%} Depends on: page, site. Results in: page-dependent (non-nested) CSS rules for inclusion in a head style element, which needs to be suppressed when JS is enabled. Includes: sorted_pages.html. Overwrites: activation_pages, activation_pages_top_size, activation_page, activation_title, activation_first_level, activation_second_level, activation_third_level, activation_first_level_reversed, activation_second_level_reversed, activation_first_level_index, activation_second_level_index, activation_third_level_index. Should not be cached, because it depends on page. (For a site with only top-level pages, the rendering of this file is always empty. This property could be detected, and used to reduce the build time for such sites.) {%- endcomment -%} {%- unless page.title == nil or page.nav_exclude == true -%} {%- assign activation_pages = site[page.collection] | default: site.html_pages | where_exp: "item", "item.title != nil" | where_exp: "item", "item.nav_exclude != true" -%} {%- assign activation_first_level_index = nil -%} {%- assign activation_second_level_index = nil -%} {%- assign activation_third_level_index = nil -%} {%- assign activation_first_level_reversed = nil -%} {%- assign activation_second_level_reversed = nil -%} {%- comment -%} The generated CSS depends on the position of the current page in each level in the navigation. {%- endcomment -%} {%- assign activation_title = page.grand_parent | default: page.parent | default: page.title -%} {%- assign activation_first_level = activation_pages | where_exp: "item", "item.parent == nil" -%} {%- include sorted_pages.html pages = activation_first_level -%} {%- for activation_page in sorted_pages -%} {%- if activation_page.title == activation_title -%} {%- assign activation_first_level_index = forloop.index -%} {%- assign activation_first_level_reversed = activation_page.child_nav_order -%} {%- break -%} {%- endif -%} {%- endfor -%} {%- unless activation_first_level_index == nil -%} {%- if page.grand_parent -%} {%- assign activation_title = page.parent -%} {%- assign activation_second_level = activation_pages | where_exp: "item", "item.grand_parent == nil" | where_exp: "item", "item.parent == page.grand_parent" -%} {%- elsif page.parent -%} {%- assign activation_title = page.title -%} {%- assign activation_second_level = activation_pages | where_exp: "item", "item.grand_parent == nil" | where_exp: "item", "item.parent == page.parent" -%} {%- endif -%} {%- if page.parent -%} {%- include sorted_pages.html pages = activation_second_level -%} {%- for activation_page in sorted_pages -%} {%- if activation_page.title == activation_title -%} {%- assign activation_second_level_index = forloop.index -%} {%- assign activation_second_level_reversed = activation_page.child_nav_order -%} {%- if activation_first_level_reversed -%} {%- assign activation_second_level_index = sorted_pages | size | plus: 1 | minus: activation_second_level_index -%} {%- endif -%} {%- break -%} {%- endif -%} {%- endfor -%} {%- endif -%} {%- if page.grand_parent -%} {%- assign activation_third_level = activation_pages | where_exp: "item", "item.parent == page.parent" | where_exp: "item", "item.grand_parent == page.grand_parent" -%} {%- include sorted_pages.html pages = activation_third_level -%} {%- assign activation_third_level = sorted_pages -%} {%- for activation_page in sorted_pages -%} {%- if activation_page.title == page.title -%} {%- assign activation_third_level_index = forloop.index -%} {%- if activation_second_level_reversed -%} {%- assign activation_third_level_index = sorted_pages | size | plus: 1 | minus: activation_third_level_index -%} {%- endif -%} {%- break -%} {%- endif -%} {%- endfor -%} {%- endif -%} {%- unless activation_second_level_index == nil and activation_third_level_index -%} {%- comment -%} The generated CSS uses a prefix that depends on the number of ordinary pages and on the page collections. {%- endcomment -%} {%- if page.collection == nil -%} {%- capture activation_collection_prefix -%} .site-nav > .nav-list:nth-child(1):not(.nav-category-list) {%- endcapture -%} {%- capture activation_other_collection_prefix -%} .site-nav > .nav-list:not(:nth-child(1):not(.nav-category-list)) {%- endcapture -%} {%- else -%} {%- for activation_collection in site.just_the_docs.collections -%} {%- if activation_collection[0] == page.collection -%} {%- assign activation_collection_index = forloop.index -%} {%- break -%} {%- endif -%} {%- endfor -%} {%- assign activation_index = activation_collection_index -%} {%- assign activation_pages_top_size = site.html_pages | where_exp:"item", "item.title != nil" | where_exp:"item", "item.parent == nil" | where_exp:"item", "item.nav_exclude != true" | size -%} {%- if activation_pages_top_size > 0 -%} {%- assign activation_index = activation_index | plus: 1 -%} {%- endif -%} {%- if site.nav_external_links -%} {%- assign activation_index = activation_index | plus: 1 -%} {%- endif -%} {%- capture activation_collection_prefix -%} .site-nav > .nav-list:nth-of-type({{ activation_index }}){% if site.just_the_docs.collections[page.collection].nav_fold == true %} > .nav-list-item > .nav-list{% endif %} {%- endcapture -%} {%- capture activation_other_collection_prefix -%} .site-nav > .nav-list:not(:nth-of-type({{ activation_index }})) {%- endcapture -%} {%- endif -%} {%- comment -%} The required background image of the link to the current page may involve SCSS. To avoid page-dependent SCSS, all nav links initially have that background image. The following rule removes the image from the links to all parents, siblings, and children of the current page. {%- endcomment %} {% if activation_third_level_index -%} {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item:not(:nth-child({{ activation_third_level_index }})) > .nav-list-link { background-image: none; } {%- elsif activation_second_level_index -%} {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item:not(:nth-child({{ activation_second_level_index }})) > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link { background-image: none; } {%- else -%} {{ activation_collection_prefix }} > .nav-list-item:not(.external):not(:nth-child({{ activation_first_level_index }})) > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link, {{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link { background-image: none; } {%- endif %} {%- comment -%} The following rule removes the image from the links to pages in other collections. {%- endcomment %} {{ activation_other_collection_prefix }} .nav-list-link, .site-nav .nav-list-link.external { background-image: none; } {%- comment -%} The following rule styles the link to the current page. {%- endcomment %} {{ activation_collection_prefix }} > .nav-list-item:not(.external):nth-child({{ activation_first_level_index }}) {%- if activation_second_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) {%- if activation_third_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_third_level_index }}) {%- endif -%} {%- endif %} > .nav-list-link { font-weight: 600; text-decoration: none; } {%- comment -%} The following rules unfold all collections, and display the links to any children of the current page. To avoid dependence on the SCSS variable nav-list-expander-right, the direction of the rotation of the expander icon is fixed, and corresponds to the appearance when nav-list-expander-right is true. This results in a minor visual difference between the appearance of active expander icons when JS is enabled/disabled and nav-list-expander-right is false, which seems unavoidable. {%- endcomment %} .site-nav > .nav-category-list > .nav-list-item > .nav-list-expander svg, {{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list-expander svg {%- if activation_second_level_index -%}, {{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list-expander svg {%- endif %} { transform: rotate(-90deg); } .site-nav > .nav-category-list > .nav-list-item > .nav-list, {{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list {%- if activation_second_level_index %}, {{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list {%- endif %} { display: block; } {%- endunless -%} {%- endunless -%} {%- endunless -%}