Playing with colors for notices

This commit is contained in:
Robert McGovern 2023-02-20 01:07:15 +00:00
parent d4978ee0f1
commit aaf47fe6d7
3 changed files with 28 additions and 10 deletions

View File

@ -179,15 +179,33 @@ $(document).ready(function() {
}
```
<p>notice</p>{: .notice}
<p>primary</p>{: .notice--primary}
<p>info</p>{: .notice--info}
<p>warning</p>{: .notice--warning}
<p>success</p>{: .notice--success}
<p>danger</p>{: .notice--danger}
notice
{: .notice}
primary
{: .notice--primary}
info
{: .notice--info}
warning
{: .notice--warning}
success
{: .notice--success}
danger
{: .notice--danger}
TIP: Unless you are wed to the theme, don't try porting it. Really. Headaches await. 🤯
{: .notice--warning}
**success**
{: .notice--success}
<div class="notice--success" markdown="1">
# Headline for the Notice
<h3> Headline for the Notice</h3>
<br>
Text for the notice
</div>

View File

@ -17,9 +17,9 @@ $code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !defau
/* Notices */
$success-color: #3fa63f !default;
$success-color: #02d702 !default;
$warning-color: #d67f05 !default;
$danger-color: #ff0000 !default;
$danger-color: #d90404 !default;
$info-color: #3b9cba !default;
// section not needed under 11ty

View File

@ -17,7 +17,7 @@
font-family: $global-font-family;
font-size: $type-size-6 !important;
text-indent: initial; /* override*/
background-color: mix(#fff, $notice-color, 55%); //original percentage was 90
background-color: mix(#fff, $notice-color, 65%); //original percentage was 90
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba($notice-color, 0.25);