3b0f876ae5
This builds on filtering to allow the optimize page to show recommendations for the active namespace vs all namespaces. If turning off the toggle causes the summary from the active card to become excluded from the filtered list, the active summary changes, as with the facets. It also includes a fix for this bug: https://github.com/hashicorp/nomad/pull/9294#pullrequestreview-527748994
87 lines
1.5 KiB
SCSS
87 lines
1.5 KiB
SCSS
$size: 12px;
|
|
|
|
.toggle {
|
|
cursor: pointer;
|
|
font-weight: $weight-semibold;
|
|
position: relative;
|
|
|
|
&.is-disabled {
|
|
color: $grey-blue;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.is-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.label {
|
|
padding-left: 0.5rem;
|
|
padding-bottom: 1px;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.toggler {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
width: $size * 2;
|
|
height: $size;
|
|
border-radius: $size;
|
|
background: $grey-blue;
|
|
transition: background 0.3s ease-in-out;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
width: calc(#{$size} - 4px);
|
|
height: calc(#{$size} - 4px);
|
|
border-radius: 100%;
|
|
background: $white;
|
|
left: 2px;
|
|
top: 2px;
|
|
transform: translateX(0);
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
}
|
|
|
|
// Always style the toggler based off the input state to
|
|
// ensure that the native input is driving behavior.
|
|
.input:focus + .toggler {
|
|
box-shadow: 0 0 0 1px $grey-light;
|
|
outline: none;
|
|
}
|
|
|
|
.input:checked + .toggler {
|
|
background: $blue;
|
|
|
|
&::after {
|
|
transform: translateX($size);
|
|
}
|
|
}
|
|
|
|
.input:checked:focus + .toggler {
|
|
box-shadow: 0 0 0 1px rgba($blue, 0.5);
|
|
}
|
|
|
|
.input:disabled + .toggler {
|
|
background: rgba($grey-blue, 0.6);
|
|
|
|
&::after {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.input:checked:disabled + .toggler {
|
|
background: rgba($blue, 0.5);
|
|
}
|
|
}
|