src/sass/_availableBidders.scss
.bidder-manager-page {
border-top: 1px solid $color-white;
h3:not(.usa-alert-heading) {
font-size: 15px;
font-weight: normal;
}
.bidder-manager-search-container {
background-color: $bg-blue-dark-1;
padding: 12px 31px;
}
.bidder-manager-upper-section {
box-shadow: 20px 20px 20px $bg-gray-medium-2;
padding: 20px 35px;
background-color: $bg-blue-dark-1;
}
.available-bidders-stats {
padding-top: .1em;
.statistics-section {
background-color: $color-white;
border: 2px solid $color-gray-light;
padding: 1.2em 10% 2em 1.5em;
h3, h4 {
font-family: 'Roboto';
}
}
.legend-container {
h4 {
margin: 20px 0 0;
}
}
.legend-small {
display: inline-grid;
flex-flow: column wrap;
grid-auto-flow: column;
grid-template-rows: repeat(9, auto);
}
.legend-large {
display: inline-grid;
flex-flow: column wrap;
grid-auto-flow: column;
grid-template-rows: repeat(25, auto);
}
.legend-item {
margin-top: 1em;
}
.legend-square {
height: 1.2em;
width: 1.2em;
}
.legend-text {
margin: auto .8em;
}
.percent-text {
font-weight: bold;
margin: 0 .4em;
}
.chart-container {
margin-right: auto;
> div {
margin-left: auto;
}
}
}
@media screen and (max-width: 1525px) {
.small-screen-stack {
flex-wrap: wrap;
float: none;
}
.small-screen-stack > div {
flex-basis: 45%;
margin: 0 10px;
}
.small-screen-stack > div > label,.label {
min-width: 100px;
}
}
@media screen and (max-width: 1241px) {
.small-screen-stack {
width: 100%;
margin-bottom: 10px;
}
.small-screen-stack > div {
align-items: center;
display: flex;
float: right;
margin: 0 10px 0 0;
}
}
@media screen and (max-width: 890px) {
.small-screen-stack > div {
min-width: 300px;
}
}
}
.bidder-manager-bidders {
color: $color-black;
margin-top: 50px;
// Needed to make sure the th borders moves with position: sticky
border-collapse: separate;
table {
margin: 0;
width: 100%;
border: 1px solid $dos-blue;
overflow-x: auto;
thead {
tr {
th {
text-align: center;
color: $color-white;
background-color: $dos-blue;
// Position sticky not supported on ie11
// Position sticky has partial support on browsers (Must target th; not thead)
position: -webkit-sticky;
position: sticky;
top: 0;
border: none;
border-bottom: 1px solid $dos-blue;
}
th:nth-of-type(#{$abl-actions-td}) {
color: $color-black;
background-color: $tm-white-smoke-light;
}
.table-title {
// font-size: 30px;
font-weight: bold;
}
@media screen and (max-width: 1600px) {
.table-title {
// font-size: 25px;
}
}
@media screen and (max-width: 1400px) {
.table-title {
font-size: 20px;
}
}
}
}
tbody {
td {
text-align: center;
padding: 20px;
font-size: 14px;
border: none;
border-bottom: 1px solid $tm-gray;
}
@media screen and (max-width: 1700px) {
td {
padding: 10px 15px;
// font-size: 15px;
}
}
@media screen and (max-width: 1400px) {
td {
padding: 5px 7px;
// font-size: 13px;
}
}
}
.no-step-letters-icon {
color: $color-gray-light;
}
.one-step-letter-icon {
color: #f7b578
}
.both-step-letters-icon {
color: $color-red;
}
}
}
.internal {
@media screen and (min-width: 1099px) and (max-width: 1199px) {
width: 79%;
margin-left: 0;
}
@media screen and (min-width: 1200px) and (max-width: 1315px) {
width: 87%;
margin-left: 0;
}
@media screen and (max-width: 1098px) {
width: 70%;
margin-left: 0;
}
}
.ab-table-title-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: -50px;
button {
margin-right: 0;
}
}
.ab-lower-section {
padding: 0;
}
.ab-inactive {
td:not(:nth-of-type(#{$abl-actions-td})) {
color: #a9acaf;
background-color: #cacbce;
a {
color: #a9acaf;
}
}
}
.ab-active {
@each $td-info in $abl-gray-config {
td:nth-of-type(#{nth($td-info, 2)}) {
color: #a9acaf;
background-color: #cacbce;
a {
color: #a9acaf;
}
}
}
}
.ab-action-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
div:nth-child(2) {
// Adds some spacing between the 3 buttons using the middle element (nth(2))
padding: 0px 7px;
}
.fa-trash-o {
color: $color-red;
}
.fa-building {
color: $color-dodger-blue;
}
}
.external-view-toggle {
display: flex;
justify-content: center;
.active {
text-shadow: 0 0 10px $color-dodger-blue;
}
}
.available-bidder-form {
input[type="text"]:disabled {
border: None;
background: none;
}
// styling for step letter date picker
div:not(.react-datepicker-wrapper, .react-datepicker-wrapper div,
.react-datepicker__tab-loop, .react-datepicker__tab-loop div) {
display: flex;
align-items: baseline;
}
// for the Share Bureau icon
div:nth-child(14) {
justify-content: flex-start;
}
dd {
margin-inline-start: 30;
text-align: justify;
margin-right: auto;
margin-left: 0;
}
label, dt {
display: block;
margin-top: 3rem;
min-width: 7em;
text-align: left;
}
.select-error {
border-color: $alert-red;
box-shadow: 0px 0px 0px 2px $alert-red;
}
.date-picker-validation-container,
.oc-validation-container {
width: 100%;
}
.usa-input-error-message {
text-align: left;
}
}
.swal-modal {
width: 1000px;
background-color: #fff0;
padding: 0 200px;
.swal-title, .swal-content {
background-color: white;
}
swal-title:first-child {
margin-top: 5px;
}
.swal-title:not(:last-child) {
margin-bottom: -2px;
padding: 39px 16px 28px;
}
.swal-title {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.swal-content {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0;
padding: 20px 20px 40px;
.detail {
padding: 10px 0;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
}
textarea {
// make sure this matches minRows in TextareaAutosize component
height: 110px;
min-height: 50px;
min-width: 100px;
}
input select textarea {
width: 75%;
}
}
#ocReason:disabled, #ocBureau:disabled,
#stepLetterOne:disabled, #stepLetterTwo:disabled {
background: darkgrey;
}
.tippy-popper {
.tippy-tooltip.oc-status-theme {
background-color: $color-white;
color: $color-black;
border: 2px solid $tm-gray;
font-size: 14px;
font-family: Roboto;
padding: 15px;
text-align: left;
box-shadow: $tm-gray 3px 14px 29px;
.arrow-regular {
border: none;
}
.tooltip-title {
font-weight: bold;
}
.tooltip-text {
.title {
font-size: 16px;
font-weight: bold;
}
div:first-child {
padding-bottom: 10px;
}
}
}
.tippy-tooltip.ab-languages-theme {
background-color: $color-white;
color: $color-black;
border: 2px solid $tm-gray;
font-size: 14px;
padding: 15px;
text-align: left;
box-shadow: $tm-gray 3px 14px 29px;
.arrow-regular {
border: none;
}
.tooltip-title {
font-size: 16px;
font-weight: bold;
padding-bottom: 3px;
}
.tooltip-text {
text-align: right;
padding-left: 5px;
}
}
.tippy-tooltip.ab-row-theme, .tippy-tooltip.step-letters-theme {
background-color: $color-white;
color: $color-black;
border: 2px solid $tm-gray;
font-size: 14px;
font-family: Roboto;
padding: 15px;
text-align: left;
box-shadow: $tm-gray 3px 14px 29px;
.arrow-regular {
border: none;
}
.ab-row-tooltip-wrapper, .step-letter-tooltip-wrapper {
display: flex;
padding-bottom: 10px;
div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.title {
font-size: 16px;
font-weight: bold;
}
.ab-row-tooltip-data, .step-letter-date {
font-weight: 400;
font-style: italic;
white-space: break-spaces;
}
}
.step-letter-tooltip-wrapper {
div:first-child {
padding-right: 10px;
border-right: 1px solid $color-gray-light;
}
div:nth-child(2) {
padding-left: 10px;
}
}
.title {
font-size: 16px;
font-weight: bold;
}
}
}
.oc-icon {
color: $tertiary-gold;
font-size: 1.2em;
}
.ab-languages {
display: inline-flex;
span {
padding-left: 5px;
}
}
.ab-languages-theme {
.language-group {
padding-top: 2px;
padding-bottom : 2px;
font-size: 0.9em;
.language-name {
font-weight: bold;
}
}
}
.no-value {
color: $color-gray-light;
}
.step-letter-clear-icon {
margin-left: 5px;
.active {
color: $alert-red;
}
.inactive {
color: $color-gray-light;
}
}
.comments-icon {
color: $color-dodger-blue;
}