diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components')
22 files changed, 93 insertions, 101 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js index c046f9c7..514dce2a 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.js +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js @@ -37,7 +37,7 @@ import AppHeaderTools from './AppHeaderTools' import AppHeaderUser from './AppHeaderUser' import ProjectSelector from './context/ProjectSelector' -import styles from './AppHeader.module.scss' +import styles from './AppHeader.module.css' export default function AppHeader({ nav }) { return ( diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css index 73ef553c..9d5dbed1 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css @@ -28,17 +28,15 @@ --pf-c-masthead--c-context-selector--Width: 200px; } -.logo { - span { - margin-left: 8px; - color: #fff; - align-self: center; - font-weight: 600; - font-size: 0.9rem; - } +.logo > span { + margin-left: 8px; + color: #fff; + align-self: center; + font-weight: 600; + font-size: 0.9rem; +} - &:hover, - &:focus { - text-decoration: none; - } +.logo:hover, +.logo:focus > span { + --pf-global--link--TextDecoration: none; } diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js index 5d3a6441..f3c25b79 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js @@ -21,7 +21,7 @@ */ import PropTypes from 'prop-types' -import { contextSelectionSection } from './ContextSelectionSection.module.scss' +import { contextSelectionSection } from './ContextSelectionSection.module.css' function ContextSelectionSection({ children }) { return <section className={contextSelectionSection}>{children}</section> diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css index 0e902af0..0e902af0 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js index 059cfea8..d2601008 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js @@ -24,7 +24,7 @@ import PropTypes from 'prop-types' import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core' import { useMemo, useState } from 'react' -import styles from './ContextSelector.module.scss' +import styles from './ContextSelector.module.css' function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) { const [searchValue, setSearchValue] = useState('') diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css index 4f86ac64..7662d00c 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css @@ -21,7 +21,7 @@ */ .pageSelector.pageSelector { - // Ensure this selector has precedence over the default one + /* Ensure this selector has precedence over the default one */ margin-right: 20px; --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg); @@ -31,16 +31,14 @@ --pf-c-context-selector__toggle--PaddingLeft: 0; --pf-c-context-selector__toggle--BorderWidth: 0; --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm); +} - & :global(.pf-c-context-selector__toggle) { - &:active, - &:focus-within, - &:global(.pf-m-active) { - --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; - } - } +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):active, +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):focus-within, +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):global(.pf-m-active) { + --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; +} - &:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) { - --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; - } +.pageSelector.pageSelector:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) { + --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; } diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js index 7c6d129c..5aaa56ac 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core' -import { filterPanel } from './FilterPanel.module.scss' +import { filterPanel } from './FilterPanel.module.css' export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' } diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css new file mode 100644 index 00000000..15c36821 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css @@ -0,0 +1,7 @@ +.filterPanel { + display: flex; +} + +.filterPanel > button { + flex: 1 !important; +} diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss deleted file mode 100644 index 79cdf81a..00000000 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.filterPanel { - display: flex; - - button { - flex: 1 !important; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js index 8bf529b2..1b9fff72 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js @@ -5,7 +5,7 @@ import { Stage } from 'react-konva' import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants' import { ReactReduxContext } from 'react-redux' import useResizeObserver from 'use-resize-observer' -import { mapContainer } from './MapStage.module.scss' +import { mapContainer } from './MapStage.module.css' import MapLayer from './layers/MapLayer' import RoomHoverLayer from './layers/RoomHoverLayer' import ObjectHoverLayer from './layers/ObjectHoverLayer' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css index 47c3dde2..47c3dde2 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css 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); - } - } -} 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 |