Tax Form

// src/components/patterns/tax-form/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tax-form
additionalProperties: false
required:
  - markup
properties:
  markup:
    type: string

// src/components/patterns/tax-form/mocks.yaml

markup: >
  <!-- Begin Spendenabsetzen von www.smart-rechner.de --> <div class="TaxForm"
  id="s_r_de_spenden">
    <script type="text/javascript">
      s_r_de_spenden_premium = true;
      s_r_de_spenden_theme = "snow";
      s_r_de_spenden_responsive = true;
      s_r_de_spenden_slidedown = false;
      s_r_de_spenden_openresult = false;
      s_r_de_spenden_contrastswitch = true;
      s_r_de_spenden_whitelabel = true;
      s_r_de_spenden_charts = false;
      s_r_de_spenden_title = "";
      s_r_de_spenden_adlink = "";
      s_r_de_spenden_adtext = "";
      s_r_de_spenden_adtarget = "_blank";
      s_r_de_spenden_adsize = "";
      s_r_de_spenden_adlink_requestmethod = "post";
      s_r_de_spenden_proxy_url = "";
      s_r_de_spenden_param_ausgaben = "100";
      s_r_de_spenden_param_steuerjahr = "1";
      s_r_de_spenden_param_bruttojahreseinkommen = "30000";
      s_r_de_spenden_param_kirchensteuer = "3";
    </script>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://load.smart-rechner.de/widget/spenden.js">
    </script>
  </div> <!-- End Spendenabsetzen von www.smart-rechner.de -->

// src/components/patterns/tax-form/tax-form.html.twig

