src/sass/_buttons.scss
.unstyled-button {
-moz-appearance: unset;
-webkit-appearance: unset;
background-color: transparent;
border: 0;
border-radius: 0;
color: inherit;
cursor: pointer;
display: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
outline: unset;
padding: 0;
text-align: inherit;
text-decoration: inherit;
width: inherit;
}
.unstyled-button:hover,
.unstyled-button:active {
background-color: transparent;
color: inherit;
}
.tm-button {
background-color: $blue-primary;
border: 1px solid $blue-primary;
color: $color-white;
font-family: inherit;
font-size: 16px;
font-weight: 400;
.fa {
margin-right: 5px;
}
&:hover {
background: $tm-navy;
border-bottom: 1px solid $blue-primary;
color: $color-white;
.fa {
color: $color-white;
}
}
&:active {
background: $tm-navy-dark;
color: $color-white;
.fa {
color: $color-white;
}
}
.tm-button-alt-icon {
color: $color-white;
margin-right: 5px;
}
}
.tm-button-alt {
background-color: $color-white;
border: 1px solid $blue-primary;
color: $color-black;
font-family: inherit;
font-size: 16px;
font-weight: 400;
.fa {
margin-right: 5px;
}
&:hover {
background: $blue-primary;
border-bottom: 1px solid $blue-primary;
color: $color-white;
.fa {
color: $color-white;
}
}
&:active {
background: $tm-navy;
color: $color-white;
.fa {
color: $color-white;
}
}
.tm-button-alt-icon {
color: $blue-primary;
margin-right: 5px;
}
}
.tm-button-transparent {
background-color: transparent;
box-shadow: 0 0 0 2px $color-white inset;
color: $color-white;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
&:hover,
&:focus {
background-color: $color-white;
color: $color-black;
}
}
.actions-link-container {
color: $color-black;
.actions-link-text {
float: left;
}
.actions-link-icon {
float: left;
margin-top: 1px;
padding-left: 10px;
}
}
.mail-to-button {
color: $blue-primary;
}
.favorite-container {
&.usa-button:not(.usa-button-secondary) {
.fa {
color: $color-white;
}
}
&.button-text-hidden {
margin-top: 0;
padding-bottom: 11.5px;
padding-left: 14px;
padding-right: 14px;
padding-top: 11.5px;
background-color: $color-white;
.spinner-white,
.spinner-blue {
margin-right: 0;
}
.fa {
margin-right: 0;
padding-right: 0;
}
}
.fa {
color: $blue-primary;
}
}
.favorites-button-border {
border: 1px solid $blue-primary;
border-radius: 3px;
padding: 9px 12px;
}
.tm-button-no-box {
box-shadow: 0 0 0 2px transparent inset;
}
.link-button-wrapper {
a {
color: $color-white;
}
}
.post-data-button {
.fa {
margin-right: .5em;
}
}
.button-back-link {
font-size: 1.4rem;
margin-bottom: 2.5rem;
margin-top: 2.5rem;
.fa {
margin-right: 5px;
}
}
.tm-button-feedback {
background-color: $tertiary-gold-lighter;
border: 1px solid $tertiary-gold-lighter;
box-shadow: 2px 5px 9px -4px $color-black-box-shadow;
color: $color-black;
display: inline-block;
font-family: inherit;
font-size: 16px;
font-weight: 400;
padding-bottom: 1em;
padding-top: 1em;
.fa {
margin-right: 5px;
}
&:hover {
background: $tertiary-gold-light;
border-bottom: 1px solid $tertiary-gold-lighter;
color: $color-black;
.fa {
color: $color-black;
}
}
&:active {
background: $tertiary-gold;
color: $color-black;
.fa {
color: $color-black;
}
}
.tm-button-alt-icon {
color: $color-black;
margin-right: 5px;
}
}
.export-button-container {
display: flex;
button {
align-items: center;
display: flex;
justify-content: center;
margin-left: 10px;
min-width: 100px;
}
.ds-c-spinner {
height: 11px;
margin-right: 5px;
width: 11px;
&::before,
&::after {
border-width: 2px;
height: 11px;
width: 11px;
}
}
}
.description-edit {
&:hover {
cursor: pointer;
}
}
.compare-rectangle-container {
margin-right: 3px;
}
.compare-rectangle {
border: 1px solid $color-white;
border-radius: 3px;
box-sizing: border-box;
display: inline-block;
height: 10px;
margin-right: 1px;
width: 4px;
}
.toggle-button-label-inline {
display: inline;
}