-
Notifications
You must be signed in to change notification settings - Fork 48
Expand file tree
/
Copy pathresponsive.css
More file actions
190 lines (161 loc) · 10.9 KB
/
Copy pathresponsive.css
File metadata and controls
190 lines (161 loc) · 10.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
@media screen and (min-width: 76.25em) {
:root { --docs-frame-gutter: 2rem; }
/* Defined on :root, not .md-main__inner, so the header (a sibling, not a
descendant, of .md-main__inner) can also read these to line its own
columns up with the content grid below it. */
:root {
--docs-primary-rail-width: 16rem;
--docs-toc-width: 12rem;
--docs-grid-gap: 2rem;
}
.md-main__inner {
position: relative;
display: grid;
grid-template-columns: var(--docs-primary-rail-width) minmax(0, 1fr) var(--docs-toc-width);
column-gap: var(--docs-grid-gap);
}
.md-main__inner::before { position: absolute; top: -1.5rem; bottom: 0; z-index: 1; width: 1px; background: var(--docs-border); content: ""; pointer-events: none; }
[dir="ltr"] .md-main__inner::before { left: calc(var(--docs-frame-gutter) + var(--docs-primary-rail-width) + var(--docs-grid-gap) / 2); }
[dir="rtl"] .md-main__inner::before { right: calc(var(--docs-frame-gutter) + var(--docs-primary-rail-width) + var(--docs-grid-gap) / 2); }
.md-main__inner:has(.docs-error) { grid-template-columns: minmax(0, 38rem); justify-content: center; }
.md-main__inner:has(.docs-error)::before { content: none; }
.md-sidebar { width: auto; max-width: none; }
.md-sidebar--secondary { margin-left: 0; }
.md-content { min-width: 0; max-width: none; }
.md-header__button[data-drawer-trigger] { display: none; }
.md-nav--primary > .md-nav__title { display: none; }
/* The active tab's own name already shows in the .md-tabs bar above, so
drop the redundant repeated label at the top of its sidebar (mobile
still needs it — it's the only place a tab name appears there). */
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link { display: none; }
/* Material's own lifted-nav rule pulls each tab's level-2 list left by
.6rem (it assumes the now-hidden tab-name label above it needs the
extra room). With that label gone, the negative margin instead shifts
level-2 icons past the sidebar's left edge, clipping them. */
[dir="ltr"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) { margin-left: 0; }
[dir="rtl"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) { margin-right: 0; }
/* Give each tab's top-level items (e.g. "Quality", "Configuring your
repositories", but also flat pages like "AI" or "Documentation home")
the same small/bold/uppercase treatment the tab-name label above used
to have, now that it's the highest-level heading actually visible in
the sidebar. Applied uniformly regardless of whether the item has
children, so flat pages don't look out of place next to groups. */
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
font-size: .75rem;
font-weight: 700;
letter-spacing: .025em;
text-transform: uppercase;
}
/* A group's collapsed submenu still reserves .4rem of height (Material's
.md-nav__toggle ~ .md-nav uses grid-template-rows: minmax(.4rem, 0fr)),
so it sits .4rem further from the item below it than a flat page like
"Documentation home" does, which has no submenu to reserve that space.
Add it back so flat and group items keep the same bottom spacing. */
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) {
margin-bottom: .4rem;
}
.md-path { margin-top: 1.25rem; margin-right: 1.2rem; margin-left: 1.2rem; }
.md-sidebar--primary { padding-top: .75rem; }
.md-sidebar--secondary { padding-top: .75rem; }
[dir="ltr"] .md-sidebar--primary .md-sidebar__inner { padding-right: 0; }
[dir="rtl"] .md-sidebar--primary .md-sidebar__inner { padding-left: 0; }
.md-sidebar--primary .md-sidebar__inner,
.md-sidebar--primary .md-nav--primary { width: 100%; max-width: none; box-sizing: border-box; }
[dir="ltr"] .md-sidebar--secondary .md-sidebar__inner { padding-right: 2rem; }
[dir="rtl"] .md-sidebar--secondary .md-sidebar__inner { padding-left: 2rem; }
.md-sidebar--primary .md-sidebar__scrollwrap { margin-inline: 0; }
.md-sidebar--primary .md-sidebar__scrollwrap { scrollbar-gutter: stable !important; }
@supports (hanging-punctuation: first) {
.md-sidebar--primary .md-sidebar__scrollwrap { overflow-y: scroll; }
}
.md-sidebar--primary .md-nav--primary > .md-nav__list { padding-inline: 0; }
.md-sidebar--primary .md-nav--primary .md-nav__link { margin-inline: 0; }
[dir="ltr"] .md-sidebar--primary .md-nav--primary .md-nav__link { margin-right: 0; }
[dir="rtl"] .md-sidebar--primary .md-nav--primary .md-nav__link { margin-left: 0; }
.md-sidebar__inner, .md-sidebar--secondary .md-sidebar__inner { padding-top: 0; }
/* Line the header up with the content grid below it: the logo's column
absorbs the sidebar's rail width (plus the grid's own gap, minus the
header's smaller inter-item gap counted twice for the now-empty spacer
column next to it) so the search field starts flush with where the
article column starts, instead of floating in the middle of the bar.
Skipped on pages with no visible sidebar (e.g. the 404 page), which keep
the original centered layout. */
.md-header:has(+ .md-container .md-sidebar--primary:not([hidden])):not(:has(+ .md-container .docs-error)) .md-header__inner {
grid-template-columns: calc(var(--docs-primary-rail-width) + var(--docs-grid-gap) - 1.3rem) 0 minmax(15rem, 30rem) 1fr auto auto auto;
}
.md-header:has(+ .md-container .md-sidebar--primary:not([hidden])):not(:has(+ .md-container .docs-error)) .docs-search-trigger {
margin: 0 1.2rem;
}
}
@media screen and (min-width: 80em) {
:root { --docs-primary-rail-width: 18rem; --docs-toc-width: 14rem; --docs-grid-gap: 3rem; }
}
@media screen and (max-width: 76.2344em) {
/* Below this breakpoint .md-tabs (and the border-bottom that comes with it)
is hidden, so the navbar loses the divider line it has on desktop. Add it
directly to the header instead so the two breakpoints look consistent. */
.md-header { border-bottom: 1px solid var(--docs-border); }
.md-sidebar--secondary:not([hidden]) { display: none; }
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { margin-top: .25rem; }
.md-nav--primary .md-nav__title .md-nav__icon::after { display: none; }
.md-path { padding-inline: 1rem; }
.md-sidebar--primary { --docs-nav-rail-width: min(20rem, calc(100vw - 3.5rem)); width: var(--docs-nav-rail-width); max-width: none; flex-basis: var(--docs-nav-rail-width); border: 0; box-shadow: none; background: var(--docs-bg); }
.md-sidebar--primary .md-nav--primary,
.md-sidebar--primary .md-nav--primary .md-nav { width: var(--docs-nav-rail-width); min-width: var(--docs-nav-rail-width); max-width: var(--docs-nav-rail-width); box-sizing: border-box; }
.md-sidebar--primary .md-nav--primary .md-nav > .md-nav__list { box-sizing: border-box; padding-inline: 1rem; }
.md-sidebar--primary .md-nav--primary .md-nav > .md-nav__list > .md-nav__item { margin-block: .25rem; }
.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav { z-index: 2; }
.md-sidebar--primary .md-nav--primary[data-md-level="0"] > .md-nav__source { display: none; }
.md-sidebar--primary .md-nav--primary[data-md-level="0"] > .md-nav__list { padding-top: .75rem; }
.md-sidebar--primary .md-nav__title { border-bottom: 0; box-shadow: none; }
.md-sidebar--primary .md-nav--primary .md-nav > .md-nav__list { box-shadow: none; }
.md-sidebar--primary .md-sidebar__inner { padding-top: 0; }
[dir="ltr"] .md-sidebar--primary { left: 0; transform: translateX(calc(-1 * var(--docs-nav-rail-width))); }
[dir="rtl"] .md-sidebar--primary { right: 0; transform: translateX(var(--docs-nav-rail-width)); }
[data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary { transform: translateX(0); box-shadow: none; }
[dir="rtl"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary { transform: translateX(0); }
[dir="ltr"] .md-sidebar--primary .md-sidebar__inner { padding-right: .75rem; }
[dir="rtl"] .md-sidebar--primary .md-sidebar__inner { padding-left: .75rem; }
}
@media screen and (min-width: 60em) and (max-width: 76.2344em) {
.md-header__inner { grid-template-columns: auto auto minmax(15rem, 30rem) minmax(0, 1fr) auto auto auto; }
.md-header__button[data-drawer-trigger] { order: -1; }
.md-main__inner { justify-content: center; }
}
@media screen and (min-width: 40.01em) and (max-width: 76.2344em) {
.topic-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-row .topic-card:last-child { grid-column: 1 / -1; }
}
@media screen and (max-width: 59.9844em) {
.md-header__inner { grid-template-columns: auto auto auto minmax(0, 1fr) auto; min-height: 3.75rem; gap: .45rem; }
.md-header__button.md-logo img { height: 1.5rem; }
.md-header__button[data-drawer-trigger] { order: -1; }
.docs-search-trigger { grid-column: auto; width: auto; min-height: auto; justify-self: start; padding: .35rem; border: 0; background: transparent; }
.docs-search-trigger span, .docs-search-trigger kbd { display: none; }
.docs-header__cta { display: none; }
.version-select-container { grid-column: auto; margin-left: auto; }
.md-header [data-md-component="palette"] { grid-column: auto; }
.version-select-container .select-css { width: auto; max-width: 41vw; height: 2.35rem; }
.md-typeset h1 { font-size: 1.75rem; }
.docs-feedback { grid-template-columns: 1fr; }
.docs-feedback__choices { grid-column: 1; grid-row: auto; margin-top: .5rem; }
.docs-feedback button { min-height: 2.75rem; }
.docs-footer a, .docs-feedback__links a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.docs-page-nav { grid-template-columns: 1fr; }
.docs-page-nav__next { grid-column: 1; text-align: left; }
.docs-footer__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
.docs-footer__meta { justify-content: flex-start; margin-left: 0; }
}
@media screen and (max-width: 40em) {
.content-columns-wrapper, .topic-row { grid-template-columns: 1fr; gap: .75rem; }
.topic-row .topic-card:last-child { grid-column: auto; }
.md-typeset #tool-versions + ul, .md-typeset #tool-versions + p + ul { grid-template-columns: 1fr; }
.md-typeset .nav-multistep ol { grid-template-columns: 1fr; }
}
@media screen and (max-width: 27rem) {
.md-header__button.md-logo { width: 2rem; padding: .25rem; }
.md-header__button.md-logo img { height: 1.5rem; }
.md-toggle[data-md-toggle="search"]:checked ~ .md-header .md-search { background: color-mix(in srgb, var(--docs-bg) 42%, transparent); }
.md-toggle[data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: calc(100vw - 1rem); height: auto; max-height: calc(100dvh - 4.5rem - env(safe-area-inset-bottom)); margin-top: 4rem; border-radius: var(--docs-radius); }
.md-search .md-search__output, .md-search .md-search__scrollwrap { max-height: calc(100dvh - 7.5rem - env(safe-area-inset-bottom)) !important; }
}