Skip to content

Commit cbc8415

Browse files
Consolidate navbar styling (#456)
* Consolidate navbar styling * Merge duplicate selectors * Move navbar media selectors to bottom
1 parent fff84c5 commit cbc8415

File tree

2 files changed

+185
-202
lines changed

2 files changed

+185
-202
lines changed

assets/theme-css/bulma.css

Lines changed: 0 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -184,187 +184,3 @@ a.box:active {
184184
display: none !important;
185185
}
186186
}
187-
.navbar-link::after {
188-
border: 3px solid transparent;
189-
border-radius: 2px;
190-
border-right: 0;
191-
border-top: 0;
192-
content: " ";
193-
display: block;
194-
pointer-events: none;
195-
position: absolute;
196-
transform: rotate(-45deg);
197-
transform-origin: center;
198-
margin-top: -0.375em;
199-
right: 1.125em;
200-
}
201-
.navbar-burger {
202-
font-family: inherit;
203-
font-size: 1em;
204-
padding: 0;
205-
}
206-
.navbar > .container {
207-
align-items: stretch;
208-
display: flex;
209-
width: 100%;
210-
}
211-
.navbar-brand {
212-
align-items: stretch;
213-
display: flex;
214-
}
215-
.navbar-burger {
216-
-moz-appearance: none;
217-
-webkit-appearance: none;
218-
appearance: none;
219-
background: 0 0;
220-
border: none;
221-
cursor: pointer;
222-
position: relative;
223-
margin: 0 0 0 auto;
224-
}
225-
.navbar-burger span {
226-
background-color: currentColor;
227-
display: block;
228-
height: 2px;
229-
left: calc(50% - 8px);
230-
position: absolute;
231-
transform-origin: center;
232-
transition-duration: 86ms;
233-
transition-property: background-color, opacity, transform;
234-
transition-timing-function: ease-out;
235-
width: 16px;
236-
}
237-
.navbar-burger span:first-child {
238-
top: calc(50% - 6px);
239-
}
240-
.navbar-burger span:nth-child(2) {
241-
top: calc(50% - 1px);
242-
}
243-
.navbar-burger span:nth-child(3) {
244-
top: calc(50% + 4px);
245-
}
246-
.navbar-burger.is-active span:first-child {
247-
transform: translateY(5px) rotate(45deg);
248-
}
249-
.navbar-burger.is-active span:nth-child(2) {
250-
opacity: 0;
251-
}
252-
.navbar-burger.is-active span:nth-child(3) {
253-
transform: translateY(-5px) rotate(-45deg);
254-
}
255-
.navbar-menu {
256-
display: none;
257-
}
258-
.navbar-item,
259-
.navbar-link {
260-
display: block;
261-
line-height: 1.5;
262-
padding: 0.5rem 0.75rem;
263-
position: relative;
264-
}
265-
.navbar-item .icon:only-child,
266-
.navbar-link .icon:only-child {
267-
margin-left: -0.25rem;
268-
margin-right: -0.25rem;
269-
}
270-
.navbar-item {
271-
flex-grow: 0;
272-
flex-shrink: 0;
273-
}
274-
.navbar-item img {
275-
max-height: 1.75rem;
276-
}
277-
.navbar-item.has-dropdown {
278-
padding: 0;
279-
}
280-
.navbar-link {
281-
padding-right: 2.5em;
282-
}
283-
.navbar-dropdown {
284-
font-size: 0.875rem;
285-
padding-bottom: 0.5rem;
286-
padding-top: 0.5rem;
287-
}
288-
.navbar-dropdown .navbar-item {
289-
padding-left: 1.5rem;
290-
padding-right: 1.5rem;
291-
}
292-
@media screen and (max-width: 1023px) {
293-
.navbar > .container {
294-
display: block;
295-
}
296-
.navbar-brand .navbar-item {
297-
align-items: center;
298-
display: flex;
299-
}
300-
.navbar-link::after {
301-
display: none;
302-
}
303-
.navbar-menu {
304-
padding: 0.5rem 0;
305-
}
306-
.navbar-menu.is-active {
307-
display: block;
308-
}
309-
}
310-
@media screen and (min-width: 1024px) {
311-
.navbar,
312-
.navbar-end,
313-
.navbar-menu {
314-
display: flex;
315-
}
316-
.navbar-burger {
317-
display: none;
318-
}
319-
.navbar-item,
320-
.navbar-link {
321-
align-items: center;
322-
display: flex;
323-
}
324-
.navbar-item.has-dropdown {
325-
align-items: stretch;
326-
}
327-
.navbar-item.is-active .navbar-dropdown,
328-
.navbar-item.is-hoverable:focus .navbar-dropdown,
329-
.navbar-item.is-hoverable:focus-within .navbar-dropdown,
330-
.navbar-item.is-hoverable:hover .navbar-dropdown {
331-
display: block;
332-
}
333-
.navbar-menu {
334-
flex-grow: 1;
335-
flex-shrink: 0;
336-
}
337-
.navbar-end {
338-
justify-content: flex-end;
339-
margin-left: auto;
340-
}
341-
.navbar-dropdown {
342-
background-color: var(--pst-color-surface);
343-
border-bottom-left-radius: 6px;
344-
border-bottom-right-radius: 6px;
345-
border-top: 2px solid #dbdbdb;
346-
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
347-
display: none;
348-
font-size: 0.875rem;
349-
left: 0;
350-
min-width: 100%;
351-
position: absolute;
352-
top: 100%;
353-
z-index: 20;
354-
}
355-
.navbar-dropdown .navbar-item {
356-
padding: 0.375rem 1rem;
357-
white-space: nowrap;
358-
}
359-
.navbar-dropdown a.navbar-item {
360-
padding-right: 3rem;
361-
}
362-
.container > .navbar .navbar-brand,
363-
.navbar > .container .navbar-brand {
364-
margin-left: -0.75rem;
365-
}
366-
.container > .navbar .navbar-menu,
367-
.navbar > .container .navbar-menu {
368-
margin-right: -0.75rem;
369-
}
370-
}

0 commit comments

Comments
 (0)