Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Code Navigation: adjust global styling for kbd element #60320

Merged
merged 2 commits into from
Feb 9, 2024
Merged

Code Navigation: adjust global styling for kbd element #60320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef392f3
adjust global styling for kbd element
jasonhawkharris Feb 8, 2024
8593a31
design tweaks from Taiyab
jasonhawkharris Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions client/branded/src/search-ui/results/filters/NewSearchFilters.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,6 @@
}
}

// @TODO: Jason Harris: <kbd> element is unuseable unless the following CSS selectors are present.
// We should use these as a base for adjusting the default styling of <kbd> elements.
.keybind {
font-family: var(--font-family-base);
color: var(--text-muted);
background: var(--color-bg-1);
border: 1px solid var(--border-color-2);
margin-left: 0.5rem;
padding: 0 0.25rem;
}
17 changes: 9 additions & 8 deletions client/wildcard/src/global-styles/code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,19 @@ code,
}

kbd {
font-family: var(--code-font-family);
font-size: var(--code-font-size);
background-color: var(--color-bg-1);
border-radius: 4px;
border: 1px solid var(--border-color-2);
box-shadow: inset 0 -2px 0 var(--color-bg-2);
color: var(--text-muted);
display: inline-block;
line-height: (16/12);
font-family: var(--monospace-font-family);
font-size: var(--code-font-size);
height: 1.125rem;
padding: 0 0.25rem;
line-height: (16/12);
margin: 0 0.125rem;
padding: 0 0.25rem;
vertical-align: middle;
border-radius: 3px;
color: var(--body-color);
background-color: var(--color-bg-2);
box-shadow: inset 0 -2px 0 var(--color-bg-3);
}

// Search examples that link to the results page should use this class.
Expand Down