ihk24/templates/source/sass/partials/objects/_events.scss

@charset "UTF-8";

.events {
  padding: calc(1.5vw + 30px) 0 calc(1.5vw + 40px);
  background-color: $color-primary-light-04;
  background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04);

  + .events {
    margin-top: 8px;
  }

  .events-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .prev, .next {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      cursor: pointer;
      transition: 0.2s $easeOutQuad;

      &:last-child {
        margin-right: 0;
      }

      &:before {
        @include icon-pfeil-rechts;
        font-family: "Icons", sans-serif;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        transition: 0.2s $easeOutQuad;
      }

      @media(max-width: 767px) {
        width: 44px;
        height: 44px;

        &:before {
          font-size: 24px;
          line-height: 44px;
        }
      }

      &:hover:before {
        padding-left: 4px;
      }

      &.disabled {
        opacity: 0.4;
        pointer-events: none;
      }
    }

    .prev {
      transform: rotate(-90deg);
    }
    .next {
      transform: rotate(90deg);
    }

    a:last-child {
      @media(max-width: 767px) {
        margin-left: auto;
      }
    }

    > a:not(.btn) {
      @include focusvisible;

      &:hover {
        color: $color-link-hover;
        color: var(--theme-color-link-hover, $color-link-hover);
      }
    }
  }

  .mailupdate {
    margin-right: auto;
    display: block;
    @include focusvisible;
    transition: 0.3s ease;
    margin-left: -8px;
    padding: 2px 8px;

    @media(max-width: 767px) {
      margin-bottom: 20px;
      min-width: 100%;
    }
  }
}

.main-col {
  .events {
    padding: 34px 0;
    margin: calc(3% + 20px) 0;

    .container {
      padding: 0 42px;
    }
  }
}

.events-wrapper {
  margin: 25px -10px;
  overflow: hidden;
  transition: 0.4s $easeOutQuad;
  padding: 0 10px;
}

.events-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: 0.4s $easeOutQuad;

  .result + .more-wrapper {
    margin-top: 24px;
  }

  li {
    position: relative;
    display: block;
    padding: 5px 0;
  }

  .event-component {
    margin: 10px 0;
    opacity: 1;
  }

  a:not(.btn) {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    transition: 0.3s ease;
    text-decoration: none;
    @include focusvisible;

    &:hover {
      color: $color-secondary-dark;
      color: var(--theme-color-secondary-intensed, $color-secondary-dark);

      .date-box {
        background-color: $color-secondary-dark;
        background-color: var(--theme-color-secondary-intensed, $color-secondary-dark);
      }
    }
  }

  p {
    margin: 0 4px 2px;
    line-height: 1.2;
    text-decoration: underline;

    @media(max-width: 767px) {
      font-size: 16px;
    }
  }

  .text-box {
    align-self: center;
    padding: 4px 10px 4px 0;
  }

  .date-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: $color-primary;
    background-color: var(--theme-color-primary, $color-primary);
    color: $color-white;
    color: var(--theme-color-background, $color-white);
    margin-right: 20px;
    font-family: "Korb", sans-serif;
    min-height: 80px;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    padding: 7px 12px 8px;
    min-width: 80px;
    transition: 0.2s ease;

    @media(max-width: 767px) {
      margin-right: 12px;
      justify-content: flex-start;
      padding-top: 10px;
    }

    span {
      white-space: nowrap;
    }

    span:nth-child(2) {
      font-size: 36px;
      margin-left: -2px;
    }

    &.no-date {
      @extend .icon-sanduhr;
      align-items: flex-start;
      //justify-content: flex-end;

      &:before {
        font-family: "Icons";
        font-size: 30px;
        line-height: 1;
        margin-bottom: 4px;
        margin-top: 5px;
      }

      * {
        display: none;
      }
    }
  }
}

.results-wrapper.events-list {
  .date-wrapper {
    font-size: 18px;
    line-height: 1.3;
  }

  a:not(.btn):hover .ev-title ~ div {
    color: $color-primary;
    color: var(--theme-color-primary, $color-primary);
  }

  .ev-title {
    text-decoration: underline;
    font-weight: 600;
    margin: 12px 0 6px;
    font-size: 22px;

    ~ div {
      display: inline-block;
      font-size: 18px;
      line-height: 22px;
      margin-right: 15px;
      margin-bottom: 2px;

      &:last-child {
        margin-bottom: 8px;
      }

      &:before {
        position: relative;
        display: inline-block;
        font-family: "Icons";
        font-size: 16px;
        line-height: 20px;
        margin-right: 5px;
        vertical-align: top;
        top: -1px;
      }

      @media(max-width: 567px) {
        display: block;
        padding-left: 24px;
        position: relative;

        &:before {
          position: absolute;
          left: 0;
        }
      }

      &.date {
        @extend .icon-xsmall-kalender;
      }
      &.time {
        @extend .icon-xsmall-uhr;
      }
      &.location {
        @extend .icon-xsmall-pin;
      }
      &.interested-parties {
        @extend .icon-xsmall-liste;
      }
      &.price {
        @extend .icon-xsmall-euro;
      }
      &.status {
        @extend .icon-xsmall-offen;

        &:before {
          color: #2E8533;
        }

        &.interested-parties, &.waiting-list {
          @extend .icon-xsmall-liste;

          &:before {
            color: $color-primary;
            color: var(--theme-color-primary, $color-primary);
          }
        }

        &.reserved {
          @extend .icon-xsmall-geschlossen;

          &:before {
            color: #EA515A;
          }
        }
      }
    }
  }
}


