<script src="../../../../javascripts/tools.js" async="async">
</script>
<div class="advantage-plus" id="advantage-plus" data-source="/data/advantage-plus.json">
    <div class="advantage-plus__content">
        <div class="advantage-plus__header">
            <div class="advantage-plus__total advantage-plus__total--visible">
                <h4 class="advantage-plus__kicker">Mein hkk-Leistungsvorteil</h4><span class="advantage-plus__price">{{ totalAmountAsCurrency }}</span>
            </div>
            <div class="advantage-plus__total advantage-plus__total--sticky" v-bind:class="{ &quot;advantage-plus__total--visible&quot;: stickyHeader }">
                <h4 class="advantage-plus__kicker">Mein hkk-Leistungsvorteil</h4><span class="advantage-plus__price">{{ totalAmountAsCurrency }}</span>
            </div>
            <div class="advantage-plus__intro">
                <h4 class="advantage-plus__kicker">Versicherte Personen auswählen</h4>
                <label class="checkbox advantage-plus__checkbox">
          <input class="checkbox__input" type="checkbox" value="0" v-model="checkedAdults"/><span class="advantage-plus__indicator advantage-plus__indicator--adult"></span>
        </label>
                <label class="checkbox advantage-plus__checkbox">
          <input class="checkbox__input" type="checkbox" value="1" v-model="checkedAdults"/><span class="advantage-plus__indicator advantage-plus__indicator--adult"></span>
        </label>
                <label class="checkbox advantage-plus__checkbox">
          <input class="checkbox__input" type="checkbox" value="2" v-model="checkedChildren"/><span class="advantage-plus__indicator advantage-plus__indicator--child"></span>
        </label>
                <label class="checkbox advantage-plus__checkbox">
          <input class="checkbox__input" type="checkbox" value="3" v-model="checkedChildren"/><span class="advantage-plus__indicator advantage-plus__indicator--child"></span>
        </label>
                <label class="checkbox advantage-plus__checkbox">
          <input class="checkbox__input" type="checkbox" value="4" v-model="checkedChildren"/><span class="advantage-plus__indicator advantage-plus__indicator--child"></span>
        </label>
            </div>
        </div>
        <div class="advantage-plus__body">
            <ul class="advantage-plus__menu">
                <li class="advantage-plus__menu-item" v-for="(item, menuIndex) in menuItems" v-bind:class="{ expanded: isSet(item.id, expandedMenuItems) }"><span class="advantage-plus__menu-item-toggle advantage-plus__menu-item-toggle--top advantage-plus__menu-item-toggle--collapsed" v-on:click="toggleMenuItem(item.id)">
            <svg class="symbol advantage-plus__menu-item-toggle-icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-down"></use>
            </svg></span><span class="advantage-plus__menu-item-toggle advantage-plus__menu-item-toggle--top advantage-plus__menu-item-toggle--expanded" v-on:click="toggleMenuItem(item.id)">
            <svg class="symbol advantage-plus__menu-item-toggle-icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-up"></use>
            </svg></span>
                    <div class="advantage-plus__menu-item-heading" v-on:click="toggleMenuItem(item.id)">
                        <div class="advantage-plus__menu-item-title">{{ item.title }}</div>
                        <div class="advantage-plus__menu-item-price" v-bind:class="{ &quot;advantage-plus__menu-item-price--checked&quot;: isAnySet(item.subitems, checkedServices) }">{{ subtotalAmountsAsCurrency[menuIndex] }}</div>
                    </div>
                    <template v-if="item.subitems">
            <ul class="advantage-plus__menu">
              <li class="advantage-plus__menu-item advantage-plus__menu-item--sub" v-for="(subitem, index) in item.subitems" v-bind:class="{ expanded: isSet(item.id + index, expandedMenuItems), &quot;advantage-plus__menu-item--last&quot;: index + 1 === item.subitems.length &amp;&amp; menuIndex + 1 === menuItems.length }"><span class="advantage-plus__menu-item-toggle advantage-plus__menu-item-toggle--collapsed" v-on:click="toggleMenuItem(item.id + index)">
                  <svg class="symbol advantage-plus__menu-item-toggle-icon" aria-hidden="true">
                    <use xlink:href="#icon-arrow-down"></use>
                  </svg></span><span class="advantage-plus__menu-item-toggle advantage-plus__menu-item-toggle--expanded" v-on:click="toggleMenuItem(item.id + index)">
                  <svg class="symbol advantage-plus__menu-item-toggle-icon" aria-hidden="true">
                    <use xlink:href="#icon-arrow-up"></use>
                  </svg></span>
                <div class="advantage-plus__menu-item-content" v-on:click="toggleMenuItem(item.id + index)">
                  <div class="advantage-plus__menu-text" v-html="subitem.title"></div>
                  <label class="checkbox checkbox--right advantage-plus__menu-item-checkbox" v-bind:class="{ &quot;advantage-plus__menu-item-checkbox--checked&quot;: isSet(subitem.value, checkedServices) }">
                    <input class="checkbox__input" type="checkbox" v-bind:value="subitem.value" v-model="checkedServices"/><span class="checkbox__indicator"></span><span class="checkbox__label">{{ subitem.label }}</span>
                  </label>
                </div>
                <ul class="advantage-plus__menu">
                  <li class="advantage-plus__menu-item">
                    <div class="advantage-plus__menu-item-content advantage-plus__menu-item-text">
                      <p class="advantage-plus__text formatted-text" v-html="subitem.text"></p>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </template>
                </li>
            </ul>
        </div>
        <div class="advantage-plus__row">
            <div class="advantage-plus__total advantage-plus__total--closing">
                <h4 class="advantage-plus__kicker">Mein hkk-Leistungsvorteil</h4><span class="advantage-plus__price">{{ totalAmountAsCurrency }}</span>
            </div>
        </div>
        <footer class="advantage-plus__footer">
            <ul class="advantage-plus__footer-list">
                <li class="advantage-plus__footer-list-item"><a class="button button--blue button--transparent" href="#">Infos anfordern</a></li>
                <li class="advantage-plus__footer-list-item"><a class="button button--blue" href="#">Jetzt wechseln</a></li>
            </ul>
        </footer>
    </div>
