src/sass/_details.scss
.position-details-outer-container {
position: relative;
.handshake-offset-container {
display: flex;
left: -3px;
position: absolute;
top: -37px;
}
}
.position-details-header-container {
color: $color-white;
position: relative;
.post-data-button {
font-size: 1.6rem;
padding: 1em 4em;
}
.bid-count-label {
font-weight: normal;
margin: .3em 1.2em 0 0;
}
.position-title-bid-count {
.bid-count-list {
float: left;
}
}
@media screen and (max-width: $screen-xs-max) {
.favorite-container {
max-width: 50%;
}
}
}
.position-details-header {
overflow: hidden;
padding: 2em 0;
position: relative;
a {
color: $color-white;
}
h1 {
font-family: inherit;
font-size: 1em;
font-weight: 400;
margin: 0;
}
.back-link {
color: inherit;
cursor: pointer;
text-decoration: inherit;
}
.position-details-header-back {
font-size: .8em;
min-height: 17px;
}
.position-details-header-grid {
overflow: hidden;
}
.header-title-container {
border-right: 1px solid $bg-gray-dark-2;
@media screen and (max-width: $screen-xs-max) {
border-right: 0;
}
}
.post-title {
font-size: 1.15em;
font-weight: 300;
}
.position-details-header-title {
font-size: 1.5em;
font-weight: 400;
margin-bottom: .2em;
margin-top: 1em;
position: relative;
> span {
color: $tertiary-gold-lighter;
font-size: 1.2rem;
font-weight: 500;
position: absolute;
top: -20px;
}
}
.position-details-header-body {
font-size: .8em;
}
.position-details-header-image {
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
@media screen and (max-width: $screen-md-min) {
.position-details-header-image {
height: 100%;
}
}
}
.position-details-container {
h2,
.positions-section .positions-section-title {
font-family: 'Roboto';
font-size: 2.4rem;
font-weight: bold;
}
.position-error {
display: flex;
flex-direction: column;
margin-top: 50px;
h2 {
flex: 1;
margin: auto;
margin-bottom: 1em;
}
p {
flex: 1;
margin: auto;
}
}
.data-point-section {
.condensed-card-data-title {
font-weight: bold;
min-width: 225px;
}
.condensed-card-data-point {
margin-bottom: 2px;
}
}
.position-details-description-container:first-of-type.back-container {
padding-bottom: .5em;
padding-top: 0;
}
.back-container:empty {
display: none;
}
.positions-section {
min-height: 100px;
}
.positions-section .positions-section-container,
.positions-section .positions-section-title-header {
border: 0;
}
hr {
border-bottom-width: 0;
border-color: $color-gray-lighter;
border-left-width: 0;
border-right-width: 0;
border-style: solid;
border-top-width: 1px;
height: 0;
margin-top: 20px;
}
}
.position-details-description-container {
margin-bottom: 10px;
margin-top: 20px;
}
.position-details-description-container:first-of-type {
padding-top: 30px;
}
.position-details-description {
margin-left: 9%;
margin-top: 20px;
.position-details-description-title {
font-weight: bold;
text-transform: uppercase;
}
.position-details-description-section {
height: 80px;
margin-bottom: 2em;
margin-right: 4.5em;
margin-top: 1em;
@media screen and (max-width: $screen-lg-min) {
margin-right: 0;
}
.title {
font-size: .8em;
text-transform: uppercase;
}
.description {
font-size: 1.3em;
}
}
}
.position-details-additional {
margin-bottom: 20px;
margin-top: 30px;
.position-details-additional-body {
font-size: .8em;
.title {
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
}
}
.map-container {
margin: 40px 0 0 40px;
}
@media screen and (max-width: $screen-xs-max) {
.map-container {
margin: 0;
}
}
.map-title {
font-size: .8em;
}
}
.offset-bid-button-container {
bottom: -27%;
left: 68%;
position: absolute;
.unavailable-tooltip {
font-size: 1.3rem;
text-decoration: underline;
.fa {
margin-right: 5px;
}
}
.bid-list-button,
a {
box-shadow: $button-box-shadow !important;
padding: 1em 3em;
@media screen and (max-width: $screen-xs-max) {
padding: .5em 2em;
}
}
.offset-bid-button-container-count {
min-height: 38px;
a {
margin-left: 5px;
white-space: nowrap;
}
}
.bid-count-container {
margin-right: 7.5px;
}
}
.offset-bid-button-container-no-button {
bottom: 17%;
left: 71%;
position: absolute;
@media screen and (max-width: $screen-xs-max) {
min-width: 0px;
left: 63%;
}
}
.offset-bid-count-container {
bottom: 29%;
}
.edit-description-alert-container {
margin-top: 5px;
}
.edit-description-button-container {
margin-top: 5px;
}
.editable-position-field {
align-content: flex-start;
display: flex;
margin-bottom: 15px;
word-break: break-word;
.usa-grid-full {
margin: 0;
}
.editable-position-field-title {
float: left;
font-weight: bold;
margin-right: 5px;
}
.tm-spinner {
height: 50px;
margin-left: 0;
}
.fa {
cursor: pointer;
margin-left: 5px;
}
.editor {
margin-bottom: unset;
padding: 10px;
:global(.public-DraftEditor-content) {
min-height: 10px;
}
}
}
.poc-section {
.editable-position-field-title {
float: none;
}
}
.about-section-left {
padding-right: 10%;
.view-more-link {
text-decoration: underline;
}
}
.position-details-contact-container {
margin-top: 30px;
.editor {
float: left;
width: 100%;
}
.contact-container {
border: 1px solid $color-gray-lighter;
padding: 1em;
.contact-section {
margin-bottom: 1em;
}
.contact-section:last-of-type {
margin-bottom: 0;
}
}
.contact-container:first-of-type {
border-bottom: 0;
position: relative;
}
.contact-container:nth-of-type(2) {
&.has-bid-count {
padding-top: 2em;
}
}
.bid-count-container {
bottom: -12px;
position: absolute;
}
.contact-container:nth-of-type(2):not(.no-button) {
padding-bottom: 2em;
}
.offset-bid-button-container {
bottom: -22%;
left: 5%;
}
.service-needed-toggle {
margin-bottom: 10px;
margin-left: 1px;
margin-top: 30px;
.fa::before,
.ds-c-spinner::before {
position: relative;
top: 1px;
}
$spinner-size: 14px;
.ds-c-spinner {
margin-right: 4px;
&,
&::before,
&::after {
height: $spinner-size;
width: $spinner-size;
}
}
}
}
.title-actions-section {
font-size: 1.3rem;
font-weight: 300;
opacity: .9;
div {
color: $color-white;
float: left;
}
.favorite-container .fa {
color: $color-white;
font-size: 1.4rem;
}
.favorite-container span {
&.fa {
margin-right: 10px;
}
}
}
.how-to-bid {
border: 1px solid $bg-gray-dark-3;
margin-top: 30px;
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
.contact-container {
border: 0;
}
}
.service-needed-toggle + .how-to-bid {
margin-top: 0;
}
.featured-description-container {
margin-bottom: 15px;
.featured-description--link {
color: $primary-blue;
text-decoration: underline;
}
}