Holiday Banner - new

holiday-banner-new.markdown

Holiday Banner - new

A Pen by Tiffany May on CodePen.

License.

index.html

<div class="holidayBanner">
  <input type="checkbox" id="holidayBannerToggle" class="holidayBannerToggle" />
  <label for="holidayBannerToggle" class="closedHeader">View Holiday Delivery Dates</label>
  <label for="holidayBannerToggle" class="openHeader">Christmas Shipping Schedule</label>
  <div class="holidayBannerContent">
    <p>Christmas is 12/25</p>
    <p>For delivery on or before 12/23:</p>
    <div class="holidayBannerDetails">
      <p>
        <span class="strong">Standard Shipping:</span> Order by 12/11 at 5PM PT
      </p>
      <p>
        <span class="strong">Express Shipping:</span> Order by 12/15 at 5PM PT
      </p>
      <p>
        <span class="strong">e-Gift Cards:</span> Order by 12/21 at 5PM PT
      </p>
    </div>
  </div>
</div>

style.scss

$pad: 15px;
$text: rgb(67, 67, 67); //main gray font
$highlight: rgb(0, 99, 186); //skechers blue
$font-heading: "jaf-bernino-sans-condensed", "Helvetica Neue", Helvetica, Helmet, Freesans, sans-serif;

@mixin font-heading {
  font-family: $font-heading;
  text-transform: uppercase;
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

@mixin line-height($sizeValue: 1.6) {
  line-height: ($sizeValue * 10) + px;
  line-height: $sizeValue + rem;
}

@media all and (max-width: 1023px) {
  .new-subnav-menu {
    margin: 0px 0px 0px 0px;
  }
}

@mixin breakpoint($point) {
  @if $point==phone {
    @media all and (max-width: 480px) {
      @content;
    }
  }
  @else if $point==tablet {
    @media all and (min-width: 481px) {
      @content;
    }
  }
  @else if $point==tabletsm {
    @media all and (min-width: 481px) and (max-width: 640px) {
      @content;
    }
  }
  @else if $point==tabletmax {
    @media all and (max-width: 768px) {
      @content;
    }
  }
  @else if $point==tabletonly {
    @media all and (min-width: 481px) and (max-width: 768px) {
      @content;
    }
  }
  @else if $point==mobilelayout {
    @media all and (max-width: 600px) {
      @content;
    }
  }
  /* new midway breakpoint for rendering mobile layouts */
  @else if $point==desktoplayout {
    @media all and (min-width: 601px) {
      @content;
    }
  }
  /* new midway breakpoint for NOT rendering mobile layouts */
  @else if $point==desktopsm {
    @media all and (min-width: 769px) {
      @content;
    }
  }
  /*@else if $point == desktopsmmax { @media all and (max-width: 979px)                           { @content; } } */
  /* changed breakpoint, crossed into larger tablet breakpoint */
  @else if $point==desktopsmmax {
    @media all and (max-width: 1023px) {
      @content;
    }
  }
  /*@else if $point == desktop      { @media all and (min-width: 980px)                           { @content; } } */
  /* changed breakpoint, crossed into larger tablet breakpoint */
  @else if $point==desktop {
    @media all and (min-width: 1024px) {
      @content;
    }
  }
  @else if $point==ipad {
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      @content;
    }
  }
  @else if $point==maxwidth {
    @media all and (min-width: $maxwidth) {
      @content;
    }
  }
  @else if $point==print {
    @media print {
      @content;
    }
  }
  @else {
    @content;
  }
}

._12x12:nth-child(2) {
  margin-top: 0px;
  /* while holiday banner is active, use this override remove this top margin */
}


/********* Holiday Shipping Banner *********/
body { background-color: red; } /* to see how background will look on our site */

.holidayBanner {
  background-color: #fff;
  text-align: center;
  label { /* label styling is the same other than color which you can overide */
    display:block;
    padding: 10px 0;
    color: $text;
    cursor: pointer;
    font-weight: 700;
    @include font-heading;
    @include font-size(1.6);    
    @include line-height(2.5);
    &:after {
      display: inline-block;
      font-family: FontAwesome;
      padding: 0 15px;
      content: '\f0d7';
      @include font-size(2.2);
    }
  }
  .holidayBannerDetails {
    border-top: 1px solid $text;
    max-width: 300px;  /* keeps the border at 300px wide */
    margin: 5px auto;
    padding-top: 5px;
    p { padding-bottom: 5px; }
  }
  .holidayBannerToggle:not(:checked) { /* banner closed */
    &~ label.openHeader { display:none; } /* hide banner open header */
    &~ .holidayBannerContent { display:none; } /* hide banner content */
  }
  .holidayBannerToggle:checked { /*banner open */
    &~ label {
      color: $highlight; /* open header is blue */
      &:after { content: '\f0d8'; }  /* shows up arrow */
      &.closedHeader { display:none; } /* hide banner closed header */
      &~ .holidayBannerContent { display:block; } /* show banner content */
    }
  }
  .holidayBannerContent { 
    @include font-size(1.3); /* make all text within banner area smaller */
  }
}

styles

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.skechers.com/assets/stylesheets/efbb965f7ed2a526c77b18f89335db99-skechers.min.css" rel="stylesheet" />