primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-25 18:26:14 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* Support fractional viewport sizes

* Create serious-emus-worry.md

* Support fractional viewport sizes for Popover

* Support fractional viewport sizes for Layout

* Create afraid-jars-occur.md
This commit is contained in:
simurai 2021-12-15 21:10:43 +09:00 committed by GitHub
parent 8ee1f01b57
commit 69e1fc539e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/afraid-jars-occur.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Support fractional viewport sizes for `max-width` media queries

5
.changeset/serious-emus-worry.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Support fractional viewport sizes for the `hide` utilities

6
src/layout/layout.scss
View File

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

2
src/popover/popover.scss
View File

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

6
src/utilities/visibility-display.scss
View File

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