packages/frontend/app/styles/components/reports/new-subject.scss
@use "../../ilios-common/colors" as c;
@use "../../ilios-common/mixins" as m;
@use "sass:color";
.reports-new-subject {
background-color: c.$slightWhite;
border: 1px solid c.$culturedGrey;
margin: 0.5rem 0;
padding: 1rem 1rem 3rem;
.title {
@include m.ilios-heading-h5;
margin-bottom: 0.5rem;
}
.new-subject-content {
@include m.ilios-form-error;
p {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 1fr 4fr;
label {
@include m.ilios-label;
text-align: right;
}
select,
input {
width: 100%;
}
.validation-error-message {
grid-column: 1 / -1;
}
.mesh-search {
label {
display: none;
}
}
}
.new-subject-search {
p {
margin-bottom: 0;
}
.results {
@include m.ilios-list-reset;
margin-top: -0.25rem;
grid-column: 2;
background: c.$white;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: c.$slightWhite;
box-shadow: 0 2px 2px color.adjust(c.$black, $alpha: -0.8);
color: c.$raisinBlack;
max-height: 15rem;
overflow-y: scroll;
transition: all 0.2s ease-in-out;
li {
border-bottom: 1px solid c.$culturedGrey;
width: 100%;
button {
height: 100%;
width: 100%;
padding: 0.6rem 0 0 1rem;
&:hover {
background-color: c.$culturedGrey;
}
}
&:last-of-type {
border: 0;
}
&.results-count {
color: c.$fernGreen;
}
}
}
}
.selected-instructor,
.selected-mesh-term {
@include m.ilios-tag-list;
.remove {
margin-left: 0.5rem;
}
}
.term-title {
font-weight: bold;
}
.term-details {
font-style: italic;
}
.input-buttons {
margin-top: 0.5rem;
float: right;
}
}
}