jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-23 03:44:00 -05:00
Code Issues Projects Releases Wiki Activity

breakpoint-xxl mixin (#39880)

Browse Source
This commit is contained in:
Kevin Heis
2023-07-31 07:08:08 -07:00
committed by GitHub
parent 7d9b0b2b11
commit ba45ae3382
7 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/article/ArticleInlineLayout.module.scss
View File

@@ -1,4 +1,5 @@
@import "@primer/css/support/index.scss"; @import "@primer/css/support/index.scss";
@import "stylesheets/breakpoint-xxl.scss";
.containerBox { .containerBox {
max-width: 720px; max-width: 720px;
@@ -37,7 +38,7 @@
.sidebarBox { .sidebarBox {
border-bottom: 1px solid var(--color-border-default) !important; border-bottom: 1px solid var(--color-border-default) !important;
@media (min-width: 1400px) { @include breakpoint-xxl {
border-bottom: none !important; border-bottom: none !important;
} }
} }

3
components/release-notes/PatchNotes.module.scss
View File

@@ -1,4 +1,5 @@
@import "@primer/css/support/index.scss"; @import "@primer/css/support/index.scss";
@import "stylesheets/breakpoint-xxl.scss";
.aside { .aside {
@include breakpoint(md) { @include breakpoint(md) {
@@ -7,7 +8,7 @@
top: 105px; top: 105px;
} }
@media (min-width: 1400px) { @include breakpoint-xxl {
height: calc(100vh - 65px); height: calc(100vh - 65px);
top: 65px; top: 65px;
} }

6
components/ui/MarkdownContent/stylesheets/table.scss
View File

@@ -1,3 +1,5 @@
@import "stylesheets/breakpoint-xxl.scss";
.markdownBody { .markdownBody {
table { table {
display: table; display: table;
@@ -48,8 +50,8 @@
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
border: 0; border: 0;
@media (min-width: 1400px) { @include breakpoint-xxl {
scroll-padding-top: 65px !important; // 48 + 8 + 8 + 1 top: 65px !important; // 48 + 8 + 8 + 1
} }
} }

4
stylesheets/annotate.scss
View File

@@ -1,3 +1,5 @@
@import "stylesheets/breakpoint-xxl.scss";
/* Code annotations /* Code annotations
----------------------------------------------------------------------------*/ ----------------------------------------------------------------------------*/
@@ -41,7 +43,7 @@
margin: 0 calc((100vw - 720px - 4rem) / 2 * -1); margin: 0 calc((100vw - 720px - 4rem) / 2 * -1);
} }
@media (min-width: 1400px) { @include breakpoint-xxl {
// 326px: navigation width // 326px: navigation width
margin: 0 max(-12rem, calc((100vw - 720px - 326px - 4rem) / 2 * -1)); margin: 0 max(-12rem, calc((100vw - 720px - 326px - 4rem) / 2 * -1));
} }

5
stylesheets/breakpoint-xxl.scss Normal file
View File

@@ -0,0 +1,5 @@
@mixin breakpoint-xxl {
@media (min-width: 1400px) {
@content;
}
}

4
stylesheets/scroll-top.scss
View File

@@ -1,10 +1,12 @@
@import "stylesheets/breakpoint-xxl.scss";
// https://tetralogical.com/blog/2023/06/08/focus-in-view/ // https://tetralogical.com/blog/2023/06/08/focus-in-view/
html, html,
body { body {
scroll-padding-top: 105px !important; // 88 + 8 + 8 + 1 scroll-padding-top: 105px !important; // 88 + 8 + 8 + 1
@media (min-width: 1400px) { @include breakpoint-xxl {
scroll-padding-top: 65px !important; // 48 + 8 + 8 + 1 scroll-padding-top: 65px !important; // 48 + 8 + 8 + 1
} }
} }

6
stylesheets/utilities.scss
View File

@@ -1,3 +1,5 @@
@import "stylesheets/breakpoint-xxl.scss";
.color-unset { .color-unset {
color: unset; color: unset;
} }
@@ -133,13 +135,13 @@
// used to help prevent overlapping main content and the minitoc sidebar // used to help prevent overlapping main content and the minitoc sidebar
.d-xxl-block { .d-xxl-block {
@media (min-width: 1400px) { @include breakpoint-xxl {
display: block !important; display: block !important;
} }
} }
.d-xxl-none { .d-xxl-none {
@media (min-width: 1400px) { @include breakpoint-xxl {
display: none !important; display: none !important;
} }
} }