betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Styled component update : ajoute des & devant tous les pseudo-selector

pull/2799/head
Johan Girod 2023-09-08 16:29:02 +02:00
parent 669da2d203
commit 6cc6a2ee23
20 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/source/components/Feedback/FeedbackRating.tsx
View File

@ -65,7 +65,7 @@ const EmojiButton = styled.button`
background: none;
transition: transform 0.05s;
will-change: transform;
:hover {
&:hover {
transform: scale(1.3);
}
`

2
site/source/components/charts/PagesCharts.tsx
View File

@ -181,7 +181,7 @@ const formatLegend = (key: string) =>
key.replace('simulateurs / ', '').replace(/_/g, ' ')
const ColoredLi = styled(Li)<{ color?: string }>`
::before {
&::before {
${({ color }) =>
color &&
css`

2
site/source/components/conversation/AnswerList.tsx
View File

@ -349,7 +349,7 @@ const StyledAnswerList = styled(Grid)`
? theme.colors.bases.primary[100]
: theme.colors.extended.dark[500]};
font-family: ${({ theme }) => theme.fonts.main};
:nth-child(2n) {
&:nth-child(2n) {
background-color: ${({ theme }) =>
theme.darkMode
? theme.colors.extended.dark[500]

2
site/source/components/conversation/NumberInput.tsx
View File

@ -19,6 +19,7 @@ export default function NumberInput({
unit,
formatOptions,
displayedUnit,
small,
}: InputProps & {
unit?: Unit
}) {
@ -61,6 +62,7 @@ export default function NumberInput({
return (
<StyledNumberInput>
<NumberField
small={small}
description=""
displayedUnit={
parsedDisplayedUnit &&

4
site/source/components/conversation/select/SelectCommune.tsx
View File

@ -219,8 +219,8 @@ const Option = styled(Body)<{
border-radius: 0.3rem;
border: 2px solid transparent;
:hover,
:focus {
&:hover,
&:focus {
${FocusedOption}
}
transition: background-color 0.2s;

6
site/source/design-system/accordion/index.tsx
View File

@ -198,7 +198,7 @@ const StyledTitle = styled.h3`
`
const StyledAccordionItem = styled.div`
:not(:first-child) {
&:not(:first-child) {
border-top: 1px solid ${({ theme }) => theme.colors.bases.primary[400]};
}
`
@ -219,11 +219,11 @@ const StyledButton = styled.button<{ $variant?: 'light' }>`
border-radius: ${theme.box.borderRadius};
}
`}
:hover {
&:hover {
text-decoration: ${({ $variant }) =>
$variant === 'light' ? 'none' : 'underline'};
}
:focus {
&:focus {
${FocusStyle}
}

6
site/source/design-system/buttons/Button.tsx
View File

@ -119,7 +119,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
: ''}
}
:focus {
&:focus {
${FocusStyle}
}
@ -173,7 +173,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
/////////////////////
/* HOVER STYLE */
:hover {
&:hover {
${({ theme, $color, disabled, $light }) =>
disabled || theme.darkMode
? ''
@ -197,7 +197,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
/* Dark mode */
@media not print {
:hover {
&:hover {
${({ $light, theme, disabled }) =>
disabled || !theme.darkMode
? ''

2
site/source/design-system/buttons/HelpButtonWithPopover.tsx
View File

@ -103,7 +103,7 @@ const StyledButton = styled(Button)<{ $light?: boolean }>`
(${({ theme }) => theme.spacings.md}) / 2 + var(--padding)
);
:hover {
&:hover {
background-color: ${({ theme }) => theme.colors.bases.primary[200]};
}
}

2
site/source/design-system/card/Card.tsx
View File

