artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 15:51:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add @custom-media support (#20696)

Browse Source
This commit is contained in:
Tom Ross 2021-05-10 11:35:01 +01:00 committed by GitHub
parent 6879b883e5
commit 29b51e2f9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 142 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/branded/src/global-styles/breakpoints.scss
View File

@ -1,15 +0,0 @@
// To use breakpoints mixins in CSS modules import this file via:
// @import 'branded/src/global-styles/breakpoints';
// `$grid-breakpoints` is copied from `~bootstrap/scss/variables` because we cannot import a single variable from SCSS file
// and we don't want to expose all Bootstrap SCSS variables ('bootstrap/scss/variables') to our CSS modules.
// If possible, prefer CSS variables to SCSS variables.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
);
@import 'bootstrap/scss/mixins/breakpoints';

5
client/branded/src/global-styles/index.scss
View File

@ -117,8 +117,6 @@ $hr-margin-y: 0.25rem;
// Disable transitions
$input-transition: none;
// './breakpoints' defines $grid-breakpoints for global CSS and exposes breakpoints mixins to CSS modules
@import './breakpoints';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@ -128,7 +126,8 @@ $input-transition: none;
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/tooltip';
@import 'bootstrap/scss/transitions';
@import '../../../shared/src/global-styles/icons';
@import 'wildcard/src/global-styles/breakpoints';
@import 'shared/src/global-styles/icons';
@import './background';
@import './badge';
@import './card';

4
client/web/src/enterprise/batches/close/BatchChangeCloseChangesetsList.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-close-changesets-list {
&__grid {
@ -7,7 +7,7 @@
row-gap: 1rem;
column-gap: 1rem;
align-items: center;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
row-gap: 0.5rem;
column-gap: 0.5rem;
}

4
client/web/src/enterprise/batches/close/ChangesetCloseNode.module.scss
View File

@ -1,11 +1,11 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.changeset-close-node {
&__separator {
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}

4
client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.module.scss
View File

@ -1,8 +1,8 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.close-changesets-list-empty-element {
&__body {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
padding: 0 !important;
padding-top: 0.5rem !important;
}

12
client/web/src/enterprise/batches/close/ExternalChangesetCloseNode.module.scss
View File

@ -1,33 +1,33 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.external-changeset-close-node {
&__statuses {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Use up remaining width of the row.
grid-column: 1 / -1;
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Use up remaining width of the row.
grid-column: 2 / -1;
}
}
&__show-details {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}
}
&__information {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Use up remaining width of the row.
grid-column: 3 / -1;
}
}
&__action,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}

4
client/web/src/enterprise/batches/close/HiddenExternalChangesetCloseNode.module.scss
View File

@ -1,9 +1,9 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.hidden-external-changeset-close-node {
&__action,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}

4
client/web/src/enterprise/batches/detail/BatchChangeBurndownChart.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-burndown-chart {
&-legend {
@ -14,7 +14,7 @@
}
}
&__container {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
flex-direction: column-reverse;
align-items: flex-start !important;
}

