Skip to content

Commit c64cecc

Browse files
kimsaucekimsauce
authored
Merge branch 'main' into banner
2 parents e6ee4f7 + c9cb46c commit c64cecc

File tree

2 files changed

+125
-81
lines changed

2 files changed

+125
-81
lines changed

‎docusaurus.config.js‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -439,29 +439,38 @@ module.exports = {
439439
alt: 'Sign up for a Sumo Logic free trial',
440440
},
441441
{
442-
to: 'https://support.sumologic.com/support/s',
443442
position: 'right',
444-
className: 'header-support',
445-
alt: 'Contact Sumo Logic support',
446-
},
447-
{
448-
position: 'right',
449-
className: 'header-github-link',
443+
className: 'support-menu-trigger',
444+
to: '#',
450445
type: 'dropdown',
451-
'aria-label': 'GitHub repository',
452-
to: 'https://github.com/SumoLogic/sumologic-documentation',
453-
items:[
446+
items: [
447+
{
448+
label: 'Contact Support',
449+
to: 'https://support.sumologic.com/support/s',
450+
icon: 'support',
451+
},
452+
{
453+
label: 'Request Demo',
454+
to: 'https://www.sumologic.com/demos',
455+
icon: 'co_present',
456+
},
454457
{
455-
label: 'Send Feedback',
458+
label: 'Submit Feedback',
456459
to: 'https://github.com/SumoLogic/sumologic-documentation/issues/new/choose',
457-
icon: 'rate_review',
460+
icon: 'thumbs_up_down',
458461
},
459462
{
460463
label: 'Contribute to Docs',
461-
href: '/docs/contributing',
464+
to: 'docs/contributing',
462465
icon: 'edit_note',
463466
},
464-
]
467+
],
468+
},
469+
{
470+
className: 'header-github-link',
471+
to: 'https://github.com/SumoLogic/sumologic-documentation',
472+
position: 'right',
473+
alt: 'Link to Sumo Logic Docs GitHub repository',
465474
},
466475
],
467476
},

‎src/css/sumo.scss‎

Lines changed: 102 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -227,14 +227,15 @@ html[data-theme='light'] {
227227
min-width: 100px;
228228
}
229229

230+
//GitHub icon
230231
.header-github-link:hover {
231232
opacity: 0.6;
232233
}
233234

