@papillonbits/css 1.4.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/LICENSE +1 -1
  2. package/build/primer/autocomplete/README.md +20 -0
  3. package/build/primer/autocomplete/index.scss +3 -0
  4. package/build/primer/autocomplete/suggester.scss +101 -0
  5. package/build/primer/avatars/README.md +20 -0
  6. package/build/primer/avatars/avatar-parent-child.scss +17 -0
  7. package/build/primer/avatars/circle-badge.scss +55 -0
  8. package/build/primer/avatars/index.scss +5 -0
  9. package/build/primer/base/README.md +20 -0
  10. package/build/primer/base/base.scss +2 -5
  11. package/build/primer/base/kbd.scss +2 -6
  12. package/build/primer/base/typography-base.scss +0 -3
  13. package/build/primer/box/README.md +20 -0
  14. package/build/primer/box/box-overlay.scss +45 -0
  15. package/build/primer/box/index.scss +2 -0
  16. package/build/primer/branch-name/README.md +20 -0
  17. package/build/primer/branch-name/branch-name.scss +33 -0
  18. package/build/primer/branch-name/index.scss +3 -0
  19. package/build/primer/buttons/README.md +20 -0
  20. package/build/primer/buttons/button-group.scss +104 -0
  21. package/build/primer/buttons/button.scss +347 -0
  22. package/build/primer/buttons/index.scss +4 -0
  23. package/build/primer/buttons/misc.scss +244 -0
  24. package/build/primer/color-modes/themes/dark.scss +1 -1
  25. package/build/primer/color-modes/themes/dark_colorblind.scss +1 -1
  26. package/build/primer/color-modes/themes/dark_dimmed.scss +1 -1
  27. package/build/primer/color-modes/themes/dark_high_contrast.scss +1 -1
  28. package/build/primer/color-modes/themes/dark_tritanopia.scss +1 -1
  29. package/build/primer/color-modes/themes/light.scss +1 -1
  30. package/build/primer/color-modes/themes/light_colorblind.scss +1 -1
  31. package/build/primer/color-modes/themes/light_high_contrast.scss +1 -1
  32. package/build/primer/color-modes/themes/light_tritanopia.scss +1 -1
  33. package/build/primer/core/README.md +20 -0
  34. package/build/primer/core/index.scss +18 -0
  35. package/build/primer/docs.scss +7 -0
  36. package/build/primer/forms/README.md +20 -0
  37. package/build/primer/forms/form-control.scss +286 -0
  38. package/build/primer/forms/form-group.scss +297 -0
  39. package/build/primer/forms/form-select.scss +47 -0
  40. package/build/primer/forms/index.scss +6 -0
  41. package/build/primer/forms/input-group.scss +81 -0
  42. package/build/primer/forms/radio-group.scss +68 -0
  43. package/build/primer/header/README.md +20 -0
  44. package/build/primer/header/header.scss +51 -0
  45. package/build/primer/header/index.scss +2 -0
  46. package/build/primer/index.scss +8 -3
  47. package/build/primer/labels/README.md +20 -0
  48. package/build/primer/labels/index.scss +3 -0
  49. package/build/primer/labels/issue-labels.scss +26 -0
  50. package/build/primer/labels/mixins.scss +44 -0
  51. package/build/primer/layout/README.md +20 -0
  52. package/build/primer/layout/app-frame.scss +156 -0
  53. package/build/primer/layout/container.scss +30 -0
  54. package/build/primer/layout/grid-offset.scss +19 -0
  55. package/build/primer/layout/grid.scss +77 -0
  56. package/build/primer/layout/index.scss +7 -0
  57. package/build/primer/layout/page-layout.scss +417 -0
  58. package/build/primer/layout/stack.scss +220 -0
  59. package/build/primer/loaders/README.md +20 -0
  60. package/build/primer/loaders/index.scss +2 -0
  61. package/build/primer/loaders/loaders.scss +19 -0
  62. package/build/primer/markdown/README.md +20 -0
  63. package/build/primer/markdown/blob-csv.scss +32 -0
  64. package/build/primer/markdown/code.scss +79 -0
  65. package/build/primer/markdown/footnotes.scss +59 -0
  66. package/build/primer/markdown/headings.scss +101 -0
  67. package/build/primer/markdown/images.scss +130 -0
  68. package/build/primer/markdown/index.scss +9 -0
  69. package/build/primer/markdown/lists.scss +101 -0
  70. package/build/primer/markdown/markdown-body.scss +101 -0
  71. package/build/primer/markdown/tables.scss +46 -0
  72. package/build/primer/marketing/README.md +20 -0
  73. package/build/primer/marketing/buttons/button.scss +171 -0
  74. package/build/primer/marketing/buttons/index.scss +3 -0
  75. package/build/primer/marketing/index.scss +8 -0
  76. package/build/primer/marketing/links/index.scss +3 -0
  77. package/build/primer/marketing/links/link.scss +51 -0
  78. package/build/primer/marketing/support/index.scss +2 -0
  79. package/build/primer/marketing/support/variables.scss +140 -0
  80. package/build/primer/marketing/type/index.scss +3 -0
  81. package/build/primer/marketing/type/typography.scss +140 -0
  82. package/build/primer/marketing/utilities/animations.scss +52 -0
  83. package/build/primer/marketing/utilities/borders.scss +4 -0
  84. package/build/primer/marketing/utilities/filters.scss +3 -0
  85. package/build/primer/marketing/utilities/index.scss +6 -0
  86. package/build/primer/marketing/utilities/layout.scss +58 -0
  87. package/build/primer/navigation/README.md +20 -0
  88. package/build/primer/navigation/filter-list.scss +86 -0
  89. package/build/primer/navigation/index.scss +5 -0
  90. package/build/primer/navigation/sidenav.scss +102 -0
  91. package/build/primer/navigation/subnav.scss +154 -0
  92. package/build/primer/pagination/README.md +20 -0
  93. package/build/primer/pagination/index.scss +3 -0
  94. package/build/primer/pagination/pagination.scss +157 -0
  95. package/build/primer/primitives/index.scss +8 -19
  96. package/build/primer/primitives/temp-typography-tokens.scss +22 -0
  97. package/build/primer/product/README.md +20 -0
  98. package/build/primer/product/index.scss +13 -0
  99. package/build/primer/select-menu/README.md +20 -0
  100. package/build/primer/select-menu/index.scss +3 -0
  101. package/build/primer/select-menu/select-menu.scss +486 -0
  102. package/build/primer/support/README.md +20 -0
  103. package/build/primer/support/mixins/layout.scss +1 -1
  104. package/build/primer/support/mixins/misc.scss +2 -0
  105. package/build/primer/support/mixins/typography.scss +0 -2
  106. package/build/primer/support/variables/typography.scss +1 -1
  107. package/build/primer/table-object/index.scss +1 -0
  108. package/build/primer/table-object/table-object.scss +23 -0
  109. package/build/primer/toasts/README.md +20 -0
  110. package/build/primer/toasts/index.scss +2 -0
  111. package/build/primer/toasts/toasts.scss +129 -0
  112. package/build/primer/tooltips/README.md +20 -0
  113. package/build/primer/tooltips/index.scss +2 -0
  114. package/build/primer/tooltips/tooltips.scss +228 -0
  115. package/build/primer/utilities/README.md +20 -0
  116. package/build/primer/utilities/borders.scss +12 -3
  117. package/build/primer/utilities/box-shadow.scss +0 -2
  118. package/build/primer/utilities/colors.scss +0 -1
  119. package/build/primer/utilities/details.scss +1 -1
  120. package/build/primer/utilities/flexbox.scss +2 -1
  121. package/build/primer/utilities/layout.scss +2 -2
  122. package/build/primer/utilities/margin.scss +2 -3
  123. package/build/primer/utilities/padding.scss +2 -3
  124. package/build/primer/utilities/typography.scss +4 -3
  125. package/build/primer/utilities/visibility-display.scss +2 -1
  126. package/package.json +2 -2
