particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CreateImageWizard: Single css file

Browse source 
All css applies to the entire page. To make it clearer having a single
css file for the entire wizard.
This commit is contained in:
Sanne Raymaekers 2022-04-08 18:10:45 +02:00 • committed by jkozol
parent c5dca74092
commit f6aa58e3e3
6 changed files with 40 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/Components/CreateImageWizard/CreateImageWizard.scss
View file

@ -9,9 +9,48 @@
}
.pf-c-dual-list-selector__menu {
--pf-c-dual-list-selector__menu--MinHeight: 18rem;
--pf-c-dual-list-selector__menu--MinHeight: 20.5rem
}
.pf-c-form {
--pf-c-form--GridGap: var(--pf-global--spacer--md);
}
.pf-c-form__group-label {
--pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--xs);
}
.tiles {
display: flex;
}
.tile {
flex: 1 0 0px;
}
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
--pf-c-tile__icon--Color: var(---pf-global--Color--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
}
.pf-c-tile.pf-m-selected:focus {
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
}
.provider-icon {
width: 1em;
height: 1em;
}
.azureAuthExpandable {
--pf-c-expandable-section__toggle--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--hover--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--active--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--Color--100);
}

3
src/Components/CreateImageWizard/WizardStepPackages.scss
View file

@ -1,3 +0,0 @@
.pf-c-dual-list-selector__menu {
--pf-c-dual-list-selector__menu--MinHeight: 20.5rem
}

1
src/Components/CreateImageWizard/formComponents/AzureAuthExpandable.js
View file

@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { Button, ExpandableSection, Text, Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import './AzureAuthExpandable.scss';
const AzureAuthExpandable = () => {
const [ expanded, setExpanded ] = useState(true);

7
src/Components/CreateImageWizard/formComponents/AzureAuthExpandable.scss
View file

@ -1,7 +0,0 @@
.azureAuthExpandable {
--pf-c-expandable-section__toggle--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--hover--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--active--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--Color--100);
--pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--Color--100);
}

1
src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
View file

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import { Checkbox, FormGroup, Text, TextVariants, Tile } from '@patternfly/react-core';
import './TargetEnvironment.scss';
const TargetEnvironment = ({ label, isRequired, ...props }) => {
const { getState, change } = useFormApi();

30
src/Components/CreateImageWizard/formComponents/TargetEnvironment.scss
View file

@ -1,30 +0,0 @@
.pf-c-form__group-label {
--pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--xs);
}
.tiles {
display: flex;
}
.tile {
flex: 1 0 0px;
}
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
--pf-c-tile__icon--Color: var(---pf-global--Color--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
}
.pf-c-tile.pf-m-selected:focus {
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
}
.provider-icon {
width: 1em;
height: 1em;
}