diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index d6488c48..9c327111 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1,903 +1,933 @@ /* webfonts */ :root { - font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-feature-settings: 'liga' on, 'calt' on; - - /* fallback to slightly thinner font on browsers without variable 'wght' support */ - font-weight: 400; - - /* base rem = 16px by default, left as percentage for screen readers */ - font-size: 100%; - - --color-brand: #009639; - --color-brand-300: #a6daba; - --color-brand-200: #ccead7; - --color-brand-100: #f2faf5; - --color-background: #FFFFFF; - --color-foreground: #000000; - --color-shadow: #D2D2D2; - --color-footer: #1D1D1D; - --color-footer-text: #E2E2E2; - --color-product-title: #8D8D8D; - --color-table-divider: #CCCCCC; - --color-codeblock-code-with-comment: #00963926; - - --sidebar-margin: 24px; - --sidebar-line-box-side-length: 8px; - --sidebar-line-box-top: 6px; - --sidebar-line-box-left: 12px; - --sidebar-width: 24rem; - --sidebar-line-width: 11.5px; - --side-gutter-width: 20rem; - --table-top-bottom-spacing: 3rem; - --table-row-space-between: 1.5rem; - --table-min-column-spacing-narrow: 1.5rem; - --table-min-column-spacing-wide: 0.75rem; - --table-header-bottom-spacing: 1rem; - --table-line-height: 1px; - --text-content-width-iphone-13: 30rem; - --text-content-width-mbp-14: 40rem; - --text-content-width-mbp-16: 50rem; - --text-content-width-4k-display: 60rem; - --codeblock-comment-diff: 2rem; - --codeblock-comment-space-between: 10px; - --codeblock-horizontal-line-length: 2rem; - --codeblock-horizontal-line-overflow: 0.25rem; - --codeblock-border-thickness: 1px; - --codeblock-code-section-padding-left: 1rem; - --codeblock-line-box-side-length: 4px; - --component-gap: 3.5rem; - --overflow-gutter-extension: 1rem; - + font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-feature-settings: "liga" on, "calt" on; + + /* fallback to slightly thinner font on browsers without variable 'wght' support */ + font-weight: 400; + + /* base rem = 16px by default, left as percentage for screen readers */ + font-size: 100%; + + --color-brand: #009639; + --color-brand-300: #a6daba; + --color-brand-200: #ccead7; + --color-brand-100: #f2faf5; + --color-background: #ffffff; + --color-foreground: #000000; + --color-shadow: #d2d2d2; + --color-footer: #1d1d1d; + --color-footer-text: #e2e2e2; + --color-product-title: #8d8d8d; + --color-table-divider: #cccccc; + --color-codeblock-code-with-comment: #00963926; + + --sidebar-margin: 24px; + --sidebar-line-box-side-length: 8px; + --sidebar-line-box-top: 6px; + --sidebar-line-box-left: 12px; + --sidebar-width: 24rem; + --sidebar-line-width: 11.5px; + --side-gutter-width: 20rem; + --table-top-bottom-spacing: 3rem; + --table-row-space-between: 1.5rem; + --table-min-column-spacing-narrow: 1.5rem; + --table-min-column-spacing-wide: 0.75rem; + --table-header-bottom-spacing: 1rem; + --table-line-height: 1px; + --text-content-width-iphone-13: 30rem; + --text-content-width-mbp-14: 40rem; + --text-content-width-mbp-16: 50rem; + --text-content-width-4k-display: 60rem; + --codeblock-comment-diff: 2rem; + --codeblock-comment-space-between: 10px; + --codeblock-horizontal-line-length: 2rem; + --codeblock-horizontal-line-overflow: 0.25rem; + --codeblock-border-thickness: 1px; + --codeblock-code-section-padding-left: 1rem; + --codeblock-line-box-side-length: 4px; + --component-gap: 3.5rem; + --overflow-gutter-extension: 1rem; } @supports (font-variation-settings: normal) { - :root { - font-family: InterVariable, sans-serif; - } + :root { + font-family: InterVariable, sans-serif; + } - h1, h2, h3, h4, h5, h6, .breadcrumb { - font-variation-settings: 'wght' 500; - } + h1, + h2, + h3, + h4, + h5, + h6, + .breadcrumb { + font-variation-settings: "wght" 500; + } } -h1, h2, h3, h4, h5, h6, .breadcrumb { - font-weight: 500; +h1, +h2, +h3, +h4, +h5, +h6, +.breadcrumb { + font-weight: 500; } /* header */ p { - font-weight: 400; + font-weight: 400; } /* layout */ header { - margin: 2rem 2rem; - - .header-container { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - } + margin: 2rem 2rem; - ul { - list-style: none; - } + .header-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + } - .dropdown-content { - position: absolute; - background-color: white; - border: black 1px solid; - box-shadow: 3px 3px 0px var(--color-shadow); - z-index: 1; - right: 0; - display: none; - width: 400px; - max-width: 80vw; - margin-right: 2.5rem; - } + ul { + list-style: none; + } - .dropdown-content ul { - padding: 20px 10px; - } + .dropdown-content { + position: absolute; + background-color: white; + border: black 1px solid; + box-shadow: 3px 3px 0px var(--color-shadow); + z-index: 1; + right: 0; + display: none; + width: 400px; + max-width: 80vw; + margin-right: 2.5rem; + } - .navbar-button { - padding: 0.5rem 0.5rem; - border: none; - border-radius: 0.25rem; - text-align: center; - text-decoration: none; - cursor: pointer; - } + .dropdown-content ul { + padding: 20px 10px; + } - .remove-bottom-radius { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } + .navbar-button { + padding: 0.5rem 0.5rem; + border: none; + border-radius: 0.25rem; + text-align: center; + text-decoration: none; + cursor: pointer; + } + + .remove-bottom-radius { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } } /* footer */ footer { - background-color: var(--color-footer); - padding: 2.5rem; - margin: -0.5rem; - margin-top: auto; + background-color: var(--color-footer); + padding: 2.5rem; + margin: -0.5rem; + margin-top: auto; } .footer-layout { - display: grid; - grid-template-columns: 1fr; - font-size: 0.875rem; - gap: 24px; + display: grid; + grid-template-columns: 1fr; + font-size: 0.875rem; + gap: 24px; } .footer-f5-trademark { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 12px; } .footer-f5-trademark p { - margin: 0; - color: var(--color-footer-text); + margin: 0; + color: var(--color-footer-text); } .footer-useful-links { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 18px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 18px; } .footer-useful-links a { - color: var(--color-footer-text); - text-decoration: none; + color: var(--color-footer-text); + text-decoration: none; } @media (min-width: 814px) { - .footer-layout { - display: grid; - grid-template-columns: 1fr 1fr; - font-size: 0.875rem; - } + .footer-layout { + display: grid; + grid-template-columns: 1fr 1fr; + font-size: 0.875rem; + } - .footer-useful-links { - gap: 4px; - } - + .footer-useful-links { + gap: 4px; + } } /* breadcrumbs */ nav { - display: flex; - align-items: center; + display: flex; + align-items: center; - .logo { - height: 3rem; - width: 3rem; - - } + .logo { + height: 3rem; + width: 3rem; + } - .links a { - margin: 0 0 0 1rem; - } + .links a { + margin: 0 0 0 1rem; + } } /* main content */ .docs-container * { - box-sizing: border-box; + box-sizing: border-box; } .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); - column-gap: var(--component-gap); + display: grid; + grid-template-columns: var(--text-content-width-iphone-13) var( + --side-gutter-width + ); + column-gap: var(--component-gap); } .docs-container { - min-width: 100%; + min-width: 100%; } .sidebar-layout { - display: flex; - flex-direction: column; - z-index: 9999; + display: flex; + flex-direction: column; + z-index: 9999; } -@media (max-width: 1512px){ - .sidebar-layout { - display: none; - } +@media (max-width: 1512px) { + .sidebar-layout { + display: none; + } } #searchbox { - width: 24rem; - display:none; - grid-column: 1; + width: 24rem; + display: none; + grid-column: 1; } /* main content */ .docs-container * { - box-sizing: border-box; + box-sizing: border-box; } .docs-container { - min-width: 100%; + min-width: 100%; } .breadcrumb-layout { - margin: 0 2rem; + margin: 0 2rem; } .main-layout { - display: grid; - grid-template-columns: 1fr; + display: grid; + grid-template-columns: 1fr; } .sidebar-container { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .text-content { - grid-column-start: 1; - display: grid; + grid-column-start: 1; + display: grid; } .text-content > :not(.wide) { - grid-column: 1; + grid-column: 1; } .text-content .wide { - grid-column: 1 / -1; + grid-column: 1 / -1; } .text-content table { - width: 100%; + width: 100%; } -@media (min-width: 1512px) { /* Macbook Pro 14 */ - .base-layout { - display: grid; - grid-template-rows: repeat(2, auto); - column-gap: var(--component-gap); - } +@media (min-width: 1512px) { + /* Macbook Pro 14 */ + .base-layout { + display: grid; + grid-template-rows: repeat(2, auto); + column-gap: var(--component-gap); + } - .breadcrumb-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - align-items: center; - } + .breadcrumb-layout { + display: grid; + grid-template-columns: var(--sidebar-width) 1fr; + column-gap: var(--component-gap); + align-items: center; + } - .text-content { - grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); - column-gap: var(--component-gap); - } + .text-content { + grid-template-columns: var(--text-content-width-mbp-14) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } - .main-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - } + .main-layout { + display: grid; + grid-template-columns: var(--sidebar-width) 1fr; + column-gap: var(--component-gap); + } - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); - column-gap: var(--component-gap); - } + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-mbp-14) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } - .content-layout .side-gutter { - grid-column-start: 2; - } + .content-layout .side-gutter { + grid-column-start: 2; + } } -@media (min-width: 1728px) { /* Macbook Pro 16 */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); - column-gap: var(--component-gap); - } +@media (min-width: 1728px) { + /* Macbook Pro 16 */ + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-mbp-16) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } - .text-content { - grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); - column-gap: var(--component-gap); - } + .text-content { + grid-template-columns: var(--text-content-width-mbp-16) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } } -@media (min-width: 2560px) { /* 4k Desktop */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); - column-gap: var(--component-gap); - } +@media (min-width: 2560px) { + /* 4k Desktop */ + .content-layout { + display: grid; + grid-template-columns: var(--text-content-width-4k-display) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } - .text-content { - grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); - column-gap: var(--component-gap); - } + .text-content { + grid-template-columns: var(--text-content-width-4k-display) var( + --side-gutter-width + ); + column-gap: var(--component-gap); + } } .main { - display: flex; + display: flex; } .sidebar { - display: flex; - flex-direction: column; - width: 24rem; - position: sticky; - top: 0; - height: 100vh; + display: flex; + flex-direction: column; + width: 24rem; + position: sticky; + top: 0; + height: 100vh; } .sidebar .product-selector-button { - display: flex; - align-items: center; - justify-content: space-between; - background-color: var(--color-brand); - color: var(--color-brand-100); - border: none; - font-size: 1.25rem; - width: 100%; - padding: 0.5rem; - cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--color-brand); + color: var(--color-brand-100); + border: none; + font-size: 1.25rem; + width: 100%; + padding: 0.5rem; + cursor: pointer; } .sidebar .product-selector-button .selector-icon { - height: 24px; - width: 24px; + height: 24px; + width: 24px; } .product-selector { - display: none; - position: absolute; - top: 0; - min-width: 80%; - margin-left: 46rem; - padding: 1rem 1.5rem; - background-color: white; - border: black 1px solid; - box-shadow: 3px 3px 0px var(--color-shadow); + display: none; + position: absolute; + top: 0; + min-width: 80%; + margin-left: 46rem; + padding: 1rem 1.5rem; + background-color: white; + border: black 1px solid; + box-shadow: 3px 3px 0px var(--color-shadow); } .product-selector p { - font-size: 0.75rem; - color: var(--color-product-title); - display: inline; + font-size: 0.75rem; + color: var(--color-product-title); + display: inline; } .product-selector ul { - padding-left: 0; - margin-top: 0; - list-style-type: none; + padding-left: 0; + margin-top: 0; + list-style-type: none; } .product-selector a { - text-decoration: none; - color: black; - font-size: 1rem; + text-decoration: none; + color: black; + font-size: 1rem; } -/* Sidebar scroller */ +/* Sidebar scroller */ .sidebar .scrollbar-container { - width: 100%; - max-height: 100vh; - overflow: hidden; - scrollbar-gutter: stable; + width: 100%; + max-height: 100vh; + overflow: hidden; + scrollbar-gutter: stable; } .sidebar .scrollbar-container:hover { - overflow: auto; + overflow: auto; } .sidebar .sidebar-navigation { - margin-left: var(--sidebar-margin); + margin-left: var(--sidebar-margin); } /* removes the built in ul padding/margin */ .sidebar .sidebar-navigation ul { - margin-left: 0; - padding-left: 0; - list-style-type: none; + margin-left: 0; + padding-left: 0; + list-style-type: none; } .sidebar ul :not(.sidebar-navigation) ul { - padding-left: 16px; + padding-left: 16px; } .sidebar .sidebar-navigation li { - margin-bottom: 16px; + margin-bottom: 16px; } .sidebar .sidebar-navigation a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } .sidebar .sidebar-navigation .collapsible-header { - cursor: pointer; + cursor: pointer; } .sidebar .sidebar-navigation .collapsible-content { - display: none; - position: relative; + display: none; + position: relative; } .sidebar .sidebar-navigation .parent-box.opened, .sidebar .sidebar-navigation .box.opened { - display: none; + display: none; } .toggle-checkbox:checked ~ .collapsible-header .parent-box.expand, .toggle-checkbox:checked ~ .collapsible-header .box.expand { - display: none; + display: none; } .toggle-checkbox:checked ~ .collapsible-content { - display: block; + display: block; } .toggle-checkbox:checked ~ .collapsible-header .parent-box.opened { - display: inline-block; + display: inline-block; } .toggle-checkbox:checked ~ .collapsible-header .box.opened { - display: block; + display: block; } /* Every other Sidebar Partial Vertical Line */ .toggle-checkbox:checked ~ .collapsible-content::before { - content: ''; - position: absolute; - border-left: black 1px solid; - left: -8.5px; - top: -22.5px; - height: calc(100% + 13.5px); + content: ""; + position: absolute; + border-left: black 1px solid; + left: -8.5px; + top: -22.5px; + height: calc(100% + 13.5px); } /* Every other Sidebar Partial Horizontal Lines */ .toggle-checkbox:checked ~ .collapsible-content li { - position: relative; + position: relative; } .collapsible-content .box::after { - content: ''; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; + content: ""; + position: absolute; + border-top: black 1px solid; + left: -11.5px; + width: var(--sidebar-line-width); + top: 50%; } .collapsible-content .opened::after { - content: ''; - position: absolute; - border-top: black 1px solid; - left: -12.5px; - width: var(--sidebar-line-width); - top: 50%; + content: ""; + position: absolute; + border-top: black 1px solid; + left: -12.5px; + width: var(--sidebar-line-width); + top: 50%; } .collapsible-content .box-link::after { - content: ''; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; + content: ""; + position: absolute; + border-top: black 1px solid; + left: -11.5px; + width: var(--sidebar-line-width); + top: 50%; } .selected { - font-weight: 800; + font-weight: 800; } .sidebar .sidebar-navigation li:first-child { - margin-top: 16px; + margin-top: 16px; } .sidebar .sidebar-navigation ul li .parent-box-link { - content: ''; - background-color: black; - position: absolute; - width: 1px; - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: calc(0px - var(--sidebar-line-box-left)); + content: ""; + background-color: black; + position: absolute; + width: 1px; + height: var(--sidebar-line-box-side-length); + margin-top: var(--sidebar-line-box-top); + left: calc(0px - var(--sidebar-line-box-left)); } .sidebar .sidebar-navigation ul li .box-link { - content: ''; - background-color: black; - position: absolute; - width: 1px; - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: var(--sidebar-line-box-left); + content: ""; + background-color: black; + position: absolute; + width: 1px; + height: var(--sidebar-line-box-side-length); + margin-top: var(--sidebar-line-box-top); + left: var(--sidebar-line-box-left); } .sidebar .sidebar-navigation ul li .parent-box { - content: ''; - display: inline-block; - width: var(--sidebar-line-box-side-length); - height: var(--sidebar-line-box-side-length); - vertical-align: middle; - margin-left: -12px; - margin-top: -4px; + content: ""; + display: inline-block; + width: var(--sidebar-line-box-side-length); + height: var(--sidebar-line-box-side-length); + vertical-align: middle; + margin-left: -12px; + margin-top: -4px; } -.sidebar .sidebar-navigation ul li .box { - content: ''; - position: absolute; - width: var(--sidebar-line-box-side-length); - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: var(--sidebar-line-box-left); +.sidebar .sidebar-navigation ul li .box { + content: ""; + position: absolute; + width: var(--sidebar-line-box-side-length); + height: var(--sidebar-line-box-side-length); + margin-top: var(--sidebar-line-box-top); + left: var(--sidebar-line-box-left); } -.sidebar .sidebar-navigation ul li .expand { - background-color: black; +.sidebar .sidebar-navigation ul li .expand { + background-color: black; } -.sidebar .sidebar-navigation ul li .opened { - border: black 1px solid; +.sidebar .sidebar-navigation ul li .opened { + border: black 1px solid; } -.sidebar .sidebar-navigation ul li .current { - background-color: var(--color-brand); - z-index: 999; +.sidebar .sidebar-navigation ul li .current { + background-color: var(--color-brand); + z-index: 999; } .sidebar .sidebar-navigation ul li .partial-box { - margin-left: -24px; + margin-left: -24px; } .sidebar .sidebar-navigation ul li .partial { - margin-top: 0; - top: calc(50% - 3.5px); - left: -13px; + margin-top: 0; + top: calc(50% - 3.5px); + left: -13px; } /* First Sidebar Nav Vertical Line */ .sidebar .sidebar-navigation .parent-collapsible-content { - position: relative; + position: relative; } .sidebar .sidebar-navigation .parent-collapsible-content::before { - content: ''; - position: absolute; - border-left: black 1px solid; - left: -24px; - top: 10px; - height: calc(100% - 9px - 10px); + content: ""; + position: absolute; + border-left: black 1px solid; + left: -24px; + top: 10px; + height: calc(100% - 9px - 10px); } /* First Sidebar Nav Horizontal Lines */ .sidebar .sidebar-navigation .parent-collapsible-content .parent-box::before { - content: ''; - display: block; - border-top: black 1px solid; - margin-left: -12px; - margin-top: 50%; - width: var(--sidebar-line-width); + content: ""; + display: block; + border-top: black 1px solid; + margin-left: -12px; + margin-top: 50%; + width: var(--sidebar-line-width); } .parent-collapsible-content .parent-box-link::after { - content: ''; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; + content: ""; + position: absolute; + border-top: black 1px solid; + left: -11.5px; + width: var(--sidebar-line-width); + top: 50%; } .row { - display: flex; - flex-wrap: nowrap; - align-items: flex-start; + display: flex; + flex-wrap: nowrap; + align-items: flex-start; } /* content */ main { - flex: 1; - max-width: 50rem; - min-width: 40rem; - margin: 2rem 2rem; + flex: 1; + max-width: 50rem; + min-width: 40rem; + margin: 2rem 2rem; } p { - margin: 0 0 1.5rem 0; - line-height: 1.5rem; + margin: 0 0 1.5rem 0; + line-height: 1.5rem; } .breadcrumb { - color: var(--color-foreground); - text-decoration: none; - font-size: 0.875rem; - grid-column: 2 / -1; + color: var(--color-foreground); + text-decoration: none; + font-size: 0.875rem; + grid-column: 2 / -1; } .breadcrumb .active { - font-weight: 600; + font-weight: 600; } .breadcrumb ol { - list-style: none; - padding: 0; - display: flex; + list-style: none; + padding: 0; + display: flex; } .breadcrumb li:after { - padding: 0 0.25rem; - content: "\E1D7"; + padding: 0 0.25rem; + content: "\E1D7"; } - a { - color: var(--color-brand); + color: var(--color-brand); } h1 { - font-size: 2rem; - margin: 0 0 2rem 0; + font-size: 2rem; + margin: 0 0 2rem 0; } h2 { - font-size: 1.5rem; - margin: 3rem 0 1rem 0; + font-size: 1.5rem; + margin: 3rem 0 1rem 0; } /* tables */ table { - td { - padding: var(--table-row-space-between) 0; - } - - th { - font-weight: bold; - text-align: start; - vertical-align: top; - padding-bottom: var(--table-header-bottom-spacing); - } - - tr { - position: relative; - } - - tr::after { - content: ''; - position: absolute; - border-bottom: var(--table-line-height) solid var(--color-table-divider); - bottom: 0; - left: calc(-1 * var(--overflow-gutter-extension)); - width: calc(100% + (2 * var(--overflow-gutter-extension))); - } + td { + padding: var(--table-row-space-between) 0; + } + + th { + font-weight: bold; + text-align: start; + vertical-align: top; + padding-bottom: var(--table-header-bottom-spacing); + } + + tr { + position: relative; + } + + tr::after { + content: ""; + position: absolute; + border-bottom: var(--table-line-height) solid var(--color-table-divider); + bottom: 0; + left: calc(-1 * var(--overflow-gutter-extension)); + width: calc(100% + (2 * var(--overflow-gutter-extension))); + } } .narrow table { - min-width: 100%; - margin: var(--table-top-bottom-spacing) 0; - border-collapse: collapse; + min-width: 100%; + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; } .wide table { - margin: var(--table-top-bottom-spacing) 0; - border-collapse: collapse; + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; } .narrow table th, .narrow table td { - padding-left: var(--table-min-column-spacing-narrow); + padding-left: var(--table-min-column-spacing-narrow); } .wide table th, .wide table td { - padding-left: var(--table-min-column-spacing-wide); + padding-left: var(--table-min-column-spacing-wide); } table th:first-child, table td:first-child { - padding-left: 0; + padding-left: 0; } table hr { - color: var(--color-table-divider); - border: none; - border-bottom: var(--table-line-height) solid var(--color-table-divider); + color: var(--color-table-divider); + border: none; + border-bottom: var(--table-line-height) solid var(--color-table-divider); } /* callouts */ blockquote { - border: 1px solid var(--color-foreground); - padding: 1rem; - margin: 3rem -1rem; + border: 1px solid var(--color-foreground); + padding: 1rem; + margin: 3rem -1rem; - /* solid 3px drop shadow */ - box-shadow: 3px 3px 0px var(--color-shadow); + /* solid 3px drop shadow */ + box-shadow: 3px 3px 0px var(--color-shadow); } -blockquote.note:before{ - content: "Note"; - text-transform: uppercase; - font-size: 1rem; - font-weight: 600; - font-variation-settings: 'wght' 600; +blockquote.note:before { + content: "Note"; + text-transform: uppercase; + font-size: 1rem; + font-weight: 600; + font-variation-settings: "wght" 600; - position: absolute; - margin: -1.625rem 0 0 -0.25rem; - padding: 0 0.25rem; - display: block; - background-color: var(--color-background); + position: absolute; + margin: -1.625rem 0 0 -0.25rem; + padding: 0 0.25rem; + display: block; + background-color: var(--color-background); } blockquote p:first-child { - margin: 0 auto 1rem auto; + margin: 0 auto 1rem auto; } blockquote p:last-child { - margin: 0 auto; + margin: 0 auto; } /* Codeblocks */ .highlight-mf { - grid-column: 1 / -1 !important; + grid-column: 1 / -1 !important; + position: relative; + margin-left: calc(var(--overflow-gutter-extension) / -2); + width: calc(100% + var(--overflow-gutter-extension)); + + code { + font-weight: light; + font-family: "JetBrains Mono", monospace; + display: flex; + flex-direction: column; + } + + pre.chroma { + overflow-x: auto; + box-sizing: border-box; + } + + code .line { position: relative; - margin-left: calc(var(--overflow-gutter-extension) / -2); - width: calc(100% + var(--overflow-gutter-extension)); - - code { - font-weight: light; - font-family: 'JetBrains Mono', monospace; - display: flex; - flex-direction: column; - } - - pre.chroma { - overflow-x: auto; - box-sizing: border-box; - } - - code .line { - position: relative; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-areas: " code " - " comment "; - } - + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + " code " + " comment "; + } + + code .line:has(.comment) .code { + display: inline-block; + height: fit-content; + white-space: pre-wrap; + width: 100%; + background-color: var(--color-codeblock-code-with-comment); + margin: var(--codeblock-comment-space-between) 0; + position: relative; + grid-column: 1 / -1; + } + + code .line:not(:has(.comment)) .code { + grid-column: 1 / -1; + grid-row: 1; + } + + code:not(:has(.comment)) .code { + /* For codeblocks without comments */ + grid-column: 1 / -1 !important; + grid-row: 1; + padding-left: 0; + } + + code .code { + padding-left: var(--codeblock-code-section-padding-left); + grid-area: code; + } + + code .comment { + display: inline-block; + white-space: normal; + margin: var(--codeblock-comment-space-between) 0; + width: calc(100vw - (var(--codeblock-comment-diff) * 2)); + border: black var(--codeblock-border-thickness) solid; + box-shadow: 3px 3px 0px var(--color-shadow); + padding: 8px; + grid-column: 1 / -1; + } + + code .line:has(.comment) .code::before { + /* Vertical Lines */ + content: ""; + position: absolute; + border-left: black var(--codeblock-border-thickness) solid; + left: calc(var(--codeblock-horizontal-line-overflow) + 1px); + top: 10px; + height: calc(100% + 0.7rem); + } + + code .line:has(.comment) .code::after { + /* Block */ + content: ""; + background-color: black; + position: absolute; + height: var(--codeblock-line-box-side-length); + width: var(--codeblock-line-box-side-length); + top: calc(10px - (var(--codeblock-border-thickness) * 1.5)); + left: var(--codeblock-horizontal-line-overflow); + } + + @media (min-width: 768px) { + /* Tablet */ code .line:has(.comment) .code { - display: inline-block; - height: fit-content; - white-space: pre-wrap; - width: 100%; - background-color: var(--color-codeblock-code-with-comment); - margin: var(--codeblock-comment-space-between) 0; - position: relative; - grid-column: 1 / -1; + grid-column: 2 / -1; } - - code .line:not(:has(.comment)) .code { - grid-column: 1 / -1; - grid-row: 1; - } - - code:not(:has(.comment)) .code { - /* For codeblocks without comments */ - grid-column: 1 / -1 !important; - grid-row: 1; - padding-left: 0; - } - - code .code { - padding-left: var(--codeblock-code-section-padding-left); - grid-area: code; - } - + code .comment { - display: inline-block; - white-space: normal; - margin: var(--codeblock-comment-space-between) 0; - width: calc(100vw - (var(--codeblock-comment-diff) * 2)); - border: black var(--codeblock-border-thickness) solid; - box-shadow: 3px 3px 0px var(--color-shadow); - padding: 8px; - grid-column: 1 / -1; + grid-column: 1; + width: calc(100% - (var(--codeblock-comment-diff))); } - - code .line:has(.comment) .code::before { - /* Vertical Lines */ - content: ''; - position: absolute; - border-left: black var(--codeblock-border-thickness) solid; - left: calc(var(--codeblock-horizontal-line-overflow) + 1px); - top: 10px; - height: calc(100% + 0.7rem); + + code .line:not(:has(.comment)) .code { + grid-column: 2 / -1; } - - code .line:has(.comment) .code::after { - /* Block */ - content: ''; - background-color: black; - position: absolute; - height: var(--codeblock-line-box-side-length); - width: var(--codeblock-line-box-side-length); - top: calc(10px - (var(--codeblock-border-thickness) * 1.5)); - left: var(--codeblock-horizontal-line-overflow); + + code .line { + /* Readjust the areas to be more responsive */ + grid-template-columns: 40% 60%; + grid-template-areas: "comment code"; } - - @media (min-width: 768px) { /* Tablet */ - code .line:has(.comment) .code { - grid-column: 2 / -1; - } - - code .comment { - grid-column: 1; - width: calc(100% - (var(--codeblock-comment-diff))); - } - - code .line:not(:has(.comment)) .code { - grid-column: 2 / -1; - } - - code .line { - /* Readjust the areas to be more responsive */ - grid-template-columns: 40% 60%; - grid-template-areas: "comment code"; - } - - code .line:has(.comment) .code::before { - /* Horizontal Lines */ - border-left: none; - border-top: black var(--codeblock-border-thickness) solid; - left: calc(var(--codeblock-comment-diff) * -1); - width: calc(var(--codeblock-horizontal-line-length) + var(--codeblock-horizontal-line-overflow)); - } + + code .line:has(.comment) .code::before { + /* Horizontal Lines */ + border-left: none; + border-top: black var(--codeblock-border-thickness) solid; + left: calc(var(--codeblock-comment-diff) * -1); + width: calc( + var(--codeblock-horizontal-line-length) + + var(--codeblock-horizontal-line-overflow) + ); } - + } } /* Logo */ .f5-logo-footer { - height: 32px; - width: 32px; + height: 32px; + width: 32px; } .nginx-logo-footer { - height: 72px; - width: 156px; + height: 72px; + width: 156px; } /* FILTHY HACKS BEGIN */ /* Override logo with black text version */ .navbar-brand { - height: 3.5rem; - display: block; - - /* non-tiling background logo */ - background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg); - background-repeat: no-repeat; - background-size: contain; - background-position: left center; - width: 200px; /* Adjust the width as needed to fit the logo */ - - img { - display: none; - } + height: 3.5rem; + display: block; + + /* non-tiling background logo */ + background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: left center; + width: 200px; /* Adjust the width as needed to fit the logo */ + + img { + display: none; + } } /* FILTHY HACKS END */ /* Hidden temporarily */ .code-copy { - display: none; + display: none; } @media print { - .qualtrics-feedback { - visibility: hidden; - } + .qualtrics-feedback { + visibility: hidden; } - \ No newline at end of file +} diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js index fcdc579a..f1bfa1e2 100644 --- a/assets/js/code-copy.js +++ b/assets/js/code-copy.js @@ -1,16 +1,16 @@ function CopyCode(clipboard) { - document.querySelectorAll(".highlight").forEach((codeBlock) => { - const button = document.createElement("button"); - button.className = "code-copy"; - button.type = "button"; + document.querySelectorAll('.highlight').forEach((codeBlock) => { + const button = document.createElement('button'); + button.className = 'code-copy'; + button.type = 'button'; button.innerHTML = ' Copy'; - button.addEventListener("click", async () => { + button.addEventListener('click', async () => { try { await clipboard.writeText( codeBlock.textContent - .replace(/^\s*\d+\s/gm, "") // remove line numbers - .replace(/^\s*|\s*$/g, "") // remove carriage returns at top and bottom of block + .replace(/^\s*\d+\s/gm, '') // remove line numbers + .replace(/^\s*|\s*$/g, '') // remove carriage returns at top and bottom of block ); button.blur(); /* Chrome fix */ diff --git a/assets/js/coveo.js b/assets/js/coveo.js index 349f0b50..a3ef7d04 100644 --- a/assets/js/coveo.js +++ b/assets/js/coveo.js @@ -1,5 +1,5 @@ function isJwtExpired(token) { - const parts = token.split("."); + const parts = token.split('.'); if (parts.length !== 3) { return true; } @@ -15,19 +15,19 @@ function isJwtExpired(token) { async function getsearchObj() { const response = await fetch( - window.location.origin + "/api/v1/auth/search_token" + window.location.origin + '/api/v1/auth/search_token' ); return response.json(); } -document.addEventListener("DOMContentLoaded", async function () { - const token = localStorage.getItem("coveo_jwt_v1"); - const org_id = localStorage.getItem("coveo_org_id_v1"); +document.addEventListener('DOMContentLoaded', async () => { + const token = localStorage.getItem('coveo_jwt_v1'); + const org_id = localStorage.getItem('coveo_org_id_v1'); let searchObj = { token, org_id }; if (token === null || org_id === null || isJwtExpired(token)) { searchObj = await getsearchObj(); - localStorage.setItem("coveo_jwt_v1", searchObj.token); - localStorage.setItem("coveo_org_id_v1", searchObj.org_id); + localStorage.setItem('coveo_jwt_v1', searchObj.token); + localStorage.setItem('coveo_org_id_v1', searchObj.org_id); } Coveo.SearchEndpoint.configureCloudV2Endpoint( @@ -36,44 +36,44 @@ document.addEventListener("DOMContentLoaded", async function () { `https://${searchObj.org_id}.org.coveo.com/rest/search` ); - const analyticsElement = document.querySelector(".CoveoAnalytics"); + const analyticsElement = document.querySelector('.CoveoAnalytics'); if (analyticsElement) { const analyticsEndpoint = `https://${searchObj.org_id}.analytics.org.coveo.com/rest/ua`; - analyticsElement.setAttribute("data-endpoint", analyticsEndpoint); + analyticsElement.setAttribute('data-endpoint', analyticsEndpoint); } - const root = document.getElementById("search"); - const searchBoxRoot = document.getElementById("searchbox"); - Coveo.initSearchbox(searchBoxRoot, "/search.html"); - var resetbtn = document.querySelector("#reset_btn"); + const root = document.getElementById('search'); + const searchBoxRoot = document.getElementById('searchbox'); + Coveo.initSearchbox(searchBoxRoot, '/search.html'); + const resetbtn = document.querySelector('#reset_btn'); if (resetbtn) { - resetbtn.onclick = function () { - document.querySelector(".coveo-facet-header-eraser").click(); + resetbtn.onclick = () => { + document.querySelector('.coveo-facet-header-eraser').click(); }; } - Coveo.$$(root).on("querySuccess", function (e, args) { - resetbtn.style.display = "block"; + Coveo.$$(root).on('querySuccess', (e, args) => { + resetbtn.style.display = 'block'; }); - Coveo.$$(root).on("afterComponentsInitialization", function (e, data) { - setTimeout(function () { - document.querySelector(".CoveoOmnibox input").value = Coveo.state( + Coveo.$$(root).on('afterComponentsInitialization', (e, data) => { + setTimeout(() => { + document.querySelector('.CoveoOmnibox input').value = Coveo.state( root, - "q" + 'q' ); }, 1000); }); - Coveo.$("#search").on("newResultsDisplayed", function (e, args) { - for (var i = 0; i < e.target.lastChild.children.length; i++) { + Coveo.$('#search').on('newResultsDisplayed', (e, args) => { + for (let i = 0; i < e.target.lastChild.children.length; i++) { //Remove the title for tooltip box - Coveo.$(".CoveoResultLink").removeAttr("title"); + Coveo.$('.CoveoResultLink').removeAttr('title'); } }); Coveo.init(root, { f5_product_module: { - dependsOn: "@f5_product", + dependsOn: '@f5_product', dependsOnCondition: (parentFacet) => { const id = parentFacet.options.id; - const value = "NGINX Management Suite"; + const value = 'NGINX Management Suite'; const selected = parentFacet.queryStateModel.get(`f:${id}`); return selected.includes(value); }, diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js index 5e4693f1..2b57a7d1 100644 --- a/assets/js/product-selector.js +++ b/assets/js/product-selector.js @@ -1,25 +1,30 @@ -document.addEventListener("DOMContentLoaded", function() { - const productSelectorContent = document.getElementById("product-selector"); - const productSelectorButton = document.getElementById("product-selector-button"); +document.addEventListener('DOMContentLoaded', () => { + const productSelectorContent = document.getElementById('product-selector'); + const productSelectorButton = document.getElementById( + 'product-selector-button' + ); - if (productSelectorButton === null || productSelectorButton == null) { - return; - } + if (productSelectorButton === null || productSelectorButton == null) { + return; + } - productSelectorButton.addEventListener("click", function() { - if (productSelectorContent.style.display === "block") { - productSelectorContent.style.display = "none"; - productSelectorButton.classList.remove("remove-bottom-radius"); - } else { - productSelectorContent.style.display = "block"; - productSelectorButton.classList.add("remove-bottom-radius"); - } - }); + productSelectorButton.addEventListener('click', () => { + if (productSelectorContent.style.display === 'block') { + productSelectorContent.style.display = 'none'; + productSelectorButton.classList.remove('remove-bottom-radius'); + } else { + productSelectorContent.style.display = 'block'; + productSelectorButton.classList.add('remove-bottom-radius'); + } + }); - window.addEventListener("click", function(event) { - if (!event.target.matches('#product-selector-button') && !event.target.matches('#product-selector-button-icon')) { - productSelectorContent.style.display = "none"; - } - productSelectorButton.classList.remove("remove-bottom-radius"); - }); -}); \ No newline at end of file + window.addEventListener('click', (event) => { + if ( + !event.target.matches('#product-selector-button') && + !event.target.matches('#product-selector-button-icon') + ) { + productSelectorContent.style.display = 'none'; + } + productSelectorButton.classList.remove('remove-bottom-radius'); + }); +}); diff --git a/assets/js/sidebar-v2.js b/assets/js/sidebar-v2.js index b90ce91d..ff7cf591 100644 --- a/assets/js/sidebar-v2.js +++ b/assets/js/sidebar-v2.js @@ -1,17 +1,17 @@ -document.addEventListener("DOMContentLoaded", function() { - function expandToCurrentPage() { - const currentPage = document.getElementById("current-page"); - if (currentPage) { - let parentLabel = currentPage.closest("li"); - while (parentLabel) { - let checkbox = parentLabel.querySelector(".toggle-checkbox"); - if (checkbox) { - checkbox.checked = true; - } - parentLabel = parentLabel.closest("ul").closest("li"); - } +document.addEventListener('DOMContentLoaded', () => { + function expandToCurrentPage() { + const currentPage = document.getElementById('current-page'); + if (currentPage) { + let parentLabel = currentPage.closest('li'); + while (parentLabel) { + const checkbox = parentLabel.querySelector('.toggle-checkbox'); + if (checkbox) { + checkbox.checked = true; } + parentLabel = parentLabel.closest('ul').closest('li'); + } } + } - expandToCurrentPage(); -}) \ No newline at end of file + expandToCurrentPage(); +}); diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js index 7bf4526c..8cbd8ce1 100644 --- a/assets/js/sidebar.js +++ b/assets/js/sidebar.js @@ -1,101 +1,101 @@ -const LOCAL_STORAGE_COLLAPSE_KEY = "sidebar-collapsed"; +const LOCAL_STORAGE_COLLAPSE_KEY = 'sidebar-collapsed'; function handleInitialCollapse() { const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY); - if (collapsed === "true") { - $("#sidebar-toggle-button").attr({ - "aria-expanded": "false", - title: "Show sidebar navigation", + if (collapsed === 'true') { + $('#sidebar-toggle-button').attr({ + 'aria-expanded': 'false', + title: 'Show sidebar navigation', }); - $(".sidenav").css("max-width", "2.4rem"); - $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed"); - $(".content").addClass("sidebar-content-collapsed-width"); - $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width"); + $('.sidenav').css('max-width', '2.4rem'); + $('#sidebar-wrapper').addClass('sidebar-toggle-collapsed'); + $('.content').addClass('sidebar-content-collapsed-width'); + $('.nginx-docs-api-container').addClass('sidebar-redoc-collapsed-width'); } else { - $("#sidebar-toggle-button").attr({ - "aria-expanded": "true", - title: "Hide sidebar navigation", + $('#sidebar-toggle-button').attr({ + 'aria-expanded': 'true', + title: 'Hide sidebar navigation', }); - $(".sidenav").css("max-width", "100%"); - $(".content").addClass("sidebar-content-collapsed-width"); - $("#sidebar-wrapper").addClass("hide-sidebar-border"); + $('.sidenav').css('max-width', '100%'); + $('.content').addClass('sidebar-content-collapsed-width'); + $('#sidebar-wrapper').addClass('hide-sidebar-border'); } } function handleSetCollapse() { - $("#sidebar-wrapper").addClass("sidebar-toggle-animate"); + $('#sidebar-wrapper').addClass('sidebar-toggle-animate'); const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY); - if (collapsed === "false") { - $("#sidebar-toggle-button").attr({ - "aria-expanded": "false", - title: "Show sidebar navigation", + if (collapsed === 'false') { + $('#sidebar-toggle-button').attr({ + 'aria-expanded': 'false', + title: 'Show sidebar navigation', }); - $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed"); - $(".content").addClass("sidebar-content-collapsed-width"); - $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width"); + $('#sidebar-wrapper').addClass('sidebar-toggle-collapsed'); + $('.content').addClass('sidebar-content-collapsed-width'); + $('.nginx-docs-api-container').addClass('sidebar-redoc-collapsed-width'); localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, true); } else { - $("#sidebar-toggle-button").attr({ - "aria-expanded": "true", - title: "Hide sidebar navigation", + $('#sidebar-toggle-button').attr({ + 'aria-expanded': 'true', + title: 'Hide sidebar navigation', }); - $(".sidenav").css("max-width", "100%"); - $("#sidebar-wrapper").addClass("hide-sidebar-border"); - $("#sidebar-wrapper").removeClass("sidebar-toggle-collapsed"); - $(".content").removeClass("sidebar-content-collapsed-width"); - $(".nginx-docs-api-container").removeClass("sidebar-redoc-collapsed-width"); + $('.sidenav').css('max-width', '100%'); + $('#sidebar-wrapper').addClass('hide-sidebar-border'); + $('#sidebar-wrapper').removeClass('sidebar-toggle-collapsed'); + $('.content').removeClass('sidebar-content-collapsed-width'); + $('.nginx-docs-api-container').removeClass('sidebar-redoc-collapsed-width'); localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, false); } } function handleAnimationEnd(event) { const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY); - if (collapsed === "true") { - $(this).css("max-width", "2.4rem"); + if (collapsed === 'true') { + $(this).css('max-width', '2.4rem'); } } // This code makes the sidebar remember which sections has been clicked when using the sidebar -$(document).ready(function () { +$(document).ready(() => { // sidebar toggle navigation logic handleInitialCollapse(); - $("#sidebar-toggle-button").on("click", handleSetCollapse); - $(".sidenav").on("transitionend", handleAnimationEnd); + $('#sidebar-toggle-button').on('click', handleSetCollapse); + $('.sidenav').on('transitionend', handleAnimationEnd); - $(".sidebar .nginx-toc-link a").each(function (i, item) { - if (item.dataset.menuId == $(".main").data("menuId")) { - $(item).css("color", "#429345"); - $(item).css("font-weight", "500"); + $('.sidebar .nginx-toc-link a').each((i, item) => { + if (item.dataset.menuId === $('.main').data('menuId')) { + $(item).css('color', '#429345'); + $(item).css('font-weight', '500'); // Remove "collapsed" class and set aria-expanded to "true" for the current item - $(item).removeClass("collapsed"); - $(item).attr("aria-expanded", "true"); + $(item).removeClass('collapsed'); + $(item).attr('aria-expanded', 'true'); // Capture data-target value - var targetId = $(item).data("target"); + const targetId = $(item).data('target'); if (!targetId) { - var hrefValue = $(item).attr("href"); + const hrefValue = $(item).attr('href'); // Add "show" class to the corresponding divs with matching id - var targetDivs = $("div[id='" + hrefValue.replace("#", "") + "']"); - targetDivs.addClass("show"); + const targetDivs = $("div[id='" + hrefValue.replace('#', '') + "']"); + targetDivs.addClass('show'); } else { - $(targetId).addClass("show"); + $(targetId).addClass('show'); } // Expand parents $(item) - .parents(".collapse") - .each(function (i, el) { - var col = new bootstrap.Collapse(el, { + .parents('.collapse') + .each((i, el) => { + const col = new bootstrap.Collapse(el, { toggle: false, }); col.show(); }); - $(item).next(".accordion-body").find(".collapse").addClass("show"); + $(item).next('.accordion-body').find('.collapse').addClass('show'); } }); }); diff --git a/assets/js/site-dropdown.js b/assets/js/site-dropdown.js index a5abe112..4d9c9ec3 100644 --- a/assets/js/site-dropdown.js +++ b/assets/js/site-dropdown.js @@ -1,27 +1,33 @@ -document.addEventListener("DOMContentLoaded", function () { - const dropdownContent = document.getElementById("dropdown-content"); - const navbarButton = document.getElementById("navbar-sites-button"); - const chevronIcon = document.getElementById("navbar-sites-button-icon"); +document.addEventListener('DOMContentLoaded', () => { + const dropdownContent = document.getElementById('dropdown-content'); + const navbarButton = document.getElementById('navbar-sites-button'); + const chevronIcon = document.getElementById('navbar-sites-button-icon'); - navbarButton.addEventListener("click", function () { - chevronIcon.classList.toggle('rotate-chevron'); + navbarButton.addEventListener('click', () => { + chevronIcon.classList.toggle('rotate-chevron'); - if (dropdownContent.style.display === "block") { - dropdownContent.style.display = "none"; - navbarButton.classList.remove("remove-bottom-radius"); - } else { - dropdownContent.style.display = "block"; - navbarButton.classList.add("remove-bottom-radius"); - } - }); + if (dropdownContent.style.display === 'block') { + dropdownContent.style.display = 'none'; + navbarButton.classList.remove('remove-bottom-radius'); + } else { + dropdownContent.style.display = 'block'; + navbarButton.classList.add('remove-bottom-radius'); + } + }); - window.addEventListener("click", function (event) { - if (!event.target.matches('#navbar-sites-button') && !event.target.matches('#navbar-sites-button-icon')) { - if (dropdownContent.style.display !== "none" && dropdownContent.style.display !== "") { - chevronIcon.classList.toggle('rotate-chevron'); - } - dropdownContent.style.display = "none"; - navbarButton.classList.remove("remove-bottom-radius"); - } - }); -}); \ No newline at end of file + window.addEventListener('click', (event) => { + if ( + !event.target.matches('#navbar-sites-button') && + !event.target.matches('#navbar-sites-button-icon') + ) { + if ( + dropdownContent.style.display !== 'none' && + dropdownContent.style.display !== '' + ) { + chevronIcon.classList.toggle('rotate-chevron'); + } + dropdownContent.style.display = 'none'; + navbarButton.classList.remove('remove-bottom-radius'); + } + }); +}); diff --git a/biome.json b/biome.json index 90bbda54..96956d93 100644 --- a/biome.json +++ b/biome.json @@ -1,65 +1,65 @@ { - "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", - "vcs": { - "enabled": false, - "clientKind": "git", - "useIgnoreFile": false - }, - "files": { - "ignoreUnknown": false, - "ignore": [ - ".vscode/", - "**/*.min.js", - "**/*.standalone.js", - "kube.js", - - "**/css/docs-nginx-com/*.css", - "**/css/inter/*.css", - "**/fontawesome/*.css", - "**/static/*.css", - "**/bootstrap*.css", - "**/*.min.css", - "**/coveo.css", - "**/f5-hugo.css", - "**/highlight.css", - "**/*-overrides.css" - ] - }, - "formatter": { - "enabled": true, - "indentStyle": "space" - }, - "linter": { - "enabled": true, - "rules": { - "recommended": true, - "complexity": { - "noForEach": "off" - }, - "style": { - "useTemplate": "off" - }, - "nursery": { - "noDuplicateProperties": "error" - }, - "suspicious": { - "noEmptyBlock": "error" - }, - "correctness": { - "noUnknownUnit": "error" - } - } - }, - "javascript": { - "formatter": { - "quoteStyle": "single", - "trailingCommas": "es5", - "semicolons": "always" - } - }, - "css": { - "formatter": { - "quoteStyle": "double" + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "vcs": { + "enabled": false, + "clientKind": "git", + "useIgnoreFile": false + }, + "files": { + "ignoreUnknown": false, + "ignore": [ + ".vscode/", + "**/*.min.js", + "**/*.standalone.js", + "kube.js", + + "**/css/docs-nginx-com/*.css", + "**/css/inter/*.css", + "**/fontawesome/*.css", + "**/static/*.css", + "**/bootstrap*.css", + "**/*.min.css", + "**/coveo.css", + "**/f5-hugo.css", + "**/highlight.css", + "**/*-overrides.css" + ] + }, + "formatter": { + "enabled": true, + "indentStyle": "space" + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "complexity": { + "noForEach": "off" + }, + "style": { + "useTemplate": "off" + }, + "nursery": { + "noDuplicateProperties": "error" + }, + "suspicious": { + "noEmptyBlock": "error" + }, + "correctness": { + "noUnknownUnit": "error" } } -} \ No newline at end of file + }, + "javascript": { + "formatter": { + "quoteStyle": "single", + "trailingCommas": "es5", + "semicolons": "always" + } + }, + "css": { + "formatter": { + "quoteStyle": "double" + } + } +}