hkk Frontend 2017

Störer: Formular (wide) 

<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--large breaker__side--wide">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2"><span class="headline__kicker"><span class="headline__kicker-text">Newsletter<span class="u-hidden-visually">: </span></span>
                    </span>Kostenlos alle 14 Tage die interessantesten Gesundheitsinfos
                </h2>
            </div>
            <div class="breaker__content">
                <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                    <div class="form__inner">
                        <div class="form-group">
                            <label class="label" for="email-address"></label>
                            <div class="form-group__inner">
                                <input class="input input--text" type="text" placeholder="Ihre E-Mail-Adresse" required="required" id="email-address" name="email-address" />
                            </div>
                        </div>
                        <div class="form__submit">
                            <input class="button button--blue" type="submit" value="Weiter" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="breaker__side breaker__side--small breaker__side--wide">
            <div class="breaker__icon">
                <svg class="icon icon--mail" id="icon-585d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>
            </div>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  if (autocomplete) {
    attr.class.push('breaker--autocomplete-search');
  }

//- Render breaker
.breaker&attributes(attr)
  //- Inner
  .breaker__inner
    //- Render left and right side
    each options in {left, right}
      //- Render side
      if options
        - var classes = [];
        - if (options.color) classes.push(`breaker__side--${options.color}`);
        - if (options.color && ['red', 'blue'].includes(options.color)) classes.push('u-inverted');
        - if (left && right && options.size == 'small') classes.push('breaker__side--small');
        - if (left && right && options.size == 'large') classes.push('breaker__side--large');
        - if (left && right && options.wide) classes.push('breaker__side--wide');

        .breaker__side(class=classes)
          //- Icon
          if options.icon
            .breaker__icon
              != include('@icon', { icon: options.icon })

          //- Headline
          if options.headline
            .breaker__headline
              != include(`@headline--display-${options.headline.size || 2}`, { text: options.headline.text, kicker: options.kicker, level: 2, attr: headlineAttr })

          //- Content
          if options.content
            .breaker__content
              != renderPug(options.content)

          //- Buttons
          if options.buttons
            //- Button group
            .breaker__buttons
              each button in options.buttons
                //- Single button with/without label
                .breaker__button
                  //- Button label
                  if button.label
                    .breaker__button-label #{button.label}

                  //- Button
                  != include('@button', button)
 
{
  "left": {
    "size": "large",
    "color": null,
    "headline": {
      "text": "Kostenlos alle 14 Tage die interessantesten Gesundheitsinfos"
    },
    "content": "!= include('@form--inline', { submit: 'Weiter', submitOptions: { modifier: 'blue' }, elements: [{ label: '', id: 'email-address', use: 'input--text', settings: { placeholder: 'Ihre E-Mail-Adresse', required: true }}] })\n",
    "wide": true,
    "kicker": "Newsletter"
  },
  "right": {
    "size": "small",
    "icon": "mail",
    "color": null,
    "headline": null,
    "buttons": null,
    "wide": true,
    "content": null
  }
}
  • Content: 
    $breaker-breakpoint: 768px;

// Breaker container
.breaker {
  margin-bottom: 1rem;
  overflow: hidden;

  @include mq($from: m) {
    margin-bottom: 2rem;
  }

  @include mq($from: l) {
    margin-bottom: 6rem;
  }
}