12
client/web/src/enterprise/batches/detail/BatchChangeStatsCard.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-stats-card {
&__changesets-pill {
@ -7,14 +7,14 @@
height: 24px;
}
&__completeness {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Emulate h4 size on xs devices.
font-size: 0.875rem;
line-height: (20/14);
}
}
&__state-badge {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Emulate h4 on sm and xs devices.
font-size: 0.875rem;
line-height: (20/14);
@ -22,20 +22,20 @@
}
}
&__diff-stat {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
margin-top: 1rem;
flex-basis: 100%;
}
}
&__stat {
min-width: 0;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
flex-basis: 33%;
padding-top: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
flex-basis: 49.9%;
padding-left: 0.5rem;
padding-right: 0.5rem;

4
client/web/src/enterprise/batches/detail/BatchSpecTab.module.scss
View File

@ -1,8 +1,8 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-spec-tab {
&__header-col {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
flex-basis: 100%;
}
}

4
client/web/src/enterprise/batches/detail/changesets/ChangesetNode.module.scss
View File

@ -1,11 +1,11 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.changeset-node {
&__separator {
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}

4
client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.module.scss
View File

@ -1,8 +1,8 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.empty-changeset-list-element {
&__body {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
padding: 0 !important;
padding-top: 0.5rem !important;
}

12
client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.module.scss
View File

@ -1,12 +1,12 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.external-changeset-node {
&__statuses {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Use up remaining width of the row.
grid-column: 1 / -1;
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Use up remaining width of the row.
grid-column: 2 / -1;
}
@ -17,18 +17,18 @@
&__expanded-section {
// Make it full width in the current row.
grid-column: 2 / -1;
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}
&__state,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}
&__show-details {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}

6
client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.module.scss
View File

@ -1,14 +1,14 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.hidden-external-changeset-node {
&__information {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
grid-column: 3 / -1;
}
}
&__status,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}

6
client/web/src/enterprise/batches/list/BatchChangeListPage.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-list-page {
&__grid {
@ -7,11 +7,11 @@
row-gap: 1rem;
column-gap: 1.5rem;
align-items: center;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Reduce gap on sm and xs screens.
column-gap: 1rem;
}
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Reduce gap on xs screens.
row-gap: 0.5rem;
}

10
client/web/src/enterprise/batches/list/BatchChangeNode.module.scss
View File

@ -1,16 +1,16 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-node {
&__badge {
width: 100%;
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
width: fit-content;
// Make it full width in the current row.
grid-column: 1 / -1;
}
}
&__title {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
// Emulate h4 on sm and xs devices.
font-size: 0.875rem;
line-height: (20/14);
@ -18,7 +18,7 @@
}
}
&__content {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
width: fit-content;
// Make it full width in the current row.
grid-column: 1 / -1;
@ -29,7 +29,7 @@
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}

10
client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.batch-change-preview-stats-bar {
&__stat {
@ -15,25 +15,25 @@
margin-left: calc(20% / 2);
}
&__diff {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
flex-grow: 1;
}
}
&__metrics {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
flex-grow: 1;
justify-content: space-between !important;
}
}
&__states {
@include media-breakpoint-down(md) {
@media (--md-breakpoint-down) {
flex-grow: 1;
justify-content: space-between !important;
flex-wrap: wrap;
}
}
&__state {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-bottom: 1rem !important;
}
}

4
client/web/src/enterprise/batches/preview/CreateUpdateBatchChangeAlert.module.scss
View File

@ -1,6 +1,6 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
.create-update-batch-change-alert {
&__badge,
&__copy {

4
client/web/src/enterprise/batches/preview/list/ChangesetApplyPreviewNode.module.scss
View File

@ -1,11 +1,11 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.changeset-apply-preview-node {
&__separator {
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}

4
client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.module.scss
View File

@ -1,8 +1,8 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.empty-preview-list-element {
&__body {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
padding: 0 !important;
padding-top: 0.5rem !important;
}

12
client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.module.scss
View File

@ -1,11 +1,11 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.hidden-changeset-apply-preview-node {
&__list-cell {
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
padding: 0.5rem;
}
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
@ -13,14 +13,14 @@
&__current-state,
&__action,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}
}
&__current-state {
color: var(--icon-color);
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
background-color: var(--oc-blue-0);
}
}
@ -30,7 +30,7 @@
.hidden-changeset-apply-preview-node {
&__current-state {
color: var(--body-color);
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
background-color: var(--oc-gray-7);
}
}

14
client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
$changeset-backdrop: #f3faff;
@ -7,29 +7,29 @@ $changeset-backdrop: #f3faff;
&__action,
&__information,
&__show-details {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
// Make it full width in the current row.
grid-column: 1 / -1;
}
}
&__bg-expanded {
background-color: $changeset-backdrop;
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
border-top: 1px solid var(--border-color-2);
padding: 1.5rem;
}
}
&__status-cell {
color: var(--muted);
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
background-color: var(--oc-blue-0);
}
}
&__list-cell {
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
padding: 0.5rem;
}
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
@ -57,7 +57,7 @@ $changeset-backdrop: #f3faff;
.visible-changeset-apply-preview-node {
&__status-cell {
color: var(--body-color);
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
background-color: var(--oc-gray-7);
}
}

2
client/web/src/enterprise/codeintel/list/CodeIntelIndexesPage.scss
View File

@ -5,7 +5,7 @@
row-gap: 1rem;
column-gap: 1rem;
align-items: center;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
row-gap: 0.5rem;
column-gap: 0.5rem;
}

2
client/web/src/enterprise/codeintel/list/CodeIntelUploadsPage.scss
View File

