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

Jump to bottom

sass: First attempt to port away from SASS @import #21152

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

sass: First attempt to port away from SASS @import #21152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions pkg/kdump/kdump.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@

@use "page";

@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@import "@patternfly/patternfly/utilities/Spacing/spacing.scss";
@use "global-variables";
@use "@patternfly/patternfly/utilities/Text/text.scss";
@use "@patternfly/patternfly/utilities/Spacing/spacing.scss";

#kdump-settings-location {
inline-size: 100%;
Expand Down
2 changes: 1 addition & 1 deletion pkg/lib/_global-variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "@patternfly/patternfly/sass-utilities/all";
@use "@patternfly/patternfly/sass-utilities/all";

/*
* PatternFly 4 adapting the lists too early.
Expand Down
2 changes: 1 addition & 1 deletion pkg/lib/cockpit-components-dynamic-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "global-variables";
@use "global-variables";

.dynamic-form-group {
.pf-v5-c-empty-state {
Expand Down
4 changes: 2 additions & 2 deletions pkg/lib/cockpit-components-password.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@use "global-variables";
@use "@patternfly/patternfly/utilities/Text/text.scss";

.ct-password-strength-meter {
grid-gap: var(--pf-v5-global--spacer--xs);
Expand Down
2 changes: 1 addition & 1 deletion pkg/lib/cockpit-components-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "global-variables";
@use "global-variables";

.ct-table {
&.pf-m-compact {
Expand Down
2 changes: 1 addition & 1 deletion pkg/lib/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "@patternfly/patternfly/base/patternfly-themes.scss";
@use "@patternfly/patternfly/patternfly-theme-dark.scss";
@use "./patternfly/patternfly-5-overrides.scss";
@import "global-variables";
@use "global-variables";

/* Globally resize headings */
h1 {
Expand Down
4 changes: 2 additions & 2 deletions pkg/lib/patternfly/patternfly-5-cockpit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ $pf-v5-global--font-path: "patternfly-fonts-fake-path";
$pf-v5-global--fonticon-path: "patternfly-icons-fake-path";
$pf-v5-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free

@import "@patternfly/patternfly/patternfly-base.scss";
@use "@patternfly/patternfly/patternfly-base.scss";

/* Import our own fonts since the PF4 font-face rules are filtered out in build.js */
@import "./fonts";
@use "fonts";
3 changes: 2 additions & 1 deletion pkg/lib/patternfly/patternfly-5-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:math";
/*** PF5 overrides ***/
// Pull in variables (for breakpoints)
@use "global-variables" as *;
Expand Down Expand Up @@ -48,7 +49,7 @@ to wrap around when there isn't enough space.
/* Fix select menu rendering */
ul.pf-v5-c-select__menu {
/* Don't get too tall */
max-block-size: min(20rem, 50vh);
max-block-size: math.min(20rem, 50vh);
/* Don't have a horizontal scrollbar */
overflow-y: auto;
}
Expand Down
9 changes: 5 additions & 4 deletions pkg/metrics/metrics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@use "page";
@use "ct-card";
@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@use "sass:math";
@use "global-variables";
@use "@patternfly/patternfly/utilities/Text/text.scss";

// utilities for `pf-u...` classes
@import "@patternfly/patternfly/utilities/Spacing/spacing.css";
Expand Down Expand Up @@ -827,7 +828,7 @@ $graphs: cpu, memory, disks, network;

.pf-v5-c-popover__content {
// Limit the width of the popover in desktop mode
max-inline-size: max(30rem, 40vw);
max-inline-size: math.max(30rem, 40vw);
}
}
}
Expand All @@ -843,7 +844,7 @@ $graphs: cpu, memory, disks, network;

.pf-v5-c-popover__content {
// Limit the width of the popover in desktop mode
max-inline-size: max(100vw);
max-inline-size: math.max(100vw);
}

// As a sheet at the bottom, it doesn't point to anything
Expand Down
6 changes: 3 additions & 3 deletions pkg/networkmanager/networking.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "ct-card";
@use "page";
@import "global-variables";
@use "global-variables";

#firewall,
#network-page {
Expand Down Expand Up @@ -216,7 +216,7 @@ th {
}
}

