FTSE Russell Styleguide

Alerts 

<div class="ig-row">
    <div class="eight ig-columns offset-by-two">
        <h2>Alerts</h2>
        <div class="ig-legend">Positive alert message</div>
        <!-- alert -->
        <div class="alert alert--positive" role="alert" contenteditable="true">
            Thank you for submitting your request for proposal.
        </div>
        <div class="ig-legend">Information message</div>
        <!-- alert -->
        <div class="alert alert--info" role="alert" contenteditable="true">
            Requests for proposals must be in PDF or a text format.
        </div>
        <div class="ig-legend">Warning message</div>
        <!-- alert -->
        <div class="alert alert--warning" role="alert" contenteditable="true">
            You&#8217;re about to submit your request for proposal.
        </div>
        <!-- alert -->
        <div class="ig-legend">Negative alert message</div>
        <!-- alert -->
        <div class="alert alert--negative" role="alert" contenteditable="true">
            Sorry, we don&#8217;t accept requests for proposals in Word format.
        </div>
    </div>
</div>
 
<div class="ig-row">
    <div class="eight ig-columns offset-by-two">
        <h2>Alerts</h2>
        <div class="ig-legend">Positive alert message</div>
        <!-- alert -->
        <div class="alert alert--positive" role="alert" contenteditable="true">
            Thank you for submitting your request for proposal.
        </div>
        <div class="ig-legend">Information message</div>
        <!-- alert -->
        <div class="alert alert--info" role="alert" contenteditable="true">
            Requests for proposals must be in PDF or a text format.
        </div>
        <div class="ig-legend">Warning message</div>
        <!-- alert -->
        <div class="alert alert--warning" role="alert" contenteditable="true">
            You&#8217;re about to submit your request for proposal.
        </div><!-- alert -->
        <div class="ig-legend">Negative alert message</div>
        <!-- alert -->
        <div class="alert alert--negative" role="alert" contenteditable="true">
            Sorry, we don&#8217;t accept requests for proposals in Word format.
        </div>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    /* Variables */
/* Mixins */
/* Applied to <div> */
.alert {
  margin-bottom: $space-md;
  padding: $space-md;
  background-color: $alert-info-background-color;
  border-color: $alert-info-border-color;
  border-style: solid;
  border-width: 0;
  border-radius: 0;
  font-family: $font-family-secondary;
  font-size: $font-size-base;
  color: $alert-info-color;
}

//@media screen and (min-width: 48em) {
//  .alert {
//    font-size: calc((var(--font-size) * 1rem) + (var(--font-size-medium) - var(--font-size)) * (100vw - 48em) / (64 - 48));
//  }
//}
//
//@media screen and (min-width: 64em) {
//  .alert {
//    font-size: calc(var(--font-size-medium) * 1rem);
//  }
//}

.alert__heading {
  color: inherit;
}

.alert__link {
  font-weight: $font-weight-bold;
}

/* Info. */
.alert--info {
  background-color: $alert-info-background-color;
}

/* Positive. */
.alert--positive {
  background-color: $alert-positive-background-color;
  color: $alert-positive-color;
}

/* Negative. */
.alert--negative {
  font-weight: var(--font-weight-bold);
  background-color: $alert-negative-background-color;
  color: $alert-negative-color;
}

/* Warning. */
.alert--warning {
  background-color: $alert-warning-background-color;
  color: $alert-warning-color;
}
  • URL: /components/raw/alerts/_alerts.scss
  • Filesystem Path: src/components/molecules/alerts/_alerts.scss
  • Size: 1.3 KB

There are no notes for this item.