hkk Frontend 2017

Störer: Kleine Variante 

<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Warum wechseln?
                </h2>
            </div>
            <div class="breaker__content">
                <p>Die hkk ist die günstigste Krankenkasse in ganz Deutschland.</p>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <a class="button button--white-red" id="button-20aa" href="#">Vorteil berechnen
</a>
                </div>
            </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": "small",
    "color": "red",
    "headline": {
      "text": "Warum wechseln?"
    },
    "content": "p Die hkk ist die günstigste Krankenkasse in ganz Deutschland.\n",
    "buttons": [
      {
        "text": "Vorteil berechnen",
        "color": "white-red",
        "link": "#"
      }
    ]
  },
  "right": 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.