diff options
| -rw-r--r-- | site/layouts/_default/examples.html | 40 | ||||
| -rw-r--r-- | site/layouts/partials/docs-navbar.html | 34 | ||||
| -rw-r--r-- | site/layouts/partials/theme-toggler.html | 34 |
3 files changed, 42 insertions, 66 deletions
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html index d381a56df..1c31c5aea 100644 --- a/site/layouts/_default/examples.html +++ b/site/layouts/_default/examples.html @@ -94,12 +94,17 @@ z-index: 1500; } + .bd-mode-toggle .bi { + width: 1em; + height: 1em; + } + .bd-mode-toggle .dropdown-menu .active .bi { display: block !important; } </style> - {{ range .Page.Params.extra_css }} + {{ range .Page.Params.extra_css -}} {{ "<!-- Custom styles for this template -->" | safeHTML }} <link href="{{ . }}" rel="stylesheet"> {{- end }} @@ -108,38 +113,7 @@ {{ partial "examples/icons" . }} <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"> - <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" - id="bd-theme" - type="button" - aria-expanded="false" - data-bs-toggle="dropdown" - aria-label="Toggle theme (auto)"> - <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg> - <span class="visually-hidden" id="bd-theme-text">Toggle theme</span> - </button> - <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text"> - <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> - <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg> - Light - <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> - </button> - </li> - <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> - <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg> - Dark - <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> - </button> - </li> - <li> - <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> - <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg> - Auto - <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> - </button> - </li> - </ul> + {{ partial "theme-toggler" . }} </div> {{ .Content }} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 10f3fba4c..3576ef4a4 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -83,39 +83,7 @@ </li> <li class="nav-item dropdown"> - <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" - id="bd-theme" - type="button" - aria-expanded="false" - data-bs-toggle="dropdown" - data-bs-display="static" - aria-label="Toggle theme (auto)"> - <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> - <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span> - </button> - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text"> - <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> - <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> - Light - <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> - </button> - </li> - <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> - <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> - Dark - <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> - </button> - </li> - <li> - <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> - <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> - Auto - <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> - </button> - </li> - </ul> + {{ partial "theme-toggler" . }} </li> </ul> </div> diff --git a/site/layouts/partials/theme-toggler.html b/site/layouts/partials/theme-toggler.html new file mode 100644 index 000000000..05de756fd --- /dev/null +++ b/site/layouts/partials/theme-toggler.html @@ -0,0 +1,34 @@ +{{- $isExamples := eq .Layout "examples" -}} +<button class="btn {{ if $isExamples }}btn-bd-primary{{ else }}btn-link nav-link px-0 px-lg-2{{ end }} py-2 dropdown-toggle d-flex align-items-center" + id="bd-theme" + type="button" + aria-expanded="false" + data-bs-toggle="dropdown" + {{ if not $isExamples }}data-bs-display="static"{{ end }} + aria-label="Toggle theme (auto)"> + <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> + <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span> +</button> +<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text"> + <li> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> + <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> + Light + <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> + </button> + </li> + <li> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> + <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> + Dark + <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> + </button> + </li> + <li> + <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> + <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> + Auto + <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> + </button> + </li> +</ul> |