app/assets/stylesheets/michigan-benefits/organisms/_form-card.scss
%max-container {
max-width: $max-width;
margin-left: auto;
margin-right: auto;
}
.form-card {
@extend %max-container;
@include clearfix;
margin-bottom: $padding-small;
}
.form-card__title {
font-weight: 600;
text-align: center;
}
.form-card__buttons {
display: flex;
flex-direction: column;
justify-content: space-between;
@include media($mobile-up) {
flex-direction: row;
}
}
.form-card__button_right {
display: flex;
justify-content: flex-end;
}
.form-card__button_centered {
text-align: center;
+ .form-card__button_centered {
margin-top: 1em;
}
}
.pre-title {
font-weight: 600;
color: $color-sky;
text-align: center;
}
.form-card__select {
margin-top: $padding-med;
}
.form-card__confirmation {
margin-bottom: $padding-med;
p {
margin-bottom: 0;
}
}
.form-card__header {
.text--help {
margin-bottom: 1em;
font-size: $font-size-normal;
}
.text--help:last-of-type {
margin-bottom: 0;
}
}
.form-card--meta-data {
margin-bottom: $padding-small;
text-align: center;
@include media($tablet-up) {
max-width: $max-width;
margin-left: auto;
margin-right: auto;
text-align: left;
}
}
.form-card--security-message,
.form-card--benefit-label {
color: $color-dark-grey;
font-size: $font-size-smallest;
}
.dark-background .form-card--security-message,
.dark-background .form-card--benefit-label {
color: $color-grey;
}
.form-card--security-message {
display: inline-block;
&:before {
content: "\e899";
display: inline-block;
font-family: $font-icon;
margin-right: .5em;
}
}
.form-card--benefit-label {
@include media($tablet-up) {
float: right;
}
}