primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-10-27 01:44:13 +03:00
Code Issues Projects Releases Wiki Activity

Import Layout from PVC (#2340)

Browse Source 
* 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:
simurai 2022-12-15 11:40:15 +09:00 committed by GitHub
parent 4272e5ee9b
commit ecbcbb1b04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 51 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mighty-forks-occur.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Import `Layout` from PVC

2
package.json
View File

@ -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
src/layout/index.scss
View File

@ -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';

183
src/layout/layout.scss
View File

@ -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';

105
src/layout/mixins.scss
View File

@ -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;
}

26
src/layout/page-layout.scss
View File

@ -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

2
src/navigation/menu.scss
View File

@ -1 +1 @@
@import '@primer/view-components/app/components/primer/menu_component';
@import '@primer/view-components/app/components/primer/alpha/menu';

21
yarn.lock
View File

@ -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"