@media screen and (max-width: $pf-v5-global--breakpoint--md) {
@media screen and (max-width: global-variables.$pf-v5-global--breakpoint--md) {
.zone-section-heading.pf-v5-c-card__header {
padding-inline-start: var(--pf-v5-global--spacer--md);
}
Expand Down Expand Up @@ -315,7 +315,7 @@ th {

// HACK: MenuToggle has inline-block by default which makes it not appear under
// the entry above
@media screen and (max-width: $pf-v5-global--breakpoint--sm) {
@media screen and (max-width: global-variables.$pf-v5-global--breakpoint--sm) {
.pf-v5-c-table__td .pf-v5-c-menu-toggle.pf-m-plain {
display: inline-flex;
align-items: flex-start;
Expand Down
10 changes: 5 additions & 5 deletions pkg/networkmanager/wireguard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import "global-variables.scss";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@import "@patternfly/patternfly/utilities/Spacing/spacing.scss";
@import "@patternfly/patternfly/utilities/Sizing/sizing.scss";
@import "@patternfly/patternfly/utilities/Flex/flex.scss";
@use "global-variables.scss";
@use "@patternfly/patternfly/utilities/Text/text.scss";
@use "@patternfly/patternfly/utilities/Spacing/spacing.scss";
@use "@patternfly/patternfly/utilities/Sizing/sizing.scss";
@use "@patternfly/patternfly/utilities/Flex/flex.scss";

.placeholder-text {
color: var(--pf-v5-global--Color--200);
Expand Down
2 changes: 1 addition & 1 deletion pkg/shell/nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "global-variables";
@use "global-variables";

/* Navigation base, used for both desktop & mobile navigation */

Expand Down
6 changes: 3 additions & 3 deletions pkg/sosreport/sosreport.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "page";
@use "ct-card.scss";
@use "../../node_modules/@patternfly/patternfly/utilities/Text/text.css";
@import "global-variables";
@use "global-variables";

.table-row-action {
text-align: end;
Expand All @@ -12,13 +12,13 @@
display: none;
}

@media (max-width: $pf-v5-global--breakpoint--md - 1) {
@media (max-width: global-variables.$pf-v5-global--breakpoint--md - 1) {
.show-only-when-wide {
display: none !important;
}
}

@media (min-width: $pf-v5-global--breakpoint--md) {
@media (min-width: global-variables.$pf-v5-global--breakpoint--md) {
.show-only-when-narrow {
display: none !important;
}
Expand Down
15 changes: 8 additions & 7 deletions pkg/storaged/storage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@
@use "page";
@use "table";
@use "journal";
@import "global-variables";
@import "@patternfly/patternfly/components/Card/card.scss";
@import "@patternfly/patternfly/components/Progress/progress.scss";
@import "@patternfly/patternfly/utilities/Flex/flex.scss";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@import "@patternfly/patternfly/utilities/Alignment/alignment.scss";
@use "sass:math";
@use "global-variables";
@use "@patternfly/patternfly/components/Card/card.scss";
@use "@patternfly/patternfly/components/Progress/progress.scss";
@use "@patternfly/patternfly/utilities/Flex/flex.scss";
@use "@patternfly/patternfly/utilities/Text/text.scss";
@use "@patternfly/patternfly/utilities/Alignment/alignment.scss";

#storage .pf-v5-c-card {
@extend .ct-card;
Expand Down Expand Up @@ -110,7 +111,7 @@ td.job-action {

// FIXME: This is visual only; it needs to be fixed for a11y reasons, likely at the JSX level
.indent {
padding-inline-start: calc(var(--pf-v5-global--spacer--md) * min(var(--level, 0), 10));
padding-inline-start: calc(var(--pf-v5-global--spacer--md) * math.min(var(--level, 0), 10));
white-space: nowrap;
}

Expand Down
4 changes: 2 additions & 2 deletions pkg/systemd/logs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "../lib/table.css";
@use "../lib/journal.css";
@use "./system-global.scss";
@import "global-variables.scss";
@import "@patternfly/patternfly/utilities/Flex/flex.scss";
@use "global-variables.scss";
@use "@patternfly/patternfly/utilities/Flex/flex.scss";

// https://github.com/patternfly/patternfly-react/issues/5993
.pf-v5-c-popover.pf-m-width-auto {
Expand Down
4 changes: 2 additions & 2 deletions pkg/systemd/overview-cards/lastLogin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";
@use "global-variables";
@use "@patternfly/patternfly/utilities/Text/text.scss";

.system-information-failed-login-warning-icon {
color: var(--pf-v5-global--warning-color--100);
Expand Down
8 changes: 4 additions & 4 deletions pkg/systemd/overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@use "./system-global.scss";
/* System Time Modal dialog needs table.css */
@use "../lib/table.css";
@import "global-variables";
@import "@patternfly/patternfly/components/Table/table.scss";
@use "global-variables";
@use "@patternfly/patternfly/components/Table/table.scss" as table2;

.ct-limited-access-alert {
--pf-v5-c-alert--GridTemplateColumns: auto auto 1fr;
Expand All @@ -20,7 +20,7 @@
//
// When we have the upcoming version of PF4 in Cockpit, we should drop this code
// (and adjust things for the button to show up on the side of desktop mode instead)
@media (max-width: $pf-v5-global--breakpoint--lg) {
@media (max-width: global-variables.$pf-v5-global--breakpoint--lg) {
grid-template-areas: "icon title" ". content" ". action";
grid-gap: var(--pf-v5-global--spacer--sm) 0;
}
Expand All @@ -35,7 +35,7 @@
}

// Align left content with the rest of the page
@media (min-width: $pf-v5-global--breakpoint--xl) {
@media (min-width: global-variables.$pf-v5-global--breakpoint--xl) {
padding-inline-start: var(--pf-v5-global--spacer--lg);
}
}
Expand Down
2 changes: 1 addition & 1 deletion pkg/systemd/services.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use "./system-global.scss";
@import "global-variables";
@use "global-variables";

// The service list lacks a top border.
// However, the toolbar also lacks a border and is sticky, so add a bottom
Expand Down
2 changes: 1 addition & 1 deletion pkg/systemd/terminal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "../lib/console.css";
@use "page";
@import "global-variables";
@use "global-variables";

.console-ct-container {
block-size: 100%;
Expand Down
3 changes: 2 additions & 1 deletion pkg/users/users.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
@use "sass:meta";
@use "ct-card";
@use "page";

// Import utilities for `pf-u...` classes
@import "@patternfly/patternfly/utilities/Spacing/spacing.css";
@import "global-variables.scss";
@include meta.load-css("global-variables.scss");

#account .pf-v5-c-card {
@extend .ct-card;
Expand Down
Loading