primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-19 20:57:37 +03:00
Code Issues Projects Releases Wiki Activity

Add narrow/regular/wide viewport range utilities (#1995)

Browse Source 
* Add viewport range utilities

* Add comment about wide viewport range size

* Stylelint auto-fixes

* Create proud-donkeys-happen.md

* Add support for `.show-whenRegular.hide-whenWide`

As per discussion in
https://github.com/primer/css/pull/1995/files#r834365336

Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: Katie Langerman <langermank@github.com>
This commit is contained in:
Vinicius Depizzol 2022-03-25 13:18:41 -07:00 committed by GitHub
parent 09f9d84c4d
commit 557b100a77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/proud-donkeys-happen.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Add narrow/regular/wide viewport range utilities

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

@ -38,6 +38,55 @@
}
}
// Show/Hide Viewport range utilities
.show-whenNarrow,
.show-whenRegular,
.show-whenWide,
.show-whenRegular.hide-whenWide {
display: none !important;
}
.hide-whenNarrow,
.hide-whenRegular,
.hide-whenWide {
display: block !important;
}
@media (max-width: $width-md - 0.02px) {
.show-whenNarrow {
display: block !important;
}
.hide-whenNarrow {
display: none !important;
}
}
@media (min-width: $width-md) {
.show-whenRegular,
.show-whenRegular.hide-whenWide {
display: block !important;
}
.hide-whenRegular {
display: none !important;
}
}
// The width of a `wide` viewport range may change as we're finalizing
// the Primer primitives viewport ranges proposal
@media (min-width: $width-xl) {
.show-whenWide {
display: block !important;
}
.hide-whenWide,
.show-whenRegular.hide-whenWide {
display: none !important;
}
}
/* Set the table-layout to fixed */
.table-fixed { table-layout: fixed !important; }