// Hacky non-BEM-way because of backend integration
// TODO: Refactor
.breaker-full-width {
  margin-bottom: 1rem;

  @include mq($from: m) {
    margin-bottom: 2rem;
  }

  @include mq($from: l) {
    margin-bottom: 6rem;
  }

  @include mq($from: xl) {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// Inner max-width container
.breaker__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: $page-inner-max-width;

  @include mq($from: $breaker-breakpoint) {
    display: flex;
  }
}

// Side
.breaker__side {
  background-color: $color-steelgrey-light;
  padding: 2rem 2rem 1rem;
  position: relative;

  &:not(:only-child) {
    padding: 3rem 3.5rem 2rem;
  }

  @include mq($from: $breaker-breakpoint) {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 100%;
  }

  @include mq($from: l) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;

    &:not(:only-child) {
      padding-left: 5rem;
      padding-right: 5rem;
    }
  }

  @include mq($from: xl) {
    &:not(:only-child) {
      padding-left: 6rem;
      padding-right: 6rem;
    }

    // Pseudo-backgrounds which fill the empty space on both edges
    &::before,
    &::after {
      background-color: $color-steelgrey-light;
    }

    &:nth-child(odd)::before,
    &:only-child::after,
    &:nth-child(even)::after {
      content: '';
      height: 100%;
      position: absolute;
      top: 0;
      width: 100vw;
    }

    &:nth-child(odd)::before {
      left: 0;
      transform: translateX(-100%) translateX(1px);
    }

    &:only-child::after,
    &:nth-child(even)::after {
      right: 0;
      transform: translateX(100%) translateX(-1px);
    }
  }
}

.breaker__side--small {
  @include mq($from: $breaker-breakpoint) {
    flex-basis: 33.33%;
    max-width: 33.33%;
  }
}

.breaker__side--large {
  @include mq($from: $breaker-breakpoint) {
    flex-basis: 66.66%;
    max-width: 66.66%;
  }
}

// Wide version
.breaker__side--wide {
  @include mq($from: xl) {
    .breaker__icon {
      right: 15rem;
    }

    &:not(:only-child) {
      padding-left: 9rem;
      padding-right: 9rem;
    }
  }
}

.breaker__side--wide.breaker__side--small {
  @include mq($until: $breaker-breakpoint) {
    padding: 0;
  }

  @include mq($from: $breaker-breakpoint) {
    flex-basis: 33.33%;
    max-width: 33.33%;
  }
}

.breaker__side--wide.breaker__side--large {
  .breaker__headline {
    max-width: 100%;
  }

  @include mq($from: $breaker-breakpoint) {
    flex-basis: 66.66%;
    max-width: 66.66%;
  }
}

// Side colors
.breaker__side--blue {
  color: rgba(#fff, 0.9);

  &,
  &::before,
  &::after {
    background-color: $color-blue;
  }
}

.breaker__side--red {
  color: rgba(#fff, 0.9);

  &,
  &::before,
  &::after {
    background-color: $color-red;
  }
}

// Icon
.breaker__icon {
  display: none;

  @include mq($from: $breaker-breakpoint) {
    display: block;
    font-size: 20rem;
    opacity: 0.1;
    position: absolute;
    right: 3.5rem;
    top: 50%;
    transform: translate(0, -50%);
    user-select: none;
  }
}

// Headline, content, buttons
.breaker__headline {
  .headline__kicker {
    color: $color-blue;
    margin: 1rem 0;
  }
}

.breaker__headline,
.breaker__content {
  margin-bottom: 1.5rem;

  @include mq($from: $breaker-breakpoint) {
    margin-bottom: 0;
  }
}

.breaker__side--large .breaker__headline {
  @include mq($from: $breaker-breakpoint) {
    max-width: 80%;
  }

  @include mq($from: xl) {
    max-width: 60%;
  }
}

.breaker__headline ~ .breaker__content > :first-child:not(p),
.breaker__headline + .breaker__buttons {
  @include mq($from: $breaker-breakpoint) {
    padding-top: 0.5rem;
  }
}

.breaker__content {
  @include mq($from: $breaker-breakpoint) {
    margin-bottom: 2rem;

    > p:last-child {
      margin-bottom: 0;
    }
  }
}

.breaker__buttons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  margin-top: 3rem;

  @include mq($from: $breaker-breakpoint) {
    margin-top: auto;
  }
}

.breaker__button {
  margin-right: 1.5rem;

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  @include mq($from: $breaker-breakpoint) {
    margin-bottom: 1rem;
  }
}

.breaker__button-label {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.breaker--autocomplete-search {
  overflow: visible;

  .form__inner .form-group {
    width: 100%;

    @include mq($from: m) { 
      width: 50%;
    }
  }
}
  • URL: /components/raw/breaker/breaker.scss
  • Filesystem Path: src/components/organisms/breaker/breaker.scss
  • Size: 4.7 KB

There are no notes for this item.