mirror of
https://github.com/primer/css.git
synced 2024-10-27 01:44:13 +03:00
Import Layout
from PVC (#2340)
* Import Layout styles from PVC * Bump `@primer/view-components` to `0.0.115` * Bump `@primer/view-components` to `0.0.115` Again! After solving merge conflicts * Rename `menu_component` import to `alpha/menu` * Create mighty-forks-occur.md
This commit is contained in:
parent
4272e5ee9b
commit
ecbcbb1b04
5
.changeset/mighty-forks-occur.md
Normal file
5
.changeset/mighty-forks-occur.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": patch
|
||||
---
|
||||
|
||||
Import `Layout` from PVC
|
@ -43,7 +43,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/primitives": "^7.9.0",
|
||||
"@primer/view-components": "^0.0.114"
|
||||
"@primer/view-components": "^0.0.115"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "0.4.6",
|
||||
|
@ -1,6 +1,5 @@
|
||||
@import '../support/index.scss';
|
||||
@import './app-frame.scss';
|
||||
@import './mixins.scss';
|
||||
@import './container.scss';
|
||||
@import './grid.scss';
|
||||
@import './grid-offset.scss';
|
||||
|
@ -1,182 +1 @@
|
||||
// Layout component
|
||||
|
||||
.Layout {
|
||||
display: grid;
|
||||
|
||||
--Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
|
||||
--Layout-gutter: 16px;
|
||||
|
||||
@media (max-width: calc(#{$width-sm} - 0.02px)) {
|
||||
@include flow-as-row;
|
||||
}
|
||||
|
||||
&.Layout--flowRow-until-md {
|
||||
@media (max-width: calc(#{$width-md} - 0.02px)) {
|
||||
@include flow-as-row;
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--flowRow-until-lg {
|
||||
@media (max-width: calc(#{$width-lg} - 0.02px)) {
|
||||
@include flow-as-row;
|
||||
}
|
||||
}
|
||||
|
||||
// Flow as column
|
||||
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
|
||||
grid-gap: var(--Layout-gutter);
|
||||
|
||||
.Layout-sidebar {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.Layout-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
|
||||
// Gutter spacing
|
||||
|
||||
@include breakpoint(lg) {
|
||||
--Layout-gutter: 24px;
|
||||
}
|
||||
|
||||
&.Layout--gutter-none {
|
||||
// stylelint-disable-next-line length-zero-no-unit
|
||||
--Layout-gutter: 0px;
|
||||
}
|
||||
|
||||
&.Layout--gutter-condensed {
|
||||
--Layout-gutter: 16px;
|
||||
}
|
||||
|
||||
&.Layout--gutter-spacious {
|
||||
@include breakpoint(lg) {
|
||||
--Layout-gutter: 32px;
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
--Layout-gutter: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar width
|
||||
|
||||
@each $breakpoint in map-keys($sidebar-width) {
|
||||
@include breakpoint($breakpoint) {
|
||||
--Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--sidebar-narrow {
|
||||
@each $breakpoint in map-keys($sidebar-narrow-width) {
|
||||
@include breakpoint($breakpoint) {
|
||||
--Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--sidebar-wide {
|
||||
@each $breakpoint in map-keys($sidebar-wide-width) {
|
||||
@include breakpoint($breakpoint) {
|
||||
--Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar position
|
||||
|
||||
&.Layout--sidebarPosition-start {
|
||||
.Layout-sidebar {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-end {
|
||||
grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
|
||||
|
||||
.Layout-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.Layout-sidebar {
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar divider
|
||||
|
||||
&.Layout--divided {
|
||||
.Layout-divider {
|
||||
display: block;
|
||||
grid-column: 2;
|
||||
width: 1px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -1px;
|
||||
background: var(--color-border-default);
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-column: 3 / span 1;
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-end {
|
||||
.Layout-sidebar {
|
||||
grid-column: 3 / span 1;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Layout-divider {
|
||||
display: none;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.Layout-sidebar {
|
||||
width: var(--Layout-sidebar-width);
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
min-width: 0;
|
||||
|
||||
// Centered main column
|
||||
// FIXME: right-aligned sidebar
|
||||
.Layout-main-centered-md,
|
||||
.Layout-main-centered-lg,
|
||||
.Layout-main-centered-xl {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
> .container-md,
|
||||
> .container-lg,
|
||||
> .container-xl {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Layout-main-centered-md {
|
||||
max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
||||
}
|
||||
|
||||
.Layout-main-centered-lg {
|
||||
max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
||||
}
|
||||
|
||||
.Layout-main-centered-xl {
|
||||
max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/layout';
|
||||
|
@ -1,105 +0,0 @@
|
||||
// Layout alpha mixins
|
||||
|
||||
@mixin flow-as-row {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr !important;
|
||||
|
||||
.Layout-sidebar,
|
||||
.Layout-divider,
|
||||
.Layout-main {
|
||||
width: 100% !important;
|
||||
grid-column: 1 !important;
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-flowRow-start {
|
||||
.Layout-sidebar {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-row: 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-flowRow-end {
|
||||
.Layout-sidebar {
|
||||
grid-row: 2 / span 2;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-flowRow-none {
|
||||
.Layout-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.Layout--divided {
|
||||
@include flow-as-row-divider;
|
||||
|
||||
.Layout-main {
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
|
||||
&.Layout--sidebarPosition-flowRow-end {
|
||||
.Layout-sidebar {
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
|
||||
.Layout-main {
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flow-as-row-divider {
|
||||
--Layout-gutter: 0;
|
||||
|
||||
.Layout-divider {
|
||||
height: 1px;
|
||||
grid-row: 2;
|
||||
|
||||
&.Layout-divider--flowRow-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.Layout-divider--flowRow-shallow {
|
||||
height: 8px;
|
||||
margin-right: 0;
|
||||
background: var(--color-canvas-inset);
|
||||
border-color: var(--color-border-default);
|
||||
border-style: solid;
|
||||
border-width: $border-width 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layout beta mixins
|
||||
|
||||
// responsive region dividers
|
||||
|
||||
@mixin Layout-line-divider {
|
||||
position: absolute;
|
||||
left: calc(var(--Layout-outer-spacing-x) * -1);
|
||||
display: block;
|
||||
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
|
||||
height: 1px;
|
||||
content: '';
|
||||
background-color: $Layout-divider-color;
|
||||
}
|
||||
|
||||
@mixin Layout-filled-divider {
|
||||
position: absolute;
|
||||
bottom: calc(#{$spacer-2} * -1); // -8px
|
||||
left: calc(var(--Layout-outer-spacing-x) * -1);
|
||||
display: block;
|
||||
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
|
||||
height: #{$spacer-2}; // 8px
|
||||
content: '';
|
||||
background-color: var(--color-canvas-inset);
|
||||
box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
|
||||
}
|
@ -22,6 +22,32 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
|
||||
// stylelint-enable length-zero-no-unit
|
||||
}
|
||||
|
||||
// Layout beta mixins
|
||||
|
||||
// responsive region dividers
|
||||
|
||||
@mixin Layout-line-divider {
|
||||
position: absolute;
|
||||
left: calc(var(--Layout-outer-spacing-x) * -1);
|
||||
display: block;
|
||||
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
|
||||
height: 1px;
|
||||
content: '';
|
||||
background-color: $Layout-divider-color;
|
||||
}
|
||||
|
||||
@mixin Layout-filled-divider {
|
||||
position: absolute;
|
||||
bottom: calc(#{$spacer-2} * -1); // -8px
|
||||
left: calc(var(--Layout-outer-spacing-x) * -1);
|
||||
display: block;
|
||||
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
|
||||
height: #{$spacer-2}; // 8px
|
||||
content: '';
|
||||
background-color: var(--color-canvas-inset);
|
||||
box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
|
||||
}
|
||||
|
||||
.PageLayout {
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
|
@ -1 +1 @@
|
||||
@import '@primer/view-components/app/components/primer/menu_component';
|
||||
@import '@primer/view-components/app/components/primer/alpha/menu';
|
||||
|
21
yarn.lock
21
yarn.lock
@ -783,6 +783,13 @@
|
||||
minimatch "^3.1.2"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@github/auto-check-element@^5.2.0":
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/auto-check-element/-/auto-check-element-5.2.0.tgz#293c2240cb3098e7e6ca10c801e4df76d644f6f9"
|
||||
integrity sha512-YODZZUSeoZVJQ04p73MAohrEK37SJlVRDUTaFiPYse9K3z3bNEm+ekq5qYCIyDKGgX7hUhr3WZF35qHxr/zu0Q==
|
||||
dependencies:
|
||||
"@github/mini-throttle" "^1.0.7"
|
||||
|
||||
"@github/auto-complete-element@^3.3.4":
|
||||
version "3.3.4"
|
||||
resolved "https://registry.yarnpkg.com/@github/auto-complete-element/-/auto-complete-element-3.3.4.tgz#b762f13342b8ea5e03609f75b5a8d417080355eb"
|
||||
@ -815,6 +822,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@github/image-crop-element/-/image-crop-element-5.0.0.tgz#6ae2c31f1e7dc355c41c3140554fb76ca7a71ef7"
|
||||
integrity sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==
|
||||
|
||||
"@github/mini-throttle@^1.0.7":
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-1.0.7.tgz#938d6eb45d00d07043a669baabfcafa072833f10"
|
||||
integrity sha512-1fzCDXpxI4J59pNmO0r0Y1g+R8Sa2B5ersce8AuFu5STMu7b++9osdedK0zWduYowBIgsPQZihJBN19WrAF64g==
|
||||
|
||||
"@github/mini-throttle@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-2.1.0.tgz#583a1d5e383caa21a1c067a649f15f7ab575dccf"
|
||||
@ -1198,11 +1210,12 @@
|
||||
stylelint-scss "^4.0.0"
|
||||
tap-map "^1.0.0"
|
||||
|
||||
"@primer/view-components@^0.0.114":
|
||||
version "0.0.114"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.114.tgz#44b847740dd7cb14209b78d99f25e51077aa14d2"
|
||||
integrity sha512-ATDaosRz7/5g2PCZo00dgbz6GRVIg8L43bwyOJ7M/3YQ9uaHkiVjQ9xIc0voRx870HAaGwstRP+qfCsJr/7gNw==
|
||||
"@primer/view-components@^0.0.115":
|
||||
version "0.0.115"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.115.tgz#79f36c14327742c6eac1b73ff2eb3bb5206984fa"
|
||||
integrity sha512-Qo6vNE0/UK6azsu9wTpb9AneHpM2FkA/saZ6UB1kvRttD5M0d/xto8sqq6b45QkKukqIlS4MhzyyvLIvC6rI1g==
|
||||
dependencies:
|
||||
"@github/auto-check-element" "^5.2.0"
|
||||
"@github/auto-complete-element" "^3.3.4"
|
||||
"@github/catalyst" "^1.6.0"
|
||||
"@github/clipboard-copy-element" "^1.1.2"
|
||||
|
Loading…
Reference in New Issue
Block a user