81 lines
2.2 KiB
SCSS
81 lines
2.2 KiB
SCSS
@import "@primer/css/support/variables/layout.scss";
|
|
@import "@primer/css/support/mixins/layout.scss";
|
|
|
|
.header {
|
|
display: unset;
|
|
}
|
|
|
|
// Need children of portal root to be higher z-index to show dropdown
|
|
.portalRoot * {
|
|
z-index: 3 !important;
|
|
}
|
|
|
|
// Contains the search input, language picker, and sign-up button. When the
|
|
// search input is open and up to sm (where the language picker and sign-up
|
|
// button are hidden) we need to take up almost all the header width but then at
|
|
// md and above we don't want the search input to take up the header width.
|
|
.widgetsContainer {
|
|
width: 100%;
|
|
|
|
@include breakpoint(md) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// Contains the search input and used when the smaller width search input UI is
|
|
// closed to hide the full width input, but as the width increases to md and
|
|
// above we show the search input along the other UI widgets (the menu button,
|
|
// the language picker, etc.)
|
|
.searchContainerWithClosedSearch {
|
|
display: none;
|
|
|
|
@include breakpoint(md) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Contains the search input and used when the smaller width search input UI is
|
|
// open and we set it full width but as the browser width increases to md and
|
|
// above we don't take up the whole width anymore since we now show other UI
|
|
// widgets.
|
|
.searchContainerWithOpenSearch {
|
|
width: 100%;
|
|
margin-right: -1px;
|
|
|
|
@include breakpoint(md) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// Contains the logo and version picker and used when the smaller width search
|
|
// input UI is closed.
|
|
.logoWithClosedSearch {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-bg-default);
|
|
}
|
|
|
|
// Contains the logo and version picker and used when the smaller width search
|
|
// input UI is open (where we don't show the logo or version picker). As the
|
|
// width increases to md and above and search no longer takes up the whole header
|
|
// width, we show the logo and version picker.
|
|
.logoWithOpenSearch {
|
|
display: none;
|
|
|
|
@include breakpoint(md) {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-bg-default);
|
|
}
|
|
}
|
|
|
|
// Prevent the ... menu from still showing if someone opens it and then widens
|
|
// their browser to lg.
|
|
.menuOverlay {
|
|
min-width: 20rem;
|
|
|
|
@include breakpoint(lg) {
|
|
display: none;
|
|
}
|
|
}
|