mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2026-08-02 10:48:49 -04:00
Added support for language selector
This commit is contained in:
squidfunk
@@ -36,6 +36,7 @@ export type ComponentType =
|
||||
| "dialog" /* Dialog */
|
||||
| "header" /* Header */
|
||||
| "header-title" /* Header title */
|
||||
| "header-topic" /* Header topic */
|
||||
| "main" /* Main area */
|
||||
| "search" /* Search */
|
||||
| "search-query" /* Search input */
|
||||
|
||||
@@ -51,6 +51,7 @@
|
||||
@import "main/layout/footer";
|
||||
@import "main/layout/nav";
|
||||
@import "main/layout/search";
|
||||
@import "main/layout/select";
|
||||
@import "main/layout/sidebar";
|
||||
@import "main/layout/source";
|
||||
@import "main/layout/tabs";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
|
||||
/// Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
|
||||
@@ -69,16 +69,15 @@
|
||||
background-color 250ms,
|
||||
box-shadow 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Header navigation - if the header exceeds the default height of `48px`, i.e.
|
||||
// by adding a bigger logo, the items are aligned at the center
|
||||
.md-header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 px2rem(4px);
|
||||
// Header wrapper
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 px2rem(4px);
|
||||
}
|
||||
|
||||
// Header navigation button
|
||||
// Header button
|
||||
&__button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -131,7 +130,7 @@
|
||||
|
||||
// [no-js]: Hide button
|
||||
.no-js & {
|
||||
display: none;
|
||||
display: none
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
@@ -154,7 +153,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Header navigation topic
|
||||
// Header topic
|
||||
&__topic {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@@ -180,7 +179,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Header navigation title
|
||||
// Header title
|
||||
&__title {
|
||||
flex-grow: 1;
|
||||
height: px2rem(48px);
|
||||
@@ -190,7 +189,7 @@
|
||||
line-height: px2rem(48px);
|
||||
|
||||
// Header title in active state, i.e. page title is visible
|
||||
&[data-md-state="active"] .md-header-nav__topic {
|
||||
&[data-md-state="active"] .md-header__topic {
|
||||
z-index: -1;
|
||||
transform: translateX(px2rem(-25px));
|
||||
opacity: 0;
|
||||
@@ -205,7 +204,7 @@
|
||||
}
|
||||
|
||||
// Second header topic - title of the current page
|
||||
+ .md-header-nav__topic {
|
||||
& + .md-header__topic {
|
||||
z-index: 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
@@ -217,13 +216,38 @@
|
||||
}
|
||||
|
||||
// Add ellipsis in case of overflowing text
|
||||
> .md-header-nav__ellipsis {
|
||||
> .md-header__ellipsis {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Header options
|
||||
&__options {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
max-width 0ms 250ms,
|
||||
opacity 250ms 250ms;
|
||||
|
||||
// Hide inactive buttons
|
||||
> [data-md-state="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide toggle when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transition:
|
||||
max-width 0ms,
|
||||
opacity 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Repository information container
|
||||
&__source {
|
||||
display: none;
|
||||
|
||||
120
src/assets/stylesheets/main/layout/_select.scss
Normal file
120
src/assets/stylesheets/main/layout/_select.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
/// to deal in the Software without restriction, including without limitation
|
||||
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
/// and/or sell copies of the Software, and to permit persons to whom the
|
||||
/// Software is furnished to do so, subject to the following conditions:
|
||||
///
|
||||
/// The above copyright notice and this permission notice shall be included in
|
||||
/// all copies or substantial portions of the Software.
|
||||
///
|
||||
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
|
||||
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Selection
|
||||
.md-select {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// Selection bubble
|
||||
&__inner {
|
||||
position: absolute;
|
||||
top: calc(100% - #{px2rem(4px)});
|
||||
left: 50%;
|
||||
max-height: 0;
|
||||
margin-top: px2rem(4px);
|
||||
color: var(--md-default-fg-color);
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
|
||||
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.25);
|
||||
transform: translate3d(-50%, px2rem(6px), 0);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 250ms 375ms,
|
||||
opacity 250ms 250ms,
|
||||
max-height 0ms 500ms;
|
||||
|
||||
// Selection bubble on parent focus/hover
|
||||
.md-select:focus-within &,
|
||||
.md-select:hover & {
|
||||
max-height: px2rem(200px);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 250ms,
|
||||
max-height 250ms;
|
||||
}
|
||||
|
||||
// Selection bubble handle
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: px2rem(-4px);
|
||||
margin-left: px2rem(-4px);
|
||||
border: px2rem(4px) solid transparent;
|
||||
border-top: 0;
|
||||
border-bottom-color: var(--md-default-bg-color);
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Selection list
|
||||
&__list {
|
||||
max-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
font-size: px2rem(16px);
|
||||
list-style-type: none;
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
|
||||
// Selection item
|
||||
&__item {
|
||||
line-height: px2rem(36px);
|
||||
}
|
||||
|
||||
// Selection link
|
||||
&__link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-right: px2rem(24px);
|
||||
padding-left: px2rem(12px);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 250ms,
|
||||
color 250ms;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: px2rem(24px);
|
||||
}
|
||||
|
||||
// Link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,34 +28,35 @@
|
||||
|
||||
<!-- Application header -->
|
||||
<header class="md-header" data-md-component="header">
|
||||
|
||||
<!-- Top-level navigation -->
|
||||
<nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
|
||||
<nav
|
||||
class="md-header__inner md-grid"
|
||||
aria-label="{{ lang.t('header.title') }}"
|
||||
>
|
||||
|
||||
<!-- Link to home -->
|
||||
<a
|
||||
href="{{ site_url }}"
|
||||
title="{{ config.site_name | e }}"
|
||||
class="md-header-nav__button md-logo"
|
||||
class="md-header__button md-logo"
|
||||
aria-label="{{ config.site_name }}"
|
||||
>
|
||||
{% include "partials/logo.html" %}
|
||||
</a>
|
||||
|
||||
<!-- Button to open drawer -->
|
||||
<label class="md-header-nav__button md-icon" for="__drawer">
|
||||
<label class="md-header__button md-icon" for="__drawer">
|
||||
{% include ".icons/material/menu" ~ ".svg" %}
|
||||
</label>
|
||||
|
||||
<!-- Header title -->
|
||||
<div class="md-header-nav__title" data-md-component="header-title">
|
||||
<div class="md-header-nav__ellipsis">
|
||||
<div class="md-header-nav__topic">
|
||||
<div class="md-header__title" data-md-component="header-title">
|
||||
<div class="md-header__ellipsis">
|
||||
<div class="md-header__topic">
|
||||
<span class="md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-header-nav__topic">
|
||||
<div class="md-header__topic" data-md-component="header-topic">
|
||||
<span class="md-ellipsis">
|
||||
{% if page and page.meta and page.meta.title %}
|
||||
{{ page.meta.title }}
|
||||
@@ -67,9 +68,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header options -->
|
||||
<div class="md-header__options">
|
||||
|
||||
<!-- Switch to toggle language -->
|
||||
{% if config.extra.alternate %}
|
||||
<div class="md-select">
|
||||
{% set icon = config.theme.icon.translate or "material/translate" %}
|
||||
<span class="md-header__button md-icon">
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</span>
|
||||
<div class="md-select__inner">
|
||||
<ul class="md-select__list">
|
||||
{% for alt in config.extra.alternate %}
|
||||
<li class="md-select__item">
|
||||
<a href="{{ alt.link | url }}" class="md-select__link">
|
||||
{{ alt.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Button to open search modal -->
|
||||
{% if "search" in config["plugins"] %}
|
||||
<label class="md-header-nav__button md-icon" for="__search">
|
||||
<label class="md-header__button md-icon" for="__search">
|
||||
{% include ".icons/material/magnify.svg" %}
|
||||
</label>
|
||||
|
||||
@@ -79,7 +105,7 @@
|
||||
|
||||
<!-- Repository information -->
|
||||
{% if config.repo_url %}
|
||||
<div class="md-header-nav__source">
|
||||
<div class="md-header__source">
|
||||
{% include "partials/source.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user