FilesExpand file tree

main

/

DefaultLayout.module.scss

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

64 lines (55 loc) · 2.09 KB

main

/

DefaultLayout.module.scss

Copy path

Top

File metadata and controls

• Code
• Blame

64 lines (55 loc) · 2.09 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

@import "@primer/css/support/variables/layout.scss";

@import "@primer/css/support/mixins/layout.scss";

@import "src/frame/stylesheets/breakpoint-xxl.scss";

@import "@primer/react-brand/lib/design-tokens/scss/tokens/functional/size/breakpoints.scss";

.mainContent {

scroll-margin-top: 5rem;

// Clip wide content such as tables and code without creating a scroll container.

// Sticky rails and the secondary bar still resolve against the viewport.

overflow-x: clip;

}

// Search results split into facet rail and results at Brand's medium breakpoint,

// before d-lg-flex at 1012px, so filters are available on tablets. Applied only

// on search results pages, versioned or not.

.searchColumns {

@media (min-width: $brand-breakpoint-medium) {

display: flex;

}

}

// Sticky descendants share the header and secondary-bar offset.

// The sub-bar adds 40px, matching OverviewSubBar visibility.

//

// The header height comes from --docs-header-height because the Brand header is

// 3.5rem below 48rem and 4rem above. Keep the fixed 45px secondary-bar height

// in step with DocsSecondaryBar.module.scss and SidebarNav.module.scss.

.stickyStack {

--docs-sticky-stack: calc(var(--docs-header-height) + 45px);

}

.stickyStackWithSubBar {

--docs-sticky-stack: calc(var(--docs-header-height) + 45px + 40px);

}

// Match the drawer reveal breakpoints in DocsSecondaryBar.module.scss.

.stickyStackYieldsAtXxl {

@include breakpoint-xxl {

--docs-sticky-stack: calc(var(--docs-header-height) + 45px);

}

}

.stickyStackYieldsWhenCollapsed {

@media (min-width: 1074px) {

--docs-sticky-stack: calc(var(--docs-header-height) + 45px);

}

}

// The open inline nav replaces the content below lg. At lg the 326px desktop

// rail sits beside the content; this breakpoint must match SidebarNav.

.contentHiddenForNav {

display: none;

@include breakpoint(lg) {

display: flex;

}

}

// The skip link uses the Brand accent fill so its onEmphasis text inverts with

// the page's light and dark Brand surfaces.

.skipButton {

background-color: var(--brand-color-accent-primary);

color: var(--brand-color-text-onEmphasis);

}