package/build/primer/forms/input-group.scss ADDED
@@ -0,0 +1,81 @@
1
+ .input-group {
2
+ display: table;
3
+
4
+ .form-control {
5
+ position: relative;
6
+ width: 100%;
7
+
8
+ &:focus {
9
+ z-index: 2;
10
+ }
11
+
12
+ + .btn {
13
+ margin-left: 0;
14
+ }
15
+ }
16
+
17
+ // For when you want the input group to behave like inline-block.
18
+ &.inline {
19
+ display: inline-table;
20
+ }
21
+
22
+ // within input group, if button exists change focus styles to match input (no offset)
23
+ &:focus-within {
24
+ // stylelint-disable-next-line selector-max-type
25
+ button {
26
+ outline-offset: 0;
27
+ }
28
+ }
29
+
30
+ // Autocomplete with embedded icon
31
+ .form-control.autocomplete-embedded-icon-wrap {
32
+ display: inline-flex;
33
+ padding: calc(var(--base-size-4) * 1.25) var(--base-size-8);
34
+ }
35
+ }
36
+
37
+ .input-group .form-control,
38
+ .input-group-button {
39
+ display: table-cell;
40
+ }
41
+
42
+ .input-group-button {
43
+ width: 1%;
44
+ vertical-align: middle; // Match the inputs
45
+ }
46
+
47
+ .input-group-button--autocomplete-embedded-icon {
48
+ vertical-align: bottom;
49
+ }
50
+
51
+ .input-group .form-control:first-child,
52
+ .input-group-button:first-child .btn {
53
+ border-top-right-radius: 0;
54
+ border-bottom-right-radius: 0;
55
+ }
56
+
57
+ .input-group .form-control:first-child,
58
+ .input-group-button:first-child .btn:not(.btn-primary) {
59
+ border-color: var(--control-borderColor-rest, var(--color-border-default));
60
+ }
61
+
62
+ .input-group-button:first-child .btn {
63
+ // stylelint-disable-next-line primer/spacing
64
+ margin-right: -1px;
65
+ }
66
+
67
+ .input-group .form-control:last-child,
68
+ .input-group-button:last-child .btn {
69
+ border-top-left-radius: 0;
70
+ border-bottom-left-radius: 0;
71
+ }
72
+
73
+ .input-group .form-control:last-child,
74
+ .input-group-button:last-child .btn:not(.btn-primary) {
75
+ border-color: var(--control-borderColor-rest, var(--color-border-default));
76
+ }
77
+
78
+ .input-group-button:last-child .btn {
79
+ // stylelint-disable-next-line primer/spacing
80
+ margin-left: -1px;
81
+ }
package/build/primer/forms/radio-group.scss ADDED
@@ -0,0 +1,68 @@
1
+ // Tab like radio group
2
+
3
+ .radio-group {
4
+ @include clearfix;
5
+ }
6
+
7
+ .radio-label {
8
+ float: left;
9
+ // stylelint-disable-next-line primer/spacing
10
+ padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input
11
+ // stylelint-disable-next-line primer/spacing
12
+ margin-left: -1px;
13
+ // stylelint-disable-next-line primer/typography
14
+ font-size: $body-font-size;
15
+ // stylelint-disable-next-line primer/typography
16
+ line-height: 20px; // Specifically not inherit our `<body>` default
17
+ color: var(--fgColor-default, var(--color-fg-default));
18
+ cursor: pointer;
19
+ // stylelint-disable-next-line primer/borders, primer/colors
20
+ border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
21
+
22
+ :checked + & {
23
+ position: relative;
24
+ z-index: 1;
25
+ border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
26
+ }
27
+
28
+ &:first-of-type {
29
+ margin-left: 0;
30
+ // stylelint-disable-next-line primer/borders
31
+ border-top-left-radius: $border-radius;
32
+ // stylelint-disable-next-line primer/borders
33
+ border-bottom-left-radius: $border-radius;
34
+ }
35
+
36
+ &:last-of-type {
37
+ // stylelint-disable-next-line primer/borders
38
+ border-top-right-radius: $border-radius;
39
+ // stylelint-disable-next-line primer/borders
40
+ border-bottom-right-radius: $border-radius;
41
+ }
42
+
43
+ .octicon {
44
+ margin-left: var(--base-size-4);
45
+ color: var(--fgColor-muted, var(--color-fg-subtle));
46
+ }
47
+ }
48
+
49
+ .radio-input {
50
+ z-index: 3;
51
+ float: left;
52
+ // stylelint-disable-next-line primer/spacing
53
+ margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16);
54
+
55
+ &:disabled {
56
+ position: relative; // enables z-index
57
+
58
+ + .radio-label {
59
+ color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
60
+ cursor: default;
61
+ background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
62
+
63
+ .octicon {
64
+ color: inherit;
65
+ }
66
+ }
67
+ }
68
+ }
package/build/primer/header/README.md ADDED
@@ -0,0 +1,20 @@
1
+ ---
2
+ bundle: "header"
3
+ generated: true
4
+ ---
5
+
6
+ # Primer CSS: `header` bundle
7
+
8
+ ## Usage
9
+
10
+ Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
11
+
12
+ ```scss
13
+ @import "@primer/css/header/index.scss";
14
+ ```
15
+
16
+ ## Build
17
+
18
+ The `@primer/css` npm package includes a standalone CSS build of this module in `dist/header.css`.
19
+
20
+ [scss]: https://sass-lang.com/documentation/syntax#scss
package/build/primer/header/header.scss ADDED
@@ -0,0 +1,51 @@
1
+ .Header {
2
+ z-index: 32; // TODO: Figure out z-index system
3
+ display: flex;
4
+ padding: var(--base-size-16);
5
+ // stylelint-disable-next-line primer/typography
6
+ font-size: $h5-size;
7
+ // stylelint-disable-next-line primer/typography
8
+ line-height: $lh-default;
9
+ color: var(--header-fgColor-default, var(--color-header-text));
10
+ background-color: var(--header-bgColor, var(--color-header-bg));
11
+ align-items: center;
12
+ flex-wrap: nowrap;
13
+ }
14
+
15
+ .Header-item {
16
+ display: flex;
17
+ margin-right: var(--base-size-16);
18
+ align-self: stretch;
19
+ align-items: center;
20
+ flex-wrap: nowrap;
21
+ }
22
+
23
+ .Header-item--full {
24
+ flex: auto;
25
+ }
26
+
27
+ .Header-link {
28
+ // stylelint-disable-next-line primer/typography
29
+ font-weight: $font-weight-bold;
30
+ color: var(--header-fgColor-logo, var(--color-header-logo));
31
+ white-space: nowrap;
32
+
33
+ &:hover,
34
+ &:focus {
35
+ color: var(--header-fgColor-default, var(--color-header-text));
36
+ text-decoration: none;
37
+ }
38
+ }
39
+
40
+ .Header-input {
41
+ color: var(--header-fgColor-default, var(--color-header-text));
42
+ background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
43
+ // stylelint-disable-next-line primer/borders, primer/colors
44
+ border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
45
+ box-shadow: none;
46
+
47
+ &::placeholder {
48
+ // stylelint-disable-next-line primer/colors
49
+ color: rgba(255, 255, 255, 0.75);
50
+ }
51
+ }
package/build/primer/header/index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import '../support/index.scss';
2
+ @import './header.scss';
package/build/primer/index.scss CHANGED
@@ -1,6 +1,11 @@
1
+ // CSS color variables
1
2
  @import './color-modes/index.scss';
