NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-22 03:56:53 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

#6797: Improve table highlight, toast, and alert styling

Browse Source
This commit is contained in:
checktheroads 2021-08-01 11:53:35 -07:00
parent c3a75d98d4
commit 9cf560ceec
3 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

39
netbox/project-static/styles/netbox.scss
View File

@ -120,8 +120,14 @@ small {
// another colored element.
// See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52
// See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_close.scss#L12
$shaded-color: shade-color(mix($value, color-contrast($value), abs($alert-color-scale)), 5%);
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$shaded-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$shifted-bg: shift-color($value, $alert-bg-scale);
$shifted-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($shifted-bg, $shifted-color) < $min-contrast-ratio) {
$shifted-color: mix($value, color-contrast($shifted-bg), abs($alert-color-scale));
}
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$shifted-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
.bg-#{$color} button.btn-close {
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat;
}
@ -135,11 +141,32 @@ small {
// Use Bootstrap's method of coloring the .alert-link class automatically.
// See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52
.toast.bg-#{$color},
.alert.alert-#{$color} {
a {
color: $shaded-color;
.alert.alert-#{$color},
.table-#{$color} {
// Exclude buttons.
a:not(.btn) {
font-weight: $font-weight-bold;
color: $shifted-color;
}
// Apply a border to buttons contained within colored elements, if they're not already a
// bordered button class.
.btn:not([class*='btn-outline']) {
border-color: $gray-700;
}
}
// Toasts required a slightly different approach because the background color isn't "shifted",
// it's the direct theme color.
.toast.bg-#{$color} {
$shifted-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($value, $shifted-color) < $min-contrast-ratio) {
$shifted-color: mix($value, color-contrast($value), abs($alert-color-scale));
}
a:not(.btn) {
font-weight: $font-weight-bold;
color: $shifted-color;
}
}