src/sass/_notifications.scss
.notifications-page {
.notification-row {
background-color: $color-white;
border: 1px solid $color-gray;
border-bottom: 0;
border-left: 8px solid $primary-blue;
display: flex;
padding: 16px 24px;
&:last-of-type {
border-bottom: 1px solid $color-gray;
}
.usa-button {
margin-bottom: 0;
}
.notification-button {
display: flex;
justify-content: flex-end;
margin: auto;
}
.data-point-title {
color: $color-gray;
font-size: .9em;
}
&.notification-row--read {
border-left: 1px solid $color-gray;
padding-left: 31px; // need to add difference in border-width to padding-left
}
}
.notifications-controls-container {
padding-left: 16px;
> div:first-of-type {
flex: 1;
}
}
.link-button-wrapper {
margin-right: 1em;
.link-button {
margin: auto;
}
}
.delete-button {
margin: auto 0 !important;
padding: 1rem 1.5rem;
position: relative;
top: 1px;
.fa {
color: $color-black;
}
}
// fix in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.delete-button {
max-height: 41px;
top: 28%;
}
}
.notification-card {
display: flex;
height: 100%;
justify-content: flex-start;
margin-left: 0;
.data-point-container {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
justify-content: center;
line-height: 1.5em;
width: 100%;
}
// fix in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.data-point-container {
min-width: 500px;
width: initial;
}
}
}
.total-results-container {
display: flex;
margin-bottom: 1em;
button {
padding: .75rem 2rem;
> .fa {
margin-right: 5px;
}
}
> span {
display: block;
flex-grow: 1;
margin: auto 0;
}
.usa-form {
display: flex;
height: 100%;
label,
select {
margin: auto 0;
}
label {
font-size: .8em;
margin-right: 10px;
}
// fix in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
label {
position: relative;
top: 14px;
}
}
}
}
.tm-checkbox {
margin-left: 0;
margin-right: 0;
label {
margin-top: 50%;
}
}
}