DIA Frontend

Forms 

<div class="container mt-3 mb-3">
    <div class="form-element form-element-datapolicy-2 form-element-type-checkbox form-group">
        <div class="custom-control custom-checkbox">
            <input type="hidden" name="checkbox" value="" />
            <input required="required" class="custom-control-input" id="checkbox" type="checkbox" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][datapolicy-2]" value="1" />
            <label class="custom-control-label" for="checkbox">
                <span>
                    Yes, I accept the further processing of my data<span class="required">*</span>
                </span>
            </label>
            <small class="form-text text-muted">
                I authorize lorem ipsum to contact me about products and
                services which may be of interest for me.
            </small>
        </div>
    </div>

    <div class="form-element form-element-shirtSize form-element-type-radio-button form-group">
        <div class="custom-radio-multiple">
            <label for="satislohAcademyRegistrationUSACanada-323-shirtSize">
                Size
                <span class="required">*</span>
            </label>

            <div id="satislohAcademyRegistrationUSACanada-323-shirtSize" class="form-check-list">
                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-0" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="Small" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-0">
                        <span>Small</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-1" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="Medium" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-1">
                        <span>Medium</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-2" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="Large" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-2">
                        <span>Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-3" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="X-Large" checked="checked" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-3">
                        <span>X-Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-4" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="XX-Large" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-4">
                        <span>XX-Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required" class="custom-control-input form-check-input" id="satislohAcademyRegistrationUSACanada-323-shirtSize-5" type="radio" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]" value="XXX-Large" />
                    <label class="custom-control-label" for="satislohAcademyRegistrationUSACanada-323-shirtSize-5">
                        <span>XXX-Large</span>
                    </label>
                </div>
            </div>

            <small class="form-text text-muted">Choose size</small>
        </div>
    </div>

    <div class="form-row row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <fieldset id="satislohAcademyRegistrationUSACanada-323-fieldset-1" class="form-fieldset form-fieldset-fieldset-1">
                <div class="form-fieldset-inner">
                    <div class="form-element form-element-company form-element-type-text form-group">
                        <div class="input">
                            <label for="satislohAcademyRegistrationUSACanada-323-company">
                                Company Name
                                <span class="required">*</span>
                            </label>

                            <input placeholder="" required="required" class="form-control" id="satislohAcademyRegistrationUSACanada-323-company" type="text" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][company]" value="DIA die.interaktiven" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <fieldset id="satislohAcademyRegistrationUSACanada-323-fieldset-2" class="form-fieldset form-fieldset-fieldset-2">
                <div class="form-fieldset-inner">
                    <div class="form-element form-element-accountNumber form-element-type-text form-group">
                        <div class="input">
                            <label for="satislohAcademyRegistrationUSACanada-323-accountNumber">
                                Account Number
                            </label>

                            <input placeholder="" class="form-control" id="satislohAcademyRegistrationUSACanada-323-accountNumber" type="text" name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][accountNumber]" value="" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
 
