Skip to content

Commit 014b2ec

Browse files
captainbrossetcaptainbrosset
committed
Formatting and renaming
1 parent 62de490 commit 014b2ec

File tree

11 files changed

+935
-578
lines changed

11 files changed

+935
-578
lines changed

‎css-gap-decorations/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# CSS Gap Decorations demos
2+
3+
This directory contains demos that showcase the use of [CSS Gap Decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md), a feature proposal by the Microsoft Edge team to draw gap decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts.
4+
5+
## Demos
6+
7+
* [Burger Menu](https://microsoftedge.github.io/Demos/css-gap-decorations/burger-menu.html)
8+
* [Daily CSS News](https://microsoftedge.github.io/Demos/css-gap-decorations/daily-css-news.html)
9+
* [Guitar Fret Board](https://microsoftedge.github.io/Demos/css-gap-decorations/guitar-fret-board.html)
10+
* [Notebook](https://microsoftedge.github.io/Demos/css-gap-decorations/notebook.html)
11+
<!-- * [The Daily Oddity](https://microsoftedge.github.io/Demos/css-gap-decorations/the-daily-oddity.html) -->
12+
13+
## Developer playground
14+
15+
* [CSS Gap Decorations playground](https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html)

‎css-gap-decorations/burger-menu.html

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Burger Menu</title>
7+
<style>
8+
body {
9+
background: gray;
10+
}
11+
12+
.grid-container {
13+
display: grid;
14+
grid-template-columns: repeat(6, 1fr);
15+
grid-template-rows: 1fr 5fr 2fr;
16+
gap: 1.5px;
17+
18+
/* thin grey vertical lines, thick black horizontal lines */
19+
column-rule: 1.5px solid #ccc;
20+
row-rule: 3px solid #000;
21+
column-rule-break: intersection;
22+
column-rule-outset: -15px;
23+
row-rule-outset: -8px;
24+
25+
background: #fff;
26+
width: 850px;
27+
height: 600px;
28+
}
29+
30+
/* — Header — */
31+
.header-title {
32+
margin: 1rem 0.5rem;
33+
display: flex;
34+
align-items: center;
35+
36+
font-size: 1.45rem;
37+
font-weight: bold;
38+
color: #3366cc;
39+
}
40+
41+
.header-option {
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
justify-self: stretch;
46+
align-self: stretch;
47+
48+
margin: 1rem 0.5rem;
49+
padding: 0.75rem 1rem;
50+
51+
background: #3366cc;
52+
color: #fff;
53+
}
54+
55+
/* — Middle panels — */
56+
.sidebar {
57+
display: flex;
58+
align-items: center;
59+
padding: 0.9rem;
60+
color: white;
61+
background: #3366cc;
62+
font-weight: bold;
63+
margin: 1rem 0.5rem;
64+
}
65+
66+
.options {
67+
margin: 1rem 0.5rem;
68+
background: #f4f5f7;
69+
padding: 1rem;
70+
color: #666;
71+
font-family: sans-serif;
72+
font-size: 0.95rem;
73+
}
74+
75+
.options ul {
76+
list-style: none;
77+
margin: 0;
78+
padding: 0;
79+
}
80+
81+
.options li {
82+
margin: 0 0 0.75rem;
83+
}
84+
85+
.options label {
86+
display: flex;
87+
gap: 0.5rem;
88+
line-height: 1.4;
89+
}
90+
91+
.options label>input {
92+
margin: 0;
93+
}
94+
95+
/* — Bottom row — */
96+
.instructions-label {
97+
margin: 1rem 0.5rem;
98+
99+
display: flex;
100+
flex-direction: column;
101+
justify-content: center;
102+
padding: 1rem;
103+
104+
background: #3366cc;
105+
color: #fff;
106+
font-family: sans-serif;
107+
font-size: 0.95rem;
108+
}
109+
110+
.instructions-label small {
111+
margin: 1rem;
112+
margin-top: 0.5rem;
113+
opacity: 0.8;
114+
}
115+
116+
.instructions-input {
117+
margin: 1rem 0.5rem;
118+
background: #f4f5f7;
119+
padding: 0.75rem;
120+
display: grid;
121+
grid-template-rows: repeat(4, 1fr);
122+
grid-template-columns: 1fr;
123+
row-rule: solid #ccc 1.5px;
124+
align-items: center;
125+
justify-content: center;
126+
}
127+
</style>
128+
</head>
129+
130+
<body>
131+
<div class="grid-container">
132+
<!-- Row 1: title + buttons -->
133+
<div class="header-title">Burger Menu</div>
134+
<div class="header-option">Bun</div>
135+
<div class="header-option">Protein</div>
136+
<div class="header-option">Veggies</div>
137+
<div class="header-option">Cheese</div>
138+
<div class="header-option">Add-ons</div>
139+
140+
<!-- Row 2: content panels -->
141+
<div class="sidebar">Customize your burger</div>
142+
143+
<div class="options">
144+
<ul>
145+
<li><label><input type="radio" name="bun" value="brioche">Brioche</label></li>
146+
<li><label><input type="radio" name="bun" value="whole-wheat">Whole wheat</label></li>
147+
<li><label><input type="radio" name="bun" value="potato">Potato bun</label></li>
148+
<li><label><input type="radio" name="bun" value="gluten-free">Gluten free</label></li>
149+
</ul>
150+
</div>
151+
152+
<div class="options">
153+
<ul>
154+
<li><label><input type="radio" name="protein" value="beef">Beef</label></li>
155+
<li><label><input type="radio" name="protein" value="chicken">Chicken</label></li>
156+
<li><label><input type="radio" name="protein" value="turkey">Turkey</label></li>
157+
<li><label><input type="radio" name="protein" value="plant">Plant-based</label></li>
158+
</ul>
159+
</div>
160+
161+
<div class="options">
162+
<ul>
163+
<li><label><input type="checkbox" name="veggies" value="lettuce">Lettuce</label></li>
164+
<li><label><input type="checkbox" name="veggies" value="tomato">Tomato slices</label></li>
165+
<li><label><input type="checkbox" name="veggies" value="onions">Onions</label></li>
166+
<li><label><input type="checkbox" name="veggies" value="pickles">Pickles</label></li>
167+
</ul>
168+
</div>
169+
170+
<div class="options">
171+
<ul>
172+
<li><label><input type="radio" name="cheese" value="cheddar">Cheddar</label></li>
173+
<li><label><input type="radio" name="cheese" value="swiss">Swiss</label></li>
174+
<li><label><input type="radio" name="cheese" value="american">American</label></li>
175+
</ul>
176+
</div>
177+
178+
<div class="options">
179+
<ul>
180+
<li><label><input type="checkbox" name="addons" value="bacon">Bacon</label></li>
181+
<li><label><input type="checkbox" name="addons" value="egg">Fried egg</label></li>
182+
<li><label><input type="checkbox" name="addons" value="avocado">Avocado</label></li>
183+
<li><label><input type="checkbox" name="addons" value="jalapenos">Jalapeños</label></li>
184+
<li><label><input type="checkbox" name="addons" value="mushrooms">Mushrooms</label></li>
185+
<li><label><input type="checkbox" name="addons" value="onion-rings">Onion rings</label></li>
186+
</ul>
187+
</div>
188+
189+
<!-- Row 3: additional instructions -->
190+
<div class="instructions-label">
191+
Additional instructions
192+
<small>e.g.: toasted, caramelized, double</small>
193+
</div>
194+
<div class="instructions-input"></div>
195+
<div class="instructions-input"></div>
196+
<div class="instructions-input"></div>
197+
<div class="instructions-input"></div>
198+
<div class="instructions-input"></div>
199+
</div>
200+
</body>
201+
202+
</html>

0 commit comments

Comments
 (0)