diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-11-13 13:17:34 +0000 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-11-13 13:17:34 +0000 |
| commit | fcb3a5980606a1ab7f15fa9185f9684a7702b24f (patch) | |
| tree | 09bc65562a6533101e2f7d00b2a6f284e3bdeb70 /opendc-web/opendc-web-ui/src/components/topologies/sidebar | |
| parent | 9d06fb04319a50c26599f2da5387a2d03bee15ec (diff) | |
refactor(web/ui): Drop dependency on Sass
This change updates the OpenDC web UI to not rely on Sass for
stylesheets. CSS in combination with PostCSS has become powerful enough
for our use-cases as indicated by the small differences between the CSS
and SCSS versions of our files.
By switching to CSS, we can make use of Turbopack to build the project,
which is a re-implementation of Webppack in Rust and is able to build
projects much faster.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js | 2 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss) | 22 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js | 2 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss) | 0 |
4 files changed, 12 insertions, 14 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js index 5d9340b2..5aaa7834 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js @@ -14,7 +14,7 @@ import { } from '@patternfly/react-core' import { AngleLeftIcon } from '@patternfly/react-icons' import { useDispatch } from 'react-redux' -import { backButton } from './TopologySidebar.module.scss' +import { backButton } from './TopologySidebar.module.css' import RoomSidebar from './room/RoomSidebar' import RackSidebar from './rack/RackSidebar' import MachineSidebar from './machine/MachineSidebar' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css index 45dc98da..3853c625 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css @@ -20,18 +20,16 @@ * SOFTWARE. */ -.backButton { - &:global(.pf-c-button) { - align-self: center; - --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100); - color: var(--pf-global--Color--400); +.backButton:global(.pf-c-button) { + align-self: center; + --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100); + color: var(--pf-global--Color--400); - --pf-c-button--PaddingRight: var(--pf-global--spacer--sm); - --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-button--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm); +} - &:hover, - &:focus { - --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100); - } - } +.backButton:hover, +.backButton:global(.pf-c-button):focus { + --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100); } diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js index 8f6ff135..cb7d3b68 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' -import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss' +import { machineListContainer, sidebarContainer } from './RackSidebar.module.css' import RackNameContainer from './RackNameContainer' import AddPrefab from './AddPrefab' import DeleteRackContainer from './DeleteRackContainer' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css index f4c8829f..f4c8829f 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css |
