Academy of Natural Sciences

Alert 

<div id="site-alert-placeholder" class="c-alert-placeholder"></div>
<div id="site-alert" class="c-alert">
    <div class="c-alert__inner o-container">
        <div class="c-alert__content o-row">
            <div class="c-alert__text o-col o-col-sm-10">
                <p class="c-alert__text-message  f-text--xsmall">The Academy is currently open and operating at 25% capacity.</p>
                <a href="#" class="c-alert__text-alert  f-text--xsmall">Learn More</a>
            </div>
            <button id="site-alert-close" class="c-alert__close o-col o-col-sm-2">
                <span>
                    <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.42578 7.4248L22.275 22.274" stroke="white" stroke-width="2" />
                        <path d="M7.42578 22.2739L22.275 7.42468" stroke="white" stroke-width="2" />
                    </svg>

                </span>
            </button>
        </div>
    </div>
</div>
 
<div id="site-alert-placeholder" class="c-alert-placeholder"></div>
<div id="site-alert" class="c-alert">
  <div class="c-alert__inner o-container">
    <div class="c-alert__content o-row">
      <div class="c-alert__text o-col o-col-sm-10">
        <p class="c-alert__text-message  f-text--xsmall">{{text}}</p>
        <a href="{{cta.ctaLink}}" class="c-alert__text-alert  f-text--xsmall">{{cta.ctaText}}</a>
      </div>
      <button id="site-alert-close" class="c-alert__close o-col o-col-sm-2">
        <span>
          {% include "03-icons/close" %}
        </span>
      </button>
    </div>
  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "text": "The Academy is currently open and operating at 25% capacity.",
  "cta": {
    "ctaText": "Learn More",
    "ctaLink": "#"
  }
}
  • Content: 
    .c-alert {
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  flex-direction: column;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: $c-navy;
  color: $c-white;
  transition: 0.4s $ease-standard-cubic;
  transition-property: transform, visibility;

  &.is-visible {
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

.c-alert-placeholder {
  transition: padding 0.4s $ease-standard-cubic;
}

.c-alert__content {
  position: relative;
  padding-right: 5rem;
}

.c-alert__text {
  order: 2;

  @include break($sm) {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
}

.c-alert__text-message {
  @include break($sm) {
    padding-right: 1.5rem;
  }
}

.c-alert__text-alert {
  text-decoration: underline;
}

.c-alert__close {
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;

  @include break($sm) {
    position: static;
    top: auto;
    right: auto;
    align-items: center;
    order: 2;
    display: flex;
    justify-content: flex-end;
  }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: patterns\06-components\alert\alert.scss
  • Size: 1.2 KB

No notes defined.