From 48156009fa42ff64a709146e674d1775cb2a4a90 Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Wed, 12 Jul 2023 15:45:49 -0700 Subject: [PATCH] =?UTF-8?q?Frontend=20=E2=80=93=20clean=20up=20breakpoints?= =?UTF-8?q?=20(#12711)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Improve breakpoint variables to be useful "sm", "md", etc. instead of the pixel widths they are set to Also made sure all media queries are using these variables instead of hard-coded values. See @lukeheath's previous to-do in `frontend > styles > var > breakpoints.scss` --------- Co-authored-by: Jacob Shandling --- .../DataTable/TruncatedTextCell/_styles.scss | 6 +++--- frontend/components/TableContainer/_styles.scss | 14 +++++++------- .../buttons/ActionButtons/_styles.scss | 4 ++-- .../queries/PackQueriesTable/_styles.scss | 8 ++++---- frontend/layouts/CoreLayout/_styles.scss | 6 +++--- frontend/pages/DashboardPage/_styles.scss | 2 +- .../components/ScriptListHeading/_styles.scss | 3 +-- .../components/ScriptListItem/_styles.scss | 5 ++--- .../components/DiskEncryptionTable/_styles.scss | 2 +- .../cards/BootstrapPackage/_styles.scss | 4 ++-- .../BootstrapPackageTable/_styles.scss | 2 +- .../cards/EndUserAuthentication/_styles.scss | 11 +++++------ .../ManageControlsPage/MacOSUpdates/_styles.scss | 4 ++-- frontend/pages/ManageControlsPage/_styles.scss | 2 +- .../cards/Integrations/_styles.scss | 8 +++----- .../pages/admin/OrgSettingsPage/_styles.scss | 8 ++++---- .../TeamDetailsWrapper/MembersPage/_styles.scss | 2 +- .../components/LabelFilterSelect/_styles.scss | 2 +- frontend/pages/hosts/details/_styles.scss | 2 +- .../pages/hosts/details/cards/Packs/_styles.scss | 4 ++-- .../hosts/details/cards/Software/_styles.scss | 16 ++++++++-------- .../pages/queries/ManageQueriesPage/_styles.scss | 10 +++++----- .../schedule/ManageSchedulePage/_styles.scss | 4 ++-- .../software/ManageSoftwarePage/_styles.scss | 16 ++++++++-------- .../components/Vulnerabilities/_styles.scss | 2 +- frontend/styles/var/breakpoints.scss | 15 +++++++-------- frontend/styles/var/mixins.scss | 2 +- 27 files changed, 79 insertions(+), 85 deletions(-) diff --git a/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss b/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss index a33061b394..1aa73266d8 100644 --- a/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/TruncatedTextCell/_styles.scss @@ -26,7 +26,7 @@ // allows for the tooltip text to break on a word instead of a character &.tooltip-break-on-word { .truncated-tooltip { - word-break: normal + word-break: normal; } } @@ -43,13 +43,13 @@ } } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .truncated-tooltip { max-width: 400px; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .truncated-tooltip { max-width: 800px; } diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss index fc3c656a4c..84e36d1e63 100644 --- a/frontend/components/TableContainer/_styles.scss +++ b/frontend/components/TableContainer/_styles.scss @@ -15,12 +15,12 @@ flex-direction: column-reverse; align-items: start; - @media (min-width: $break-768) { + @media (min-width: $break-xs) { flex-direction: row; align-items: end; justify-content: space-between; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { align-items: center; } } @@ -36,7 +36,7 @@ flex-direction: column-reverse; align-items: start; - @media (min-width: $break-990) { + @media (min-width: $break-md) { flex-direction: row; justify-content: space-between; align-items: center; @@ -66,7 +66,7 @@ &.stack-table-controls { padding-top: $pad-large; - @media (min-width: $break-990) { + @media (min-width: $break-md) { padding-top: 0; } } @@ -87,10 +87,10 @@ .search-field__input-wrapper { width: 250px; margin-bottom: 0; - @media (min-width: $break-768) { + @media (min-width: $break-xs) { width: 300px; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { width: 344px; } } @@ -99,7 +99,7 @@ padding-bottom: $pad-large; margin-left: 0; - @media (min-width: $break-768) { + @media (min-width: $break-xs) { margin-left: $pad-medium; padding-bottom: 0; } diff --git a/frontend/components/buttons/ActionButtons/_styles.scss b/frontend/components/buttons/ActionButtons/_styles.scss index 0fa87ee5af..4ef7cfc0a7 100644 --- a/frontend/components/buttons/ActionButtons/_styles.scss +++ b/frontend/components/buttons/ActionButtons/_styles.scss @@ -7,7 +7,7 @@ &__secondary-buttons { display: none; - @media (min-width: 990px) { + @media (min-width: $break-md) { display: flex; } } @@ -35,7 +35,7 @@ } } } - @media (min-width: 990px) { + @media (min-width: $break-md) { display: none; } } diff --git a/frontend/components/queries/PackQueriesTable/_styles.scss b/frontend/components/queries/PackQueriesTable/_styles.scss index 7a3483d891..4d8de30555 100644 --- a/frontend/components/queries/PackQueriesTable/_styles.scss +++ b/frontend/components/queries/PackQueriesTable/_styles.scss @@ -32,7 +32,7 @@ .actions__header { width: auto; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .interval__header { border-right: 1px solid $ui-fleet-black-10; } @@ -42,7 +42,7 @@ border-right: none; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .platform_string__header, .logging_string__header { display: table-cell; @@ -71,13 +71,13 @@ .actions__cell { width: auto; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .performance__cell { display: table-cell; width: $col-md; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .platform_string__cell, .logging_string__cell { display: table-cell; diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss index 93771cbf14..585be38a4d 100644 --- a/frontend/layouts/CoreLayout/_styles.scss +++ b/frontend/layouts/CoreLayout/_styles.scss @@ -14,7 +14,7 @@ display: flex; // App hidden below 768px - @media (max-width: $break-768 - 1px) { + @media (max-width: $break-xs - 1px) { display: none; } @@ -40,7 +40,7 @@ z-index: 100; // Nav hidden below 768px; - @media (max-width: $break-768 - 1px) { + @media (max-width: $break-xs - 1px) { display: none; } @@ -63,7 +63,7 @@ gap: $pad-medium; // Overlay below 768px - @media (min-width: 768px) { + @media (min-width: $break-xs) { display: none; } diff --git a/frontend/pages/DashboardPage/_styles.scss b/frontend/pages/DashboardPage/_styles.scss index a7584b6fa4..356dfe205e 100644 --- a/frontend/pages/DashboardPage/_styles.scss +++ b/frontend/pages/DashboardPage/_styles.scss @@ -79,7 +79,7 @@ display: grid; row-gap: $pad-medium; - @media screen and (min-width: 990px) { + @media screen and (min-width: $break-md) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: $pad-medium; diff --git a/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListHeading/_styles.scss b/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListHeading/_styles.scss index 19c0502075..ccf6730c1c 100644 --- a/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListHeading/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListHeading/_styles.scss @@ -34,12 +34,11 @@ font-weight: normal; } - @media (max-width: $break-990) { + @media (max-width: $break-md) { &__script-statuses { justify-content: flex-end; } - &__actions-heading { display: none; } diff --git a/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListItem/_styles.scss b/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListItem/_styles.scss index fb38997ef7..59402e64bc 100644 --- a/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListItem/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSScripts/components/ScriptListItem/_styles.scss @@ -35,9 +35,8 @@ } } - &__has-value { - color: $core-vibrant-blue + color: $core-vibrant-blue; } &__script-actions { @@ -57,7 +56,7 @@ margin-right: $pad-medium; } - @media (max-width: $break-990) { + @media (max-width: $break-md) { &__script-statuses { justify-content: flex-end; } diff --git a/frontend/pages/ManageControlsPage/MacOSSettings/cards/DiskEncryption/components/DiskEncryptionTable/_styles.scss b/frontend/pages/ManageControlsPage/MacOSSettings/cards/DiskEncryption/components/DiskEncryptionTable/_styles.scss index 1b32e6adb0..ee3e1c025e 100644 --- a/frontend/pages/ManageControlsPage/MacOSSettings/cards/DiskEncryption/components/DiskEncryptionTable/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSSettings/cards/DiskEncryption/components/DiskEncryptionTable/_styles.scss @@ -27,7 +27,7 @@ } } - @media (max-width: $break-990) { + @media (max-width: $break-md) { .view-hosts-link { span { display: none; diff --git a/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/_styles.scss b/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/_styles.scss index 7edce338e3..6d3923dbad 100644 --- a/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/_styles.scss @@ -9,14 +9,14 @@ } &__content { - max-width: $break-1600; + max-width: $break-xxl; margin: 0 auto; display: flex; justify-content: space-between; gap: $pad-xxlarge; } - @media (max-width: $break-990) { + @media (max-width: $break-md) { &__content { flex-direction: column; } diff --git a/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/components/BootstrapPackageTable/_styles.scss b/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/components/BootstrapPackageTable/_styles.scss index 3003245832..9d0a64c24a 100644 --- a/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/components/BootstrapPackageTable/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSSetup/cards/BootstrapPackage/components/BootstrapPackageTable/_styles.scss @@ -29,7 +29,7 @@ } } - @media (max-width: $break-1400) { + @media (max-width: $break-lg) { .view-hosts-link { span { display: none; diff --git a/frontend/pages/ManageControlsPage/MacOSSetup/cards/EndUserAuthentication/_styles.scss b/frontend/pages/ManageControlsPage/MacOSSetup/cards/EndUserAuthentication/_styles.scss index 41eb5e8ff0..8f12ba4b32 100644 --- a/frontend/pages/ManageControlsPage/MacOSSetup/cards/EndUserAuthentication/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSSetup/cards/EndUserAuthentication/_styles.scss @@ -1,16 +1,15 @@ .end-user-authentication { - &__content { - max-width: $break-1600; + max-width: $break-xxl; margin: 0 auto; display: flex; justify-content: space-between; gap: $pad-xxlarge; } - @media (max-width: $break-990) { - &__content { - flex-direction: column; - } + @media (max-width: $break-md) { + &__content { + flex-direction: column; } + } } diff --git a/frontend/pages/ManageControlsPage/MacOSUpdates/_styles.scss b/frontend/pages/ManageControlsPage/MacOSUpdates/_styles.scss index bff24e9d9d..71023ac080 100644 --- a/frontend/pages/ManageControlsPage/MacOSUpdates/_styles.scss +++ b/frontend/pages/ManageControlsPage/MacOSUpdates/_styles.scss @@ -6,7 +6,7 @@ } &__content { - max-width: $break-1600; + max-width: $break-xxl; margin: 0 auto; display: flex; justify-content: space-between; @@ -26,7 +26,7 @@ margin-top: 80px; } - @media (max-width: $break-990) { + @media (max-width: $break-md) { &__content { flex-direction: column; } diff --git a/frontend/pages/ManageControlsPage/_styles.scss b/frontend/pages/ManageControlsPage/_styles.scss index b3137d6539..8895cc204d 100644 --- a/frontend/pages/ManageControlsPage/_styles.scss +++ b/frontend/pages/ManageControlsPage/_styles.scss @@ -33,7 +33,7 @@ margin: 0; margin-bottom: $pad-large; max-width: 75%; - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: none; } diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss index 7490a34df6..12cf4e1663 100644 --- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss +++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/_styles.scss @@ -1,5 +1,4 @@ .integrations-management { - &__title { padding-bottom: $pad-small; max-width: 100%; @@ -9,7 +8,7 @@ border-bottom: solid 1px $ui-fleet-black-10; margin: 0 0 $pad-xxlarge; - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: 65%; } } @@ -19,13 +18,13 @@ color: $core-fleet-black; width: 100%; - @media (min-width: $break-990) { + @media (min-width: $break-md) { width: 60%; } } .table-container { - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: 65%; } } @@ -118,5 +117,4 @@ width: 24px; } } - } diff --git a/frontend/pages/admin/OrgSettingsPage/_styles.scss b/frontend/pages/admin/OrgSettingsPage/_styles.scss index 47122a0217..3508d4d7c3 100644 --- a/frontend/pages/admin/OrgSettingsPage/_styles.scss +++ b/frontend/pages/admin/OrgSettingsPage/_styles.scss @@ -72,7 +72,7 @@ border-bottom: solid 1px $ui-fleet-black-10; margin: 0 0 $pad-xxlarge; - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: 65%; } } @@ -85,7 +85,7 @@ .empty-table__container { margin: 96px 0 1.5rem; - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: 65%; } } @@ -119,7 +119,7 @@ color: $core-fleet-black; width: 100%; - @media (min-width: $break-990) { + @media (min-width: $break-md) { width: 60%; } } @@ -130,7 +130,7 @@ padding-right: $pad-small; box-sizing: border-box; - @media (min-width: $break-990) { + @media (min-width: $break-md) { width: 60%; } diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss index 07e5742d53..0e66522d54 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss @@ -26,7 +26,7 @@ width: auto; } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .role__header { border-right: 1px solid $ui-fleet-black-10; } diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss index 76e6c1a7a2..cb7d4a0720 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss @@ -49,7 +49,7 @@ text-overflow: ellipsis; white-space: nowrap; - @media (max-width: $break-990) { + @media (max-width: $break-md) { width: auto; } } diff --git a/frontend/pages/hosts/details/_styles.scss b/frontend/pages/hosts/details/_styles.scss index 47d153e024..3cf71ec2aa 100644 --- a/frontend/pages/hosts/details/_styles.scss +++ b/frontend/pages/hosts/details/_styles.scss @@ -85,7 +85,7 @@ column-gap: $pad-xxlarge; row-gap: $pad-medium; - @media (min-width: $break-990) { + @media (min-width: $break-md) { grid-template-columns: repeat(4, max-content); grid-template-rows: repeat(3, 1fr); } diff --git a/frontend/pages/hosts/details/cards/Packs/_styles.scss b/frontend/pages/hosts/details/cards/Packs/_styles.scss index 3213409056..e4f9cdc939 100644 --- a/frontend/pages/hosts/details/cards/Packs/_styles.scss +++ b/frontend/pages/hosts/details/cards/Packs/_styles.scss @@ -16,7 +16,7 @@ display: none; width: 0; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .last_run__header { display: table-cell; } @@ -33,7 +33,7 @@ display: none; width: 0; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .last_run__cell { display: table-cell; } diff --git a/frontend/pages/hosts/details/cards/Software/_styles.scss b/frontend/pages/hosts/details/cards/Software/_styles.scss index 1f9046960f..5d379b6caa 100644 --- a/frontend/pages/hosts/details/cards/Software/_styles.scss +++ b/frontend/pages/hosts/details/cards/Software/_styles.scss @@ -57,7 +57,7 @@ .version__header { width: $col-xs; display: none; - @media (min-width: $break-880) { + @media (min-width: $break-sm) { display: table-cell; } } @@ -77,7 +77,7 @@ .linkToFilteredHosts__header { width: 115px; } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .version__header { width: $col-md; } @@ -112,7 +112,7 @@ white-space: nowrap; text-overflow: ellipsis; display: none; - @media (min-width: $break-880) { + @media (min-width: $break-sm) { display: table-cell; } } @@ -158,7 +158,7 @@ .last_opened_at__cell { display: none; } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .source__cell { display: table-cell; width: $col-sm; @@ -195,7 +195,7 @@ // table header content responsive styles // NOTE: 990px is a custom breakpoint to deal with responsiveness of the // table controls. - @media (max-width: 990px) { + @media (max-width: $break-md) { thead .name__header { width: $col-md; min-width: 252px; @@ -239,12 +239,12 @@ } .data-table-block .data-table__table { - @media (min-width: $break-990) { + @media (min-width: $break-md) { thead .version__header { width: $col-sm; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { thead { .last_opened_at__header { display: table-cell; @@ -259,7 +259,7 @@ } } - @media (min-width: $break-1500) { + @media (min-width: $break-xl) { thead { .installed_paths__header { display: table-cell; diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss index 408ea2cbf5..d88be01d9c 100644 --- a/frontend/pages/queries/ManageQueriesPage/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss @@ -111,13 +111,13 @@ display: none; width: 0; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .author_name__header { display: table-cell; width: auto; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .author_name__header { width: $col-md; } @@ -141,7 +141,7 @@ } } - @media (max-width: $break-990) { + @media (max-width: $break-md) { .name__cell { .w400 { max-width: calc(400px - 81px); @@ -171,12 +171,12 @@ display: none; max-width: $col-md; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .author_name__cell { display: table-cell; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .updated_at__cell { display: table-cell; } diff --git a/frontend/pages/schedule/ManageSchedulePage/_styles.scss b/frontend/pages/schedule/ManageSchedulePage/_styles.scss index 62195284b1..f93847b34b 100644 --- a/frontend/pages/schedule/ManageSchedulePage/_styles.scss +++ b/frontend/pages/schedule/ManageSchedulePage/_styles.scss @@ -83,7 +83,7 @@ .actions__header { width: auto; } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .interval__header { width: 0; } @@ -100,7 +100,7 @@ .actions__cell { width: auto; } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .interval_cell { width: 0; } diff --git a/frontend/pages/software/ManageSoftwarePage/_styles.scss b/frontend/pages/software/ManageSoftwarePage/_styles.scss index a6dbee2bf9..944c41b964 100644 --- a/frontend/pages/software/ManageSoftwarePage/_styles.scss +++ b/frontend/pages/software/ManageSoftwarePage/_styles.scss @@ -37,7 +37,7 @@ margin: 0; margin-bottom: $pad-large; max-width: 75%; - @media (min-width: $break-990) { + @media (min-width: $break-md) { max-width: none; } @@ -97,7 +97,7 @@ .search-field__input-wrapper { width: 100%; } - @media (min-width: $break-768) { + @media (min-width: $break-xs) { width: auto; .search-field__input-wrapper { width: 411px; @@ -139,17 +139,17 @@ width: auto; border-right: 0; } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .vulnerabilities__header { display: table-cell; } } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .version__header { width: $col-md; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .source__header { display: table-cell; } @@ -194,17 +194,17 @@ } } } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .version_cell { width: $col-md; } } - @media (min-width: $break-990) { + @media (min-width: $break-md) { .vulnerabilities__cell { display: table-cell; } } - @media (min-width: $break-1400) { + @media (min-width: $break-lg) { .source__cell { display: table-cell; } diff --git a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss index 811a0e0cde..a42e892e85 100644 --- a/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss +++ b/frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/_styles.scss @@ -35,7 +35,7 @@ width: $col-sm; } - @media (max-width: $tooltip-break-1000) { + @media (max-width: $tooltip-break-md) { .cisa_known_exploit__header { .component__tooltip-wrapper__tip-text { max-width: 200px; // Prevents horizontal scrolling off viewport diff --git a/frontend/styles/var/breakpoints.scss b/frontend/styles/var/breakpoints.scss index 4da794622f..6d0fa51fbb 100644 --- a/frontend/styles/var/breakpoints.scss +++ b/frontend/styles/var/breakpoints.scss @@ -1,8 +1,7 @@ -// TODO: Rename these to xs, sm, md, lg, xl, xxl, etc. -$break-1600: 1600px; -$break-1500: 1500px; -$break-1400: 1400px; -$break-990: 990px; -$break-880: 880px; -$break-768: 768px; -$tooltip-break-1000: 1000px; // Prevents horizontal scrolling off viewport +$break-xxl: 1600px; +$break-xl: 1500px; +$break-lg: 1400px; +$break-md: 990px; +$break-sm: 880px; +$break-xs: 768px; +$tooltip-break-md: 1000px; // Prevents horizontal scrolling off viewport diff --git a/frontend/styles/var/mixins.scss b/frontend/styles/var/mixins.scss index 6d28be75df..a7e8215dfa 100644 --- a/frontend/styles/var/mixins.scss +++ b/frontend/styles/var/mixins.scss @@ -1,4 +1,4 @@ -$min-width: 768px; +$min-width: $break-xs; $medium-width: 1024px; $desktop-width: 1200px; $max-width: 2560px;