app/assets/stylesheets/components/notifications.scss
.small_spinner {
display: none;
background: image-url("svg/icon_spinner.svg") no-repeat center center;
height: 20px;
width: 20px;
background-size: 100%;
position: relative;
top: 3px;
right: 4px;
}
.flash {
font-size: 18px;
font-weight: bold;
line-height: 1.2;
position: relative;
z-index: 101;
padding: 15px 15px;
text-align: center;
color: $flash-text;
background-color: $accent;
@media #{$mobile} {
padding: $baseline / 2;
font-size: 14px;
text-align: left;
}
.flash_stats {
font-size: 14px;
a {
text-decoration: underline;
}
}
a {
text-decoration: underline;
}
}
.ajax_waiting {
font-size: 10px;
padding-left: 16px;
padding-right: 32px;
position: relative;
top: 1px;
border-radius: 2px;
margin-right: 12px;
font-weight: bold;
border: 1px solid transparent;
height: 0;
&.ajax_fail {
height: 22px;
border: 1px solid $ajax-fail-border;
> div {
padding-right: 2px;
color: $ajax-fail-text;
padding-top: 6.5px;
&::after {
position: absolute;
top: 7.5px;
right: 10px;
content: image-url("svg/icon_x_red.svg");
}
}
}
&.ajax_success {
height: 22px;
border: 1px solid $ajax-success-border;
> div {
padding-right: 2px;
color: $ajax-success-text;
padding-top: 6.5px;
&::after {
position: absolute;
top: 7px;
right: 10px;
content: image-url("svg/icon_checkmark_green.svg");
}
}
}
}
.floating_feedback {
opacity: 0;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%, 0);
font-size: 15px;
padding-left: 24px;
padding-right: 48px;
border-radius: 2px;
margin-left: auto;
margin-right: auto;
top: 55px;
height: 33px;
background-color: $floating-feedback-background;
z-index: 100;
font-weight: bold;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
&.ajax_success {
border: 1px solid $ajax-success-border !important;
height: 33px;
}
&.ajax_fail {
border: 1px solid $ajax-fail-border !important;
height: 33px;
}
&.ajax_success > div {
padding-top: 9.75px;
padding-right: 3px;
&::after {
position: absolute;
top: 7.5px;
right: 15px;
content: "";
height: 15px;
width: 15px;
background-size: 15px 15px;
background-image: image-url("svg/icon_checkmark_green.svg");
background-repeat: no-repeat;
}
}
&.ajax_fail > div {
padding-top: 9.75px;
padding-right: 3px;
&::after {
position: absolute;
top: 7.5px;
right: 15px;
content: "";
height: 15px;
width: 15px;
background-size: 15px 15px;
background-image: image-url("svg/icon_x_red.svg");
background-repeat: no-repeat;
}
}
}
.notice,
.errorExplanation {
max-width: 960px;
padding: 0 $baseline * 1.5;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
margin-bottom: $baseline;
background-color: $error-message-background;
padding-left: $baseline * 1.5;
padding-right: $baseline * 1.5;
padding-top: $baseline * 0.75;
padding-bottom: 6px;
box-shadow: inset 0px 1px 0px $error-message-shadow;
@media #{$mobile} {
width: 96%;
}
h2 {
@include title18();
margin-top: 0;
color: $error-message-heading-text;
}
ul {
li {
font-size: 14px;
font-family: $medium-sans-font;
color: $error-message-list-items-text;
margin-bottom: $baseline / 2;
}
}
ol {
margin-top: 8px !important;
}
a.hide_notice {
font-size: 12px;
font-weight: bold;
float: right;
margin-top: -31px;
margin-right: 0;
color: $accent;
}
}
.field_with_errors {
input {
background: $input-rejected-background;
border: 1px solid $input-rejected-border;
}
}