1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

#6797: Fix API select styles

This commit is contained in:
checktheroads
2021-07-24 18:11:01 -07:00
parent 4489e130f2
commit 0b80d85c6c
9 changed files with 57 additions and 33 deletions

View File

@@ -21,7 +21,7 @@ $spacing-s: $input-padding-x;
--nbx-select-option-hover-color: #{$white};
--nbx-select-placeholder-color: #{$gray-600};
--nbx-select-value-color: #{$white};
& body[data-netbox-color-mode='dark'] {
&[data-netbox-color-mode='dark'] {
// Dark Mode Variables.
--nbx-select-content-bg: #{$gray-900};
--nbx-select-option-selected-bg: #{$gray-500};
@@ -100,23 +100,34 @@ $spacing-s: $input-padding-x;
.ss-content {
background-color: var(--nbx-select-content-bg);
.ss-list {
.ss-option.ss-option-selected {
background-color: var(--nbx-select-option-selected-bg);
color: $body-color;
}
.ss-option:hover {
background-color: var(--nbx-select-option-hover-bg);
color: var(--nbx-select-option-hover-color);
}
.ss-option:last-child {
border-bottom-left-radius: $form-select-border-radius;
border-bottom-right-radius: $form-select-border-radius;
}
.ss-option.ss-disabled {
background-color: transparent;
}
.ss-option.ss-disabled:hover {
color: $form-select-disabled-color;
.ss-option {
&.ss-option-selected {
background-color: var(--nbx-select-option-selected-bg);
color: $body-color;
}
&:hover {
background-color: var(--nbx-select-option-hover-bg);
color: var(--nbx-select-option-hover-color);
}
&:last-child {
border-bottom-left-radius: $form-select-border-radius;
border-bottom-right-radius: $form-select-border-radius;
}
&.ss-disabled {
background-color: transparent;
&:hover {
color: $form-select-disabled-color;
}
}
.depth {
// Lighten the dash prefix on nested options.
opacity: 0.3;
}
}
}
border-bottom-left-radius: $form-select-border-radius;

View File

@@ -96,7 +96,7 @@ $input-group-addon-bg: $gray-700;
$input-group-addon-border-color: $input-border-color;
$form-select-color: $input-color;
$form-select-disabled-color: $gray-700;
$form-select-disabled-color: $gray-500;
$form-select-bg: $input-bg;
$form-select-disabled-bg: $input-disabled-bg;
$form-select-indicator-color: $form-select-color;

View File

@@ -6,7 +6,7 @@ $input-border-color: $gray-200;
$theme-colors: map-merge($theme-colors, $theme-color-addons);
$light: $gray-100;
$light: $gray-200;
$card-cap-color: $gray-800;
@@ -26,5 +26,7 @@ $list-group-disabled-color: $gray-500;
$table-flush-header-bg: $gray-100;
$form-select-disabled-color: $gray-600;
// Tabbed content
$tab-content-bg: $gray-100;