234235
.header-github-link::before {
235236
content: '';
236-
width: 24px;
237-
height: 24px;
237+
width: 22px;
238+
height: 22px;
238239
margin-top: 7px;
239240
display: inline-flex;
240241
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
@@ -251,77 +252,136 @@ html[data-theme='light'] {
251252
no-repeat;
252253
}
253254

254-
//Free Trial nav button
255-
256-
.header-trial:hover {
257-
opacity: 0.85;
258-
}
259255

260-
.header-trial::before {
261-
content: 'START FREE TRIAL';
262-
border: 1px solid #2aa1e6;
263-
color: #FFF;
256+
/* General styling for the Support dropdown button */
257+
.support-menu-trigger {
258+
display: flex;
259+
align-items: center;
260+
cursor: pointer;
261+
color: white !important; /* Text color should be white */
262+
border: 1px solid rgba(255, 255, 255, 0.2); /* Border matching the style */
264263
border-radius: 3px;
265264
padding: 5px 15px;
266265
font-size: 13px;
267266
font-weight: 600;
268-
display: inline-flex;
269-
background: #2aa1e6;
270-
margin-right: -20px;
267+
background-color: #2c3e50; /* Dark background color similar to "Demo" */
268+
margin-left: 8px; /* Space between text and the arrow */
271269
}
272270

273-
.header-trial::after {
274-
display: none !important;
275-
content: none !important;
271+
/* Add hover effect similar to the "Demo" button */
272+
.support-menu-trigger:hover {
273+
background-color: #34495e; /* Slightly lighter on hover */
274+
border-color: rgba(255, 255, 255, 0.5); /* Change border color on hover */
276275
}
277276

278-
[data-theme='dark'] .header-trial::before {
279-
background: transparent;
280-
border: 1px solid #2aa1e6;
281-
color: #FFF;
282-
border-radius: 3px;
283-
padding: 5px 15px;
277+
/* Add the button text using ::before if not present */
278+
.support-menu-trigger::before {
279+
content: 'Support'; /* Replace with your desired text */
284280
font-size: 13px;
285-
font-weight: 600;
286-
display: inline-flex;
287-
background: #2aa1e6;
288-
margin-right: -20px;
281+
color: white; /* Set the text color to white */
282+
margin-right: 8px; /* Space between text and the arrow */
289283
}
290284

291-
//Contact Support nav button
292-
.header-support:hover {
293-
opacity: 0.65;
285+
/* Styling the arrow (SVG) */
286+
.support-menu-trigger svg {
287+
width: 9px;
288+
height: 6px;
289+
fill: none;
290+
stroke: white; /* Make the arrow white by default */
294291
}
295292

296-
.header-support::before {
297-
content: 'CONTACT SUPPORT';
298-
background: transparent;
299-
border: 1px solid #000;
300-
color: var(--ifm-navbar-link-color);
293+
/* Media query for light mode */
294+
@media (prefers-color-scheme: light) {
295+
.support-menu-trigger {
296+
stroke: white;
297+
border-color: black; /* Darker border for light mode */
298+
}
299+
}
300+
301+
/* Media query for dark mode */
302+
@media (prefers-color-scheme: dark) {
303+
.support-menu-trigger svg {
304+
stroke: white; /* Ensure the arrow is white for dark mode */
305+
}
306+
}
307+
308+
/* Style the dropdown wrapper */
309+
.support-menu-wrapper {
310+
display: none;
311+
flex-direction: column;
312+
position: absolute;
313+
background-color: #34495e; /* Background color for dropdown */
314+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
315+
border-radius: 4px;
316+
margin-top: 8px;
317+
}
318+
319+
/* Show the dropdown when open */
320+
.support-menu[open] .support-menu-wrapper {
321+
display: flex;
322+
}
323+
324+
/* Dropdown option styling */
325+
.support-option {
326+
padding: 5px 10px;
327+
color: white;
328+
cursor: pointer;
329+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
330+
}
331+
332+
.support-option:hover {
333+
background-color: #2c3e50;
334+
}
335+
336+
/* SVG icon in each option */
337+
.support-option .support-icon svg {
338+
width: 16px;
339+
height: 18px;
340+
fill: none;
341+
stroke: white;
342+
margin-right: 8px;
343+
}
344+
345+
346+
347+
//Free Trial nav button
348+
.header-trial:hover {
349+
opacity: 0.85;
350+
}
351+
352+
.header-trial::before {
353+
content: 'Start free trial';
354+
border: 1px solid #0466FF;
355+
color: #FFF;
301356
border-radius: 3px;
302357
padding: 5px 15px;
303358
font-size: 13px;
304359
font-weight: 600;
305360
display: inline-flex;
361+
background: linear-gradient(35deg,#0466FF 0%,#0800FF 100%);
362+
margin-left: -10px;
363+
margin-right: -10px;
306364
}
307365

308-
.header-support::after {
366+
.header-trial::after {
309367
display: none !important;
310368
content: none !important;
311369
}
312370

313-
[data-theme='dark'] .header-support::before {
371+
[data-theme='dark'] .header-trial::before {
314372
background: transparent;
315-
border: 1px solid #E5F4FA;
316-
color: var(--ifm-navbar-link-color);
373+
border: 0px solid #0466FF;
374+
color: #FFF;
317375
border-radius: 3px;
318-
padding: 4px 15px;
376+
padding: 5px 15px;
319377
font-size: 13px;
320378
font-weight: 600;
321379
display: inline-flex;
380+
margin-left: -10px;
381+
margin-right: -10px;
382+
background: linear-gradient(35deg, #0466FF 0%, #0800FF 30%, #000099 100%);
322383
}
323384

324-
325385
.markdown {
326386
h1 {
327387
font-size: 2rem !important;
@@ -504,31 +564,6 @@ html[data-theme='light'] .table-of-contents__left-border {
504564
height: 70%;
505565
}
506566

507-
.navbar-item-github:hover {
508-
opacity: 0.6;
509-
}
510-
.navbar-item-github:before {
511-
margin-left: -1rem;
512-
margin-top: 1px;
513-
content: '';
514-
width: 20px;
515-
height: 20px;
516-
display: flex;
517-
position: absolute;
518-
align-items: center;
519-
justify-content: center;
520-
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
521-
background-repeat: no-repeat;
522-
background-position: center;
523-
}
524-
525-
html[data-theme='dark'] .navbar-item-github:before {
526-
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
527-
no-repeat;
528-
background-repeat: no-repeat;
529-
background-position: center;
530-
}
531-
532567
.navbar-grid-menu:after {
533568
transition: opacity 0.2s;
534569
content: "";
@@ -545,7 +580,7 @@ html[data-theme='dark'] .navbar-item-github:before {
545580
opacity: 0.5;
546581
}
547582

548-
.navbar-grid-menu:after, .navbar-github-link:after {
583+
.navbar-grid-menu:after {
549584
border-style: none !important;
550585
margin-left: -5px !important;
551586
}

0 commit comments

Comments
 (0)