// GFI
/*
// event teaser
.evt-teaser {
  @extend %teaser;
  @include clearfix();
  padding: 0 10px;
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:focus {
      .all-events {
        background: $primary-color;
        border-color: $primary-color;
        color: $cWhite;
      }
    }
  }
  > a:focus,
  > a:hover {
    text-decoration: none;
  }
  .events {
    margin: 0;
    padding: 0 0 0 0; // msc: 5px 0 0 0  hack für VST-Suche-Teaser in Übersichtsseiten
  }
  .mail {
    padding: 0 0 10px 0;
  }
  .title {
    border-top: 2px solid $primary-color-light;
    margin: 0;
    padding: 15px 0 0;
  }
  .event-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1em; // 26px
  }
  .text {
    color: $cGlobalText;
    font-size: 1em; // 16px
    line-height: 1em; // 16px
    padding: 15px 0 0 0;
  }
  .newsletter {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
  .all-events {
    @include font-family(source_sans_prosemibold);
    border: 1px solid $primary-color-light;
    font-size: 1.25em; // 20px
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 15px 0 0 0;
    padding: 20px 0;
    text-align: center;
    &:hover {
      background: $primary-color;
      border-color: $primary-color;
      color: $cWhite;
      cursor: pointer;
      a {
        color: $cWhite;
      }
    }
  }
  .event {
    @include align-items(center);
  }
}
.vst-kicker{
	padding-top: 25px;
}


.event {
  @include clearfix();
  @include flexbox();
  @include flow-direction(row);
  @include align-items(flex-start);
  font-size: 1.25em; // 20px
  list-style: none;
  padding: 7px 0;
  .event-title {
    @include flex(1);
    display: block;
    margin: 0 0 0 10px;
  }
}

.event-icon {
  @include font-family(korbregular);
  background-color: $cIconGray;
  border-top: 6px solid $cIconBg;
  color: $cGlobalText;
  height: 60px;
  margin: 2px 0 0;
  text-align: center;
  width: 56px;
  .event-month {
    font-size: 18px;
    line-height: 1em; // 18px
    padding: 4px 0 0 0;
    text-transform: uppercase;
  }
  .event-day {
    @include font-family(korbbold);
    font-size: 28px;
    line-height: 28px;
    padding: 0;
  }
}
.no-date {
  .event-icon {
    position: relative;
    &:after {
      @include icons2();
      @include backgroundpositionheightweight(icon_date);
      content: "";
      display: inline-block;
      height: 28px;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      width: 20px;
    }
  }
}

@media (min-width: $screen-sm-min),
print {
  //prudsys recommendations
  .recommendations {
  	.evt-teaser {
    	.title {
      		font-size: 2em;
      		padding: 0px 0px 5px 0px;
      		border-top: 0px;
    	}
	}
  .vst-kicker {
	padding-top: 0px;
	}
  }

  .evt-teaser {
    .title {
      font-size: 1.75em; // 28px
      padding: 15px 0 0;
    }
    .event {
      font-size: 1.0625em; // 17px
    }
    ul.events {
      li.event {
        padding: 0;
        .event {
          width: 100%;
        }
      }
    }
    .all-events {
      font-size: 1.0625em; // 17px
      margin: 20px 0 0 0;
      padding: 23px 0;
    }
    .all-events-scroll {
    	display: inline-block;
    }
    .all-events-scroll-up-dn {
    	display: inline-block;
    	width: 8%;
    }
    .text {
      font-size: .9375em; // 15px
      padding: 20px 0 0;
    }
  }
  .event-icon {
    border-top: 8px solid $cIconBg;
    height: 53px;
    margin: 5px 0 0;
    width: 50px;
    .event-month {
      font-size: 16px;
      line-height: 1em; // 16px
      padding: 3px 0 0 0;
    }
    .event-day {
      font-size: 26px;
      line-height: 22px;
    }
  }
  .no-date {
    .event-icon {
      &:after {
        @include icons2();
        @include backgroundpositionheightweight(icon_date);
      }
    }
    .date {
      margin: 0 0 0;
    }
  }
  .events {
    padding: 10px 0 0;
  }
  .event {
    padding: 10px 0;
  }
}
*/