From e70c2111cb9deb6a5798f64280d59e87ab4a65b1 Mon Sep 17 00:00:00 2001 From: Laurent Caouissin <38245508+laurentC35@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:18:02 +0100 Subject: [PATCH] Style: fix css issues (#77) * style: make bold on all lunatic-label (only for question) * style: harmonize sequence and subsequence style * fix: style inside loops * fix: unit style --- .../lightOrchestrator/lunaticStyle/style.js | 130 ++++++++++-------- 1 file changed, 73 insertions(+), 57 deletions(-) diff --git a/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js b/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js index 75ac6bab..cb6b2ecb 100644 --- a/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js +++ b/queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js @@ -37,7 +37,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ display: 'block', }, - '& .subsequence-lunatic': { + '& .sequence-lunatic, .subsequence-lunatic': { backgroundColor: 'transparent', fontSize: '1.2em', color: 'black', @@ -46,10 +46,15 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ fontWeight: 'bold', padding: '0.5em', }, + + '& .subsequence-lunatic': { + fontSize: '1.1em', + }, /* Firefox */ '& input[type=text]': { MozAppearance: 'textfield', marginLeft: '1em', + marginBottom: '1em', padding: '0.375rem 0 0.375rem 0.4375rem', minWidth: '40%', borderRadius: '10px', @@ -59,11 +64,18 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ '& input[type=number]': { MozAppearance: 'textfield', marginLeft: '1em', + marginBottom: '1em', padding: '0.375rem 0 0.375rem 0.4375rem', borderRadius: '10px', border: '1px solid black', backgroundColor: 'white', }, + // unit for lunatic-input-number + '& .lunatic-input-number > span': { + position: 'relative', + left: '0.5em', + fontWeight: 'bold', + }, // to replace checkbox by svg '& .list-icon': { position: 'absolute', marginTop: '-0.2rem' }, @@ -89,11 +101,6 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, }, - '& .unit': { - position: 'relative', - left: '0.5em', - fontWeight: 'bold', - }, '& .declaration-lunatic': { margin: '0.5em', '&.declaration-help': { @@ -129,11 +136,15 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ fontWeight: 'bold', }, - '& fieldset legend': { + '& .lunatic-component fieldset legend, fieldset legend': { fontWeight: 'bold', maxWidth: '90%', + color: 'initial', + backgroundColor: 'initial', + fontSize: 'initial', + marginBottom: 'initial', }, - '& .field-container': { + '& .lunatic-component .field-container, .field-container': { marginTop: '1em', }, '& .lunatic-textarea textarea': { @@ -155,6 +166,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ paddingLeft: '0.5em', fontSize: '100%', marginLeft: '1em', + marginBottom: '1em', borderRadius: '10px', border: `${borderInput}`, width: '55%', @@ -176,21 +188,28 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ borderRadius: '15px', }, }, - '& .split-fieldset fieldset.checkbox-group': { - '& .checkbox-modality': { - display: 'inline-block', - width: '40%', - [theme.breakpoints.down('xs')]: { - display: 'block', - width: '70%', + '& .lunatic-component .split-fieldset fieldset.checkbox-group, .split-fieldset fieldset.checkbox-group': + { + '& .checkbox-modality': { + display: 'inline-block', + width: '40%', + [theme.breakpoints.down('xs')]: { + display: 'block', + width: '70%', + }, }, }, - }, - '& fieldset': { + '& .lunatic-component fieldset, fieldset': { padding: 0, margin: 0, border: 'none', + '& .lunatic-label': { + color: 'initial', + fontSize: 'initial', + marginBottom: 'initial', + }, + '& .field-container': { marginTop: 0, }, @@ -200,12 +219,18 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ backgroundColor: `${backgroundColorCheckbox}`, marginBottom: '12px', width: '70%', + fontWeight: 'normal', padding: '0.5em', + '& *': { + backgroundColor: `${backgroundColorCheckbox}`, + }, + '& .lunatic-icon': { display: 'none', }, '& > .lunatic-input-checkbox': { + backgroundColor: `${backgroundColorCheckbox}`, display: 'block', alignItems: 'center', // padding: '0.5em 0.5em 0.5em 0.6em', @@ -215,6 +240,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, '& > .lunatic-input-radio': { + backgroundColor: `${backgroundColorCheckbox}`, display: 'block', alignItems: 'center', // padding: '0.5em 0.5em 0.5em 0.6em', @@ -224,9 +250,11 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, '&:hover span': { color: `${modalityLabelColorChecked}`, + backgroundColor: `inherit`, fontWeight: 'bold', '& *': { fontWeight: 'bold', + backgroundColor: `inherit`, }, // TODO code-modality not provided (yet?) in lunatic-v2 '& .code-modality': { @@ -245,8 +273,10 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, '& span': { color: `${modalityLabelColorChecked}`, + backgroundColor: `${backgroundColorCheckboxChecked}`, fontWeight: 'bold', '& *': { + backgroundColor: `${backgroundColorCheckboxChecked}`, fontWeight: 'bold', }, // TODO code-modality not provided (yet?) in lunatic-v2 @@ -259,7 +289,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, }, // TODO code-modality not provided (yet?) in lunatic-v2 - '& .code-modality': { + '& span.code-modality': { alignSelf: 'baseline', position: 'relative', padding: '0.3em 0.5em 0.3em 0.5em', @@ -278,6 +308,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ '&:focus + label, ': { // TODO code-modality not provided (yet?) in lunatic-v2 '& .code-modality': { + backgroundColor: `${modalityCodeBackgroundColor}`, borderColor: theme.palette.declarations.main, borderWidth: '2px', }, @@ -285,21 +316,22 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, }, - // lunatic label - '& .lunatic-input , .lunatic-textarea, .lunatic-input-number': { - '& .lunatic-label': { - backgroundColor: 'transparent', - fontSize: '1em', - color: 'black', - display: 'block', - marginBottom: '1em', - fontWeight: 'bold', - padding: '0.5em', + // .lunatic-component lunatic label + '& .lunatic-input , .lunatic-textarea, .lunatic-input-number, .lunatic-dropdown, .lunatic-combo-box-container, .field-container > .field .lunatic-input': + { + '& > .lunatic-label, label': { + backgroundColor: 'transparent', + fontSize: '1em', + color: 'black', + display: 'block', + marginBottom: '1em', + fontWeight: 'bold', + padding: '0.5em', + }, }, - }, // Dropdown lunatic - '& .lunatic-dropdown': { + '& .lunatic-component .lunatic-dropdown, .lunatic-dropdown': { display: 'block', width: '100%', marginBottom: '1.5rem', @@ -460,12 +492,14 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ // missing response buttons css override // roll-back some changes when Missing override is available in lunatic-v2 // such as shortcut and checked selectors - '& .missing-buttons': { + + '& .lunatic-component .missing-buttons, .missing-buttons': { display: 'flex', gap: '1em', marginTop: 'auto', '& .button-lunatic': { + marginTop: 0, height: '100%', }, @@ -562,7 +596,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, }, }, - '& .lunatic-combo-box-container': { + '& .lunatic-component .lunatic-combo-box-container, .lunatic-combo-box-container': { '& .lunatic-combo-box': { '& .lunatic-combo-box-content': { width: '90%', @@ -574,36 +608,18 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ }, }, }, - '& .lunatic-combo-box-fab': { + '& .lunatic-component .lunatic-combo-box-fab, .lunatic-combo-box-fab': { right: '15em', top: '3.3em', }, - '& .lunatic-checkbox-group-option': { + '& .lunatic-component .lunatic-checkbox-group-option, .lunatic-checkbox-group-option': { fontSize: '16px', }, - '& .lunatic-radio-group-option': { + '& .lunatic-component .lunatic-radio-group-option, .lunatic-radio-group-option': { fontSize: '16px', }, - // '& .lunatic-suggester-option': { - // textOverflow: 'ellipsis', - // whiteSpace: 'nowrap', - // overflow: 'hidden', - // marginBottom: '0.1em', - // lineHeight: '2rem', - // display: 'block', - // '&. selected': { - // color: 'var(--color-primary-dark)', - // backgroundColor: 'var(--color-dropdown-selected)', - // }, - // '& :hover': { - // backgroundColor: 'var(--color-primary-main)', - // color: 'white', - // }, - // }, - - // default.scss - - '& .lunatic-suggester-message-error': { + + '& .lunatic-component .lunatic-suggester-message-error, .lunatic-suggester-message-error': { border: 'solid 1px darkred', color: 'darkred', backgroundColor: 'tomato', @@ -613,7 +629,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ margin: '4px 4px', }, - '& .lunatic-suggester-default-style': { + '& .lunatic-component .lunatic-suggester-default-style, .lunatic-suggester-default-style': { '&.lunatic-suggester-container': { marginBottom: '10px', @@ -715,7 +731,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({ // suggester.scss - '& .lunatic-suggester-container': { + '& .lunatic-component .lunatic-suggester-container, .lunatic-suggester-container': { position: 'relative', width: '100%',