open-nomad/ui/app/styles/components/secure-variables.scss
Phil Renaud 8ea97f267b Link Variables to Jobs (#13627)
* Related entities scaffolded

* Added hint on edit

* Re-classic'd

* Dont create entities when path goes beyond task level

* only show the related entities hint for new vars, not edited ones

* Unit tests for pathLinkedEntities

* Acceptance tests for linked entities

* Add hint on creation

* Will be vs Is on @new boolean flag

* Link styles and namespaces on links

* Unused component class

* Delog

* Defensive shouldShowLinked

* Properly instantiating the accessibilty check test
2022-07-11 13:34:06 -04:00

146 lines
2.2 KiB
SCSS

.section.single-variable {
margin-top: 1.5rem;
.back-link {
text-decoration: none;
color: #363636;
position: relative;
top: 4px;
}
}
.variable-title {
.toggle {
font-size: 0.8rem;
margin-left: 1rem;
position: relative;
top: -0.25rem;
.toggler {
margin-right: 0.25rem;
}
}
}
.new-secure-variables {
& > div {
margin-bottom: 1rem;
}
.path-input {
&:disabled {
background-color: #f5f5f5;
}
&.error {
color: $red;
border-color: $red;
}
}
.duplicate-path-error {
position: relative;
animation: slide-in 0.3s ease-out;
}
.key-value {
display: grid;
grid-template-columns: 1fr 4fr 130px;
gap: 0 1rem;
align-items: end;
input.error {
color: $red;
border-color: $red;
}
.value-label {
display: grid;
grid-template-columns: 1fr auto;
& > span {
grid-column: -1 / 1;
}
}
button.show-hide-values {
height: 100%;
box-shadow: none;
margin-left: -2px;
border-color: $grey-blue;
}
button.add-more[disabled] {
border-color: #dbdbdb;
}
.key-value-error {
grid-column: -1 / 1;
position: relative;
animation: slide-in 0.3s ease-out;
margin: 0;
}
}
.editor-wrapper {
&.error {
.CodeMirror {
box-shadow: 0 0 0 3px $red;
}
.help {
padding: 1rem 0;
font-size: 1rem;
}
}
}
}
table.path-tree {
tr {
cursor: pointer;
a {
color: #0a0a0a;
text-decoration: none;
}
svg {
margin-bottom: -2px;
margin-right: 10px;
}
}
}
.section .notification.related-entities {
--blue: #1563ff;
display: flex;
align-items: center;
gap: 0.5rem;
&.notification {
align-items: center;
}
a {
color: $blue;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
}
.related-entities-hint {
margin: 0.5rem 0;
code {
background-color: lighten($grey-lighter, 8%);
border: 1px solid $grey-lighter;
padding: 0 0.25rem;
border-radius: 4px;
}
}
@keyframes slide-in {
0% {
top: 10px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}