Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Cookie/Länderauswahl Banner

Verwendung

Der Banner wird verwendet um Hinweise oder Informationen beim Einstieg auf die Seite mitzuteilen wie z.B. rechtliche Hinweise oder Informationen zur Sprach- oder Länderauswahl.

Vorschau

HTML

                
                  <div class="browserlanguagehint pusherpanel" style="display: block;">
  <div class="pusherpanel_inner">
    <div class="row row-tabled">
      <div class="col-xs-12 col-sm-8 col-md-6 col-lg-7 col-text col-tabled">
        Wir haben erkannt, dass Ihr Browser eine andere Sprache unterstützt als die aktuell aufgerufene. Unsere Webseite ist auch in Ihrer Sprache verfügbar. Möchten Sie zu Ihrer Sprache wechseln?      </div>
      <div class="col-xs-12 col-sm-4 col-md-6 col-lg-5 col-buttons col-tabled">
        <a class="btn btn-light" href="#">Zu meiner Sprachversion wechseln</a>
        <a href="#" class="btn btn-light close">Sprache nicht wechseln</a>
      </div>
    </div>
    <div class="close_wrapper">
      <button class="close"></button>
    </div>
  </div>
</div>
<div class="main_padding"></div>

CSS

              @charset "UTF-8";
/* this is the header min height */
.main_padding {
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-top: 136px;
}

/* grid */
@media screen and (min-width: 768px) {
  .row-tabled {
    display: table;
    width: calc(100% + 30px);
    table-layout: fixed;
  }
  .row-tabled:before, .row-tabled:after {
    content: none;
  }
}

@media screen and (min-width: 768px) {
  .col-tabled {
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 100%;
  }
}

/* buttons */
.btn {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-size: .9375rem;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-bottom: 0;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  top: 0;
  transition: .2s top ease;
  vertical-align: middle;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
}
.btn:active {
  background-image: none;
  box-shadow: none;
  top: 1px;
}

.btn-primary {
  background-color: #0069b4;
  border-color: #005a9b;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #004b81;
  border-color: #00365d;
  color: #fff;
}
.btn-primary:active {
  background-image: none;
}

.btn-primary {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
  border: none;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.3);
  transition: .2s top ease, .2s box-shadow ease;
}
.btn-primary:active {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
}

.btn-light {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  color: #0069b4;
  padding: 11px 20px;
  transition: .2s color ease, .2s top ease, .2s box-shadow ease;
}
.btn-light:hover {
  color: #f9b200;
}
.btn-light:focus {
  color: #0069b4;
}
.btn-light:focus:hover {
  color: #f9b200;
}

@media screen and (max-width: 767px) {
  .btn-light {
    transition: .2s top ease, .2s box-shadow ease;
  }
}
[class^="btn-icon-"], [class*=" btn-icon-"] {
  padding-left: 50px;
  position: relative;
  /* styling for light button */
}
[class^="btn-icon-"]:before, [class*=" btn-icon-"]:before {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 17px;
  line-height: 1.0625rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
}
[class^="btn-icon-"].btn-light:before, [class*=" btn-icon-"].btn-light:before {
  color: #0069b4;
  transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
  [class^="btn-icon-"].btn-light:before, [class*=" btn-icon-"].btn-light:before {
    transition: none;
  }
}
[class^="btn-icon-"].btn-light:hover:before, [class^="btn-icon-"].btn-light:focus:before, [class^="btn-icon-"].btn-light.focus:before, [class*=" btn-icon-"].btn-light:hover:before, [class*=" btn-icon-"].btn-light:focus:before, [class*=" btn-icon-"].btn-light.focus:before {
  color: #f9b200;
}

.btn-icon-vcard {
  padding-left: 30px;
}
.btn-icon-vcard:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.btn-icon-vcard:before {
  left: 0;
}
@media screen and (max-width: 767px) {
  .btn-icon-vcard {
    display: none;
  }
}

