| 1 |
import type { FormStyleSettings } from '@/types/form-style' |
| 2 |
import type { ActiveColors } from '@/utils/form-styles/styleSettings' |
| 3 |
import { formatDimensionToCss } from '@/utils/styleUtils' |
| 4 |
|
| 5 |
export function applyFormHeaderStyles( |
| 6 |
css: string[], |
| 7 |
formId: string | number, |
| 8 |
styleSettings: FormStyleSettings, |
| 9 |
activeColors: ActiveColors, |
| 10 |
): void { |
| 11 |
const formTitlePaddingLR = formatDimensionToCss( |
| 12 |
styleSettings.advancedMode?.formTitle?.paddingLeftRight, |
| 13 |
) |
| 14 |
const formTitlePaddingTB = formatDimensionToCss( |
| 15 |
styleSettings.advancedMode?.formTitle?.paddingTopBottom, |
| 16 |
) |
| 17 |
const formTitleFontWeight = styleSettings.advancedMode?.formTitle?.fontWeight |
| 18 |
const formTitleFontStyle = styleSettings.advancedMode?.formTitle?.fontStyle |
| 19 |
const formTitleFontSize = formatDimensionToCss(styleSettings.advancedMode?.formTitle?.fontSize) |
| 20 |
|
| 21 |
if ( |
| 22 |
activeColors.formTitleColor || |
| 23 |
formTitlePaddingLR || |
| 24 |
formTitlePaddingTB || |
| 25 |
formTitleFontWeight || |
| 26 |
formTitleFontStyle || |
| 27 |
formTitleFontSize |
| 28 |
) { |
| 29 |
css.push(`.ivyforms-form-wrapper-${formId} .ivyforms-form-title {`) |
| 30 |
if (activeColors.formTitleColor) { |
| 31 |
css.push(` color: ${activeColors.formTitleColor} !important;`) |
| 32 |
} |
| 33 |
if (formTitleFontWeight) { |
| 34 |
css.push(` font-weight: ${formTitleFontWeight} !important;`) |
| 35 |
} |
| 36 |
if (formTitleFontStyle) { |
| 37 |
css.push(` font-style: ${formTitleFontStyle} !important;`) |
| 38 |
} |
| 39 |
if (formTitleFontSize) { |
| 40 |
css.push(` font-size: ${formTitleFontSize} !important;`) |
| 41 |
} |
| 42 |
if (formTitlePaddingLR) { |
| 43 |
css.push(` padding-left: ${formTitlePaddingLR};`) |
| 44 |
css.push(` padding-right: ${formTitlePaddingLR};`) |
| 45 |
} |
| 46 |
if (formTitlePaddingTB) { |
| 47 |
css.push(` padding-top: ${formTitlePaddingTB};`) |
| 48 |
css.push(` padding-bottom: ${formTitlePaddingTB};`) |
| 49 |
} |
| 50 |
css.push('}') |
| 51 |
} |
| 52 |
|
| 53 |
const formDescriptionPaddingLR = formatDimensionToCss( |
| 54 |
styleSettings.advancedMode?.formDescription?.paddingLeftRight, |
| 55 |
) |
| 56 |
const formDescriptionPaddingTB = formatDimensionToCss( |
| 57 |
styleSettings.advancedMode?.formDescription?.paddingTopBottom, |
| 58 |
) |
| 59 |
const formDescriptionFontWeight = styleSettings.advancedMode?.formDescription?.fontWeight |
| 60 |
const formDescriptionFontStyle = styleSettings.advancedMode?.formDescription?.fontStyle |
| 61 |
const formDescriptionFontSize = formatDimensionToCss( |
| 62 |
styleSettings.advancedMode?.formDescription?.fontSize, |
| 63 |
) |
| 64 |
|
| 65 |
if ( |
| 66 |
activeColors.formDescriptionColor || |
| 67 |
formDescriptionPaddingLR || |
| 68 |
formDescriptionPaddingTB || |
| 69 |
formDescriptionFontWeight || |
| 70 |
formDescriptionFontStyle || |
| 71 |
formDescriptionFontSize |
| 72 |
) { |
| 73 |
css.push(`.ivyforms-form-wrapper-${formId} .ivyforms-form-description {`) |
| 74 |
if (activeColors.formDescriptionColor) { |
| 75 |
css.push(` color: ${activeColors.formDescriptionColor} !important;`) |
| 76 |
} |
| 77 |
if (formDescriptionFontWeight) { |
| 78 |
css.push(` font-weight: ${formDescriptionFontWeight} !important;`) |
| 79 |
} |
| 80 |
if (formDescriptionFontStyle) { |
| 81 |
css.push(` font-style: ${formDescriptionFontStyle} !important;`) |
| 82 |
} |
| 83 |
if (formDescriptionFontSize) { |
| 84 |
css.push(` font-size: ${formDescriptionFontSize} !important;`) |
| 85 |
} |
| 86 |
if (formDescriptionPaddingLR) { |
| 87 |
css.push(` padding-left: ${formDescriptionPaddingLR};`) |
| 88 |
css.push(` padding-right: ${formDescriptionPaddingLR};`) |
| 89 |
} |
| 90 |
if (formDescriptionPaddingTB) { |
| 91 |
css.push(` padding-top: ${formDescriptionPaddingTB};`) |
| 92 |
css.push(` padding-bottom: ${formDescriptionPaddingTB};`) |
| 93 |
} |
| 94 |
css.push('}') |
| 95 |
} |
| 96 |
} |
| 97 |
|