<div class="container mt-3 mb-3">
    <div class="form-element form-element-datapolicy-2 form-element-type-checkbox form-group">
        <div class="custom-control custom-checkbox">
            <input type="hidden" name="checkbox" value="" />
            <input required="required"
                class="custom-control-input"
                id="checkbox"
                type="checkbox"
                name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][datapolicy-2]"
                value="1" />
            <label class="custom-control-label" for="checkbox">
                <span>
                    Yes, I accept the further processing of my data<span class="required">*</span>
                </span>
            </label>
            <small class="form-text text-muted">
                I authorize lorem ipsum to contact me about products and
                services which may be of interest for me.
            </small>
        </div>
    </div>

    <div class="form-element form-element-shirtSize form-element-type-radio-button form-group">
        <div class="custom-radio-multiple">
            <label for="satislohAcademyRegistrationUSACanada-323-shirtSize">
                Size
                <span class="required">*</span>
            </label>

            <div id="satislohAcademyRegistrationUSACanada-323-shirtSize"
                class="form-check-list">
                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-0"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="Small" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-0">
                        <span>Small</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-1"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="Medium" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-1">
                        <span>Medium</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-2"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="Large" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-2">
                        <span>Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-3"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="X-Large"
                        checked="checked" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-3">
                        <span>X-Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-4"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="XX-Large" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-4">
                        <span>XX-Large</span>
                    </label>
                </div>

                <div class="custom-control custom-radio">
                    <input required="required"
                        class="custom-control-input form-check-input"
                        id="satislohAcademyRegistrationUSACanada-323-shirtSize-5"
                        type="radio"
                        name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][shirtSize]"
                        value="XXX-Large" />
                    <label class="custom-control-label"
                        for="satislohAcademyRegistrationUSACanada-323-shirtSize-5">
                        <span>XXX-Large</span>
                    </label>
                </div>
            </div>

            <small class="form-text text-muted">Choose size</small>
        </div>
    </div>

    <div class="form-row row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <fieldset id="satislohAcademyRegistrationUSACanada-323-fieldset-1"
                class="form-fieldset form-fieldset-fieldset-1">
                <div class="form-fieldset-inner">
                    <div class="form-element form-element-company form-element-type-text form-group">
                        <div class="input">
                            <label for="satislohAcademyRegistrationUSACanada-323-company">
                                Company Name
                                <span class="required">*</span>
                            </label>

                            <input placeholder=""
                                required="required"
                                class="form-control"
                                id="satislohAcademyRegistrationUSACanada-323-company"
                                type="text"
                                name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][company]"
                                value="DIA die.interaktiven" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <fieldset id="satislohAcademyRegistrationUSACanada-323-fieldset-2"
                class="form-fieldset form-fieldset-fieldset-2">
                <div class="form-fieldset-inner">
                    <div class="form-element form-element-accountNumber form-element-type-text form-group">
                        <div class="input">
                            <label for="satislohAcademyRegistrationUSACanada-323-accountNumber">
                                Account Number
                            </label>

                            <input placeholder=""
                                class="form-control"
                                id="satislohAcademyRegistrationUSACanada-323-accountNumber"
                                type="text"
                                name="tx_form_formframework[satislohAcademyRegistrationUSACanada-323][accountNumber]"
                                value="" />
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .custom-radio-multiple .form-text {
  padding-left: 35px;
}

/* Customize the label (the container) */
.custom-control {
  display: block;
  padding-left: 0;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;

  &::after {
    clear: both;
    content: "";
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    width: 0;
    height: 0;
    cursor: pointer;
    opacity: 0;
  }

  .custom-control-input ~ .custom-control-label {
    position: unset;
    padding-left: 35px;
    line-height: 25px;
    cursor: pointer;

    /* Create a custom checkbox */
    &::before {
      @include position(absolute, 0 null null 0);
      width: 25px;
      height: 25px;
      content: "";
      background-color: $gray-200;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
  }

  /* On mouse-over & focus, add a grey background color */
  .custom-control-input:focus ~ .custom-control-label::before,
  &:hover .custom-control-input ~ .custom-control-label::before {
    background-color: $gray-300;
  }

  /* When the checkbox is checked, add a blue background */
  .custom-control-input:checked ~ .custom-control-label::before {
    background-color: $primary;
  }

  /* Style the checkmark/indicator */
  .custom-control-input ~ .custom-control-label::after {
    /* Create the checkmark/indicator (hidden when not checked) */
    display: none;
    content: "";
  }

  .custom-control-input[type="checkbox"] ~ .custom-control-label::after {
    @include position(absolute, 7px null null 10px);
    width: 5px;
    height: 10px;
    border: solid $white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

  /* Show the checkmark when checked */
  .custom-control-input:checked ~ .custom-control-label::after {
    display: block;
  }

  .custom-control-input[type="radio"] ~ .custom-control-label {
    &::before {
      border: none;
      border-radius: 50%;
      box-shadow: none;
    }

    &::after {
      @include position(absolute, 8px null null 8px);
      width: 9px;
      height: 9px;
      background: $white;
      border-radius: 50%;
    }
  }
}
  • URL: /components/raw/plugin-forms/_style.scss
  • Filesystem Path: ../template/components/03-typo3/plugin/forms/_style.scss
  • Size: 2.1 KB

No notes defined.