@ -5,7 +5,7 @@
row-gap: 1rem;
column-gap: 1rem;
align-items: center;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
row-gap: 0.5rem;
column-gap: 0.5rem;
}

4
client/web/src/enterprise/codeintel/shared/CodeIntelIndexNode.scss
View File

@ -3,7 +3,7 @@
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}
@ -11,7 +11,7 @@
&__state,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}

4
client/web/src/enterprise/codeintel/shared/CodeIntelUploadNode.scss
View File

@ -3,7 +3,7 @@
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}
@ -11,7 +11,7 @@
&__state,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}

2
client/web/src/enterprise/productSubscription/TrueUpStatusSummary.scss
View File

@ -7,7 +7,7 @@
&__item {
width: 32%;
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
width: 100%;
margin-bottom: 1rem;
}

2
client/web/src/extensions/extension/ExtensionAreaHeader.scss
View File

@ -20,7 +20,7 @@
display: none;
}
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
&__wrapper {
display: grid;
grid-template-columns: auto 7.5rem 7.5rem;

4
client/web/src/insights/pages/creation/lang-stats/LangStatsInsightCreationPage.module.scss
View File

@ -1,5 +1,5 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.creation-page {
max-width: map-get($grid-breakpoints, md);
max-width: $viewport-md;
}

4
client/web/src/insights/pages/creation/search-insight/SearchInsightCreationPage.module.scss
View File

@ -1,5 +1,5 @@
@import 'branded/src/global-styles/breakpoints';
@import 'wildcard/src/global-styles/breakpoints';
.creation-page {
max-width: map-get($grid-breakpoints, md);
max-width: $viewport-md;
}

6
client/web/src/repo/tree/TreeEntriesSection.scss
View File

@ -11,13 +11,13 @@
column-rule: 1px solid var(--border-color);
border-right: solid 1px var(--border-color);
@include media-breakpoint-up(sm) {
@media (--sm-breakpoint-up) {
column-count: 1;
}
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
column-count: 3;
}
@include media-breakpoint-down(md) {
@media (--md-breakpoint-down) {
column-count: 4;
}
}

4
client/web/src/search/queryBuilder/QueryBuilder.scss
View File

@ -38,7 +38,7 @@
&-example {
font-weight: bold;
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
display: none;
}
}
@ -63,7 +63,7 @@
display: flex;
align-items: center;
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
width: 100%;
}
}

2
client/web/src/search/results/SearchResultsList.scss
View File