<div class="TaxForm u-container u-grid" data-smart-protector="smart_rechner">
  <div class="TaxForm-content">{{ markup|raw }}</div>
  <style>
    .TaxForm-content {
      --TaxForm-grid-column: 1 / -1;

      grid-column: var(--TaxForm-grid-column);

      @media screen and (max-width: 781px) {
        display: flex;
        justify-content: center;
      }

      @media screen and (min-width:  959px) {
        --TaxForm-grid-column: 2 / 12;
      }
    }

    .TaxForm * {
      font-family: "Work Sans", sans-serif !important;
    }

    {# Reseting default styles #}
    #s_r_de_spenden1 #s_r_de_spenden2 #s_r_de_spenden3 #s_r_de_spenden4 #s_r_de_spenden5 #s_r_de_spenden {

      .ui-widget-content,
      .ui-widget-content .ui-state-hover,
      .ui-state-default,
      .ui-widget-content .ui-state-default,
      .ui-widget-header .ui-state-default {
        background: transparent;
        border: none;
      }

    {# Input styles #}
      .ui-mywidget input,
      .ui-selectmenu-button {
        background: #e9e3da !important;
        border-color: transparent !important;
        border-radius: 0.3rem !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        height: auto !important;
        outline: none !important;
        padding: 12px 16px !important;
        width: 100% !important;
      }

      .ui-clearbutton-input-wrapper {
        background: #e9e3da !important;
      }

      .ui-selectmenu-button {
        .ui-selectmenu-text {
          padding: 0 !important;
          text-align: left !important;
        }
      }

      .ui-selectmenu-menu {
        .ui-menu {
          min-width: 177px !important;

          .ui-state-active,
          .ui-state-focus {
            margin: 0 !important;
          }
        }
      }

      {# Select dropdown styles #}
      .ui-selectmenu-menu .ui-menu {
        background-color: #f8f8f8;
        border-radius: 0.3rem;
      }

      .ui-state-focus,
      .ui-widget-content .ui-state-focus {
        border: none !important;
        outline: none !important;
      }

    {# Button styles #}
      .submitButton.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
        background-color: rgb(115, 190, 30) !important;
        border-radius: calc(0.8rem* 3) !important;
        font-weight: 600 !important;
        outline: none !important;
        padding: 9px 29px !important;

        &:focus-visible {
          outline-color: -webkit-focus-ring-color !important;
          outline-offset: 0.3rem !important;
          outline-style: auto !important;
        }
      }

      .submitButton.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.ui-state-hover:hover {
        background-color: rgb(105, 178, 22) !important;
      }

      .ui-state-default span {
        color: #fff !important;
      }

    {# Tooltip helper styles #}
      .help.ui-widget-content.ui-corner-all {
        border-radius: 50% !important;
        border: 0.2rem solid #73BE1E !important;
        cursor: pointer;
        height: 1.4rem !important;
        outline: none !important;
        width: 1.4rem !important;

        &:focus-visible {
          outline-color: -webkit-focus-ring-color !important;
          outline-offset: 0.3rem !important;
          outline-style: auto !important;
        }

        &:has(.ui-icon-help) {
          .ui-icon-help {
            background: none !important;
            text-indent: 0 !important;
            text-align: center !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            color: #73BE1E !important;
            line-height: 1.6rem !important;

            &.ui-state-hover,
            &.ui-state-active{
              color: #73BE1E !important;
            }
          }
        }
      }

      .ui-mytooltip {
        background-color: rgb(240,250,230);

        .ui-mytooltip-content {
          background-color: rgb(240,250,230);
          padding: 15px !important;
          border-radius: 0.3em;
        }

        .ui-mytooltip-titlebar-title {
          font-size: 1.6rem !important;
          font-weight: 600 !important;
        }
      }

    {# Anchor styles #}
      .ui-widget-content a {
        color: rgb(115, 190, 30) !important;
        font-weight: bold !important;
        text-decoration: underline !important;

        &:hover {
          color: rgb(105, 178, 22) !important;
        }
      }

      a.brand.brand-calculator,
      a.haftung.haftung-calculator {
        font-size: 14px !important;

        @media screen and (max-width: 728px) {
          font-size: 12px !important;
        }
      }

    {# Results header #}
      .ui-widget .ui-widget-header {
        border: none;
      }

    {# Input validation errors #}
      .ui-state-error {
        font-weight: 600;
        border-radius: 0;
        box-shadow: none;
        border-color: currentColor;
        color: rgb(175, 88, 57) !important;
      }

      div.error-pointer-up {
        border-left-color: rgb(175, 88, 57) !important;
      }

      .ui-mywidget .ui-mywidget-title,
      .ui-myresult .ui-myresult-title {
        font-size: 2.4rem !important;
      }

      .ui-mywidget table {
        margin: 0 !important;
      }

      .ui-mywidget,
      .ui-mywidget td.label {
        padding: 0 !important;
      }

      .ui-myresult {
        border-radius: 0 !important;
        padding: 0 0 0 2rem !important;
        z-index: 2 !important;

        @media screen and (max-width: 781px) {
          border-top: 1px solid #313131 !important;
          margin: 2rem 0 0 !important;
          padding: 2rem 0 0 !important;
        }

        div.ergebnis,
        .ui-myresult-content {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }

      label {
        font-weight: 600;
        font-size: 1.4rem !important;
        line-height: 1.2rem !important;
      }

      .ui-mywidget input {
        border-radius: 0.3rem !important;
        box-sizing: border-box;
        text-align: left;
        transition: border-width 0.15s ease-in-out;

        &:focus {
          border-left: 2px solid #574052 !important;
        }
      }

      .ui-mywidget td.input {
        padding: 1rem 0 !important;
        margin: 0;
        border: none;
        background: none !important;
      }

      .ui-myresult table tr td.label,
      .ui-myresult table tr td.value,
      .ui-mytooltip tr.borderbottom,
      .ui-myresult tr.borderbottom {
        border-color: #313131 !important;
      }

      .ui-mytooltip .ui-mytooltip-content,
      .ui-mytooltip .ui-mytooltip-content h1,
      .ui-mytooltip .ui-mytooltip-content h2,
      .ui-mytooltip .ui-mytooltip-content p,
      .ui-mytooltip .ui-mytooltip-content span,
      .ui-mytooltip .ui-mytooltip-content caption,
      .ui-myresult,
      .ui-myresult table caption,
      .ui-myresult div,
      .ui-myresult td,
      .ui-myresult p,
      table td,
      fieldset,
      fieldset .ui-myresult h1,
      fieldset .ui-myresult h2,
      fieldset .ui-myresult p,
      fieldset .ui-myresult span:not(.ui-button-text),
      label,
      .ui-datepicker-calendar th span,
      .ui-datepicker-calendar th,
      input,
      .ui-widget-header span,
      .ui-widget-header a,
      .ui-menu .ui-menu-item,
      .ui-mywidget .ui-mywidget-title,
      .ui-mywidget .ui-selectmenu-button span.ui-selectmenu-text,
      .ui-mytooltip .ui-mytooltip-titlebar-title {
        color: #313131 !important;
      }

      *:focus-visible {
        outline-color: -webkit-focus-ring-color !important;
        outline-offset: 0.3rem !important;
        outline-style: auto !important;
      }
    }
  </style>
</div>