Vebego Component Library

Fancy Form Block 

<div class="org-fancy-form-block vebego-container">
    <svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_732_31)">
            <path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
            <path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
            <path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
            <path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
        </g>
        <defs>
            <linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
                <stop stop-color="#501D79" />
                <stop offset="0.1001" stop-color="#562081" />
                <stop offset="0.4029" stop-color="#980D7F" />
                <stop offset="0.5587" stop-color="#871280" />
                <stop offset="0.8653" stop-color="#5C1E81" />
                <stop offset="0.9028" stop-color="#562081" />
                <stop offset="1" stop-color="#501D79" />
            </linearGradient>
            <linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
                <stop stop-color="#B92D85" stop-opacity="0.7" />
                <stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
                <stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
                <stop offset="1" stop-color="#F69915" />
            </linearGradient>
            <linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
                <stop stop-color="#D62B87" stop-opacity="0.7" />
                <stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
                <stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
                <stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
                <stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
            </linearGradient>
            <linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
                <stop stop-color="#651B82" />
                <stop offset="0.9974" stop-color="#901080" />
            </linearGradient>
            <clipPath id="clip0_732_31">
                <rect width="1401" height="561" fill="white" />
            </clipPath>
        </defs>
    </svg>
    <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>

    <div class="atm-paragraph text-md">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
    </div>

    <div class="umbraco-forms-page">
        <fieldset class="umbraco-forms-fieldset">
            <div class="row-fluid">
                <div class="umbraco-forms-container col-md-6">
                    <div class="umbraco-forms-field complimentname shortanswer">
                        <label class="umbraco-forms-label" for="name">Wat is je naam?</label>
                        <div class="umbraco-forms-field-wrapper">
                            <input type="text" id="name" name="name" class="text" maxlength="255" />
                            <span class="field-validation-valid" role="alert"></span>
                        </div>
                    </div>

                    <div class="umbraco-forms-field complimentcompany shortanswer mandatory alternating">
                        <label class="umbraco-forms-label" for="company">
                            Welk bedrijf? <span class="umbraco-forms-indicator">*</span>
                        </label>
                        <div class="umbraco-forms-field-wrapper">
                            <input type="text" id="company" name="company" class="text" maxlength="255" required />
                            <span class="field-validation-valid" role="alert"></span>
                        </div>
                    </div>

                    <div class="umbraco-forms-field complimentemail shortanswer mandatory">
                        <label class="umbraco-forms-label" for="email">
                            Email <span class="umbraco-forms-indicator">*</span>
                        </label>
                        <div class="umbraco-forms-field-wrapper">
                            <input type="email" id="email" name="email" class="text" maxlength="255" required pattern="^[a-zA-Z0-9_\.\+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-\.]+$" />
                            <span class="field-validation-valid" role="alert"></span>
                        </div>
                    </div>
                </div>

                <div class="umbraco-forms-container col-md-6">
                    <div class="umbraco-forms-field complimentto shortanswer mandatory alternating">
                        <label class="umbraco-forms-label" for="recipient">
                            Complimentje aan: <span class="umbraco-forms-indicator">*</span>
                        </label>
                        <div class="umbraco-forms-field-wrapper">
                            <input type="text" id="recipient" name="recipient" class="text" maxlength="255" required />
                            <span class="field-validation-valid" role="alert"></span>
                        </div>
                    </div>

                    <div class="umbraco-forms-field complimenttext longanswer mandatory">
                        <label class="umbraco-forms-label" for="compliment">
                            Compliment: <span class="umbraco-forms-indicator">*</span>
                        </label>
                        <div class="umbraco-forms-field-wrapper">
                            <textarea id="compliment" name="compliment" rows="2" cols="20" required></textarea>
                            <span class="field-validation-valid" role="alert"></span>
                        </div>
                    </div>

                    <fieldset class=" umbraco-forms-field factsheets multiplechoice mandatory ">

                        <legend class="umbraco-forms-legend">
                            Factsheets </legend>

                        <span id="28de7a61-1765-42df-e3b5-b879d5a4f421_description" class="umbraco-forms-tooltip help-block">Ik wil graag een factsheet ontvangen van de volgende sectoren:</span>
                        <div class="umbraco-forms-field-wrapper">

                            <div class="checkboxlist checkboxlist-horizontal" id="28de7a61-1765-42df-e3b5-b879d5a4f421" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421" style="
    width: max-content;
    text-align: left;