@ -22,7 +22,7 @@
// In narrow windows, make the results flush with the left/right sides,
// but we still need padding for the header and alerts.
@include media-breakpoint-down(lg) {
@media (--lg-breakpoint-down) {
&__list {
padding-left: 0;
padding-right: 0;

6
client/web/src/site-admin/SiteAdminMigrationsPage.scss
View File

@ -5,7 +5,7 @@
row-gap: 1rem;
column-gap: 1rem;
align-items: center;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
row-gap: 0.5rem;
column-gap: 0.5rem;
}
@ -17,7 +17,7 @@
// Make it full width in the current row.
grid-column: 1 / -1;
border-top: 1px solid var(--border-color-2);
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
margin-top: 1rem;
padding-bottom: 1rem;
}
@ -25,7 +25,7 @@
&__progress,
&__information {
@include media-breakpoint-down(xs) {
@media (--xs-breakpoint-down) {
grid-column: 1 / -1;
}
}

2
client/web/src/site-admin/SiteAdminSurveyResponsesPage.scss
View File

@ -7,7 +7,7 @@
&__item {
width: 32%;
@include media-breakpoint-up(md) {
@media (--md-breakpoint-up) {
width: 100%;
margin-bottom: 1rem;
}

8
client/wildcard/src/components/NavBar/NavBar.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints.scss';
@import '../../global-styles/breakpoints';
.navbar {
display: flex;
@ -13,7 +13,7 @@
}
.menu-close {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
display: none !important;
}
}
@ -21,7 +21,7 @@
color: var(--icon-color);
display: none;
padding: 0;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
display: block;
}
}
@ -45,7 +45,7 @@
height: 100%;
margin: 0;
padding: 0;
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
border-radius: 3px;
border: 1px solid var(--border-color);
width: 50%;

18
client/wildcard/src/components/NavBar/NavItem.module.scss
View File

@ -1,4 +1,4 @@
@import 'branded/src/global-styles/breakpoints.scss';
@import '../../global-styles/breakpoints';
.link {
outline-offset: -1px;
@ -17,11 +17,11 @@
box-shadow: 0 0 0 2px var(--primary-2);
}
.icon {
@include media-breakpoint-down(md) {
@media (--md-breakpoint-down) {
outline: 1px solid transparent;
box-shadow: 0 0 0 2px var(--primary-2);
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
outline: none;
box-shadow: none;
}
@ -37,7 +37,7 @@
margin-bottom: -0.125rem;
}
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
padding: 0.25rem 0;
flex: 1;
align-items: flex-start;
@ -57,11 +57,11 @@
}
&:first-child,
&:last-child {
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
margin: 0;
}
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
margin: 0;
}
}
@ -76,7 +76,7 @@
.icon {
color: var(--header-icon-color);
border-radius: 3px;
@include media-breakpoint-down(md) {
@media (--md-breakpoint-down) {
color: var(--icon-color);
}
}
@ -84,10 +84,10 @@
.icon-included {
margin-left: 0.25rem;
display: inline-flex;
@include media-breakpoint-down(md) {
@media (--md-breakpoint-down) {
display: none;
}
@include media-breakpoint-down(sm) {
@media (--sm-breakpoint-down) {
display: inline-flex;
}
}

6
client/wildcard/src/components/PageHeader/PageHeader.module.scss
View File

@ -1,3 +1,5 @@
@import '../../global-styles/breakpoints';
// Scale icon size with heading size. 26px font size (h1) -> 22px icon size
$path-icon-size: (22em / 26);
@ -7,7 +9,7 @@ $path-icon-size: (22em / 26);
flex-wrap: wrap;
justify-content: space-between;
@media (min-width: 768px) {
@media (--md-breakpoint-up) {
flex-direction: row;
align-items: flex-end;
}
@ -65,7 +67,7 @@ $path-icon-size: (22em / 26);
.actions {
margin-top: 1rem;
@media (min-width: 768px) {
@media (--md-breakpoint-up) {
margin-top: 0;
}
}

25
client/wildcard/src/global-styles/breakpoints.scss Normal file
View File

@ -0,0 +1,25 @@
// To use breakpoints mixins in CSS modules import this file via:
// @import 'wildcard/src/global-styles/breakpoints';
$viewport-sm: 576px;
$viewport-md: 768px;
$viewport-lg: 992px;
$viewport-xl: 1200px;
/* stylelint-disable unknownAtRules */
@custom-media --xs-breakpoint-up (min-width: none);
@custom-media --sm-breakpoint-up (min-width: #{$viewport-sm});
@custom-media --md-breakpoint-up (min-width: #{$viewport-md});
@custom-media --lg-breakpoint-up (min-width: #{$viewport-lg});
@custom-media --xl-breakpoint-up (min-width: #{$viewport-xl});
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
@custom-media --xs-breakpoint-down (max-width: #{$viewport-sm - .02});
@custom-media --sm-breakpoint-down (max-width: #{$viewport-md - .02});
@custom-media --md-breakpoint-down (max-width: #{$viewport-lg - .02});
@custom-media --lg-breakpoint-down (max-width: #{$viewport-xl - .02});
@custom-media --xl-breakpoint-down (max-width: none);

1
package.json
View File

@ -252,6 +252,7 @@
"p-retry": "^4.2.0",
"p-timeout": "^4.1.0",
"postcss": "^8.2.4",
"postcss-custom-media": "^8.0.0",
"postcss-focus-visible": "^5.0.0",
"postcss-loader": "^4.1.0",
"prettier": "^2.2.1",

2
postcss.config.js
View File

@ -1,3 +1,3 @@
module.exports = {
plugins: [require('autoprefixer'), require('postcss-focus-visible')],
plugins: [require('autoprefixer'), require('postcss-focus-visible'), require('postcss-custom-media')],
}

5
yarn.lock
View File

@ -17555,6 +17555,11 @@ postcss-convert-values@^4.0.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
postcss-custom-media@^8.0.0:
version "8.0.0"
resolved "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz#1be6aff8be7dc9bf1fe014bde3b71b92bb4552f1"
integrity sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==
postcss-discard-comments@^4.0.2:
version "4.0.2"
resolved "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"