@ -121,7 +121,7 @@ const CompactStyledHeader = styled(H4)`
const StyledHeader = styled(H3)`
text-align: center;
${HeadingUnderline}
::after {
&::after {
margin: auto;
}
`

2
site/source/design-system/field/Checkbox.tsx
View File

@ -81,7 +81,7 @@ const CheckboxVisualContainer = styled.span`
-webkit-tap-highlight-color: transparent;
transition: all 0.2s ease;
::before {
&::before {
content: '';
position: absolute;
top: calc(var(--halo) * -1 - 2px);

14
site/source/design-system/field/Radio/Radio.tsx
View File

@ -99,7 +99,7 @@ export const RadioButton = styled.span`
flex-shrink: 0;
position: relative;
margin-right: var(--halo);
::before {
&::before {
content: '';
position: absolute;
top: calc(var(--halo) * -1);
@ -126,12 +126,12 @@ export const VisibleRadio = styled.span<{ $inert?: boolean }>`
${({ theme, $inert }) =>
!$inert
? css`
:hover > ${RadioButton}::before {
&:hover > ${RadioButton}::before {
opacity: 1;
transform: scale(1);
}
:hover ${OutsideCircle} {
&:hover ${OutsideCircle} {
border-color: ${
theme.darkMode
? theme.colors.bases.primary[500]
@ -159,20 +159,20 @@ export const SpanBody = styled(Body).attrs({ as: 'span' })`
`
export const InputRadio = styled.input`
:focus
&:focus
+ ${VisibleRadio}
${OutsideCircle},
:checked
&:checked
+ ${VisibleRadio}
${OutsideCircle} {
border-color: ${({ theme }) => theme.colors.bases.primary[700]};
}
:focus + ${VisibleRadio} {
&:focus + ${VisibleRadio} {
${FocusStyle}
}
:checked + ${VisibleRadio} ${InsideCircle} {
&:checked + ${VisibleRadio} ${InsideCircle} {
transform: scale(1);
}
`

2
site/source/design-system/field/SearchField.tsx
View File

@ -33,7 +33,7 @@ const SearchInput = styled(StyledInput)`
const SearchInputContainer = styled(StyledInputContainer)`
padding-left: 0.5rem;
:focus-within {
&:focus-within {
${FocusStyle}
}
`

4
site/source/design-system/field/Select/ListBox.tsx
View File

@ -63,8 +63,8 @@ const ListItem = styled.li<{ isFocused?: boolean; isSelected?: boolean }>`
border-radius: 0.3rem;
border: 2px solid transparent;
:hover,
:focus {
&:hover,
&:focus {
${FocusedOption}
}
max-width: 100%;

8
site/source/design-system/field/TextAreaField.tsx
View File

@ -73,7 +73,7 @@ export const StyledTextArea = styled.textarea`
height: 100%;
outline: none;
transition: color 0.2s;
::placeholder {
&::placeholder {
${({ theme }) =>
theme.darkMode &&
css`
@ -155,7 +155,7 @@ export const StyledTextAreaContainer = styled.div<{
align-items: center;
transition: all 0.2s;
:focus-within {
&:focus-within {
outline-color: ${({ theme, $hasError }) =>
$hasError
? theme.colors.extended.error[400]
@ -165,12 +165,12 @@ export const StyledTextAreaContainer = styled.div<{
outline-offset: ${({ theme }) => theme.spacings.xxs};
outline-width: ${({ theme }) => theme.spacings.xxs};
}
:focus-within ${StyledLabel} {
&:focus-within ${StyledLabel} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: inherit;
}
:focus-within + ${StyledDescription} {
&:focus-within + ${StyledDescription} {
${({ theme }) =>
!theme.darkMode &&
css`

8
site/source/design-system/field/TextField.tsx
View File

@ -66,7 +66,7 @@ export const StyledInput = styled.input`
height: 100%;
outline: none;
transition: color 0.2s;
::placeholder {
&::placeholder {
${({ theme }) =>
theme.darkMode &&
css`
@ -149,7 +149,7 @@ export const StyledInputContainer = styled.div<{
align-items: center;
transition: all 0.2s;
:focus-within {
&:focus-within {
outline-color: ${({ theme, $hasError }) =>
$hasError
? theme.colors.extended.error[400]
@ -159,12 +159,12 @@ export const StyledInputContainer = styled.div<{
outline-offset: ${({ theme }) => theme.spacings.xxs};
outline-width: ${({ theme }) => theme.spacings.xxs};
}
:focus-within ${StyledLabel} {
&:focus-within ${StyledLabel} {
color: ${({ theme }) => theme.colors.bases.primary[800]};
background-color: transparent;
}
:focus-within + ${StyledDescription} {
&:focus-within + ${StyledDescription} {
${({ theme }) =>
!theme.darkMode &&
css`

4
site/source/design-system/message/index.tsx
View File

@ -111,8 +111,8 @@ const StyledMessage = styled.div<StyledMessageProps>`
padding: ${$mini ? theme.spacings.xxs : '0px'}
${$mini ? theme.spacings.md : theme.spacings.lg};
background-color: ${$light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
$border: ${$mini ? '1px' : '2px'} solid ${colorSpace[$border ? 500 : 100]};
$border-radius: ${theme.box.borderRadius};
border: ${$mini ? '1px' : '2px'} solid ${colorSpace[$border ? 500 : 100]};
border-radius: ${theme.box.borderRadius};
margin-bottom: ${theme.spacings.md};
&& h3,

4
site/source/design-system/popover/Popover.tsx
View File

@ -256,10 +256,10 @@ export const CloseButton = styled.button`
? theme.colors.extended.grey[100]
: theme.colors.bases.primary[700]};
}
:hover {
&:hover {
text-decoration: underline;
}
:focus {
&:focus {
${FocusStyle}
box-shadow: inset 0 0 0 3px #ffffff;
outline-offset: -2px;

6
site/source/design-system/stepper/index.tsx
View File

@ -86,7 +86,7 @@ const StyledStepContainer = styled.li`
counter-increment: step-counter;
display: inline-block;
margin-right: ${({ theme }) => theme.spacings.lg};
:last-child {
&:last-child {
margin-right: 0;
}
margin-bottom: ${({ theme }) => theme.spacings.md};
@ -98,7 +98,7 @@ const StyledStepContainer = styled.li`
}
`
const StyledStepNumber = styled.span<{ $active: boolean; $disabled: boolean }>`
::before {
&::before {
content: counter(step-counter);
font-size: 1.125rem;
font-weight: 500;
@ -151,7 +151,7 @@ const StyledProgressBar = styled.span<{
background-color: ${({ theme }) => theme.colors.extended.grey[300]};
position: relative;
::after {
&::after {
display: block;
content: '';
height: inherit;

12
site/source/design-system/switch/Switch.tsx
View File

@ -59,7 +59,7 @@ const StyledSwitch = styled.span<StyledProps>`
${({ $light }) =>
$light
? css`
border: 2px #ffffffbf solid;
border: 2px #ffffffbf solid !important;
`
: ''}
@ -72,7 +72,7 @@ const StyledSwitch = styled.span<StyledProps>`
? theme.colors.bases.primary[700]
: theme.colors.extended.grey[500]}42; // 42 is alpha
}
:focus-within {
&:focus-within {
${FocusStyle}
}
${({ disabled, theme }) =>
@ -105,7 +105,7 @@ type AriaSwitchProps = Parameters<typeof useSwitch>[0]
export type SwitchProps = AriaSwitchProps & {
size?: Size
$light?: boolean
light?: boolean
children?: ReactNode
className?: string
role?: string
@ -118,7 +118,7 @@ export type SwitchProps = AriaSwitchProps & {
export const Switch = (props: SwitchProps) => {
const {
size = 'MD',
$light = false,
light = false,
children,
className,
invertLabel = false,
@ -137,7 +137,7 @@ export const Switch = (props: SwitchProps) => {
<Text $invertLabel={invertLabel}>{children}</Text>
)}
<StyledSwitch
$light={$light}
$light={light}
$size={size}
checked={isSelected}
disabled={isDisabled}
@ -151,7 +151,7 @@ export const Switch = (props: SwitchProps) => {
role={props?.role}
/>
<StyledSpan
$light={$light}
$light={light}
$size={size}
aria-hidden
checked={isSelected}

2
site/source/design-system/typography/heading.tsx
View File

@ -12,7 +12,7 @@ const baseHeading = css`
`
export const HeadingUnderline = css`
::after {
&::after {
height: 1.25rem;
width: 5rem;
display: block;