Skip to content

Commit

Permalink
fix: alert light border in light mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@zuramai
zuramai committed Apr 2, 2023
1 parent 19bddbb commit 9950911
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 41 deletions.
1 change: 1 addition & 0 deletions src/assets/scss/components/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
@else {
background-color: saturate($value,10%);
color: saturate(shade-color($value, 60%), 40%);
border: 1px solid darken($value, 3%);
}
}
}
82 changes: 41 additions & 41 deletions src/component-alert.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,47 @@ <h4>With Icon</h4>
<div class="alert alert-info"><i class="bi bi-star"></i> This is info alert.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Dismissable</h4>
</div>
<div class="card-body">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
This is primary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible show fade">
This is a success alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible show fade">
This is a danger alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible show fade">
This is a dark alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible show fade">
This is a secondary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible show fade">
This is a light alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible show fade">
This is a info alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Light</h4>
Expand All @@ -71,8 +112,6 @@ <h4>Light</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<h4>Heading</h4>
Expand Down Expand Up @@ -112,45 +151,6 @@ <h4 class="alert-heading">Info</h4>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Dismissable</h4>
</div>
<div class="card-body">
<div class="alert alert-primary alert-dismissible fade show" role="alert">
This is primary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible show fade">
This is a success alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible show fade">
This is a danger alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible show fade">
This is a dark alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible show fade">
This is a secondary alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible show fade">
This is a light alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible show fade">
This is a info alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</section>
Expand Down

0 comments on commit 9950911

Please sign in to comment.