Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support fractional viewport sizes for max-width media queries #1827

Merged
merged 6 commits into from
Dec 15, 2021
Merged

Support fractional viewport sizes for max-width media queries #1827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d51ddb
Support fractional viewport sizes
simurai Dec 14, 2021
feeae78
Create serious-emus-worry.md
simurai Dec 14, 2021
2789aba
Support fractional viewport sizes for Popover
simurai Dec 15, 2021
7524bf9
Support fractional viewport sizes for Layout
simurai Dec 15, 2021
a0bb588
Create afraid-jars-occur.md
simurai Dec 15, 2021
df025fc
Merge branch 'main' into hide-utilities
simurai Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/afraid-jars-occur.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Support fractional viewport sizes for `max-width` media queries
5 changes: 5 additions & 0 deletions .changeset/serious-emus-worry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Support fractional viewport sizes for the `hide` utilities
6 changes: 3 additions & 3 deletions src/layout/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
--Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
--Layout-gutter: 16px;

@media (max-width: calc(#{$width-sm} - 1px)) {
@media (max-width: calc(#{$width-sm} - 0.02px)) {
@include flow-as-row;
}

&.Layout--flowRow-until-md {
@media (max-width: calc(#{$width-md} - 1px)) {
@media (max-width: calc(#{$width-md} - 0.02px)) {
@include flow-as-row;
}
}

&.Layout--flowRow-until-lg {
@media (max-width: calc(#{$width-lg} - 1px)) {
@media (max-width: calc(#{$width-lg} - 0.02px)) {
@include flow-as-row;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
// Responsive Popover
// For < md it will show full-width anchored to the bottom

@media (max-width: ($width-md - 1px)) {
@media (max-width: ($width-md - 0.02px)) {
.Popover {
position: fixed;
top: auto !important;
Expand Down
6 changes: 3 additions & 3 deletions src/utilities/visibility-display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@

// Hide utilities for each breakpoint
// Each hide utility only applies to one breakpoint range.
@media (max-width: $width-sm - 1px) {
@media (max-width: $width-sm - 0.02px) {
.hide-sm {
display: none !important;
}
}

@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
@media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
.hide-md {
display: none !important;
}
}

@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
@media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
.hide-lg {
display: none !important;
}
Expand Down