.pusherpanel {
  background-color: #b3b3b3;
  background-image: url(/img/pusherpanel_bg.jpg);
  background-repeat: repeat;
  color: #fff;
  display: none;
  position: relative;
  width: 100%;
  padding: 25px 50px;
  padding-left: 4.5vw;
  padding-right: 4.5vw;
  z-index: 10000;
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 991px) {
  .pusherpanel {
    position: fixed;
    top: 0;
    padding: 25px 15px;
  }
}
.pusherpanel .pusherpanel_inner {
  position: relative;
  padding-right: 50px;
}
@media screen and (max-width: 767px) {
  .pusherpanel .pusherpanel_inner {
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .pusherpanel .pusherpanel_inner .col-buttons {
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  .pusherpanel .close_wrapper {
    margin-top: 20px;
    text-align: center;
  }
}
.pusherpanel button.close {
  background: none;
  border: none;
  height: 22px;
  padding: 0;
  width: 22px;
}
@media screen and (min-width: 768px) {
  .pusherpanel button.close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
}
.pusherpanel button.close:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.pusherpanel button.close:before {
  color: #fff;
  font-size: 22px;
  line-height: 22px;
}
.pusherpanel .close {
  float: none;
  opacity: unset;
}
.pusherpanel.pusherpanel-fixed {
  position: fixed;
  top: 0;
}
.pusherpanel.pusherpanel-fixed.pusherpanel-bottom {
  top: auto;
  bottom: 0;
}

.browserlanguagehint .col-buttons {
  text-align: right;
}
@media screen and (max-width: 991px) {
  .browserlanguagehint .col-buttons .btn {
    display: block;
  }
}
.browserlanguagehint .col-buttons .btn + .btn {
  margin-top: 15px;
}
@media screen and (min-width: 992px) {
  .browserlanguagehint .col-buttons .btn + .btn {
    margin-left: 15px;
    margin-top: 0;
  }
}

.countrybanner {
  color: inherit;
}
.countrybanner .col-text-inner {
  color: #fff;
  padding-left: 100px;
  padding-right: 50px;
  position: relative;
}
.countrybanner .col-text-inner:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.countrybanner .col-text-inner:before {
  color: #fff;
  font-size: 34px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 991px) {
  .countrybanner .col-text-inner {
    padding-right: 0;
  }
}
@media screen and (max-width: 991px) {
  .countrybanner .col-submit {
    margin-top: 15px;
  }
  .countrybanner .col-submit .btn {
    display: block;
    width: 100%;
  }
}

SCSS

              @import "../general/_general";

/* this is the header min height */
.main_padding {
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-top: 136px;
}

/* grid */
.row-tabled {
  @media screen and (min-width: $screen-sm-min) {
    @include row-tabled;
  }
}

.col-tabled {
  @media screen and (min-width: $screen-sm-min) {
    @include col-tabled;
  }
}

/* buttons */
@import "../buttons/_code";

[class^="btn-icon-"], [class*=" btn-icon-"] {
  padding-left: 50px;
  position: relative;

  &:before {
    @include rem-font-size(15);
    @include rem-line-height(17);
    @include autocenterY();
    left: 20px;
  }

  /* styling for light button */
  &.btn-light {
    &:before {
      color: $blue;
      @include linkcolor-transition;
    }
    &:hover,
    &:focus,
    &.focus {
      &:before {
        color: $orange;
      }
    }
  }
}

.btn-icon-vcard {
  @include schoeck-icon($icon-vcard);
  padding-left: 30px;

  &:before {
    left: 0;
  }

  @media screen and (max-width: 767px) {
    display: none;
  }
}

.pusherpanel {
  background-color: $grey;
  background-image: url(/img/pusherpanel_bg.jpg);
  background-repeat: repeat;

  color: $white;
  display: none;
  position: relative;
  width: 100%;
  padding: 25px 50px;
  padding-left: 4.5vw;
  padding-right: 4.5vw;
  z-index: 10000;
  @include box-shadow(inset 0 10px 20px rgba(0, 0, 0, 0.05));

  @media screen and (max-width: $screen-sm-max) {
    position: fixed;
    top: 0;
    padding: 25px 15px;
  }

  .pusherpanel_inner {
    position: relative;
    padding-right: 50px;

    @media screen and (max-width: $screen-xs-max) {
      padding-right: 0;
    }

    .col-buttons {
      @media screen and (max-width: $screen-xs-max) {
        margin-top: 20px;
      }
    }
  }

  .close_wrapper {
    @media screen and (max-width: $screen-xs-max) {
      margin-top: 20px;
      text-align: center;
    }
  }

  button.close {
    background: none;
    border: none;
    height: 22px;
    padding: 0;
    width: 22px;

    @media screen and (min-width: $screen-sm-min) {
      @include autocenterY;
      right: 0;
    }

    @include schoeck-icon($icon-cross-thin);

    &:before {
      color: $white;
      font-size: 22px;
      line-height: 22px;
    }
  }

  .close {
    float: none;
    opacity: unset;
  }

  &.pusherpanel-fixed {
    position: fixed;
    top: 0;

    &.pusherpanel-bottom {
      top: auto;
      bottom: 0;
    }
  }
}

.browserlanguagehint {
  .col-buttons {
    text-align: right;

    .btn {
      @media screen and (max-width: $screen-sm-max) {
        display: block;
      }

      & + .btn {
        margin-top: 15px;

        @media screen and (min-width: $screen-md-min) {
          margin-left: 15px;
          margin-top: 0;
        }
      }
    }
  }
}

.countrybanner {
  color: inherit;

  .col-text-inner {
    color: $white;
    padding-left: 100px;
    padding-right: 50px;
    position: relative;
    @include schoeck-icon($icon-worldmap);

    &:before {
      color: $white;
      font-size: 34px;
      left: 0;
      @include autocenterY();
    }

    @media screen and (max-width: $screen-sm-max) {
      padding-right: 0;
    }
  }

  .col-submit {
    @media screen and (max-width: $screen-sm-max) {
      margin-top: 15px;

      .btn {
        display: block;
        width: 100%;
      }
    }
  }
}

JavaScript

                // browser lang hint
jQuery('.pusherpanel').each(function(){
  var $panel=jQuery(this);

  var adjustMainPadding=function(){
    jQuery('.main_padding').css({
      'padding-bottom':$panel.actual('outerHeight')
    });
  };

  var removeMainPadding=function(){
    jQuery('.main_padding').animate({
      'padding-bottom':''
    });
  };

  setTimeout(function(){
    $panel.slideDown(function(){
      adjustMainPadding();

      jQuery(window).on('resize.pusherpanel', function(){
        adjustMainPadding();
      });
    });
  }, 1500);

  $panel.find('.close').on('click', function(e){
    $panel.slideUp();
    removeMainPadding();
    jQuery(window).off('resize.pusherpanel');
  });
});