mirror of
https://github.com/suitenumerique/docs.git
synced 2026-04-25 17:15:01 +02:00
Compare commits
2 Commits
fix/link-p
...
new-ui/new
| Author | SHA1 | Date | |
|---|---|---|---|
|
6b502b51ad | ||
|
|
9b33a1f464 |
@@ -13,6 +13,7 @@ and this project adheres to
|
||||
|
||||
- 🌐(frontend) Add German translation #255
|
||||
- ✨(frontend) Add a broadcast store #387
|
||||
- ✨(frontend) WIP: New ui
|
||||
|
||||
## Changed
|
||||
|
||||
|
||||
@@ -3,16 +3,21 @@ const config = {
|
||||
default: {
|
||||
theme: {
|
||||
colors: {
|
||||
'card-border': '#ededed',
|
||||
'card-border': '#DDDDDD',
|
||||
'primary-bg': '#FAFAFA',
|
||||
'primary-100': '#EDF5FA',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
'grey-400': '#929292',
|
||||
'grey-800': '#2A2A2A',
|
||||
},
|
||||
font: {
|
||||
letterSpacings: {
|
||||
h5: 'normal',
|
||||
},
|
||||
sizes: {
|
||||
ml: '0.938rem',
|
||||
xl: '1.50rem',
|
||||
xl: '1.25rem',
|
||||
t: '0.6875rem',
|
||||
s: '0.75rem',
|
||||
h1: '2.2rem',
|
||||
@@ -28,274 +33,224 @@ const config = {
|
||||
black: 900,
|
||||
},
|
||||
},
|
||||
spacings: {
|
||||
'0': '0',
|
||||
none: '0',
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
},
|
||||
breakpoints: {
|
||||
xxs: '320px',
|
||||
xs: '480px',
|
||||
},
|
||||
logo: {
|
||||
src: '',
|
||||
widthHeader: '',
|
||||
widthFooter: '',
|
||||
alt: '',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
datagrid: {
|
||||
header: {
|
||||
weight: 'var(--c--theme--font--weights--extrabold)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
cell: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'background-color': {
|
||||
hover: '#055fd214',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
focus: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
},
|
||||
},
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
width: 'auto',
|
||||
},
|
||||
'forms-input': {
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
color: {
|
||||
error: 'var(--c--theme--colors--danger-500)',
|
||||
'error-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
|
||||
},
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': {
|
||||
small: 'var(--c--theme--colors--primary-500)',
|
||||
'small-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
big: {
|
||||
disabled: 'var(--c--theme--colors--greyscale-400)',
|
||||
},
|
||||
},
|
||||
},
|
||||
'forms-select': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color-disabled-hover':
|
||||
'var(--c--theme--colors--greyscale-200)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-select--border-radius)',
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'menu-background-color': '#ffffff',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-300)',
|
||||
},
|
||||
},
|
||||
'forms-switch': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-color': 'var(--c--components--forms-textarea--border-color)',
|
||||
'border-color-hover':
|
||||
'var(--c--components--forms-textarea--border-color)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-textarea--border-radius)',
|
||||
focus: 'var(--c--components--forms-textarea--border-radius)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
disabled: {
|
||||
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
'background-color': '#ffffff',
|
||||
},
|
||||
button: {
|
||||
'border-radius': {
|
||||
active: 'var(--c--components--button--border-radius)',
|
||||
},
|
||||
'medium-height': 'auto',
|
||||
'small-height': 'auto',
|
||||
success: {
|
||||
color: 'white',
|
||||
'color-disabled': 'white',
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--success-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
|
||||
'color-hover': 'var(--c--theme--colors--success-800)',
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--danger-400)',
|
||||
'color-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--danger-100)',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-active': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-400)',
|
||||
'color-active': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
border: {
|
||||
'color-active': 'transparent',
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'white',
|
||||
'color-hover': 'var(--c--theme--colors--primary-700)',
|
||||
},
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-200)',
|
||||
},
|
||||
},
|
||||
tertiary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
color: 'white',
|
||||
background: {
|
||||
color: '#b3cef0',
|
||||
},
|
||||
},
|
||||
},
|
||||
'la-gauffre': {
|
||||
activated: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
dsfr: {
|
||||
theme: {
|
||||
colors: {
|
||||
'card-border': '#ededed',
|
||||
'primary-text': '#000091',
|
||||
'primary-100': '#f5f5fe',
|
||||
'primary-150': '#F4F4FD',
|
||||
'primary-200': '#ececfe',
|
||||
'primary-300': '#e3e3fd',
|
||||
'primary-400': '#cacafb',
|
||||
'primary-500': '#6a6af4',
|
||||
// Primary
|
||||
|
||||
'primary-text': 'var(--c--theme--colors--primary-600)',
|
||||
'primary-100': '#F5F5FE',
|
||||
'primary-200': '#ECECFE',
|
||||
'primary-300': '#E3E3FD',
|
||||
'primary-400': '#CACAFB',
|
||||
'primary-500': '#6A6AF4',
|
||||
'primary-600': '#000091',
|
||||
'primary-700': '#272747',
|
||||
'primary-800': '#21213f',
|
||||
'primary-900': '#1c1a36',
|
||||
'secondary-text': '#FFFFFF',
|
||||
'secondary-100': '#fee9ea',
|
||||
'secondary-200': '#fedfdf',
|
||||
'secondary-300': '#fdbfbf',
|
||||
'secondary-400': '#e1020f',
|
||||
'secondary-500': '#c91a1f',
|
||||
'secondary-600': '#5e2b2b',
|
||||
'secondary-700': '#3b2424',
|
||||
'secondary-800': '#341f1f',
|
||||
'secondary-900': '#2b1919',
|
||||
'greyscale-text': '#303C4B',
|
||||
'greyscale-000': '#f6f6f6',
|
||||
'greyscale-100': '#eeeeee',
|
||||
'greyscale-200': '#e5e5e5',
|
||||
'greyscale-300': '#e1e1e1',
|
||||
'greyscale-400': '#dddddd',
|
||||
'greyscale-500': '#cecece',
|
||||
'greyscale-600': '#7b7b7b',
|
||||
'greyscale-700': '#666666',
|
||||
'greyscale-800': '#2a2a2a',
|
||||
'greyscale-900': '#1e1e1e',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
'success-300': '#88fdaa',
|
||||
'success-400': '#3bea7e',
|
||||
'success-500': '#1f8d49',
|
||||
'success-600': '#18753c',
|
||||
'success-700': '#204129',
|
||||
'success-800': '#1e2e22',
|
||||
'success-900': '#19281d',
|
||||
'info-text': '#0078f3',
|
||||
'info-100': '#f4f6ff',
|
||||
'info-200': '#e8edff',
|
||||
'info-300': '#dde5ff',
|
||||
'info-400': '#bdcdff',
|
||||
'info-500': '#0078f3',
|
||||
'info-600': '#0063cb',
|
||||
'info-700': '#f4f6ff',
|
||||
'info-800': '#222a3f',
|
||||
'info-900': '#1d2437',
|
||||
'warning-text': '#d64d00',
|
||||
'warning-100': '#fff4f3',
|
||||
'warning-200': '#ffe9e6',
|
||||
'warning-300': '#ffded9',
|
||||
'warning-400': '#ffbeb4',
|
||||
'warning-500': '#d64d00',
|
||||
'warning-600': '#b34000',
|
||||
'warning-700': '#5e2c21',
|
||||
'warning-800': '#3e241e',
|
||||
'warning-900': '#361e19',
|
||||
'danger-text': '#e1000f',
|
||||
'danger-100': '#fef4f4',
|
||||
'danger-200': '#fee9e9',
|
||||
'danger-300': '#fddede',
|
||||
'danger-400': '#fcbfbf',
|
||||
'danger-500': '#e1000f',
|
||||
'danger-600': '#c9191e',
|
||||
'danger-700': '#642727',
|
||||
'danger-800': '#412121',
|
||||
'danger-900': '#3a1c1c',
|
||||
'primary-clicked-100': '#CBCBFA',
|
||||
'primary-clicked-200': '#BBBBFC',
|
||||
'primary-clicked-300': '#ADADF9',
|
||||
'primary-clicked-400': '#8B8BF6',
|
||||
'primary-clicked-500': '#AEAEF9',
|
||||
'primary-clicked-600': '#2323FF',
|
||||
'primary-hover-100': '#DCDCFC',
|
||||
'primary-hover-200': '#CECEFC',
|
||||
'primary-hover-300': '#C1C1FB',
|
||||
'primary-hover-400': '#A1A1F8',
|
||||
'primary-hover-500': '#9898F8',
|
||||
'primary-hover-600': '#1212FF',
|
||||
|
||||
// secondary
|
||||
'secondary-100': '#FEF4F4',
|
||||
'secondary-200': '#FEE9E9',
|
||||
'secondary-300': '#FDDEDE',
|
||||
'secondary-400': '#FCBFBF',
|
||||
'secondary-500': '#E1000F',
|
||||
'secondary-600': '#C9191E',
|
||||
'secondary-clicked-100': '#FAC4C4',
|
||||
'secondary-clicked-200': '#FCAFAF',
|
||||
'secondary-clicked-300': '#FA9E9E',
|
||||
'secondary-clicked-400': '#FA7474',
|
||||
'secondary-clicked-500': '#FF4347',
|
||||
'secondary-clicked-600': '#F95A5C',
|
||||
'secondary-hover-100': '#FCD7D7',
|
||||
'secondary-hover-200': '#FDC5C5',
|
||||
'secondary-hover-300': '#FBB6B6',
|
||||
'secondary-hover-400': '#FB8F8F',
|
||||
'secondary-hover-500': '#FF292F',
|
||||
'secondary-hover-600': '#F93F42',
|
||||
|
||||
// Greyscale
|
||||
'greyscale-000': '#FFFFFF',
|
||||
'greyscale-050': '#F6F6F6',
|
||||
'greyscale-100': '#EEEEEE',
|
||||
'greyscale-200': '#E5E5E5',
|
||||
'greyscale-250': '#DDDDDD',
|
||||
'greyscale-300': '#CECECE',
|
||||
'greyscale-400': '#929292',
|
||||
'greyscale-500': '#666666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-1000': '#161616',
|
||||
'greyscale-clicked-000': '#EDEDED',
|
||||
'greyscale-clicked-050': '#CFCFCF',
|
||||
'greyscale-clicked-100': '#C1C1C1',
|
||||
'greyscale-clicked-200': '#B2B2B2',
|
||||
'greyscale-clicked-250': '#A7A7A7',
|
||||
'greyscale-clicked-300': '#939393',
|
||||
'greyscale-clicked-400': '#CECECE',
|
||||
'greyscale-clicked-500': '#A6A6A6',
|
||||
'greyscale-clicked-700': '#777777',
|
||||
'greyscale-clicked-1000': '#474747',
|
||||
'greyscale-hover-000': '#F6F6F6',
|
||||
'greyscale-hover-050': '#DFDFDF',
|
||||
'greyscale-hover-100': '#D2D2D2',
|
||||
'greyscale-hover-200': '#C5C5C5',
|
||||
'greyscale-hover-250': '#BBBBBB',
|
||||
'greyscale-hover-300': '#A8A8A8',
|
||||
'greyscale-hover-400': '#BBBBBB',
|
||||
'greyscale-hover-500': '#919191',
|
||||
'greyscale-hover-700': '#616161',
|
||||
'greyscale-hover-1000': '#343434',
|
||||
|
||||
// 'success-text': '#1f8d49',
|
||||
'success-200': '#B8FEC9',
|
||||
'success-500': '#18753C', // Same has 600 for cunningham
|
||||
'success-600': '#18753C',
|
||||
'success-clicked-200': '#34EB7B',
|
||||
'success-clicked-600': '#2FC368',
|
||||
'success-hover-200': '#46FD89',
|
||||
'success-hover-600': '#27A959',
|
||||
|
||||
// 'info-text': '#0078f3',
|
||||
'info-200': '#E8EDFF',
|
||||
'info-500': '#0063CB', // Same has 600 for cunningham
|
||||
'info-600': '#0063CB',
|
||||
'info-clicked-200': '#A9BFFF',
|
||||
'info-clicked-600': '#6798FF',
|
||||
'info-hover-200': '#C2D1FF',
|
||||
'info-hover-600': '#3B87FF',
|
||||
|
||||
// 'warning-text': '#d64d00',
|
||||
'warning-200': '#FFE9E6',
|
||||
'warning-500': '#B34000', // Same has 600 for cunningham
|
||||
'warning-600': '#B34000',
|
||||
'warning-clicked-200': '#FFB0A2',
|
||||
'warning-clicked-600': '#FF7A55',
|
||||
'warning-hover-200': '#FFC6BD',
|
||||
'warning-hover-600': '#FF6218',
|
||||
|
||||
// Danger
|
||||
'danger-200': '#FFE9E9',
|
||||
'danger-500': '#CE0500', // Same has 600 for cunningham
|
||||
'danger-600': '#CE0500',
|
||||
'danger-clicked-200': '#FFAFAF',
|
||||
'danger-clicked-600': '#FF4140',
|
||||
'danger-hover-200': '#FFC5C5',
|
||||
'danger-hover-600': '#FF2725',
|
||||
|
||||
// Cumulus
|
||||
'cumulus-100': '#F3F6FE',
|
||||
'cumulus-200': '#E6EEFE',
|
||||
'cumulus-300': '#DAE6FD',
|
||||
'cumulus-400': '#B6CFFB',
|
||||
'cumulus-500': '#417DC4',
|
||||
'cumulus-600': '#3558A2',
|
||||
|
||||
// emeraude
|
||||
'emeraude-100': '#E3FDEB',
|
||||
'emeraude-200': '#C3FAD5',
|
||||
'emeraude-300': '#9EF9BE',
|
||||
'emeraude-400': '#6FE49D',
|
||||
'emeraude-500': '#00A95F',
|
||||
'emeraude-600': '#297254',
|
||||
|
||||
// glycine
|
||||
'glycine-100': '#FEF3FD',
|
||||
'glycine-200': '#FEE7FC',
|
||||
'glycine-300': '#FDDBFA',
|
||||
'glycine-400': '#FBB8F6',
|
||||
'glycine-500': '#A558A0',
|
||||
'glycine-600': '#6E445A',
|
||||
|
||||
// terre-battue
|
||||
'terre-battue-100': '#FEF7DA',
|
||||
'terre-battue-200': '#FCEEAC',
|
||||
'terre-battue-300': '#FBE769',
|
||||
'terre-battue-400': '#E2CF58',
|
||||
'terre-battue-500': '#B7A73F',
|
||||
'terre-battue-600': '#66673D',
|
||||
|
||||
// tilleul-verveine
|
||||
'tilleul-verveine-100': '#FEF7DA',
|
||||
'tilleul-verveine-200': '#FCEEAC',
|
||||
'tilleul-verveine-300': '#FBE769',
|
||||
'tilleul-verveine-400': '#E2CF58',
|
||||
'tilleul-verveine-500': '#B7A73F',
|
||||
'tilleul-verveine-600': '#66673D',
|
||||
|
||||
// Focus
|
||||
'focus-500': '#0A76F6',
|
||||
},
|
||||
spacings: {
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
font: {
|
||||
families: {
|
||||
accent: 'Marianne',
|
||||
base: 'Marianne',
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
src: '/assets/logo-gouv.svg',
|
||||
widthHeader: '110px',
|
||||
widthFooter: '220px',
|
||||
alt: 'Gouvernement Logo',
|
||||
sizes: {
|
||||
xl: '20px',
|
||||
lg: '18px',
|
||||
md: '16px',
|
||||
sm: '14px',
|
||||
xs: '12px',
|
||||
h1: '32px',
|
||||
h2: '28px',
|
||||
h3: '24px',
|
||||
h4: '22px',
|
||||
h5: '20px',
|
||||
h6: '18px',
|
||||
'title-alt-xl': '80px',
|
||||
'title-alt-lg': '72px',
|
||||
'title-alt-md': '64px',
|
||||
'title-alt-sm': '56px',
|
||||
'title-alt-xs': '48px',
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
alert: {
|
||||
'border-radius': '0',
|
||||
'background-color': 'var(--c--theme--colors--greyscale-000)',
|
||||
},
|
||||
modal: {
|
||||
'box-shadow': '0px 6px 18px 0px rgba(0, 0, 18, 0.16);',
|
||||
},
|
||||
button: {
|
||||
'medium-height': '48px',
|
||||
'border-radius': '4px',
|
||||
'medium-text-height': '48px',
|
||||
primary: {
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-hover': '#1212ff',
|
||||
'color-active': '#2323ff',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-hover-600)',
|
||||
'color-active': 'var(--c--theme--colors--primary-600)',
|
||||
'color-focus': 'var(--c--theme--colors--focus-500)',
|
||||
},
|
||||
color: '#ffffff',
|
||||
'color-hover': '#ffffff',
|
||||
@@ -303,33 +258,51 @@ const config = {
|
||||
},
|
||||
'primary-text': {
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-active': 'var(--c--theme--colors--primary-100)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-hover-000)',
|
||||
'color-active': 'var(--c--theme--colors--greyscale-clicked-000)',
|
||||
},
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
secondary: {
|
||||
background: {
|
||||
'color-hover': '#F6F6F6',
|
||||
color: 'var(--c--theme--colors--greyscale-000)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-hover-000)',
|
||||
'color-active': '#EDEDED',
|
||||
},
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
color: 'var(--c--theme--colors--greyscale-250)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-250)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
['color-hover']: 'var(--c--theme--colors--primary-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
},
|
||||
tertiary: {
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-300)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-hover-300)',
|
||||
'color-active': 'var(--c--theme--colors--primary-clicked-300)',
|
||||
},
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-250)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
['color-hover']: 'var(--c--theme--colors--primary-600)',
|
||||
['color-disabled']: 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'tertiary-text': {
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
},
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
},
|
||||
datagrid: {
|
||||
header: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
color: 'var(--c--theme--colors--greyscale-500)',
|
||||
size: 'var(--c--theme--font--sizes--s)',
|
||||
},
|
||||
body: {
|
||||
@@ -339,60 +312,48 @@ const config = {
|
||||
pagination: {
|
||||
'background-color': 'transparent',
|
||||
'background-color-active': 'var(--c--theme--colors--primary-300)',
|
||||
'border-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'border-radius': '0',
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
text: {
|
||||
color: 'var(--c--theme--colors--greyscale-text)',
|
||||
size: 'var(--c--theme--font--sizes--t)',
|
||||
},
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-radius': '0',
|
||||
// 'border-radius': '0',
|
||||
},
|
||||
'forms-fileuploader': {
|
||||
'border-radius': '0',
|
||||
},
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'footer-font-size': 'var(--c--theme--font--sizes--t)',
|
||||
'footer-color': 'var(--c--theme--colors--greyscale-text)',
|
||||
// 'border-radius': '0',
|
||||
},
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
'value-color': 'var(--c--theme--colors--primary-text)',
|
||||
'font-size': '14px',
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': {
|
||||
big: 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
},
|
||||
'forms-radio': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
'forms-select': {
|
||||
'item-font-size': '14px',
|
||||
'border-radius': '4px',
|
||||
'border-radius-hover': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'border-color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
'forms-switch': {
|
||||
'handle-border-radius': '2px',
|
||||
'rail-border-radius': '4px',
|
||||
'accent-color': 'var(--c--theme--colors--primary-text)',
|
||||
// 'background-color': 'var(--c--theme--colors--greyscale-050)',
|
||||
// 'border-radius': '5px 5px 0 0',
|
||||
// 'border-color': 'var(--c--theme--colors--greyscale-100)',
|
||||
// 'border-color--focus': 'var(--c--theme--colors--greyscale-1000)',
|
||||
// 'border-width': '0 0 2px 0',
|
||||
// 'label-color--focus':
|
||||
// 'var(--c--components--forms-labelledbox--label-color--small)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-radius': '0',
|
||||
// 'background-color': 'var(--c--theme--colors--greyscale-050)',
|
||||
// 'border-radius': '5px 5px 0 0',
|
||||
// 'border-color': 'var(--c--theme--colors--greyscale-100)',
|
||||
// 'border-color--focus': 'var(--c--theme--colors--greyscale-1000)',
|
||||
// 'border-width': '0 0 2px 0',
|
||||
// 'border-color--hover': 'var(--c--theme--colors--greyscale-1000)',
|
||||
// 'label-color--focus':
|
||||
// 'var(--c--components--forms-labelledbox--label-color--small)',
|
||||
},
|
||||
'forms-select': {
|
||||
// 'background-color': 'var(--c--theme--colors--greyscale-100)',
|
||||
// 'border-radius': '0',
|
||||
// 'border-color': 'var(--c--theme--colors--greyscale-1000)',
|
||||
// 'border-width': '0 0 2px 0',
|
||||
// 'border-color--focus': '#0974F6',
|
||||
// 'border-color--hover': 'var(--c--theme--colors--greyscale-1000)',
|
||||
// 'label-color--focus':
|
||||
// 'var(--c--components--forms-labelledbox--label-color--big)',
|
||||
},
|
||||
'forms-switch': {
|
||||
// 'accent-color': '#2323ff',
|
||||
},
|
||||
'forms-checkbox': {
|
||||
// 'accent-color': '#2323ff',
|
||||
},
|
||||
'la-gauffre': {
|
||||
activated: true,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
const crypto = require('crypto');
|
||||
const path = require('path');
|
||||
|
||||
const { InjectManifest } = require('workbox-webpack-plugin');
|
||||
|
||||
@@ -11,6 +12,9 @@ const nextConfig = {
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
sassOptions: {
|
||||
includePaths: [path.join(__dirname, 'styles')],
|
||||
},
|
||||
compiler: {
|
||||
// Enables the styled-components SWC transform
|
||||
styledComponents: true,
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"@hocuspocus/provider": "2.13.7",
|
||||
"@openfun/cunningham-react": "2.9.4",
|
||||
"@tanstack/react-query": "5.59.15",
|
||||
"classnames": "2.5.1",
|
||||
"i18next": "23.16.2",
|
||||
"i18next-browser-languagedetector": "8.0.0",
|
||||
"idb": "8.0.0",
|
||||
@@ -59,6 +60,7 @@
|
||||
"jest-environment-jsdom": "29.7.0",
|
||||
"node-fetch": "2.7.0",
|
||||
"prettier": "3.3.3",
|
||||
"sass": "1.80.4",
|
||||
"stylelint": "16.10.0",
|
||||
"stylelint-config-standard": "36.0.1",
|
||||
"stylelint-prettier": "5.0.2",
|
||||
|
||||
@@ -7,7 +7,6 @@ export interface LinkProps {
|
||||
|
||||
export const StyledLink = styled(Link)<LinkProps>`
|
||||
text-decoration: none;
|
||||
color: #ffffff33;
|
||||
&[aria-current='page'] {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
9
src/frontend/apps/impress/src/components/icons/Icon.tsx
Normal file
9
src/frontend/apps/impress/src/components/icons/Icon.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as React from 'react';
|
||||
|
||||
type Props = {
|
||||
icon: string;
|
||||
className?: string;
|
||||
};
|
||||
export const Icon = ({ icon, className }: Props) => {
|
||||
return <span className={`material-icons ${className}`}>{icon}</span>;
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import classNames from 'classnames';
|
||||
|
||||
import style from './separator.module.scss';
|
||||
|
||||
export enum SeparatorVariant {
|
||||
LIGHT = 'light',
|
||||
DARK = 'dark',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
variant?: SeparatorVariant;
|
||||
};
|
||||
|
||||
export const HorizontalSeparator = ({
|
||||
variant = SeparatorVariant.LIGHT,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(style.horizontal, {
|
||||
[style.dark]: variant === SeparatorVariant.DARK,
|
||||
[style.light]: variant === SeparatorVariant.LIGHT,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import classNames from 'classnames';
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import styles from './separator.module.scss';
|
||||
|
||||
type Props = {
|
||||
showSeparator?: boolean;
|
||||
};
|
||||
|
||||
export const SeparatedSection = ({
|
||||
showSeparator = true,
|
||||
children,
|
||||
}: PropsWithChildren<Props>) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.separatedContainer, {
|
||||
[styles.showSeparator]: showSeparator,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
.horizontal {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
&.light {
|
||||
background-color: var(--c--theme--colors--greyscale-100);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: #e5e5e533;
|
||||
}
|
||||
}
|
||||
|
||||
.separatedContainer {
|
||||
padding: var(--c--theme--spacings--200W) var(--c--theme--spacings--300V);
|
||||
|
||||
&.showSeparator {
|
||||
border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,4 @@
|
||||
:root {
|
||||
/**
|
||||
* Input
|
||||
*/
|
||||
--c--components--forms-input--border-radius--hover: var(
|
||||
--c--components--forms-input--border-radius
|
||||
);
|
||||
--c--components--forms-input--border-radius--focus: var(
|
||||
--c--components--forms-input--border-radius
|
||||
);
|
||||
--c--components--forms-input--border-color--hover: var(
|
||||
--c--components--forms-input--border-color
|
||||
);
|
||||
|
||||
/**
|
||||
* Datepicker
|
||||
**/
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import url('@openfun/cunningham-react/icons');
|
||||
@import url('@openfun/cunningham-react/style');
|
||||
@import url('@openfun/cunningham-react/fonts');
|
||||
@import url('./cunningham-tokens.css');
|
||||
@import url('./cunningham-custom-tokens.css');
|
||||
@import url('../assets/fonts/Marianne/Marianne-font.css');
|
||||
@import './cunningham-tokens';
|
||||
@import './cunningham-custom-tokens';
|
||||
@import '../assets/fonts/Marianne/Marianne-font';
|
||||
|
||||
.c__input,
|
||||
.c__field,
|
||||
@@ -12,221 +12,20 @@
|
||||
font-family: var(--c--theme--font--families--base);
|
||||
}
|
||||
|
||||
.c__field {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.c__field .c__field__footer {
|
||||
padding: 2px 0 0;
|
||||
font-size: var(--c--components--forms-field--footer-font-size);
|
||||
color: var(--c--components--forms-field--footer-color);
|
||||
}
|
||||
|
||||
.labelled-box label {
|
||||
color: var(--c--theme--colors--primary-text);
|
||||
}
|
||||
|
||||
.labelled-box--disabled label {
|
||||
color: var(--c--components--forms-labelledbox--label-color--small-disabled);
|
||||
}
|
||||
|
||||
.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Input
|
||||
* TextArea
|
||||
*/
|
||||
.c__input__wrapper,
|
||||
.c__textarea__wrapper {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
}
|
||||
|
||||
.c__input__wrapper:has(input[readonly]),
|
||||
.c__input__wrapper:has(input[readonly]) * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper:has(input.border-none),
|
||||
.c__textarea__wrapper:has(input.border-none) *,
|
||||
.c__input__wrapper:has(input.border-none),
|
||||
.c__input__wrapper:has(input.border-none) * {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c__input__wrapper:hover,
|
||||
.c__textarea__wrapper:hover {
|
||||
box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper--disabled:hover,
|
||||
.c__input__wrapper--disabled:hover,
|
||||
.c__input__wrapper:hover:has(input[readonly]) {
|
||||
box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0;
|
||||
}
|
||||
|
||||
.c__input__wrapper--disabled {
|
||||
color: var(--c--components--forms-input--value-color--disabled);
|
||||
}
|
||||
|
||||
.c__input__wrapper .labelled-box__label.placeholder {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.c__input__wrapper .c__input,
|
||||
.c__textarea__wrapper .c__textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c__input__wrapper--disabled .c__input {
|
||||
color: var(--c--components--forms-input--value-color--disabled);
|
||||
}
|
||||
|
||||
.c__input__wrapper--error .c__input {
|
||||
color: var(--c--components--forms-input--color--error);
|
||||
}
|
||||
|
||||
.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover {
|
||||
border-color: var(--c--components--forms-input--border--color-error-hover);
|
||||
color: var(--c--components--forms-input--color--error-hover);
|
||||
}
|
||||
|
||||
.c__input__wrapper--error:hover {
|
||||
box-shadow: var(--c--components--forms-input--color--box-shadow-error-hover) 0
|
||||
0 0 2px;
|
||||
}
|
||||
|
||||
.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label {
|
||||
color: var(--c--components--forms-input--border--color-error-hover);
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition:
|
||||
background-color 0s 600000s,
|
||||
color 0s 600000s;
|
||||
}
|
||||
|
||||
.c__textarea__wrapper .c__textarea {
|
||||
color: var(--c--components--forms-textarea--color);
|
||||
}
|
||||
|
||||
.c__textarea__wrapper:hover {
|
||||
border-color: var(--c--components--forms-textarea--border-color-hover);
|
||||
}
|
||||
|
||||
.c__textarea__wrapper--disabled:hover {
|
||||
border-color: var(
|
||||
--c--components--forms-textarea--disabled--border-color-hover
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Select
|
||||
*/
|
||||
.c_select__no_border .c__select .c__select__wrapper,
|
||||
.c_select__no_border .c__select .c__select__wrapper:hover,
|
||||
.c_select__no_border
|
||||
.c__select:not(.c__select--disabled)
|
||||
.c__select__wrapper:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
min-height: var(--c--components--forms-select--height);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
|
||||
box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
|
||||
}
|
||||
|
||||
.c__select__wrapper:hover {
|
||||
border-radius: var(--c--components--forms-select--border-radius-hover);
|
||||
border-color: var(--c--components--forms-select--border-color-hover);
|
||||
}
|
||||
|
||||
.c__select--disabled .c__select__wrapper:hover {
|
||||
border-color: var(--c--components--forms-select--border-color-disabled-hover);
|
||||
}
|
||||
|
||||
.c__select--disabled .c__select__wrapper label,
|
||||
.c__select--disabled .c__select__wrapper input,
|
||||
.c__select--disabled .c__select__wrapper {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c__select__menu__item {
|
||||
transition: all var(--c--theme--transitions--duration)
|
||||
var(--c--theme--transitions--ease-out);
|
||||
}
|
||||
|
||||
.c__select--disabled .c__select__wrapper label,
|
||||
.c__select--disabled .c__select__wrapper input,
|
||||
.c_select__no_bg .c__select__wrapper {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper:focus-within .labelled-box--disabled label {
|
||||
color: var(--c--components--forms-labelledbox--label-color--small-disabled);
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box .labelled-box__children {
|
||||
padding: unset;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box .c__select__inner__actions {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.c__select__wrapper label {
|
||||
position: relative;
|
||||
padding-right: 5rem;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper .c__select__inner__actions__open:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c__select__wrapper .labelled-box__label.c__offscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* DataGrid
|
||||
*/
|
||||
.c__datagrid__table__container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table th .c__datagrid__header {
|
||||
color: var(--c--components--datagrid--header--color);
|
||||
font-weight: var(--c--components--datagrid--header--weight);
|
||||
font-weight: var(--c--theme--font--sizes--sm);
|
||||
font-size: var(--c--components--datagrid--header--size);
|
||||
padding-block: 2rem;
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table tbody tr {
|
||||
border: none;
|
||||
border-top: 1px var(--c--theme--colors--greyscale-100) solid;
|
||||
border-bottom: 1px var(--c--theme--colors--greyscale-100) solid;
|
||||
/*border: none;*/
|
||||
/*border-top: 1px var(--c--theme--colors--greyscale-300) solid;*/
|
||||
/*border-bottom: 1px var(--c--theme--colors--greyscale-300) solid;*/
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table tbody {
|
||||
@@ -239,19 +38,6 @@ input:-webkit-autofill:focus {
|
||||
);
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table td {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.c__datagrid__table__container > table th:first-child,
|
||||
.c__datagrid__table__container > table td:first-child {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.c__datagrid > .c__pagination {
|
||||
padding-inline: 1rem;
|
||||
justify-content: flex-end;
|
||||
@@ -261,7 +47,6 @@ input:-webkit-autofill:focus {
|
||||
gap: 3px;
|
||||
border-radius: 4px;
|
||||
background: var(--c--components--datagrid--pagination--background-color);
|
||||
border-color: var(--c--components--datagrid--pagination--border-color);
|
||||
}
|
||||
|
||||
.c__pagination__list .c__button--tertiary-text.c__button--active {
|
||||
@@ -321,23 +106,6 @@ input:-webkit-autofill:focus {
|
||||
transition: all 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.c__checkbox .c__field__text {
|
||||
color: var(--c--components--forms-checkbox--text--color);
|
||||
font-size: var(--c--components--forms-checkbox--text--size);
|
||||
}
|
||||
|
||||
.c__checkbox.c__checkbox--disabled .c__field__text {
|
||||
color: var(--c--theme--colors--greyscale-600);
|
||||
}
|
||||
|
||||
.c__switch.c__checkbox--disabled .c__switch__rail {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c__checkbox.c__checkbox--disabled .c__checkbox__label {
|
||||
color: var(--c--theme--colors--greyscale-400);
|
||||
}
|
||||
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
@@ -351,8 +119,12 @@ input:-webkit-autofill:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c__button--nano.c__button--with-icon--left {
|
||||
padding: 0 var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.c__button--medium {
|
||||
padding: 0.9rem var(--c--theme--spacings--s);
|
||||
padding: var(--c--theme--spacings--100W);
|
||||
}
|
||||
|
||||
.c__button--small {
|
||||
@@ -364,6 +136,12 @@ input:-webkit-autofill:focus {
|
||||
var(--c--theme--spacings--s);
|
||||
}
|
||||
|
||||
.c__button:focus-visible {
|
||||
box-shadow: 0 0 0 2px
|
||||
var(--c--components--button--primary--background--color-focus);
|
||||
}
|
||||
|
||||
/* Button Primary */
|
||||
.c__button--primary {
|
||||
background-color: var(--c--components--button--primary--background--color);
|
||||
color: var(--c--components--button--primary--color);
|
||||
@@ -378,34 +156,69 @@ input:-webkit-autofill:focus {
|
||||
|
||||
.c__button--primary:active,
|
||||
.c__button--primary.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--primary--background--color-active
|
||||
);
|
||||
color: var(--c--components--button--primary--color-active);
|
||||
border-color: var(--c--components--button--primary--border--color-active);
|
||||
background-color: var(--c--components--button--primary--background--color);
|
||||
color: var(--c--components--button--primary--color);
|
||||
}
|
||||
|
||||
.c__button--primary-text:active,
|
||||
.c__button--primary-text.c__button--active {
|
||||
/* Button Primary-text */
|
||||
|
||||
.c__button--primary-text {
|
||||
border: none;
|
||||
background-color: var(
|
||||
--c--components--button--primary-text--background--color-active
|
||||
);
|
||||
color: var(--c--components--button--primary-text--color);
|
||||
}
|
||||
|
||||
.c__button--primary-text:hover,
|
||||
.c__button--primary-text:focus-visible {
|
||||
.c__button--primary-text.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--primary-text--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--primary-text--color-hover);
|
||||
}
|
||||
|
||||
.c__button:disabled {
|
||||
background-color: var(--c--components--button--disabled--background--color);
|
||||
color: var(--c--components--button--disabled--color);
|
||||
.c__button--primary-text:active,
|
||||
.c__button--primary-text.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--primary-text--background--color-active
|
||||
);
|
||||
}
|
||||
|
||||
.c__button--primary-text:disabled {
|
||||
background-color: transparent;
|
||||
color: var(--c--components--button--primary-text--color-disabled);
|
||||
}
|
||||
|
||||
/* Button tertiary */
|
||||
.c__button--tertiary {
|
||||
background-color: var(--c--components--button--tertiary--background--color);
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
}
|
||||
.c__button--tertiary:disabled {
|
||||
background-color: var(--c--components--button--tertiary--background--color);
|
||||
color: var(--c--components--button--tertiary--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--tertiary:hover,
|
||||
.c__button--tertiary.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
}
|
||||
|
||||
.c__button--tertiary:active,
|
||||
.c__button--tertiary.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-active
|
||||
);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Button tertiary-text */
|
||||
.c__button--tertiary-text {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Button success */
|
||||
.c__button--success {
|
||||
background-color: var(--c--components--button--success--background--color);
|
||||
color: var(--c--components--button--success--color);
|
||||
@@ -426,12 +239,18 @@ input:-webkit-autofill:focus {
|
||||
color: var(--c--components--button--success--color-disabled);
|
||||
}
|
||||
|
||||
/* Button secondary */
|
||||
.c__button--secondary {
|
||||
background-color: var(--c--components--button--secondary--background--color);
|
||||
color: var(--c--components--button--secondary--color);
|
||||
border: 1px solid var(--c--components--button--secondary--border--color);
|
||||
}
|
||||
|
||||
.c__button--secondary:disabled {
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
color: var(--c--components--button--secondary--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--secondary:hover,
|
||||
.c__button--secondary:focus-visible {
|
||||
background-color: var(
|
||||
@@ -441,111 +260,60 @@ input:-webkit-autofill:focus {
|
||||
border: 1px solid var(--c--components--button--secondary--border--color-hover);
|
||||
}
|
||||
|
||||
.c__button--tertiary {
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c__button--tertiary:hover,
|
||||
.c__button--tertiary:focus-visible {
|
||||
.c__button--secondary:active,
|
||||
.c__button--secondary.c__button--active {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--tertiary--color);
|
||||
}
|
||||
|
||||
.c__button--tertiary:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary--background--color-disabled
|
||||
);
|
||||
color: var(--c--components--button--tertiary--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--tertiary-text {
|
||||
border: none;
|
||||
color: var(--c--components--button--tertiary-text--color);
|
||||
}
|
||||
|
||||
.c__button--tertiary-text:hover,
|
||||
.c__button--tertiary-text:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary-text--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--tertiary-text--color-hover);
|
||||
}
|
||||
|
||||
.c__button--tertiary-text:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--tertiary-text--background--color-disabled
|
||||
);
|
||||
color: var(--c--components--button--tertiary-text--color-disabled);
|
||||
}
|
||||
|
||||
.c__button--danger {
|
||||
background-color: var(--c--components--button--danger--background--color);
|
||||
}
|
||||
|
||||
.c__button--danger:hover,
|
||||
.c__button--danger:focus-visible {
|
||||
background-color: var(
|
||||
--c--components--button--danger--background--color-hover
|
||||
);
|
||||
color: var(--c--components--button--danger--color-hover);
|
||||
}
|
||||
|
||||
.c__button--danger:disabled {
|
||||
background-color: var(
|
||||
--c--components--button--danger--background--color-disabled
|
||||
--c--components--button--secondary--background--color-active
|
||||
);
|
||||
}
|
||||
|
||||
/* Button danger */
|
||||
|
||||
/**
|
||||
* Modal
|
||||
*/
|
||||
|
||||
.c__modal__title {
|
||||
text-align: start;
|
||||
font-size: var(--c--theme--font--sizes--h6);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c__modal__backdrop {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.c__modal__close .c__button--tertiary-text:hover,
|
||||
.c__modal__close .c__button--tertiary-text:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
/*.c__modal__close .c__button--tertiary-text:hover,*/
|
||||
/*.c__modal__close .c__button--tertiary-text:focus-visible {*/
|
||||
/* box-shadow: none;*/
|
||||
/*}*/
|
||||
|
||||
.c__modal__close button {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
/*.c__modal__close .c__button {*/
|
||||
/* right: 5px;*/
|
||||
/* top: 5px;*/
|
||||
/* padding: 1.5rem 1rem;*/
|
||||
/*}*/
|
||||
|
||||
.c__modal--full .c__modal__content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (width <= 420px) {
|
||||
.c__modal__scroller {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.c__modal__title h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 576px) {
|
||||
.c__modal__footer--sided {
|
||||
gap: 0.5rem;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
/*!***/
|
||||
/* * Toast*/
|
||||
/**!*/
|
||||
/*.c__toast__container {*/
|
||||
/* z-index: 10000;*/
|
||||
/*}*/
|
||||
|
||||
/**
|
||||
* Toast
|
||||
*/
|
||||
* Alert
|
||||
*/
|
||||
|
||||
.c__toast__container {
|
||||
z-index: 10000;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tooltip
|
||||
*/
|
||||
.c__tooltip {
|
||||
padding: 4px 6px;
|
||||
.c__alert--success {
|
||||
border-color: var(--c--theme--colors--success-600);
|
||||
}
|
||||
.c__alert--info {
|
||||
border-color: var(--c--theme--colors--info-600);
|
||||
}
|
||||
.c__alert--error {
|
||||
border-color: var(--c--theme--colors--danger-600);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -73,10 +73,12 @@ export const tokens = {
|
||||
'success-text': '#FFFFFF',
|
||||
'warning-text': '#FFFFFF',
|
||||
'danger-text': '#FFFFFF',
|
||||
'card-border': '#ededed',
|
||||
'card-border': '#DDDDDD',
|
||||
'primary-bg': '#FAFAFA',
|
||||
'primary-150': '#E5EEFA',
|
||||
'info-150': '#E5EEFA',
|
||||
'grey-400': '#929292',
|
||||
'grey-800': '#2A2A2A',
|
||||
},
|
||||
font: {
|
||||
sizes: {
|
||||
@@ -90,7 +92,7 @@ export const tokens = {
|
||||
m: '0.8125rem',
|
||||
s: '0.75rem',
|
||||
ml: '0.938rem',
|
||||
xl: '1.50rem',
|
||||
xl: '1.25rem',
|
||||
t: '0.6875rem',
|
||||
},
|
||||
weights: {
|
||||
@@ -111,7 +113,7 @@ export const tokens = {
|
||||
h2: 'normal',
|
||||
h3: 'normal',
|
||||
h4: 'normal',
|
||||
h5: '1px',
|
||||
h5: 'normal',
|
||||
h6: 'normal',
|
||||
l: 'normal',
|
||||
m: 'normal',
|
||||
@@ -119,17 +121,12 @@ export const tokens = {
|
||||
},
|
||||
},
|
||||
spacings: {
|
||||
'0': '0',
|
||||
xl: '4rem',
|
||||
l: '3rem',
|
||||
b: '1.625rem',
|
||||
s: '1rem',
|
||||
t: '0.5rem',
|
||||
st: '0.25rem',
|
||||
none: '0',
|
||||
auto: 'auto',
|
||||
bx: '2.2rem',
|
||||
full: '100%',
|
||||
},
|
||||
transitions: {
|
||||
'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
|
||||
@@ -138,145 +135,13 @@ export const tokens = {
|
||||
duration: '250ms',
|
||||
},
|
||||
breakpoints: {
|
||||
xs: '480px',
|
||||
xs: 0,
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
xxl: '1400px',
|
||||
xxs: '320px',
|
||||
},
|
||||
logo: { src: '', widthHeader: '', widthFooter: '', alt: '' },
|
||||
},
|
||||
components: {
|
||||
datagrid: {
|
||||
header: {
|
||||
weight: 'var(--c--theme--font--weights--extrabold)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
cell: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
size: 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'background-color': { hover: '#055fd214' },
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
focus: 'var(--c--components--forms-datepicker--border-radius)',
|
||||
},
|
||||
},
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
width: 'auto',
|
||||
},
|
||||
'forms-input': {
|
||||
'value-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
color: {
|
||||
error: 'var(--c--theme--colors--danger-500)',
|
||||
'error-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'box-shadow-error-hover': 'var(--c--theme--colors--danger-500)',
|
||||
},
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': {
|
||||
small: 'var(--c--theme--colors--primary-500)',
|
||||
'small-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
big: { disabled: 'var(--c--theme--colors--greyscale-400)' },
|
||||
},
|
||||
},
|
||||
'forms-select': {
|
||||
'border-color': 'var(--c--theme--colors--primary-500)',
|
||||
'border-color-disabled-hover':
|
||||
'var(--c--theme--colors--greyscale-200)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-select--border-radius)',
|
||||
focus: 'var(--c--components--forms-select--border-radius)',
|
||||
},
|
||||
'font-size': 'var(--c--theme--font--sizes--ml)',
|
||||
'menu-background-color': '#ffffff',
|
||||
'item-background-color': {
|
||||
hover: 'var(--c--theme--colors--primary-300)',
|
||||
},
|
||||
},
|
||||
'forms-switch': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-color': 'var(--c--components--forms-textarea--border-color)',
|
||||
'border-color-hover':
|
||||
'var(--c--components--forms-textarea--border-color)',
|
||||
'border-radius': {
|
||||
hover: 'var(--c--components--forms-textarea--border-radius)',
|
||||
focus: 'var(--c--components--forms-textarea--border-radius)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
disabled: {
|
||||
'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
modal: { 'background-color': '#ffffff' },
|
||||
button: {
|
||||
'border-radius': {
|
||||
active: 'var(--c--components--button--border-radius)',
|
||||
},
|
||||
'medium-height': 'auto',
|
||||
'small-height': 'auto',
|
||||
success: {
|
||||
color: 'white',
|
||||
'color-disabled': 'white',
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--success-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-300)',
|
||||
'color-hover': 'var(--c--theme--colors--success-800)',
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
'color-hover': 'white',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--danger-400)',
|
||||
'color-hover': 'var(--c--theme--colors--danger-500)',
|
||||
'color-disabled': 'var(--c--theme--colors--danger-100)',
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-active': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-400)',
|
||||
'color-active': 'var(--c--theme--colors--primary-500)',
|
||||
},
|
||||
border: { 'color-active': 'transparent' },
|
||||
},
|
||||
secondary: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
background: {
|
||||
color: 'white',
|
||||
'color-hover': 'var(--c--theme--colors--primary-700)',
|
||||
},
|
||||
border: { color: 'var(--c--theme--colors--primary-200)' },
|
||||
},
|
||||
tertiary: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-600)',
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-200)',
|
||||
},
|
||||
},
|
||||
disabled: { color: 'white', background: { color: '#b3cef0' } },
|
||||
},
|
||||
'la-gauffre': { activated: false },
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
@@ -334,98 +199,188 @@ export const tokens = {
|
||||
dsfr: {
|
||||
theme: {
|
||||
colors: {
|
||||
'card-border': '#ededed',
|
||||
'primary-text': '#000091',
|
||||
'primary-100': '#f5f5fe',
|
||||
'primary-150': '#F4F4FD',
|
||||
'primary-200': '#ececfe',
|
||||
'primary-300': '#e3e3fd',
|
||||
'primary-400': '#cacafb',
|
||||
'primary-500': '#6a6af4',
|
||||
'primary-text': 'var(--c--theme--colors--primary-600)',
|
||||
'primary-100': '#F5F5FE',
|
||||
'primary-200': '#ECECFE',
|
||||
'primary-300': '#E3E3FD',
|
||||
'primary-400': '#CACAFB',
|
||||
'primary-500': '#6A6AF4',
|
||||
'primary-600': '#000091',
|
||||
'primary-700': '#272747',
|
||||
'primary-800': '#21213f',
|
||||
'primary-900': '#1c1a36',
|
||||
'secondary-text': '#FFFFFF',
|
||||
'secondary-100': '#fee9ea',
|
||||
'secondary-200': '#fedfdf',
|
||||
'secondary-300': '#fdbfbf',
|
||||
'secondary-400': '#e1020f',
|
||||
'secondary-500': '#c91a1f',
|
||||
'secondary-600': '#5e2b2b',
|
||||
'secondary-700': '#3b2424',
|
||||
'secondary-800': '#341f1f',
|
||||
'secondary-900': '#2b1919',
|
||||
'greyscale-text': '#303C4B',
|
||||
'greyscale-000': '#f6f6f6',
|
||||
'greyscale-100': '#eeeeee',
|
||||
'greyscale-200': '#e5e5e5',
|
||||
'greyscale-300': '#e1e1e1',
|
||||
'greyscale-400': '#dddddd',
|
||||
'greyscale-500': '#cecece',
|
||||
'greyscale-600': '#7b7b7b',
|
||||
'greyscale-700': '#666666',
|
||||
'greyscale-800': '#2a2a2a',
|
||||
'greyscale-900': '#1e1e1e',
|
||||
'success-text': '#1f8d49',
|
||||
'success-100': '#dffee6',
|
||||
'success-200': '#b8fec9',
|
||||
'success-300': '#88fdaa',
|
||||
'success-400': '#3bea7e',
|
||||
'success-500': '#1f8d49',
|
||||
'success-600': '#18753c',
|
||||
'success-700': '#204129',
|
||||
'success-800': '#1e2e22',
|
||||
'success-900': '#19281d',
|
||||
'info-text': '#0078f3',
|
||||
'info-100': '#f4f6ff',
|
||||
'info-200': '#e8edff',
|
||||
'info-300': '#dde5ff',
|
||||
'info-400': '#bdcdff',
|
||||
'info-500': '#0078f3',
|
||||
'info-600': '#0063cb',
|
||||
'info-700': '#f4f6ff',
|
||||
'info-800': '#222a3f',
|
||||
'info-900': '#1d2437',
|
||||
'warning-text': '#d64d00',
|
||||
'warning-100': '#fff4f3',
|
||||
'warning-200': '#ffe9e6',
|
||||
'warning-300': '#ffded9',
|
||||
'warning-400': '#ffbeb4',
|
||||
'warning-500': '#d64d00',
|
||||
'warning-600': '#b34000',
|
||||
'warning-700': '#5e2c21',
|
||||
'warning-800': '#3e241e',
|
||||
'warning-900': '#361e19',
|
||||
'danger-text': '#e1000f',
|
||||
'danger-100': '#fef4f4',
|
||||
'danger-200': '#fee9e9',
|
||||
'danger-300': '#fddede',
|
||||
'danger-400': '#fcbfbf',
|
||||
'danger-500': '#e1000f',
|
||||
'danger-600': '#c9191e',
|
||||
'danger-700': '#642727',
|
||||
'danger-800': '#412121',
|
||||
'danger-900': '#3a1c1c',
|
||||
'primary-clicked-100': '#CBCBFA',
|
||||
'primary-clicked-200': '#BBBBFC',
|
||||
'primary-clicked-300': '#ADADF9',
|
||||
'primary-clicked-400': '#8B8BF6',
|
||||
'primary-clicked-500': '#AEAEF9',
|
||||
'primary-clicked-600': '#2323FF',
|
||||
'primary-hover-100': '#DCDCFC',
|
||||
'primary-hover-200': '#CECEFC',
|
||||
'primary-hover-300': '#C1C1FB',
|
||||
'primary-hover-400': '#A1A1F8',
|
||||
'primary-hover-500': '#9898F8',
|
||||
'primary-hover-600': '#1212FF',
|
||||
'secondary-100': '#FEF4F4',
|
||||
'secondary-200': '#FEE9E9',
|
||||
'secondary-300': '#FDDEDE',
|
||||
'secondary-400': '#FCBFBF',
|
||||
'secondary-500': '#E1000F',
|
||||
'secondary-600': '#C9191E',
|
||||
'secondary-clicked-100': '#FAC4C4',
|
||||
'secondary-clicked-200': '#FCAFAF',
|
||||
'secondary-clicked-300': '#FA9E9E',
|
||||
'secondary-clicked-400': '#FA7474',
|
||||
'secondary-clicked-500': '#FF4347',
|
||||
'secondary-clicked-600': '#F95A5C',
|
||||
'secondary-hover-100': '#FCD7D7',
|
||||
'secondary-hover-200': '#FDC5C5',
|
||||
'secondary-hover-300': '#FBB6B6',
|
||||
'secondary-hover-400': '#FB8F8F',
|
||||
'secondary-hover-500': '#FF292F',
|
||||
'secondary-hover-600': '#F93F42',
|
||||
'greyscale-000': '#FFFFFF',
|
||||
'greyscale-050': '#F6F6F6',
|
||||
'greyscale-100': '#EEEEEE',
|
||||
'greyscale-200': '#E5E5E5',
|
||||
'greyscale-250': '#DDDDDD',
|
||||
'greyscale-300': '#CECECE',
|
||||
'greyscale-400': '#929292',
|
||||
'greyscale-500': '#666666',
|
||||
'greyscale-700': '#3A3A3A',
|
||||
'greyscale-1000': '#161616',
|
||||
'greyscale-clicked-000': '#EDEDED',
|
||||
'greyscale-clicked-050': '#CFCFCF',
|
||||
'greyscale-clicked-100': '#C1C1C1',
|
||||
'greyscale-clicked-200': '#B2B2B2',
|
||||
'greyscale-clicked-250': '#A7A7A7',
|
||||
'greyscale-clicked-300': '#939393',
|
||||
'greyscale-clicked-400': '#CECECE',
|
||||
'greyscale-clicked-500': '#A6A6A6',
|
||||
'greyscale-clicked-700': '#777777',
|
||||
'greyscale-clicked-1000': '#474747',
|
||||
'greyscale-hover-000': '#F6F6F6',
|
||||
'greyscale-hover-050': '#DFDFDF',
|
||||
'greyscale-hover-100': '#D2D2D2',
|
||||
'greyscale-hover-200': '#C5C5C5',
|
||||
'greyscale-hover-250': '#BBBBBB',
|
||||
'greyscale-hover-300': '#A8A8A8',
|
||||
'greyscale-hover-400': '#BBBBBB',
|
||||
'greyscale-hover-500': '#919191',
|
||||
'greyscale-hover-700': '#616161',
|
||||
'greyscale-hover-1000': '#343434',
|
||||
'success-200': '#B8FEC9',
|
||||
'success-500': '#18753C',
|
||||
'success-600': '#18753C',
|
||||
'success-clicked-200': '#34EB7B',
|
||||
'success-clicked-600': '#2FC368',
|
||||
'success-hover-200': '#46FD89',
|
||||
'success-hover-600': '#27A959',
|
||||
'info-200': '#E8EDFF',
|
||||
'info-500': '#0063CB',
|
||||
'info-600': '#0063CB',
|
||||
'info-clicked-200': '#A9BFFF',
|
||||
'info-clicked-600': '#6798FF',
|
||||
'info-hover-200': '#C2D1FF',
|
||||
'info-hover-600': '#3B87FF',
|
||||
'warning-200': '#FFE9E6',
|
||||
'warning-500': '#B34000',
|
||||
'warning-600': '#B34000',
|
||||
'warning-clicked-200': '#FFB0A2',
|
||||
'warning-clicked-600': '#FF7A55',
|
||||
'warning-hover-200': '#FFC6BD',
|
||||
'warning-hover-600': '#FF6218',
|
||||
'danger-200': '#FFE9E9',
|
||||
'danger-500': '#CE0500',
|
||||
'danger-600': '#CE0500',
|
||||
'danger-clicked-200': '#FFAFAF',
|
||||
'danger-clicked-600': '#FF4140',
|
||||
'danger-hover-200': '#FFC5C5',
|
||||
'danger-hover-600': '#FF2725',
|
||||
'cumulus-100': '#F3F6FE',
|
||||
'cumulus-200': '#E6EEFE',
|
||||
'cumulus-300': '#DAE6FD',
|
||||
'cumulus-400': '#B6CFFB',
|
||||
'cumulus-500': '#417DC4',
|
||||
'cumulus-600': '#3558A2',
|
||||
'emeraude-100': '#E3FDEB',
|
||||
'emeraude-200': '#C3FAD5',
|
||||
'emeraude-300': '#9EF9BE',
|
||||
'emeraude-400': '#6FE49D',
|
||||
'emeraude-500': '#00A95F',
|
||||
'emeraude-600': '#297254',
|
||||
'glycine-100': '#FEF3FD',
|
||||
'glycine-200': '#FEE7FC',
|
||||
'glycine-300': '#FDDBFA',
|
||||
'glycine-400': '#FBB8F6',
|
||||
'glycine-500': '#A558A0',
|
||||
'glycine-600': '#6E445A',
|
||||
'terre-battue-100': '#FEF7DA',
|
||||
'terre-battue-200': '#FCEEAC',
|
||||
'terre-battue-300': '#FBE769',
|
||||
'terre-battue-400': '#E2CF58',
|
||||
'terre-battue-500': '#B7A73F',
|
||||
'terre-battue-600': '#66673D',
|
||||
'tilleul-verveine-100': '#FEF7DA',
|
||||
'tilleul-verveine-200': '#FCEEAC',
|
||||
'tilleul-verveine-300': '#FBE769',
|
||||
'tilleul-verveine-400': '#E2CF58',
|
||||
'tilleul-verveine-500': '#B7A73F',
|
||||
'tilleul-verveine-600': '#66673D',
|
||||
'focus-500': '#0A76F6',
|
||||
},
|
||||
font: { families: { accent: 'Marianne', base: 'Marianne' } },
|
||||
logo: {
|
||||
src: '/assets/logo-gouv.svg',
|
||||
widthHeader: '110px',
|
||||
widthFooter: '220px',
|
||||
alt: 'Gouvernement Logo',
|
||||
spacings: {
|
||||
'050V': '2px',
|
||||
'100V': '4px',
|
||||
'150V': '6px',
|
||||
'100W': '8px',
|
||||
'300V': '12px',
|
||||
'200W': '16px',
|
||||
'300W': '24px',
|
||||
'400W': '32px',
|
||||
'500W': '40px',
|
||||
'600W': '48px',
|
||||
'700W': '56px',
|
||||
'800W': '64px',
|
||||
'900W': '72px',
|
||||
'1200W': '96px',
|
||||
'1500W': '120px',
|
||||
},
|
||||
font: {
|
||||
families: { accent: 'Marianne', base: 'Marianne' },
|
||||
sizes: {
|
||||
xl: '20px',
|
||||
lg: '18px',
|
||||
md: '16px',
|
||||
sm: '14px',
|
||||
xs: '12px',
|
||||
h1: '32px',
|
||||
h2: '28px',
|
||||
h3: '24px',
|
||||
h4: '22px',
|
||||
h5: '20px',
|
||||
h6: '18px',
|
||||
'title-alt-xl': '80px',
|
||||
'title-alt-lg': '72px',
|
||||
'title-alt-md': '64px',
|
||||
'title-alt-sm': '56px',
|
||||
'title-alt-xs': '48px',
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
alert: { 'border-radius': '0' },
|
||||
alert: {
|
||||
'border-radius': '0',
|
||||
'background-color': 'var(--c--theme--colors--greyscale-000)',
|
||||
},
|
||||
modal: { 'box-shadow': '0px 6px 18px 0px rgba(0, 0, 18, 0.16);' },
|
||||
button: {
|
||||
'medium-height': '48px',
|
||||
'border-radius': '4px',
|
||||
'medium-text-height': '48px',
|
||||
primary: {
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'color-hover': '#1212ff',
|
||||
'color-active': '#2323ff',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-hover-600)',
|
||||
'color-active': 'var(--c--theme--colors--primary-600)',
|
||||
'color-focus': 'var(--c--theme--colors--focus-500)',
|
||||
},
|
||||
color: '#ffffff',
|
||||
'color-hover': '#ffffff',
|
||||
@@ -433,30 +388,51 @@ export const tokens = {
|
||||
},
|
||||
'primary-text': {
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
'color-active': 'var(--c--theme--colors--primary-100)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-hover-000)',
|
||||
'color-active': 'var(--c--theme--colors--greyscale-clicked-000)',
|
||||
},
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
secondary: {
|
||||
background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--greyscale-000)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-hover-000)',
|
||||
'color-active': '#EDEDED',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--greyscale-250)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-250)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--greyscale-400)',
|
||||
},
|
||||
tertiary: {
|
||||
background: {
|
||||
color: 'var(--c--theme--colors--primary-300)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-hover-300)',
|
||||
'color-active': 'var(--c--theme--colors--primary-clicked-300)',
|
||||
},
|
||||
border: {
|
||||
color: 'var(--c--theme--colors--primary-500)',
|
||||
'color-hover': 'var(--c--theme--colors--greyscale-250)',
|
||||
},
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
'color-hover': 'var(--c--theme--colors--primary-600)',
|
||||
'color-disabled': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
'tertiary-text': {
|
||||
background: {
|
||||
'color-hover': 'var(--c--theme--colors--primary-100)',
|
||||
},
|
||||
'color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
color: 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
},
|
||||
datagrid: {
|
||||
header: {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
color: 'var(--c--theme--colors--greyscale-500)',
|
||||
size: 'var(--c--theme--font--sizes--s)',
|
||||
},
|
||||
body: {
|
||||
@@ -466,53 +442,15 @@ export const tokens = {
|
||||
pagination: {
|
||||
'background-color': 'transparent',
|
||||
'background-color-active': 'var(--c--theme--colors--primary-300)',
|
||||
'border-color': 'var(--c--theme--colors--primary-400)',
|
||||
},
|
||||
},
|
||||
'forms-checkbox': {
|
||||
'border-radius': '0',
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
text: {
|
||||
color: 'var(--c--theme--colors--greyscale-text)',
|
||||
size: 'var(--c--theme--font--sizes--t)',
|
||||
},
|
||||
},
|
||||
'forms-datepicker': { 'border-radius': '0' },
|
||||
'forms-fileuploader': { 'border-radius': '0' },
|
||||
'forms-field': {
|
||||
color: 'var(--c--theme--colors--primary-text)',
|
||||
'footer-font-size': 'var(--c--theme--font--sizes--t)',
|
||||
'footer-color': 'var(--c--theme--colors--greyscale-text)',
|
||||
},
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
'value-color': 'var(--c--theme--colors--primary-text)',
|
||||
'font-size': '14px',
|
||||
},
|
||||
'forms-labelledbox': {
|
||||
'label-color': { big: 'var(--c--theme--colors--primary-text)' },
|
||||
},
|
||||
'forms-radio': {
|
||||
'accent-color': 'var(--c--theme--colors--primary-600)',
|
||||
},
|
||||
'forms-select': {
|
||||
'item-font-size': '14px',
|
||||
'border-radius': '4px',
|
||||
'border-radius-hover': '4px',
|
||||
'background-color': '#ffffff',
|
||||
'border-color': 'var(--c--theme--colors--primary-text)',
|
||||
'border-color-hover': 'var(--c--theme--colors--primary-text)',
|
||||
'box-shadow-color': 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
'forms-switch': {
|
||||
'handle-border-radius': '2px',
|
||||
'rail-border-radius': '4px',
|
||||
'accent-color': 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
'forms-textarea': { 'border-radius': '0' },
|
||||
'forms-datepicker': {},
|
||||
'forms-fileuploader': {},
|
||||
'forms-input': {},
|
||||
'forms-textarea': {},
|
||||
'forms-select': {},
|
||||
'forms-switch': {},
|
||||
'forms-checkbox': {},
|
||||
'la-gauffre': { activated: true },
|
||||
},
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
SortModel,
|
||||
usePagination,
|
||||
} from '@openfun/cunningham-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
@@ -118,7 +118,7 @@ export const DocsGrid = () => {
|
||||
renderCell: ({ row }) => {
|
||||
return (
|
||||
<StyledLink href={`/docs/${row.id}`}>
|
||||
<Text $weight="bold" $theme="primary">
|
||||
<Text $theme="primary" $weight="bold">
|
||||
{row.title}
|
||||
</Text>
|
||||
</StyledLink>
|
||||
@@ -131,7 +131,9 @@ export const DocsGrid = () => {
|
||||
renderCell: ({ row }) => {
|
||||
return (
|
||||
<StyledLink href={`/docs/${row.id}`}>
|
||||
<Text $weight="bold">{formatDate(row.created_at)}</Text>
|
||||
<Text $theme="primary" $weight="bold">
|
||||
{formatDate(row.created_at)}
|
||||
</Text>
|
||||
</StyledLink>
|
||||
);
|
||||
},
|
||||
@@ -142,7 +144,9 @@ export const DocsGrid = () => {
|
||||
renderCell: ({ row }) => {
|
||||
return (
|
||||
<StyledLink href={`/docs/${row.id}`}>
|
||||
<Text $weight="bold">{formatDate(row.updated_at)}</Text>
|
||||
<Text $theme="primary" $weight="bold">
|
||||
{formatDate(row.updated_at)}
|
||||
</Text>
|
||||
</StyledLink>
|
||||
);
|
||||
},
|
||||
@@ -153,7 +157,7 @@ export const DocsGrid = () => {
|
||||
renderCell: ({ row }) => {
|
||||
return (
|
||||
<StyledLink href={`/docs/${row.id}`}>
|
||||
<Text $weight="bold">
|
||||
<Text $theme="primary" $weight="bold">
|
||||
{transRole(currentDocRole(row.abilities))}
|
||||
</Text>
|
||||
</StyledLink>
|
||||
@@ -166,7 +170,9 @@ export const DocsGrid = () => {
|
||||
renderCell: ({ row }) => {
|
||||
return (
|
||||
<StyledLink href={`/docs/${row.id}`}>
|
||||
<Text $weight="bold">{row.accesses.length}</Text>
|
||||
<Text $theme="primary" $weight="bold">
|
||||
{row.accesses.length}
|
||||
</Text>
|
||||
</StyledLink>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Button } from '@openfun/cunningham-react';
|
||||
|
||||
import { StyledLink } from '@/components';
|
||||
import { Icon } from '@/components/icons/Icon';
|
||||
import { ButtonLogin } from '@/core';
|
||||
import { LaGaufre } from '@/features/header/components/LaGaufre';
|
||||
import { LanguagePicker } from '@/features/language';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
import { default as IconDocs } from './assets/logo-docs.svg';
|
||||
import styles from './docs-layout.module.scss';
|
||||
|
||||
export const DocsHeaderLayout = () => {
|
||||
const { isResponsive, toggleMobileMenu } = useResponsiveStore();
|
||||
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
{isResponsive && (
|
||||
<Button
|
||||
size="medium"
|
||||
onClick={toggleMobileMenu}
|
||||
aria-label="Button with only an icon"
|
||||
color="primary-text"
|
||||
icon={<Icon icon="menu" />}
|
||||
/>
|
||||
)}
|
||||
<StyledLink href="/">
|
||||
<div className={styles.iconContainer}>
|
||||
<IconDocs />
|
||||
<div>Docs</div>
|
||||
</div>
|
||||
</StyledLink>
|
||||
<div className={styles.rightContainer}>
|
||||
{!isResponsive && (
|
||||
<>
|
||||
<ButtonLogin />
|
||||
<LanguagePicker />
|
||||
<LaGaufre />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
32
src/frontend/apps/impress/src/layouts/docs/DocsLayout.tsx
Normal file
32
src/frontend/apps/impress/src/layouts/docs/DocsLayout.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { PropsWithChildren, ReactNode } from 'react';
|
||||
|
||||
import { Box } from '@/components';
|
||||
|
||||
import { DocsHeaderLayout } from './DocsHeaderLayout';
|
||||
import { DocsLeftLayout } from './DocsLeftLayout';
|
||||
import styles from './docs-layout.module.scss';
|
||||
|
||||
type Props = {
|
||||
leftContent?: ReactNode;
|
||||
backgroundStyle?: 'white' | 'grey';
|
||||
};
|
||||
export const DocsLayout = ({
|
||||
children,
|
||||
backgroundStyle = 'grey',
|
||||
leftContent,
|
||||
}: PropsWithChildren<Props>) => {
|
||||
return (
|
||||
<div>
|
||||
<DocsHeaderLayout />
|
||||
<Box $direction="row" $width="100%">
|
||||
<DocsLeftLayout>{leftContent}</DocsLeftLayout>
|
||||
<div
|
||||
id="mainContent"
|
||||
className={[styles.mainContent, styles[backgroundStyle]].join(' ')}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Button } from '@openfun/cunningham-react';
|
||||
import classNames from 'classnames';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { PropsWithChildren, ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Icon } from '@/components/icons/Icon';
|
||||
import { HorizontalSeparator } from '@/components/separator/HorizontalSeparator';
|
||||
import { SeparatedSection } from '@/components/separator/SeparatedSection';
|
||||
import { ButtonLogin } from '@/core';
|
||||
import { useCreateDoc } from '@/features/docs';
|
||||
import { LanguagePicker } from '@/features/language';
|
||||
import { useResponsiveStore } from '@/stores';
|
||||
|
||||
import styles from './docs-layout.module.scss';
|
||||
|
||||
export const DocsLeftLayout = ({ children }: PropsWithChildren) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { isMobileMenuOpen, ...responsiveStore } = useResponsiveStore();
|
||||
|
||||
const { mutate: createDoc } = useCreateDoc({
|
||||
onSuccess: (doc) => {
|
||||
router.push(`/docs/${doc.id}`);
|
||||
responsiveStore.toggleMobileMenu();
|
||||
},
|
||||
});
|
||||
|
||||
const goToHome = () => {
|
||||
router.push('/');
|
||||
responsiveStore.toggleMobileMenu();
|
||||
};
|
||||
|
||||
const createNewDoc = () => {
|
||||
createDoc({ title: t('Untitled document') });
|
||||
};
|
||||
|
||||
const getContent = (): ReactNode => {
|
||||
return (
|
||||
<div>
|
||||
<SeparatedSection>
|
||||
<div className={styles.leftNavigationBarHeader}>
|
||||
<div>
|
||||
<Button
|
||||
onClick={goToHome}
|
||||
size="medium"
|
||||
color="primary-text"
|
||||
icon={<Icon icon="house" />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
size="medium"
|
||||
color="primary-text"
|
||||
icon={<Icon icon="search" />}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={createNewDoc}>{t('New document')}</Button>
|
||||
</div>
|
||||
</SeparatedSection>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.leftNavigationBar}>{getContent()}</div>
|
||||
<div
|
||||
className={classNames(styles.leftNavigationBarResponsive, {
|
||||
[styles.openNavigationMenu]: isMobileMenuOpen,
|
||||
})}
|
||||
>
|
||||
{getContent()}
|
||||
|
||||
<div className={styles.responsiveMenuActions}>
|
||||
<HorizontalSeparator />
|
||||
<ButtonLogin />
|
||||
<LanguagePicker />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.6305 28.8312C22.7983 28.5038 23.9166 27.9062 24.6505 26.8503C25.3749 25.8163 25.5789 24.5047 25.5789 23.2425V4.75099C25.5789 4.42358 25.5611 4.09557 25.5216 3.77148C26.1016 3.99961 26.5486 4.37658 26.8626 4.90239C27.2331 5.50024 27.4184 6.28757 27.4184 7.26435V26.0464C27.4184 27.3684 27.0942 28.3578 26.4458 29.0146C25.7974 29.6714 24.8207 29.9998 23.5155 29.9998H16.4209C16.5889 29.9704 16.7574 29.9401 16.9262 29.909C18.4067 29.6444 19.9713 29.2854 21.6185 28.8346L21.6305 28.8312Z" fill="#C9191E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58203 25.655V6.8477C4.58203 5.70251 4.88938 4.83519 5.50408 4.24575C6.1272 3.65631 6.95242 3.33212 7.97972 3.27318C9.49542 3.18055 10.9311 3.05425 12.2868 2.89425C13.6425 2.72584 14.9393 2.53217 16.1771 2.31324C17.4234 2.0943 18.6359 1.85011 19.8148 1.58065C21.0274 1.29435 21.9578 1.4375 22.6062 2.0101C23.2546 2.58269 23.5788 3.49632 23.5788 4.75099V23.2425C23.5788 24.3456 23.3893 25.1666 23.0104 25.7055C22.6315 26.2529 21.9915 26.6528 21.0905 26.9054C19.4906 27.3433 17.9833 27.6886 16.5687 27.9412C15.154 28.2022 13.7731 28.4001 12.4258 28.5348C11.0785 28.6696 9.69751 28.7748 8.28286 28.8506C7.11241 28.918 6.20299 28.6738 5.5546 28.118C4.90622 27.5707 4.58203 26.7497 4.58203 25.655ZM9.20865 10.2624C11.0635 10.1444 12.7632 9.96305 14.3075 9.71831C14.6822 9.65722 15.0564 9.5936 15.4291 9.52759C15.8192 9.45851 16.1013 9.11859 16.1013 8.72337C16.1013 8.21154 15.638 7.82609 15.135 7.91189C14.846 7.96118 14.5555 8.00909 14.2635 8.05562C12.7346 8.29923 11.0452 8.47998 9.19523 8.5977C8.91819 8.61558 8.69776 8.70188 8.55608 8.87391C8.42209 9.03661 8.35645 9.23229 8.35645 9.45535C8.35645 9.68212 8.43296 9.87951 8.58568 10.0418L8.58783 10.0439C8.75336 10.2095 8.96369 10.2811 9.20865 10.2624ZM9.20801 14.456C11.0631 14.338 12.763 14.1566 14.3075 13.9119C15.8588 13.6589 17.3936 13.3638 18.9112 13.0266C19.2191 12.9581 19.4498 12.8503 19.5652 12.683C19.6786 12.5221 19.7347 12.3376 19.7347 12.1332C19.7347 11.9026 19.6469 11.704 19.476 11.5426C19.2921 11.3689 19.0348 11.3284 18.7304 11.3911L18.7285 11.3915C17.2823 11.7194 15.794 12.0053 14.2635 12.2492C12.7346 12.4928 11.0452 12.6735 9.19523 12.7913C8.91819 12.8091 8.69776 12.8954 8.55608 13.0675C8.42276 13.2294 8.35645 13.4205 8.35645 13.6363C8.35645 13.8703 8.43209 14.0723 8.58558 14.2354L8.59 14.2396C8.75499 14.3949 8.96316 14.4655 9.20551 14.4562L9.20801 14.456ZM9.20847 18.6494C11.0634 18.5229 12.7631 18.3374 14.3075 18.0927C15.8589 17.8482 17.3934 17.5573 18.9112 17.22C19.2199 17.1514 19.4508 17.0391 19.566 16.8627C19.6783 16.7029 19.7347 16.5233 19.7347 16.3266C19.7347 16.0961 19.6469 15.8974 19.476 15.7361C19.2921 15.5623 19.0348 15.5218 18.7304 15.5845L18.729 15.5848C17.2827 15.9043 15.7942 16.1861 14.2635 16.43C12.7345 16.6736 11.045 16.8586 9.19495 16.9847C8.91804 17.0026 8.69771 17.0889 8.55608 17.2609C8.42276 17.4228 8.35645 17.6139 8.35645 17.8297C8.35645 18.0637 8.43209 18.2658 8.58558 18.4289L8.59 18.433C8.75499 18.5883 8.96316 18.6589 9.20551 18.6496L9.20847 18.6494ZM14.3075 22.257C12.7632 22.5018 11.0635 22.6831 9.20867 22.8012C8.9637 22.8198 8.75337 22.7482 8.58783 22.5826L8.58572 22.5805C8.433 22.4182 8.35645 22.2208 8.35645 21.9941C8.35645 21.771 8.42209 21.5753 8.55608 21.4126C8.69776 21.2406 8.91827 21.1543 9.19531 21.1364C11.0453 21.0187 12.7346 20.838 14.2635 20.5943C14.5555 20.5478 14.846 20.4999 15.135 20.4506C15.638 20.3648 16.1013 20.7503 16.1013 21.2621C16.1013 21.6573 15.8192 21.9972 15.4291 22.0663C15.0564 22.1323 14.6822 22.1959 14.3075 22.257Z" fill="#000091"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,90 @@
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--c--theme--spacings--200W);
|
||||
height: 52px;
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
border-bottom: 1px solid var(--c--theme--colors--greyscale-200, #e5e5e5);
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--c--theme--spacings--150V);
|
||||
color: var(--c--theme--colors--primary-600);
|
||||
font-weight: var(--c--theme--font--weights--bold);
|
||||
}
|
||||
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--c--theme--spacings--300V);
|
||||
}
|
||||
|
||||
|
||||
.mainContent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
padding: var(--c--theme--spacings--200W) var(--c--theme--spacings--200W);
|
||||
overflow-y: scroll;
|
||||
height: calc(100dvh - 52px);
|
||||
|
||||
&.grey {
|
||||
background-color: var(--c--theme--colors--greyscale-050);
|
||||
}
|
||||
&.white {
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
}
|
||||
}
|
||||
|
||||
.leftNavigationBar {
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
max-width: 300px;
|
||||
height: calc(100dvh - 52px);
|
||||
border-right: 1px solid var(--c--theme--colors--greyscale-200);
|
||||
}
|
||||
|
||||
.leftNavigationBarHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.leftNavigationBarResponsive {
|
||||
z-index: 999;
|
||||
width: 100dvw;
|
||||
height: calc(100dvh - 52px);
|
||||
border-right: 1px solid var(--c--theme--colors--greyscale-200);
|
||||
position: fixed;
|
||||
left: -100vw;
|
||||
background-color: var(--c--theme--colors--greyscale-000);
|
||||
transition: 0.15s;
|
||||
|
||||
&.openNavigationMenu {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.responsiveMenuActions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--c--theme--spacings--200W);
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.leftNavigationBarResponsive {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.leftNavigationBar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import { TextErrors } from '@/components/TextErrors';
|
||||
import { useAuthStore } from '@/core/auth';
|
||||
import { DocEditor } from '@/features/docs/doc-editor';
|
||||
import { KEY_DOC, useDoc, useDocStore } from '@/features/docs/doc-management';
|
||||
import { MainLayout } from '@/layouts';
|
||||
import { DocsLayout } from '@/layouts/docs/DocsLayout';
|
||||
import { useBroadcastStore } from '@/stores';
|
||||
import { NextPageWithLayout } from '@/types/next';
|
||||
|
||||
@@ -28,9 +28,11 @@ export function DocLayout() {
|
||||
<Head>
|
||||
<meta name="robots" content="noindex" />
|
||||
</Head>
|
||||
<MainLayout withoutFooter>
|
||||
<DocPage id={id} />
|
||||
</MainLayout>
|
||||
<DocsLayout>
|
||||
<Box $width="100%">
|
||||
<DocPage id={id} />
|
||||
</Box>
|
||||
</DocsLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import type { ReactElement } from 'react';
|
||||
|
||||
import { DocsGridContainer } from '@/features/docs/docs-grid';
|
||||
import { MainLayout } from '@/layouts';
|
||||
import { Box } from '@/components';
|
||||
import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid';
|
||||
import { DocsLayout } from '@/layouts/docs/DocsLayout';
|
||||
import { NextPageWithLayout } from '@/types/next';
|
||||
|
||||
const Page: NextPageWithLayout = () => {
|
||||
return <DocsGridContainer />;
|
||||
return (
|
||||
<Box $overflow="auto" $width="100%">
|
||||
<DocsGrid />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Page.getLayout = function getLayout(page: ReactElement) {
|
||||
return <MainLayout>{page}</MainLayout>;
|
||||
return <DocsLayout>{page}</DocsLayout>;
|
||||
};
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -4,41 +4,74 @@ export type ScreenSize = 'small-mobile' | 'mobile' | 'tablet' | 'desktop';
|
||||
|
||||
export interface UseResponsiveStore {
|
||||
isMobile: boolean;
|
||||
isTablet: boolean;
|
||||
isMobileMenuOpen: boolean;
|
||||
isSmallMobile: boolean;
|
||||
screenSize: ScreenSize;
|
||||
screenWidth: number;
|
||||
setScreenSize: (size: ScreenSize) => void;
|
||||
toggleMobileMenu: () => void;
|
||||
isResponsive: boolean;
|
||||
initializeResizeListener: () => () => void;
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
isMobile: false,
|
||||
isTablet: false,
|
||||
isSmallMobile: false,
|
||||
isResponsive: false,
|
||||
isMobileMenuOpen: false,
|
||||
screenSize: 'desktop' as ScreenSize,
|
||||
screenWidth: 0,
|
||||
};
|
||||
|
||||
export const useResponsiveStore = create<UseResponsiveStore>((set) => ({
|
||||
export const useResponsiveStore = create<UseResponsiveStore>((set, get) => ({
|
||||
isMobile: initialState.isMobile,
|
||||
isTablet: initialState.isTablet,
|
||||
isSmallMobile: initialState.isSmallMobile,
|
||||
screenSize: initialState.screenSize,
|
||||
isMobileMenuOpen: initialState.isMobileMenuOpen,
|
||||
screenWidth: initialState.screenWidth,
|
||||
setScreenSize: (size: ScreenSize) => set(() => ({ screenSize: size })),
|
||||
isResponsive: initialState.isResponsive,
|
||||
toggleMobileMenu: () => {
|
||||
set((old) => ({ isMobileMenuOpen: !old.isMobileMenuOpen }));
|
||||
},
|
||||
initializeResizeListener: () => {
|
||||
const resizeHandler = () => {
|
||||
const width = window.innerWidth;
|
||||
if (width < 560) {
|
||||
set({
|
||||
isResponsive: true,
|
||||
screenSize: 'small-mobile',
|
||||
isMobile: true,
|
||||
isTablet: false,
|
||||
isSmallMobile: true,
|
||||
});
|
||||
} else if (width < 768) {
|
||||
set({ screenSize: 'mobile', isMobile: true, isSmallMobile: false });
|
||||
set({
|
||||
isResponsive: true,
|
||||
screenSize: 'mobile',
|
||||
isTablet: false,
|
||||
isMobile: true,
|
||||
isSmallMobile: false,
|
||||
});
|
||||
} else if (width >= 768 && width < 1024) {
|
||||
set({ screenSize: 'tablet', isMobile: false, isSmallMobile: false });
|
||||
set({
|
||||
isResponsive: true,
|
||||
screenSize: 'tablet',
|
||||
isTablet: true,
|
||||
isMobile: false,
|
||||
isSmallMobile: false,
|
||||
});
|
||||
} else {
|
||||
set({ screenSize: 'desktop', isMobile: false, isSmallMobile: false });
|
||||
set({
|
||||
isResponsive: false,
|
||||
screenSize: 'desktop',
|
||||
isTablet: false,
|
||||
isMobile: false,
|
||||
isSmallMobile: false,
|
||||
});
|
||||
}
|
||||
|
||||
set({ screenWidth: width });
|
||||
|
||||
Reference in New Issue
Block a user