preact-www/src/components/sidebar/style.module.css at 3dc998b3cf6b512cebf7e59e07396dc66a6ec0c5 · preactjs/preact-www · GitHub

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
.wrapper {
	/* Force children to have a know height for `position:sticky` to work */
	display: flex;
}

.toggle {
	display: flex;
	align-items: center;
	position: fixed;
	border: none;
	bottom: 1rem;
	right: 50%;
	margin-right: -4em;
	border-radius: 3rem;
	height: 3rem;
	background: var(--color-brand);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
	padding: 0 1.5em;
	font-weight: bold;
	font-size: 1em;
	color: #fff;
	fill: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	z-index: 560;
	transition: transform 0.3s;

	&:after {
		content: '';
		display: inline-block;
		position: relative;
		left: 0.6em;
		width: 2em;
		height: 2em;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>')
			center/contain;
	}

	@media (min-width: /* --sidebar-break */ 900px) {
		display: none;
	}

	&:focus {
		outline: none;
		/* Use box shadow to draw an outline because outline has no radius */
		box-shadow: 0 0 2px 2px #dacef0,
			/* --color-brand 40% lighter */ 0 3px 8px rgba(0, 0, 0, 0.5);
	}

	[data-open='true'] & {
		background: var(--color-brand-light);

		&:after {
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white"><path d="M38 13l-3-3-11 12-11-11-3 3 11 11-11 11 3 3 11-11 11 11 3-3-11-11z"/></svg>');
		}
	}
}

.sidebar {
	visibility: hidden;
	position: fixed;
	transform: translateY(100%);
	transition: all 0.3s;
	opacity: 0;
	bottom: 0;
	left: 0;
	right: 0;
	top: 5.25rem;
	z-index: 450;
	overflow-y: auto;
	background: var(--color-sidebar-bg);

	@media (min-width: /* --sidebar-break */ 900px) {
		height: auto;
		overflow-y: initial;
		position: relative;
		visibility: visible;
		opacity: 1;
		transform: none;
		flex-shrink: 0;
		flex-grow: 0;
		top: 0;
		width: 20rem;
		background: transparent;
	}

	[data-open='true'] & {
		visibility: visible;
		transform: translateY(0);
		opacity: 1;
	}
}

.sidebarInner {
	padding-bottom: 3rem;

	> * + * {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 0.0625rem solid var(--color-sidebar-divider);
	}

	@media (min-width: /* --sidebar-break */ 900px) {
		@supports (position: sticky) {
			position: sticky;
			height: calc(100vh - var(--header-and-banner-height));
			overflow: auto;

			@media (max-height: 431px) {
				height: calc(100vh - var(--header-height));
			}
		}
		top: var(--header-and-banner-height);
		padding-bottom: 0;
		width: 100%;

		@media (max-height: 431px) {
			top: var(--header-height);
		}
	}
}