">
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_0" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_0" value="Cleaning Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_0">Cleaning Services</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_1" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_1" value="Window Cleaning" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_1">Window Cleaning</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_2" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_2" value="Sanitary Supplies" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_2">Sanitary Supplies</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_3" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_3" value="Cleanroom Cleaning" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_3">Cleanroom Cleaning</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_4" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_4" value="Floor Maintenance" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_4">Floor Maintenance</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_5" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_5" value="Pest Control" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_5">Pest Control</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_6" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_6" value="Facility Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_6">Facility Services</label>
                                </div>
                                <div>
                                    <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_7" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_7" value="Winter Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

                                    <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_7">Winter Services</label>
                                </div>
                            </div>

                            <span class="field-validation-valid" data-valmsg-for="28de7a61-1765-42df-e3b5-b879d5a4f421" data-valmsg-replace="true" role="alert"></span>
                        </div>

                    </fieldset>

                    <div class="umbraco-forms-field consent dataconsent alternating">
                        <label class="umbraco-forms-label" for="consent">Consent</label>
                    </div>
                </div>
            </div>
        </fieldset>

        <div class="umbraco-forms-navigation row-fluid">
            <div class="col-md-12">
                <input type="submit" class="btn primary" value="Submit" name="submit" />
            </div>
        </div>
    </div>

</div>
 
<div class="org-fancy-form-block vebego-container">
    {{ render '@ambient' merge=true }}
    {{ render '@heading' heading merge=true }}
    {{ render '@paragraph' heading merge=true }}

    <div class="umbraco-forms-page">
    <fieldset class="umbraco-forms-fieldset">
        <div class="row-fluid">
        <div class="umbraco-forms-container col-md-6">
            <div class="umbraco-forms-field complimentname shortanswer">
            <label class="umbraco-forms-label" for="name">Wat is je naam?</label>
            <div class="umbraco-forms-field-wrapper">
                <input
                type="text"
                id="name"
                name="name"
                class="text"
                maxlength="255"
                />
                <span class="field-validation-valid" role="alert"></span>
            </div>
            </div>

            <div class="umbraco-forms-field complimentcompany shortanswer mandatory alternating">
            <label class="umbraco-forms-label" for="company">
                Welk bedrijf? <span class="umbraco-forms-indicator">*</span>
            </label>
            <div class="umbraco-forms-field-wrapper">
                <input
                type="text"
                id="company"
                name="company"
                class="text"
                maxlength="255"
                required
                />
                <span class="field-validation-valid" role="alert"></span>
            </div>
            </div>

            <div class="umbraco-forms-field complimentemail shortanswer mandatory">
            <label class="umbraco-forms-label" for="email">
                Email <span class="umbraco-forms-indicator">*</span>
            </label>
            <div class="umbraco-forms-field-wrapper">
                <input
                type="email"
                id="email"
                name="email"
                class="text"
                maxlength="255"
                required
                pattern="^[a-zA-Z0-9_\.\+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-\.]+$"
                />
                <span class="field-validation-valid" role="alert"></span>
            </div>
            </div>
        </div>

        <div class="umbraco-forms-container col-md-6">
            <div class="umbraco-forms-field complimentto shortanswer mandatory alternating">
            <label class="umbraco-forms-label" for="recipient">
                Complimentje aan: <span class="umbraco-forms-indicator">*</span>
            </label>
            <div class="umbraco-forms-field-wrapper">
                <input
                type="text"
                id="recipient"
                name="recipient"
                class="text"
                maxlength="255"
                required
                />
                <span class="field-validation-valid" role="alert"></span>
            </div>
            </div>

            <div class="umbraco-forms-field complimenttext longanswer mandatory">
            <label class="umbraco-forms-label" for="compliment">
                Compliment: <span class="umbraco-forms-indicator">*</span>
            </label>
            <div class="umbraco-forms-field-wrapper">
                <textarea
                id="compliment"
                name="compliment"
                rows="2"
                cols="20"
                required
                ></textarea>
                <span class="field-validation-valid" role="alert"></span>
            </div>
            </div>

<fieldset class=" umbraco-forms-field factsheets multiplechoice mandatory ">

                                            <legend class="umbraco-forms-legend">
Factsheets                                            </legend>

            <span id="28de7a61-1765-42df-e3b5-b879d5a4f421_description" class="umbraco-forms-tooltip help-block">Ik wil graag een factsheet ontvangen van de volgende sectoren:</span>
        <div class="umbraco-forms-field-wrapper">

            
          
<div class="checkboxlist checkboxlist-horizontal" id="28de7a61-1765-42df-e3b5-b879d5a4f421" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421" style="
    width: max-content;
    text-align: left;
">
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_0" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_0" value="Cleaning Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_0">Cleaning Services</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_1" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_1" value="Window Cleaning" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_1">Window Cleaning</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_2" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_2" value="Sanitary Supplies" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_2">Sanitary Supplies</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_3" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_3" value="Cleanroom Cleaning" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_3">Cleanroom Cleaning</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_4" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_4" value="Floor Maintenance" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_4">Floor Maintenance</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_5" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_5" value="Pest Control" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_5">Pest Control</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_6" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_6" value="Facility Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_6">Facility Services</label>
        </div>
        <div>
            <input type="checkbox" class="" name="28de7a61-1765-42df-e3b5-b879d5a4f421" id="28de7a61-1765-42df-e3b5-b879d5a4f421_7" data-umb="28de7a61-1765-42df-e3b5-b879d5a4f421_7" value="Winter Services" data-val="true" data-val-required="Vul een waarde in Factsheets" data-rule-required="true" data-msg-required="Vul een waarde in Factsheets">

            <label for="28de7a61-1765-42df-e3b5-b879d5a4f421_7">Winter Services</label>
        </div>
