summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies/map/controls
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2022-11-13 14:48:40 +0000
committerGitHub <noreply@github.com>2022-11-13 14:48:40 +0000
commit183cfa96910ebb74c668dea7ef98071966f8fcb9 (patch)
treeb3e42d26a6e35868fcdbcfbec89142a8f05c7a78 /opendc-web/opendc-web-ui/src/components/topologies/map/controls
parent085b51c720e2a106e7ac71e3c8595d3bf0dd0aa3 (diff)
parent09a11e1d55246bfeea08c16689b966d6ae437ef5 (diff)
merge: Remove use of Sass (#116)
This pull request removes the dependency on Sass for the OpenDC web UI, by converting the existing Sass files into CSS. With the recent updates of CSS, we have no use-case for Sass anymore and sticking to CSS reduces the build infrastructure necessary. ## Implementation Notes :hammer_and_pick: * Drop dependency on Sass * Update web dependencies to latest version
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/map/controls')
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss)40
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css (renamed from opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss)0
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css27
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss29
7 files changed, 50 insertions, 52 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
index f54b7c84..931ded94 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
@@ -22,7 +22,7 @@
import PropTypes from 'prop-types'
import { ChevronLeftIcon } from '@patternfly/react-icons'
-import { collapseContainer } from './Collapse.module.scss'
+import { collapseContainer } from './Collapse.module.css'
import { Button } from '@patternfly/react-core'
function Collapse({ onClick }) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
index 0c1fac94..70fd465f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css
@@ -27,29 +27,29 @@
bottom: 10%;
margin: auto 0;
height: 50px;
+}
- button:global(.pf-m-tertiary) {
- height: 100%;
- padding: 2px;
+.collapseContainer > button:global(.pf-m-tertiary) {
+ height: 100%;
+ padding: 2px;
- margin-right: var(--pf-global--spacer--xs);
- margin-top: var(--pf-global--spacer--xs);
- background-color: var(--pf-global--BackgroundColor--100);
- border: none;
- border-radius: var(--pf-global--BorderRadius--sm);
- box-shadow: var(--pf-global--BoxShadow--sm);
+ margin-right: var(--pf-global--spacer--xs);
+ margin-top: var(--pf-global--spacer--xs);
+ background-color: var(--pf-global--BackgroundColor--100);
+ border: none;
+ border-radius: var(--pf-global--BorderRadius--sm);
+ box-shadow: var(--pf-global--BoxShadow--sm);
+}
- &:not(:global(.pf-m-disabled)) {
- background-color: var(--pf-global--BackgroundColor--100);
- }
+.collapseContainer > button:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+ background-color: var(--pf-global--BackgroundColor--100);
+}
- &:after {
- display: none;
- }
+.collapseContainer > button:global(.pf-m-tertiary):after {
+ display: none;
+}
- &:hover {
- border: none;
- box-shadow: var(--pf-global--BoxShadow--md);
- }
- }
+.collapseContainer > button:global(.pf-m-tertiary):hover {
+ border: none;
+ box-shadow: var(--pf-global--BoxShadow--md);
}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
index 58d2ccc9..3ec893fb 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types'
import React from 'react'
import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicator.module.scss'
+import { scaleIndicator } from './ScaleIndicator.module.css'
function ScaleIndicator({ scale }) {
return (
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
index f19e0ff2..f19e0ff2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
index e7dc57c3..00aaf3e1 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
+import { control, toolBar } from './Toolbar.module.css'
import { Button } from '@patternfly/react-core'
import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-icons'
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
new file mode 100644
index 00000000..007389da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css
@@ -0,0 +1,27 @@
+.toolBar {
+ position: absolute;
+ bottom: var(--pf-global--spacer--md);
+ left: var(--pf-global--spacer--xl);
+}
+
+.control:global(.pf-m-tertiary) {
+ margin-right: var(--pf-global--spacer--xs);
+ margin-top: var(--pf-global--spacer--xs);
+ background-color: var(--pf-global--BackgroundColor--100);
+ border: none;
+ border-radius: var(--pf-global--BorderRadius--sm);
+ box-shadow: var(--pf-global--BoxShadow--sm);
+}
+
+.control:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+ background-color: var(--pf-global--BackgroundColor--100);
+}
+
+.control:global(.pf-m-tertiary):after {
+ display: none;
+}
+
+.control:global(.pf-m-tertiary):hover {
+ border: none;
+ box-shadow: var(--pf-global--BoxShadow--md);
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
deleted file mode 100644
index 0d505acc..00000000
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.toolBar {
- position: absolute;
- bottom: var(--pf-global--spacer--md);
- left: var(--pf-global--spacer--xl);
-}
-
-.control {
- &:global(.pf-m-tertiary) {
- margin-right: var(--pf-global--spacer--xs);
- margin-top: var(--pf-global--spacer--xs);
- background-color: var(--pf-global--BackgroundColor--100);
- border: none;
- border-radius: var(--pf-global--BorderRadius--sm);
- box-shadow: var(--pf-global--BoxShadow--sm);
-
- &:not(:global(.pf-m-disabled)) {
- background-color: var(--pf-global--BackgroundColor--100);
- }
-
- &:after {
- display: none;
- }
-
- &:hover {
- border: none;
- box-shadow: var(--pf-global--BoxShadow--md);
- }
- }
-}