Skip to content

Commit

Permalink
Style: fix css issues (#77)
Browse files Browse the repository at this point in the history 
* style: make bold on all lunatic-label (only for question)

* style:  harmonize sequence and subsequence style

* fix: style inside loops

* fix: unit style
  • Loading branch information
@laurentC35
laurentC35 authored Nov 30, 2023
1 parent 8d446e1 commit e70c211
Showing 1 changed file with 73 additions and 57 deletions.
130 changes: 73 additions & 57 deletions queen-v2/src/components/lightOrchestrator/lunaticStyle/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({
display: 'block',
},

'& .subsequence-lunatic': {
'& .sequence-lunatic, .subsequence-lunatic': {
backgroundColor: 'transparent',
fontSize: '1.2em',
color: 'black',
Expand All @@ -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',
Expand All @@ -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' },
Expand All @@ -89,11 +101,6 @@ export const useCustomLunaticStyles = makeStyles(theme => ({
},
},

'& .unit': {
position: 'relative',
left: '0.5em',
fontWeight: 'bold',
},
'& .declaration-lunatic': {
margin: '0.5em',
'&.declaration-help': {
Expand Down Expand Up @@ -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': {
Expand All @@ -155,6 +166,7 @@ export const useCustomLunaticStyles = makeStyles(theme => ({
paddingLeft: '0.5em',
fontSize: '100%',
marginLeft: '1em',
marginBottom: '1em',
borderRadius: '10px',
border: `${borderInput}`,
width: '55%',
Expand All @@ -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,
},
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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': {
Expand All @@ -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
Expand All @@ -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',
Expand All @@ -278,28 +308,30 @@ 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',
},
},
},
},

// 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',
Expand Down Expand Up @@ -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%',
},

Expand Down Expand Up @@ -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%',
Expand All @@ -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',
Expand All @@ -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',

Expand Down Expand Up @@ -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%',

Expand Down

0 comments on commit e70c211

Please sign in to comment.