</div>


<span class="field-validation-valid" data-valmsg-for="28de7a61-1765-42df-e3b5-b879d5a4f421" data-valmsg-replace="true" role="alert"></span>
        </div>

                                        </fieldset>



            <div class="umbraco-forms-field consent dataconsent alternating">
            <label class="umbraco-forms-label" for="consent">Consent</label>
            </div>
        </div>
        </div>
    </fieldset>

    <div class="umbraco-forms-navigation row-fluid">
        <div class="col-md-12">
        <input
            type="submit"
            class="btn primary"
            value="Submit"
            name="submit"
        />
        </div>
    </div>
    </div>

</div>
 
/* No context defined. */
  • Content: 
    /* Default styling: Everything centered */
.org-fancy-form-block.vebego-container {
    @apply relative text-center overflow-hidden py-20 rounded-xl p-4 items-center px-4;

    .ambient {
        @apply top-0 left-0;
    }

    .atm-heading {
        @apply max-w-[768px] mx-auto text-[2rem] md:text-[3rem] lg:text-[3.75rem] text-white col-span-11;
    }

    .atm-paragraph {
        @apply max-w-[768px] mx-auto text-center text-white col-span-11;
    }

    .umbraco-forms-form {
        @apply col-span-11 justify-self-center;

        span.field-validation-error {
            @apply text-white;
        }
    }

    .umbraco-forms-fieldset
    {
        > legend {
            @apply text-center ml-auto mr-auto;
        }
    }

    .umbraco-forms-caption,
    .umbraco-forms-legend {
        @apply text-white;
    }

    .umbraco-forms-field {
        @apply flex flex-col justify-center items-center;

        &.umbraco-forms-hidden {
            @apply hidden !important;
        }

        .umbraco-forms-label,
        .form-label {
            @apply font-normal text-white;
        }

        .umbraco-forms-field-wrapper {
            @apply w-full text-white;

            .atm-form-input .form-input,
            .atm-form-textarea .form-textarea,
            .atm-form-select .form-select,
            .atm-form-datepicker .form-datepicker {
                @apply p-2 px-4 text-black w-full rounded-lg h-12;

                --tw-ring-color: #e90745;

                &::placeholder {
                    @apply text-[black];
                }
            }

            .atm-form-textarea .form-textarea {
                @apply max-h-[11rem];
            }

            .atm-form-checkbox .form-checkbox:checked,
            .atm-form-radiobutton .form-radiobutton:checked {
                @apply bg-accent-1;
            }
        }

        &.dataconsent,
        &.shortanswer,
        &.longanswer,
        &.date,
        &.password,
        &.titleanddesc,
        &.titleanddescription {
            span {
                @apply text-[white];
            }
        }

        &.multiplechoice,
        &.singlechoice,
        &.dropdown,
        &.checkbox,
        &.fileupload {
            .umbraco-forms-tooltip {
                @apply text-[white];
            }
        }

        &.titleanddescription,
        &.titleanddesc,
        &.checkboxpolicy,
        &.richtext {
            .umbraco-forms-field-wrapper {
                p {
                    @apply text-[white];
                }
            }
        }

        &.fileupload {
            input[type="file"] {
                @apply text-[white];
            }
        }

        &.richtext {
            .help-block {
                @apply text-[white];
            }
        }

        &.multiplechoice,
        &.singlechoice {
            @apply mb-3;
            --tw-ring-color: #e90745;

            .umbraco-forms-field-wrapper {
                @apply w-max mx-auto;
            }
        }
    }

    .umbraco-forms-form {
        @apply p-0 mx-auto;

        fieldset {
            @apply mb-0 p-0;
            legend {
                @apply text-white;
            }
        }

        span.field-validation-error {
            @apply text-white !important;
        }
    }

    .umbraco-forms-submitmessage-html,
    .umbraco-forms-submitmessage {
        @apply max-w-[768px] mx-auto text-white;
    }
}

/* When form is aligned to left align everything to left */
.fancy-form-content-block.content-block
{
    &.form-align--left {
        .vebego-container {
            @apply text-left;
            h2.atm-heading {
                @apply max-w-[768px] mx-auto text-left;
            }
            .atm-paragraph {
                @apply text-left;
            }
        }
        .org-fancy-form-block {
            div.umbraco-forms-form {
                .umbraco-forms-fieldset
                {
                    > legend {
                        @apply text-left ml-0 mr-0;
                    }
                }
                .umbraco-forms-field {
                    @apply items-start;
                    div.umbraco-forms-field-wrapper {
                        @apply mx-0;
                    }
                    .umbraco-forms-tooltip,
                    .atm-form-label {
                        @apply text-left;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/fancy-form-block/fancy-form-block.css
  • Filesystem Path: src\components\04-organisms\fancy-form-block\fancy-form-block.css
  • Size: 4.6 KB

No notes defined.