<div class='title__container'>
<h1 class='page__title'>Alerts Component</h1>
</div>
<div class='alert__container'>
<div class='alert alert__primary spacer' role='alert'>
<i class="fas fa-exclamation-circle alert__icon"></i>
<p class='alert__text'>This is a primary alert</p>
<button type="button" class="alert__close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle alert__close"></i></span>
</button>
</div>
<div class='alert alert__secondary spacer' role='alert'>
<i class="fas fa-exclamation-circle alert__icon"></i>
<p class='alert__text'>This is a secondary alert</p>
<button type="button" class="alert__close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle alert__close"></i></span>
</button>
</div>
<div class='alert alert__warning spacer' role='alert'>
<i class="fas fa-exclamation-triangle alert__icon"></i>
<p class='alert__text'>This is an warning alert</p>
<button type="button" class="alert__close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle alert__close"></i></span>
</button>
</div>
<div class='alert alert__error spacer' role='alert'>
<i class="fas fa-minus-circle alert__icon"></i>
<p class='alert__text'>This is an error alert</p>
<button type="button" class="alert__close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle alert__close"></i></span>
</button>
</div>
<div class='alert alert__success spacer' role='alert'>
<i class="fas fa-check-circle alert__icon"></i>
<p class='alert__text'>This is a success alert</p>
<button type="button" class="alert__close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times-circle alert__close"></i></span>
</button>
</div>
</div>
//variables
$alertPrimary: #ccf2ff;
$alertSecondary: #E2E3E3;
$alertWarning: #ffff99;
$alertError: #ffb3b3;
$alertSuccess: #d6f5d6;
body {
background-color: #f0f0f0;
font-family: 'Roboto', sans-serif;
}
.page__title {
text-align: center;
text-transform: uppercase;
}
.alert__container {
background-color: rgba(255,255,255, 0.75);
margin: 0 auto;
width: 50%;
padding: 1rem;
border-radius: .25rem;
border: .125rem solid black;
.spacer {
margin-bottom: 1rem;
}
.alert {
border-radius: .125rem;
// border: 1px solid black;
padding: .5rem;
color: black;
&__icon{
margin: 0 1rem;
}
&__text {
display: inline-block;
font-size: 1.125rem;
}
&__close {
float: right;
padding: .75rem .75rem;
color: black;
background-color: transparent;
border: 0;
cursor: pointer;
span {
font-size: 1rem;
}
}
&__primary {
background-color: $alertPrimary;
}
&__secondary {
background-color: $alertSecondary;
}
&__warning {
background-color: $alertWarning;
}
&__error {
background-color: $alertError;
}
&__success {
background-color: $alertSuccess;
}
}
}
.closed {
display: none;
}
View Compiled