</div>
if script
  script(src=`${relativeRoot}javascripts/tools.js`, async)

#advantage-plus.advantage-plus(data-source='/data/advantage-plus.json')
  .advantage-plus__content
    .advantage-plus__header
      .advantage-plus__total.advantage-plus__total--visible
        h4.advantage-plus__kicker Mein hkk-Leistungsvorteil
        span.advantage-plus__price {{ totalAmountAsCurrency }}

      .advantage-plus__total.advantage-plus__total--sticky(v-bind:class='{ "advantage-plus__total--visible": stickyHeader }')
        h4.advantage-plus__kicker Mein hkk-Leistungsvorteil
        span.advantage-plus__price {{ totalAmountAsCurrency }}

      .advantage-plus__intro
        h4.advantage-plus__kicker Versicherte Personen auswählen
        label.checkbox.advantage-plus__checkbox
          input.checkbox__input(type='checkbox', value='0', v-model='checkedAdults')
          span.advantage-plus__indicator.advantage-plus__indicator--adult

        label.checkbox.advantage-plus__checkbox
          input.checkbox__input(type='checkbox', value='1', v-model='checkedAdults')
          span.advantage-plus__indicator.advantage-plus__indicator--adult

        label.checkbox.advantage-plus__checkbox
          input.checkbox__input(type='checkbox', value='2', v-model='checkedChildren')
          span.advantage-plus__indicator.advantage-plus__indicator--child

        label.checkbox.advantage-plus__checkbox
          input.checkbox__input(type='checkbox', value='3', v-model='checkedChildren')
          span.advantage-plus__indicator.advantage-plus__indicator--child

        label.checkbox.advantage-plus__checkbox
          input.checkbox__input(type='checkbox', value='4', v-model='checkedChildren')
          span.advantage-plus__indicator.advantage-plus__indicator--child

    .advantage-plus__body
      ul.advantage-plus__menu
        li.advantage-plus__menu-item(v-for='(item, menuIndex) in menuItems', v-bind:class='{ expanded: isSet(item.id, expandedMenuItems) }')
          span.advantage-plus__menu-item-toggle.advantage-plus__menu-item-toggle--top.advantage-plus__menu-item-toggle--collapsed(v-on:click='toggleMenuItem(item.id)')
            svg.symbol.advantage-plus__menu-item-toggle-icon(aria-hidden='true')
              use(xlink:href='#icon-arrow-down')
          span.advantage-plus__menu-item-toggle.advantage-plus__menu-item-toggle--top.advantage-plus__menu-item-toggle--expanded(v-on:click='toggleMenuItem(item.id)')
            svg.symbol.advantage-plus__menu-item-toggle-icon(aria-hidden='true')
              use(xlink:href='#icon-arrow-up')

          .advantage-plus__menu-item-heading(v-on:click='toggleMenuItem(item.id)')
            .advantage-plus__menu-item-title {{ item.title }}
            .advantage-plus__menu-item-price(v-bind:class='{ "advantage-plus__menu-item-price--checked": isAnySet(item.subitems, checkedServices) }') {{ subtotalAmountsAsCurrency[menuIndex] }}
          
          template(v-if='item.subitems')
            ul.advantage-plus__menu
              li.advantage-plus__menu-item.advantage-plus__menu-item--sub(v-for='(subitem, index) in item.subitems', v-bind:class='{ expanded: isSet(item.id + index, expandedMenuItems), "advantage-plus__menu-item--last": index + 1 === item.subitems.length && menuIndex + 1 === menuItems.length }')
                span.advantage-plus__menu-item-toggle.advantage-plus__menu-item-toggle--collapsed(v-on:click='toggleMenuItem(item.id + index)')
                  svg.symbol.advantage-plus__menu-item-toggle-icon(aria-hidden='true')
                    use(xlink:href='#icon-arrow-down')
                span.advantage-plus__menu-item-toggle.advantage-plus__menu-item-toggle--expanded(v-on:click='toggleMenuItem(item.id + index)')
                  svg.symbol.advantage-plus__menu-item-toggle-icon(aria-hidden='true')
                    use(xlink:href='#icon-arrow-up')
        
                .advantage-plus__menu-item-content(v-on:click='toggleMenuItem(item.id + index)')
                  .advantage-plus__menu-text(v-html='subitem.title')
                  label.checkbox.checkbox--right.advantage-plus__menu-item-checkbox(v-bind:class='{ "advantage-plus__menu-item-checkbox--checked": isSet(subitem.value, checkedServices) }')
                    input.checkbox__input(type='checkbox', v-bind:value='subitem.value', v-model='checkedServices')
                    span.checkbox__indicator
                    span.checkbox__label {{ subitem.label }}
                
                ul.advantage-plus__menu
                  li.advantage-plus__menu-item
                    .advantage-plus__menu-item-content.advantage-plus__menu-item-text
                      p.advantage-plus__text.formatted-text(v-html='subitem.text')
    
    .advantage-plus__row
      .advantage-plus__total.advantage-plus__total--closing
        h4.advantage-plus__kicker Mein hkk-Leistungsvorteil
        span.advantage-plus__price {{ totalAmountAsCurrency }}

    footer.advantage-plus__footer
      ul.advantage-plus__footer-list
        li.advantage-plus__footer-list-item: a.button.button--blue.button--transparent(href='#') Infos anfordern
        li.advantage-plus__footer-list-item: a.button.button--blue(href='#') Jetzt wechseln
{
  "script": true
}
  • Content:
    $advantage-plus-box: 2rem 2rem 1rem;
    $advantage-plus-row-color: $color-steelgrey-light;
    
    $advantage-plus-person-icon-height: 4rem;
    $advantage-plus-person-icon-width: 2.5rem;
    
    $advantage-plus-m-padding: 1.5rem;
    $advantage-plus-menu-item-toggle-icon-size: 1.5rem;
    
    .advantage-plus {
      background-color: $color-steelgrey-xlight;
    
      &__total {
        background-color: $color-steelgrey-light;
        display: none;
        padding: $advantage-plus-box;
        text-align: right;
      }
    
      &__total--visible {
        display: block;
      }
    
      &__total--closing {
        display: none;
      }
    
      &__total--sticky {
        bottom: 0;
        left: 0;
        position: fixed;
        width: 100%;
        z-index: z('header');
      }
    
      &__kicker {
        font-size: 1.3rem;
        font-weight: normal;
        margin-bottom: 1rem;
      }
    
      &__intro {
        border-bottom: 5px solid $advantage-plus-row-color;
        margin: $advantage-plus-box;
        padding-bottom: 1rem;
      }
    
      &__price {
        color: $color-blue;
        font-size: 3rem;
        font-weight: bold;
    
        position: relative;
        top: -1.25rem;
      }
    
      &__body {
        font-size: 1.25rem;
        padding: 0 2rem 1rem;
      }
    
      &__footer {
        background-color: $color-steelgrey-light;
        padding: $advantage-plus-box;
        text-align: right;
      }
    
      &__footer-list {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    
      &__footer-list-item {
        display: inline-block;
        margin: 5px;
      }
    
      &__text {
        cursor: default;
        margin: 0;
        padding-bottom: 1rem;
        padding-left: 2.5rem;
      }
    
      &__text a {
        font-weight: bold;
      }
    
      &__row {
        @include clearfix();
      }
    
      &__menu {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    
      &__menu-text {
        color: $color-blue;
        float: left;
        max-width: 45%;
        user-select: none;
        word-wrap: break-word;
      }
    
      &__menu-item-title {
        color: $color-blue;
        font-weight: bold;
        user-select: none;
      }
    
      &__menu-item-price {
        color: $color-steelgrey-dark;
        display: none;
        font-weight: bold;
        position: absolute;
        right: 4.5rem;
        top: 10px;
      }
    
      &__menu-item-price--checked {
        color: $color-anthracite;
      }
    
      &__menu-item .expanded > &__menu-item-toggle--collapsed {
        display: none;
      }
    
      &__menu-item .expanded > &__menu-item-toggle--expanded {
        display: block;
      }
    
      &__menu-item .expanded > .advantage-plus__menu {
        display: block;
      }
    
      &__menu-item .expanded .advantage-plus__menu-item-text {
        border: 0;
      }
    
      &__menu-item--sub > .advantage-plus__menu {
        display: none;
      }
    
      &__menu-item--sub > .advantage-plus__menu-item-toggle {
        margin-top: 4px;
      }
    
      &__menu-item--last {
        border: 0;
      }
    
      &__menu-item:hover {
        cursor: pointer;
      }
    
      &__menu-item-toggle {
        color: $link-default-color;
        float: left;
        margin-right: 10px;
        margin-top: 8px;
      }
    
      &__menu-item-toggle--expanded,
      &__menu-item-toggle--top {
        display: none;
      }
    
      &__menu-item-toggle-icon {
        height: $advantage-plus-menu-item-toggle-icon-size;
        width: $advantage-plus-menu-item-toggle-icon-size;
      }
    
      &__menu-item-heading,
      &__menu-item-content {
        @include clearfix();
    
        border-top: 1px solid $advantage-plus-row-color;
        padding: 5px 0;
        position: relative;
      }
    
      &__menu-item-checkbox {
        color: $color-steelgrey-dark;
        position: absolute;
        right: 0;
      }
    
      &__menu-item-checkbox--checked {
        color: $color-anthracite;
      }
    
      @include mq($from: m) {
        background-color: #fff;
        border: 5px solid $color-steelgrey-light;
        padding: 4rem;
    
        &__content {
          background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 65%, rgba(238, 241, 243, 1) 65%, rgba(238, 241, 243, 1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr=$color-steelgrey-xlight, GradientType=1);
        }
    
        &__kicker {
          font-size: 1rem;
        }
    
        &__intro {
          margin: 1rem 0;
          padding: $advantage-plus-m-padding;
        }
    
        &__total {
          background: none;
          float: right;
          padding: $advantage-plus-m-padding $advantage-plus-m-padding 0;
          width: 35%;
        }
    
        &__total--closing {
          display: block;
        }
    
        &__price {
          font-size: 2rem;
          top: -1rem;
        }
    
        &__text {
          width: 60%;
        }
    
        &__body {
          font-size: 1.5rem;
          padding: 0;
        }
    
        &__footer {
          background-color: #fff;
          padding: 3.5rem 0 0;
        }
    
        &__menu-item {
          .advantage-plus__menu {
            display: none;
          }
    
          &-heading {
            padding: 10px 0;
          }
    
          &-title {
            margin-left: 2.5rem;
          }
    
          &-price {
            display: block;
          }
    
          &-checkbox {
            right: $advantage-plus-m-padding;
          }
    
          &-toggle {
            display: block;
          }
    
          &-toggle--collapsed {
            display: block;
          }
    
          &-toggle--expanded {
            display: none;
          }
    
          &--sub {
            margin-left: 2.5rem;
          }
    
          &--last {
            border-bottom: 1px solid $advantage-plus-row-color;
          }
    
          &.expanded > .advantage-plus__menu {
            display: block;
          }
    
          &.expanded > &-toggle--collapsed {
            display: none;
          }
    
          &.expanded > &-toggle--expanded {
            display: block;
          }
        }
      }
    
      @include mq($from: l) {
        &__kicker {
          font-size: 1.5rem;
        }
    
        &__price {
          font-size: 3rem;
        }
      }
    }
    
    .advantage-plus__checkbox {
      min-height: $advantage-plus-person-icon-height;
      padding-left: $advantage-plus-person-icon-width;
    
      + .checkbox {
        margin: 0;
      }
    }
    
    .advantage-plus__indicator {
      height: $advantage-plus-person-icon-height;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      user-select: none;
      width: $advantage-plus-person-icon-width;
    
      &::after {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 15px 40px;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }
    
    .advantage-plus__indicator--adult {
      @mixin checkbox-unchecked-svg($color: $color-blue) {
        background-image: svg-url('<?xml version="1.0" encoding="UTF-8"?>
        <svg viewBox="0 0 13 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="2-Globale-Elemente" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Icon/adult_normal" fill-rule="nonzero" fill="' + $color + '">
                    <g id="Group-7-Copy">
                        <path d="M7.172,34.4491579 L7.17478281,34.3964918 C7.1729669,34.4134899 7.172,34.4310525 7.172,34.4491579 Z M7.20419412,34.0661053 L8.92056077,17.8698947 L10.919,17.8698947 C11.2067049,17.8698947 11.4456028,17.6634879 11.4882334,17.4339747 L10.317,9.90609711 L10.317,9.79010526 C10.317,9.59159135 10.1161114,9.41336842 9.74,9.41336842 L3.252,9.41336842 C2.87738858,9.41336842 2.676,9.59203494 2.676,9.79010526 L2.676,9.90590252 L1.50674408,17.433851 C1.54932283,17.6634383 1.78837868,17.8698947 2.077,17.8698947 L4.07343923,17.8698947 L5.78980588,34.0661053 L7.20419412,34.0661053 Z M11.817,9.79010526 L12.995,17.3614737 C12.995,18.4471579 12.065,19.3698947 10.919,19.3698947 L10.27,19.3698947 L8.672,34.4491579 C8.672,35.1085263 8.105,35.5661053 7.406,35.5661053 L5.588,35.5661053 C4.889,35.5661053 4.322,35.1085263 4.322,34.4491579 L2.724,19.3698947 L2.077,19.3698947 C0.93,19.3698947 0,18.4471579 0,17.3614737 L1.176,9.79010526 C1.176,8.70347368 2.106,7.91336842 3.252,7.91336842 L9.74,7.91336842 C10.888,7.91336842 11.817,8.70347368 11.817,9.79010526 Z" id="Shape"></path>
                        <path d="M6.497,5.09557895 C7.60866936,5.09557895 8.478,4.27200255 8.478,3.29778947 C8.478,2.32357639 7.60866936,1.5 6.497,1.5 C5.38533064,1.5 4.516,2.32357639 4.516,3.29778947 C4.516,4.27200255 5.38533064,5.09557895 6.497,5.09557895 Z M6.497,6.59557895 C4.57449679,6.59557895 3.016,5.11910831 3.016,3.29778947 C3.016,1.47647064 4.57449679,0 6.497,0 C8.41950321,0 9.978,1.47647064 9.978,3.29778947 C9.978,5.11910831 8.41950321,6.59557895 6.497,6.59557895 Z" id="Oval"></path>
                    </g>
                </g>
            </g>
        </svg>');
      }
    
      @mixin checkbox-checked-svg($color: $color-blue) {
        background-image: svg-url('<?xml version="1.0" encoding="UTF-8"?>
        <svg viewBox="0 0 13 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="2-Globale-Elemente" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Icon/adult_active" fill="' + $color + '">
                    <g id="Group-7">
                        <path d="M11.817,9.79010526 C11.817,8.70347368 10.888,7.91336842 9.74,7.91336842 L3.252,7.91336842 C2.106,7.91336842 1.176,8.70347368 1.176,9.79010526 L0,17.3614737 C0,18.4471579 0.93,19.3698947 2.077,19.3698947 L2.724,19.3698947 L4.322,34.4491579 C4.322,35.1085263 4.889,35.5661053 5.588,35.5661053 L7.406,35.5661053 C8.105,35.5661053 8.672,35.1085263 8.672,34.4491579 L10.27,19.3698947 L10.919,19.3698947 C12.065,19.3698947 12.995,18.4471579 12.995,17.3614737 L11.817,9.79010526 Z" id="Shape"></path>
                        <ellipse id="Oval" cx="6.497" cy="3.29778947" rx="3.481" ry="3.29778947"></ellipse>
                    </g>
                </g>
            </g>
        </svg>');
      }
    
      // Focus
      .checkbox__input:not([disabled]):focus ~ &::after {
        @include checkbox-unchecked-svg;
      }
    
      // Hover, Checked
      .checkbox__input:not([disabled]):hover ~ &::after,
      .checkbox__input:not([disabled]):checked ~ &::after {
        @include checkbox-checked-svg;
      }
    
      // Default
      &::after {
        @include checkbox-unchecked-svg;
      }
    }
    
    .advantage-plus__indicator--child {
      @mixin checkbox-unchecked-svg($color: $color-blue) {
        background-image: svg-url('<?xml version="1.0" encoding="UTF-8"?>
        <svg viewBox="0 0 13 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="2-Globale-Elemente" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Icon/child_normal" fill-rule="nonzero" fill="' + $color + '">
                    <g id="Group-7-Copy-5" transform="translate(1.000000, 7.000000)">
                        <path d="M5.93569789,27.0661053 C6.02048449,26.3003115 6.22496586,24.8104994 6.55439648,22.4911731 C6.57034323,22.378938 6.57034323,22.378938 6.58629923,22.2667789 C6.73546838,21.2185488 6.89525001,20.1089292 7.05502612,19.0081383 C7.11094377,18.622889 7.16286918,18.2662433 7.20947336,17.9469912 C7.25742332,17.6188343 7.25742332,17.6188343 7.26812407,17.5458462 L7.45613843,16.2634352 L9.30534669,16.2634352 C9.42915946,16.2634352 9.53240812,16.1835775 9.56433698,16.1021946 L8.57063668,9.71537705 L8.57063668,9.5993852 C8.57063668,9.5589399 8.50420105,9.5 8.30058401,9.5 L2.77140649,9.5 C2.56906778,9.5 2.50220604,9.55931793 2.50220604,9.5993852 L2.50220604,9.71518245 L1.51017733,16.1020998 C1.54208729,16.1835217 1.64550507,16.2634352 1.77005267,16.2634352 L3.62833238,16.2634352 L5.12176811,27.0661053 L5.93569789,27.0661053 Z M10.0706367,9.5993852 L11.0745471,16.0518266 C11.0745471,16.9770641 10.2819863,17.7634352 9.30534669,17.7634352 L8.7522585,17.7634352 C8.7522585,17.7634352 7.3904173,27.0523005 7.3904173,27.6142248 C7.3904173,28.1761492 6.90721082,28.5661053 6.31151183,28.5661053 L4.76218311,28.5661053 C4.16648411,28.5661053 3.68327763,28.1761492 3.68327763,27.6142248 L2.32143643,17.7634352 L1.77005267,17.7634352 C0.792560896,17.7634352 0,16.9770641 0,16.0518266 L1.00220604,9.5993852 C1.00220604,8.67334036 1.79476693,8 2.77140649,8 L8.30058401,8 C9.278928,8 10.0706367,8.67334036 10.0706367,9.5993852 Z" id="Shape"></path>
                        <path d="M5.481,5.09557895 C6.59266936,5.09557895 7.462,4.27200255 7.462,3.29778947 C7.462,2.32357639 6.59266936,1.5 5.481,1.5 C4.36933064,1.5 3.5,2.32357639 3.5,3.29778947 C3.5,4.27200255 4.36933064,5.09557895 5.481,5.09557895 Z M5.481,6.59557895 C3.55849679,6.59557895 2,5.11910831 2,3.29778947 C2,1.47647064 3.55849679,0 5.481,0 C7.40350321,0 8.962,1.47647064 8.962,3.29778947 C8.962,5.11910831 7.40350321,6.59557895 5.481,6.59557895 Z" id="Oval"></path>
                    </g>
                </g>
            </g>
        </svg>');
      }
    
      @mixin checkbox-checked-svg($color: $color-blue) {
        background-image: svg-url('<?xml version="1.0" encoding="UTF-8"?>
        <svg viewBox="0 0 13 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="2-Globale-Elemente" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Icon/child_aktive" fill="' + $color + '">
                    <g id="Group-7-Copy-6" transform="translate(1.000000, 7.000000)">
                        <path d="M10.0706367,9.5993852 C10.0706367,8.67334036 9.278928,8 8.30058401,8 L2.77140649,8 C1.79476693,8 1.00220604,8.67334036 1.00220604,9.5993852 L0,16.0518266 C0,16.9770641 0.792560896,17.7634352 1.77005267,17.7634352 L2.32143643,17.7634352 L3.68327763,27.6142248 C3.68327763,28.1761492 4.16648411,28.5661053 4.76218311,28.5661053 L6.31151183,28.5661053 C6.90721082,28.5661053 7.3904173,28.1761492 7.3904173,27.6142248 C7.3904173,27.0523005 8.7522585,17.7634352 8.7522585,17.7634352 L9.30534669,17.7634352 C10.2819863,17.7634352 11.0745471,16.9770641 11.0745471,16.0518266 L10.0706367,9.5993852 Z" id="Shape"></path>
                        <ellipse id="Oval" cx="5.481" cy="3.29778947" rx="3.481" ry="3.29778947"></ellipse>
                    </g>
                </g>
            </g>
        </svg>');
      }
    
      // Focus
      .checkbox__input:not([disabled]):focus ~ &::after {
        @include checkbox-unchecked-svg;
      }
    
      // Hover, Checked
      .checkbox__input:not([disabled]):hover ~ &::after,
      .checkbox__input:not([disabled]):checked ~ &::after {
        @include checkbox-checked-svg;
      }
    
      // Default
      &::after {
        @include checkbox-unchecked-svg;
      }
    }
    
  • URL: /components/raw/advantage-plus/advantage-plus.scss
  • Filesystem Path: src/components/organisms/advantage-plus/advantage-plus.scss
  • Size: 13.8 KB
  • Handle: @advantage-plus
  • Preview:
  • Filesystem Path: src/components/organisms/advantage-plus/advantage-plus.pug

There are no notes for this item.