feat: add contextual alert support

This commit is contained in:
Henk Verlinde 2022-01-17 16:38:16 +01:00
parent 1c1a4100ef
commit 9a9f37b3a2
5 changed files with 96 additions and 19 deletions

View File

@ -140,11 +140,15 @@ $navbar-dark-active-color: $link-color-dark;
color: $body-bg-dark; color: $body-bg-dark;
} }
[data-dark-mode] body .alert-warning { [data-dark-mode] body .alert-doks {
background: $body-overlay-dark; background: $body-overlay-dark;
color: $body-color-dark; color: $body-color-dark;
} }
[data-dark-mode] body .alert-doks a {
color: $link-color-dark;
}
[data-dark-mode] body .page-links a { [data-dark-mode] body .page-links a {
color: $body-color-dark; color: $body-color-dark;
} }

View File

@ -15,20 +15,7 @@
text-decoration: underline; text-decoration: underline;
} }
.alert-dark { .alert-doks {
color: $white;
background-color: $black;
}
.alert-dark .alert-link {
color: $white;
}
.alert-light {
color: $black;
}
.alert-warning {
background: $beige; background: $beige;
color: $black; color: $black;
} }
@ -53,10 +40,96 @@
background-color: $primary; background-color: $primary;
} }
.alert a {
text-decoration: underline;
}
.alert-primary .alert-link { .alert-primary .alert-link {
color: $white; color: $white;
} }
/*
.alert-primary {
color: #084298;
background-color: #cfe2ff;
border-color: #b6d4fe;
}
.alert-primary .alert-link {
color: #06357a;
}
*/
.alert-secondary {
color: #41464b;
background-color: #e2e3e5;
border-color: #d3d6d8;
}
.alert-secondary .alert-link {
color: #34383c;
}
.alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
}
.alert-success .alert-link {
color: #0c4128;
}
.alert-info {
color: #055160;
background-color: #cff4fc;
border-color: #b6effb;
}
.alert-info .alert-link {
color: #04414d;
}
.alert-warning {
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
}
.alert-warning .alert-link {
color: #523e02;
}
.alert-danger {
color: #842029;
background-color: #f8d7da;
border-color: #f5c2c7;
}
.alert-danger .alert-link {
color: #6a1a21;
}
.alert-light {
color: #636464;
background-color: #fefefe;
border-color: #fdfdfe;
}
.alert-light .alert-link {
color: #4f5050;
}
.alert-dark {
color: #141619;
background-color: #d3d3d4;
border-color: #bcbebf;
}
.alert-dark .alert-link {
color: #101214;
}
.alert .alert-link:hover, .alert .alert-link:hover,
.alert .alert-link:focus { .alert .alert-link:focus {
text-decoration: none; text-decoration: none;

View File

@ -1,4 +1,4 @@
<div class="alert alert-warning d-flex" role="alert"> <div class="alert alert-{{ with .Get "context" }}{{.}}{{ else }}doks{{ end }} d-flex" role="alert">
<div class="flex-shrink-1 alert-icon">{{ with .Get "icon" }}{{.}} {{ end }}</div> <div class="flex-shrink-1 alert-icon">{{ with .Get "icon" }}{{.}} {{ end }}</div>
{{ with .Get "text"}} {{ with .Get "text"}}
<div class="w-100">{{ . | safeHTML }} </div> <div class="w-100">{{ . | safeHTML }} </div>

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@hyas/doks", "name": "@hyas/doks",
"version": "0.3.6", "version": "0.4.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@hyas/doks", "name": "@hyas/doks",
"version": "0.3.6", "version": "0.4.0",
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {

View File

@ -1,7 +1,7 @@
{ {
"name": "@hyas/doks", "name": "@hyas/doks",
"description": "Doks theme", "description": "Doks theme",
"version": "0.3.6", "version": "0.4.0",
"browserslist": [ "browserslist": [
"defaults" "defaults"
], ],