src/sass/_profile.scss
// Nesting depth was needed, otherwise styles broke if placed outside of parent class (.expandable-link)
.profile-page {
border: solid 0 1px 1px 1px $color-gray-light;
display: flex;
position: relative;
width: 100%;
.bid-list-container,
.notifications-container {
.data-point-title {
color: $color-gray;
font-size: 1.2rem;
font-weight: inherit;
}
}
.saved-search-parent-container {
min-height: 300px;
}
.notifications-top {
min-height: 155px;
}
.section-padded-inner-container {
padding: 15px;
}
.hello-greeting {
font-family: Merriweather;
font-size: 1em;
font-weight: normal;
margin-bottom: 10px;
margin-top: 5px;
.fa {
padding-right: 10px;
padding-left: 0px;
}
}
.usa-grid-full {
max-width: none;
}
// fix container width in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.condensed-card-highlighted > .usa-grid-full,
.user-dashboard-main {
max-width: calc(100vw - 250px);
}
}
.updates-container {
display: flex;
flex-direction: column;
min-height: 362px;
> div:nth-child(1) {
display: flex;
flex-direction: column;
flex-grow: 1;
.classifications-client-badges-container {
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
.classifications-client-badges {
padding-bottom: 15px;
min-width: 100%;
.client-badge-container {
display: inline-block;
}
.classifications-badges-text {
display: inline-block;
vertical-align: super;
padding-left: 10px;
}
.classifications-glossary-link {
vertical-align: super;
padding-left: 10px;
color: $bg-gray-dark-2;
}
.classifications-glossary-link:hover {
color: $bg-gray-dark-1;
}
.classifications-season-text {
display: inline-block;
vertical-align: super;
padding-left: 10px;
padding-top: 20px;
}
}
}
.unstyled-button {
color: $blue-primary;
font-size: 1.2em;
}
.classifications-checkbox {
align-items: center;
font-size: 16px;
}
.small-link-container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 60px;
padding: 10px 15px;
}
.edit-buttons-container {
display: flex;
justify-content: space-around;
width: 100%;
}
button {
margin-bottom: 0;
margin-top: 0;
.fa {
margin-right: 5px;
}
}
.client-checkbox-list {
display: flex;
flex-wrap: wrap;
}
.client-checkbox-list > :first-child {
border-bottom: 1px solid $bg-gray-dark-2;
border-top: 1px solid $bg-gray-dark-2;
margin-bottom: 1em;
min-width: 100%;
.static-client-badge {
background-color: $tertiary-success;
height: 30px;
width: 30px;
margin: 10px 10px 10px 0;
}
> div {
display: inline-block;
vertical-align: middle;
}
}
.tm-checkbox {
margin: 0 auto;
margin-left: 0;
margin-right: 2%;
min-width: 100%;
}
label {
margin-bottom: 1rem;
margin-top: 1rem;
}
}
.favorite-positions-container,
.saved-searches-container {
position: relative;
.export-button-container > button {
margin-top: 0;
}
.total-results-container {
min-height: 20px;
}
.favorites-top-section {
margin-bottom: 1.2em;
.favorites-top-section--controls {
display: flex;
justify-content: flex-end;
}
}
.condensed-card {
margin-bottom: 35px;
}
.favorites-title-container {
float: left;
}
.results-dropdown {
float: right;
}
}
.bidder-portfolio-container {
position: relative;
.total-results-container {
margin: 0 0 15px 15px;
}
}
.bidder-portfolio-listing {
margin-right: 0;
position: relative;
}
@media screen and (max-width: $screen-md-min) {
.bidder-portfolio-listing {
margin-right: unset;
}
}
.actions-container {
float: right;
margin-bottom: 5px;
button {
font-size: 15px;
margin-bottom: 10px;
padding-left: 40px;
padding-right: 40px;
}
}
.portfolio-controls {
margin-bottom: 25px;
}
.profile-subroute-container {
border: 1px solid $color-gray;
min-height: 300px;
}
.saved-search-card {
min-height: 50px;
padding: 5px 15px;
.usa-width-one-half {
dd {
padding-left: 1.5rem;
}
}
.search-title {
margin-bottom: 5px;
text-decoration: underline;
.fa {
font-size: 1.1em;
font-weight: bold;
margin-left: 5px;
}
}
}
.saved-searches-container {
position: relative;
.searches-top-section {
margin-bottom: 1em;
}
.searches-title-container {
float: left;
}
.scrollarea {
margin-top: 1em;
.scrollarea-content {
padding-right: $scrollbar-width - 2;
}
}
}
.bid-list-delete-button-container {
margin-top: .5em;
}
.profile-content-container {
background-color: $tm-white-smoke-light;
flex-grow: 1;
min-height: 700px;
right: 0;
width: auto;
}
}
.user-dashboard {
font-size: 15px;
position: relative;
.dashboard-top-section {
margin-bottom: 1.2em;
}
.search-as-client-button {
float: right;
}
.user-dashboard-section-container {
float: left;
}
.assignments-section {
.favorites-list-container {
max-height: 500px;
overflow-y: auto;
}
.start-end {
display: inline;
.fa {
color: $color-green;
}
}
}
.user-dashboard-section {
background-color: $color-white;
border: solid 1px $color-gray-light;
margin-bottom: 25px;
}
.user-dashboard-column-1 {
min-height: 500px;
}
.user-dashboard-column-2 {
min-height: 500px;
}
.user-dashboard-column-3 {
min-height: 700px;
}
.current-user-section {
min-height: 350px;
}
.current-user-section-container:last-child {
border-bottom: 0;
border-top: 0;
word-wrap: break-word;
}
.current-user-top {
.section-padded-inner-container {
display: flex;
justify-content: space-evenly;
align-items: center;
.avatar-group {
padding-right: 5px;
}
.name-group {
text-align: left;
}
}
}
.current-user-section-border {
border-bottom: 1px solid $color-gray-light;
}
.current-user-bid-information {
border-bottom: 1px solid $color-gray-light;
text-align: left;
}
.current-user-personal-information {
border-bottom: 1px solid $color-gray-light;
min-height: 150px;
text-align: left;
.skill-code-data-point-container:last-child {
margin-bottom: 0;
}
}
.bid-count-container {
float: left;
.data-point-content {
text-decoration: underline;
}
}
.bid-count-container-left {
width: 40%;
}
.bid-count-container-right {
width: 60%;
}
.bid-count-right {
border-left: 1px solid $color-gray-light;
padding-left: 20%;
}
.data-point-side-by-side {
.data-point-title {
float: left;
font-size: 15px;
padding-right: 5px;
}
.data-point-content {
float: left;
}
}
.cdo-section {
min-height: 50px;
}
.position-info-section {
min-height: 250px;
}
.notifications-section {
min-height: 250px;
.bordered-list {
min-height: 150px;
}
}
.bidlist-section {
min-height: 300px;
.tm-spinner-saved-searches {
top: 40%;
}
}
.inbox-section {
min-height: 300px;
}
.dashboard-section-title {
font-size: 17px;
font-weight: bold;
margin-bottom: 10px;
.fa {
margin-right: 5px;
}
h2 {
display: inline-block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
}
}
.dashboard-section-title-small {
font-size: 15px;
}
.data-point-container {
margin-bottom: 10px;
}
.data-point-title {
color: $color-gray;
font-size: 12px;
}
.data-point-content {
font-size: 15px;
}
.section-padded-inner-container {
padding: 15px;
}
.section-padded-inner-container-narrow {
padding: 10px 15px;
}
.padded-container-no-bottom {
padding-bottom: 0;
}
.edit-profile-link {
font-size: 13px;
margin-bottom: 10px;
a {
color: $blue-primary;
text-decoration: none;
}
}
.dashboard-user-profile-picture {
display: inline-block;
height: $avatar-size;
margin: .5em 0;
vertical-align: middle;
width: $avatar-size;
}
.start-end {
.fa {
color: $color-green;
margin: 0 5px;
}
}
.current-user-name {
font-size: 1.6rem;
margin-bottom: 5px;
}
.agenda-item-history-link {
border-top: 1px solid #AEB0B5;
padding-top: 1em;
text-align: center;
}
.agenda-item-history-header{
padding-bottom: 1em;
}
}
$total-padding: 28px;
$border: 5px;
$padding-no-border: $total-padding - $border;
.profile-menu {
font-size: 15px;
height: 100%;
flex-shrink: 0;
.fa {
color: $blue-primary;
}
.fa-container {
float: left;
min-width: $total-padding;
}
.title-container {
float: left;
padding-right: 5px;
}
.angle-container {
float: right;
}
.icon-padding {
padding: 3px 0;
}
.link-unhighlighted {
border-left: $border solid transparent;
}
.link-highlighted {
background-color: $tm-white-smoke-light;
border-left: $border solid $primary-blue;
.title-container {
font-weight: bold;
word-wrap: break-word;
}
}
.list-item-wrapper {
padding-left: $padding-no-border;
}
.profile-titles-wrapper {
display: flex;
}
.expandable-link {
border-left: unset;
margin-bottom: 7px;
.list-item-wrapper {
padding-left: $total-padding;
}
ul {
.link-unhighlighted {
border-left: unset;
padding-left: $border;
}
}
}
.children-ul {
margin-top: .5em;
.fa-container {
min-width: 30px;
}
.list-item-wrapper {
padding-left: 50px;
}
}
.menu-title {
font-weight: bold;
padding: 10px 15px 20px 30px;
.unstyled-button {
color: inherit;
float: right;
}
.menu-title-text {
float: left;
}
}
a {
color: $color-black;
display: inline-block;
width: 100%;
}
li {
cursor: pointer;
line-height: 1.5;
margin-bottom: unset;
width: 100%;
}
ul {
list-style-type: none;
padding: 0;
.fa {
margin-right: 10px;
}
}
}
.profile-menu-collapsed {
.menu-title {
padding-bottom: 2px;
padding-right: 0;
.unstyled-button {
float: none;
}
}
}
.bidder-portfolio-navigation-item {
float: left;
font-size: 15px;
margin-right: 30px;
padding: 15px 0;
a {
color: $color-black;
text-decoration: none;
}
}
.portfolio-top-nav-container {
border-bottom: 1px solid $color-black;
margin-bottom: 30px;
}
.is-underlined {
border-bottom: 8px solid $color-black;
border-spacing: 6px;
}
.is-not-underlined {
border-bottom: 8px solid transparent;
border-spacing: 6px;
}
.portfolio-total-results {
font-size: 24px;
font-weight: bold;
}
.portfolio-sort-container {
select {
background-color: $color-white;
border: 1px solid $color-gray-light;
border-radius: unset;
}
.usa-form {
float: right;
}
}
.navigation-item-fraction {
font-weight: bold;
}
.bordered-list {
ul {
list-style-type: none;
margin-top: 0;
padding: 0;
}
li {
margin-bottom: 1em;
}
.bordered-list-content {
border-left: 5px solid $blue-primary;
}
.hide-border {
.bordered-list-content {
border-left: 5px solid transparent;
}
}
}
.cdo-container {
font-size: 16px;
.cdo-container-inner {
display: flex;
}
.dashboard-user-profile-picture {
border-radius: 100%;
height: 100%;
margin-bottom: unset;
max-height: 40px;
max-width: 40px;
width: 100%;
}
.profile-picture-container {
min-width: 50px;
align-self: center;
}
.picture-status-container {
left: 30px;
position: absolute;
top: -2px;
}
.cdo-name-text {
float: left;
margin-right: 5px;
}
.status-container {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-top: 1px;
}
}
.cdo-text-container {
flex-grow: 1;
padding-left: 5px;
}
.cdo-header {
font-weight: bold;
}
.small-link-container {
font-size: 12px;
a {
color: $blue-primary;
text-decoration: none;
}
}
.small-link-container-settings {
a {
display: inline-block;
float: right;
padding-top: 5px;
}
}
.view-more-link-centered {
border-top: 1px solid $color-gray-light;
text-align: center;
a {
color: $blue-primary;
text-decoration: none;
}
}
.saved-search-card {
position: relative;
.bid-stats {
float: right;
font-size: 90%;
.bid-count-container {
.bid-count-label {
float: none;
}
}
}
.bid-list-card-title-position {
font-weight: bold;
text-transform: uppercase;
}
.bid-list-card-title-post {
font-weight: bold;
}
.bid-list-card-title-lg {
font-size: 1.1em;
}
.bid-list-card-title-status {
.fa {
margin-right: 5px;
}
}
.bid-status-declined {
color: $alert-red;
}
@media screen and (min-width: $screen-lg-min) {
.button-container {
height: 100%;
position: absolute;
top: 0;
width: 23.23176% + 2.35765%;
.button-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
button {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 0;
}
}
}
}
.section-header {
background-color: $blue-primary;
color: $color-white;
display: flex;
button {
margin-right: auto;
}
.section-header-text {
margin: auto;
}
.section-header-button-container {
margin: auto;
text-align: right;
.section-header-button {
border: 1px solid $color-white;
font-size: 12px;
padding: 5px 25px;
}
}
.fa {
margin-right: 5px;
}
}
.bid-list-container {
font-size: 1.1em;
max-height: 420px;
min-height: 420px;
overflow-y: auto;
.primary-text {
text-transform: uppercase;
}
.bid-list-content {
margin-top: 105px;
text-align: center;
}
.button-wrapper {
display: inline-block;
text-align: center;
}
}
.parent-container-bid-status-declined {
background-color: $color-gray-lightest;
.fa {
color: $alert-red;
}
.bordered-list-content {
border-left: 5px solid $alert-red;
}
}
.parent-container-bid-status-hand-shake-offered {
background-color: $color-green-light;
.fa {
color: $color-green;
}
.bordered-list-content {
border-left: 5px solid $color-green;
}
}
.parent-container-bid-status-closed {
background-color: $color-gray-lightest;
.bordered-list-content {
border-left: 5px solid $color-black;
}
}
.parent-container-bid-status-hand-shake-accepted {
background-color: $color-green-light;
.bordered-list-content {
border-left: 5px solid $color-green;
}
}
.parent-container-bid-status-approved {
background-color: $blue-primary-light;
.fa {
color: $blue-primary;
}
}
.notification-card {
padding: 0 10px;
}
.profile-content-inner-container {
padding: 20px 35px;
}
.dismiss-alt {
.dismiss-button {
background-color: transparent;
}
.dismiss-button:active {
.fa {
color: $color-black;
}
}
}
.profile-section-container {
.tm-button-transparent {
border: 1px solid $color-black;
color: $color-black;
float: right;
font-size: .8em;
padding: .7em 2em;
}
}
.favorites-list-container {
.parent-list-container {
background-color: $color-white;
.fa {
color: $blue-primary;
}
.bordered-list-content {
border-left: 5px solid $blue-primary;
}
}
.favorites-card-section {
float: left;
}
.favorites-card-section:nth-child(2) {
float: right;
}
.link-button {
float: right;
font-size: 1.2rem;
padding-left: 1rem;
padding-right: 1rem;
}
.saved-search-card {
padding: 5px 15px;
}
.data-point-container {
margin-bottom: 0;
}
}
.saved-search-pill {
background-color: $blue-primary;
border-radius: .7em;
color: $color-white;
float: left;
font-size: .8em;
font-weight: 300;
line-height: 1.8;
margin: 0 .7em .5em 0;
padding: 2px .7em 0;
}
.pill--projected-vacancy {
background-color: $primary-blue-darkest;
}
.pill--tandem-search {
background-color: $color-blue-chill;
}
// This will override previous color declarations
.pill--tandem2 {
background-color: $color-purple;
}
.pill--highlight {
color: $tertiary-gold-lighter;
}
.saved-searches-list-profile-container {
min-height: 260px;
position: relative;
.tm-button-transparent {
padding: .7em 3em;
}
.favorites-card-section:nth-child(2) {
float: right;
}
button {
float: right;
font-size: 1.3rem;
}
.section-header {
div:first-of-type {
flex: 7;
}
div:nth-of-type(2) {
flex: 5;
}
.section-header-button {
padding: 5px;
}
}
}
.saved-search-list-container {
min-height: 260px;
}
.permissions-table {
border-collapse: separate;
border-spacing: 0 .5em;
width: 40%;
.header {
font-weight: bold;
}
}