2
3
  @import './primitives/index.scss';
3
- @import './support/index.scss';
4
- @import './base/index.scss';
4
+
5
+ // mts-primer-legacy
5
6
  @import './truncate/index.scss';
6
- @import './utilities/index.scss';
7
+
8
+ // Global requirements
9
+ @import './core/index.scss';
10
+ @import './product/index.scss';
11
+ @import './marketing/index.scss';
package/build/primer/labels/README.md ADDED
@@ -0,0 +1,20 @@
1
+ ---
2
+ bundle: "labels"
3
+ generated: true
4
+ ---
5
+
6
+ # Primer CSS: `labels` bundle
7
+
8
+ ## Usage
9
+
10
+ Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
11
+
12
+ ```scss
13
+ @import "@primer/css/labels/index.scss";
14
+ ```
15
+
16
+ ## Build
17
+
18
+ The `@primer/css` npm package includes a standalone CSS build of this module in `dist/labels.css`.
19
+
20
+ [scss]: https://sass-lang.com/documentation/syntax#scss
package/build/primer/labels/index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import '../support/index.scss';
2
+ @import './mixins.scss';
3
+ @import './issue-labels.scss';
package/build/primer/labels/issue-labels.scss ADDED
@@ -0,0 +1,26 @@
1
+ // Issue Labels
2
+
3
+ // TODO: Replace with .Label once solid backgrounds are supported
4
+
5
+ .IssueLabel {
6
+ @include labels-base;
7
+
8
+ .g-emoji {
9
+ position: relative;
10
+ // stylelint-disable-next-line primer/spacing
11
+ top: -0.05em;
12
+ display: inline-block;
13
+ // stylelint-disable-next-line primer/typography
14
+ font-size: 1em;
15
+ // stylelint-disable-next-line primer/typography
16
+ line-height: $lh-condensed-ultra;
17
+ }
18
+
19
+ &:hover {
20
+ text-decoration: none;
21
+ }
22
+ }
23
+
24
+ .IssueLabel--big {
25
+ @include labels-large;
26
+ }
package/build/primer/labels/mixins.scss ADDED
@@ -0,0 +1,44 @@
1
+ // Label mixins
2
+
3
+ // Default: 20px
4
+ // Large: 24px
5
+ // Inline: em based
6
+
7
+ @mixin labels-base {
8
+ display: inline-block;
9
+ // stylelint-disable-next-line primer/spacing
10
+ padding: 0 7px;
11
+ // stylelint-disable-next-line primer/typography
12
+ font-size: $font-size-small;
13
+ // stylelint-disable-next-line primer/typography
14
+ font-weight: $font-weight-semibold;
15
+ // stylelint-disable-next-line primer/typography
16
+ line-height: 18px;
17
+ white-space: nowrap;
18
+ // stylelint-disable-next-line primer/borders, primer/colors
19
+ border: $border-width $border-style transparent;
20
+ // stylelint-disable-next-line primer/borders
21
+ border-radius: 2em;
22
+ }
23
+
24
+ @mixin labels-large {
25
+ // stylelint-disable-next-line primer/spacing
26
+ padding-right: 10px;
27
+ // stylelint-disable-next-line primer/spacing
28
+ padding-left: 10px;
29
+ // stylelint-disable-next-line primer/typography
30
+ line-height: 22px;
31
+ }
32
+
33
+ // Inline
34
+ //
35
+ // Doesn't increase height of parent element
36
+ // Can be used with different font-sizes
37
+
38
+ @mixin labels--inline {
39
+ display: inline;
40
+ // stylelint-disable-next-line primer/spacing
41
+ padding: 0.12em $em-spacer-5;
42
+ // stylelint-disable-next-line primer/typography
43
+ font-size: 85%;
44
+ }
package/build/primer/layout/README.md ADDED
@@ -0,0 +1,20 @@
1
+ ---
2
+ bundle: "layout"
3
+ generated: true
4
+ ---
5
+
6
+ # Primer CSS: `layout` bundle
7
+
8
+ ## Usage
9
+
10
+ Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
11
+
12
+ ```scss
13
+ @import "@primer/css/layout/index.scss";
14
+ ```
15
+
16
+ ## Build
17
+
18
+ The `@primer/css` npm package includes a standalone CSS build of this module in `dist/layout.css`.
19
+
20
+ [scss]: https://sass-lang.com/documentation/syntax#scss
package/build/primer/layout/app-frame.scss ADDED
@@ -0,0 +1,156 @@
1
+ // stylelint-disable max-nesting-depth
2
+ // stylelint-disable primer/spacing
3
+
4
+ .AppFrame {
5
+
6
+ // AppFrame structure
7
+ // ===================
8
+ //
9
+ // .AppFrame
10
+ // ├─ .AppFrame-a11yNav
11
+ // │ ├─ .AppFrame-a11yLink
12
+ // │
13
+ // ├─ .AppFrame-main
14
+ // │ ├─ .AppFrame-header-wrapper
15
+ // │ │ ├─ .AppFrame-header
16
+ // │ │ ├─ .AppFrame-subheader
17
+ // │ │
18
+ // │ ├─ #start-of-content
19
+ // │ ├─ .AppFrame-body
20
+ // │
21
+ // │ .AppFrame-footer
22
+
23
+ // Accessibility navigation
24
+
25
+ .AppFrame-a11yNav {
26
+ position: absolute;
27
+ z-index: 1000;
28
+ display: flex;
29
+ width: 100%;
30
+ padding: var(--base-size-16, 16px);
31
+ background: var(--bgColor-inset, var(--color-canvas-inset));
32
+ padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
33
+ isolation: isolate;
34
+ align-items: center;
35
+ gap: var(--base-size-8, 8px);
36
+
37
+ &:not(:focus-within) {
38
+ width: 1px;
39
+ height: 1px;
40
+ padding: 0;
41
+ margin: -1px;
42
+ overflow: hidden;
43
+ clip: rect(1px, 1px, 1px, 1px);
44
+ border: 0;
45
+ }
46
+
47
+ &:focus-within {
48
+ top: 0;
49
+ left: 0;
50
+
51
+ // Narrow viewport
52
+ @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
53
+ justify-content: center;
54
+ }
55
+ }
56
+ }
57
+
58
+ .AppFrame-a11yLink {
59
+ transition: none;
60
+
61
+ &:not(:focus) {
62
+ display: block;
63
+ width: var(--base-size-8, 8px);
64
+ height: var(--base-size-8, 8px);
65
+ overflow: hidden;
66
+ text-indent: var(--base-size-128, 128px);
67
+ pointer-events: none;
68
+ // stylelint-disable-next-line primer/colors
69
+ background: var(--borderColor-default, var(--color-border-default));
70
+ border-radius: var(--borderRadius-full, 100vh);
71
+ }
72
+
73
+ &:focus {
74
+ z-index: 20;
75
+ display: grid;
76
+ width: auto;
77
+ height: auto;
78
+ min-height: var(--control-medium-size, 32px);
79
+ padding: 0 var(--control-medium-paddingInline-spacious, 16px);
80
+ overflow: auto;
81
+ color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
82
+ background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
83
+ border-radius: var(--borderRadius-full, 100vh);
84
+ align-items: center;
85
+
86
+ @media (pointer: coarse) {
87
+ &::after {
88
+ @include minTouchTarget(var(--control-minTarget-coarse, 44px));
89
+ }
90
+ }
91
+
92
+ @media (prefers-reduced-motion: no-preference) {
93
+ animation: AppFrame-a11yLink-focus 200ms ease-out;
94
+ }
95
+
96
+ @keyframes AppFrame-a11yLink-focus {
97
+ 0% {
98
+ color: var(--fgColor-accent, var(--color-accent-emphasis));
99
+ transform: scale(0.3, 0.25);
100
+ }
101
+
102
+ 50% {
103
+ color: var(--fgColor-accent, var(--color-accent-emphasis));
104
+ transform: scale(1, 1);
105
+ }
106
+
107
+ 55% {
108
+ color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
109
+ }
110
+
111
+ 100% {
112
+ transform: scaleX(1);
113
+ }
114
+ }
115
+ }
116
+ }
117
+
118
+ .AppFrame-main {
119
+ display: flex;
120
+ min-height: 100vh;
121
+ flex-direction: column;
122
+
123
+ @supports (height: 100dvh) {
124
+ min-height: 100dvh;
125
+ }
126
+ }
127
+
128
+ .AppFrame-header-wrapper {
129
+ position: relative;
130
+ height: min-content;
131
+ overflow: visible;
132
+
133
+ .AppFrame-header {
134
+ position: sticky;
135
+ top: 0;
136
+ z-index: 1;
137
+ }
138
+ }
139
+
140
+ .AppFrame-header {
141
+ flex: 0 0 auto;
142
+ }
143
+
144
+ .AppFrame-subheader {
145
+ flex: 0 0 auto;
146
+ }
147
+
148
+ .AppFrame-body {
149
+ flex: 1 0;
150
+ height: 100%;
151
+ }
152
+
153
+ .AppFrame-footer {
154
+ flex: 0 0 auto;
155
+ }
156
+ }
package/build/primer/layout/container.scss ADDED
@@ -0,0 +1,30 @@
1
+ // Fixed-width, centered column for site content.
2
+ // Handy container styles that match our breakpoints
3
+
4
+ // 544px
5
+ .container-sm {
6
+ max-width: $width-sm;
7
+ margin-right: auto;
8
+ margin-left: auto;
9
+ }
10
+
11
+ // 768px
12
+ .container-md {
13
+ max-width: $container-md;
14
+ margin-right: auto;
15
+ margin-left: auto;
16
+ }
17
+
18
+ // 1004px - this matches the current fixed width: 980px + padding: px-3
19
+ .container-lg {
20
+ max-width: $container-lg;
21
+ margin-right: auto;
22
+ margin-left: auto;
23
+ }
24
+
25
+ // 1280px
26
+ .container-xl {
27
+ max-width: $container-xl;
28
+ margin-right: auto;
29
+ margin-left: auto;
30
+ }
package/build/primer/layout/grid-offset.scss ADDED
@@ -0,0 +1,19 @@
1
+ // Optional offset options to work with grid.scss
2
+
3
+ // Offset Columns
4
+
5
+ @each $breakpoint, $variant in $responsive-variants {
6
+ @include breakpoint($breakpoint) {
7
+ .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
8
+ .offset#{$variant}-2 { margin-left: (2 * 0.0833333333 * 100%) !important; }
9
+ .offset#{$variant}-3 { margin-left: (3 * 0.0833333333 * 100%) !important; }
10
+ .offset#{$variant}-4 { margin-left: (4 * 0.0833333333 * 100%) !important; }
11
+ .offset#{$variant}-5 { margin-left: (5 * 0.0833333333 * 100%) !important; }
12
+ .offset#{$variant}-6 { margin-left: (6 * 0.0833333333 * 100%) !important; }
13
+ .offset#{$variant}-7 { margin-left: (7 * 0.0833333333 * 100%) !important; }
14
+ .offset#{$variant}-8 { margin-left: (8 * 0.0833333333 * 100%) !important; }
15
+ .offset#{$variant}-9 { margin-left: (9 * 0.0833333333 * 100%) !important; }
16
+ .offset#{$variant}-10 { margin-left: (10 * 0.0833333333 * 100%) !important; }
17
+ .offset#{$variant}-11 { margin-left: (11 * 0.0833333333 * 100%) !important; }
18
+ }
19
+ }
package/build/primer/layout/grid.scss ADDED
@@ -0,0 +1,77 @@
1
+ // GRID
2
+
3
+ // Columns
4
+
5
+ // stylelint-disable-next-line declaration-property-value-no-unknown
6
+ .col-1 { width: (1 * 0.0833333333 * 100%); }
7
+ // stylelint-disable-next-line declaration-property-value-no-unknown
8
+ .col-2 { width: (2 * 0.0833333333 * 100%); }
9
+ // stylelint-disable-next-line declaration-property-value-no-unknown
10
+ .col-3 { width: (3 * 0.0833333333 * 100%); }
11
+ // stylelint-disable-next-line declaration-property-value-no-unknown
12
+ .col-4 { width: (4 * 0.0833333333 * 100%); }
13
+ // stylelint-disable-next-line declaration-property-value-no-unknown
14
+ .col-5 { width: (5 * 0.0833333333 * 100%); }
15
+ // stylelint-disable-next-line declaration-property-value-no-unknown
16
+ .col-6 { width: (6 * 0.0833333333 * 100%); }
17
+ // stylelint-disable-next-line declaration-property-value-no-unknown
18
+ .col-7 { width: (7 * 0.0833333333 * 100%); }
19
+ // stylelint-disable-next-line declaration-property-value-no-unknown
20
+ .col-8 { width: (8 * 0.0833333333 * 100%); }
21
+ // stylelint-disable-next-line declaration-property-value-no-unknown
22
+ .col-9 { width: (9 * 0.0833333333 * 100%); }
23
+ // stylelint-disable-next-line declaration-property-value-no-unknown
24
+ .col-10 { width: (10 * 0.0833333333 * 100%); }
25
+ // stylelint-disable-next-line declaration-property-value-no-unknown
26
+ .col-11 { width: (11 * 0.0833333333 * 100%); }
27
+ .col-12 { width: 100%; }
28
+
29
+ @each $breakpoint in map-keys($breakpoints) {
30
+ @include breakpoint($breakpoint) {
31
+ .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
32
+ .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
33
+ .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
34
+ .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
35
+ .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
36
+ .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
37
+ .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
38
+ .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
39
+ .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
40
+ .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
41
+ .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
42
+ .col-#{$breakpoint}-12 { width: 100%; }
43
+ }
44
+ }
45
+
46
+ // Gutters
47
+ // Apply padding and a negative margin to the outside of the container
48
+ // stylelint-disable primer/spacing
49
+ @mixin gutters ($gutter-width: var(--base-size-16)) {
50
+ margin-right: calc($gutter-width * -1);
51
+ margin-left: calc($gutter-width * -1);
52
+
53
+ > [class*='col-'] {
54
+ padding-right: $gutter-width !important;
55
+ padding-left: $gutter-width !important;
56
+ }
57
+ }
58
+
59
+ .gutter {
60
+ @include gutters(var(--base-size-16));
61
+ }
62
+
63
+ .gutter-condensed {
64
+ @include gutters(var(--base-size-8));
65
+ }
66
+
67
+ .gutter-spacious {
68
+ @include gutters(var(--base-size-24));
69
+ }
70
+
71
+ @each $breakpoint in map-keys($breakpoints) {
72
+ @include breakpoint($breakpoint) {
73
+ .gutter-#{$breakpoint} { @include gutters(var(--base-size-16)); }
74
+ .gutter-#{$breakpoint}-condensed { @include gutters(var(--base-size-8)); }
75
+ .gutter-#{$breakpoint}-spacious { @include gutters(var(--base-size-24)); }
76
+ }
77
+ }
package/build/primer/layout/index.scss ADDED
@@ -0,0 +1,7 @@
1
+ @import '../support/index.scss';
2
+ @import './app-frame.scss';
3
+ @import './container.scss';
4
+ @import './grid.scss';
5
+ @import './grid-offset.scss';
6
+ @import './page-layout.scss';
7
+ @import './stack.scss';