src/components/SavedIndicator/SavedIndicator.scss
$border-size: 5px;
.saved-indicator-container {
text-align: center;
}
.saved-indicator {
position: fixed;
right: 0;
bottom: 45vh;
font-size: smaller;
text-align: center;
color: $eapp-grey-darker;
background-color: #fff;
padding: 1rem 2rem;
margin: 0;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
border-radius: 3px 0 0 3px;
height: 11rem;
width: 12rem;
&:focus {
outline: none;
outline-offset: auto;
}
&.active,
&:active,
&:hover {
background-color: #fff;
color: $eapp-blue;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
i {
top: -7.45rem;
width: 6.25rem;
height: 6.25rem;
padding-top: 2rem;
background-color: $eapp-blue;
}
.spinner {
top: -0.75rem;
.spinner-icon,
.spinner-icon:after {
top: -0.15rem;
width: 6rem;
height: 6rem;
border-top: $border-size solid rgba(32, 84, 147, 0.2);
border-right: $border-size solid rgba(32, 84, 147, 0.2);
border-bottom: $border-size solid rgba(32, 84, 147, 0.2);
border-left: $border-size solid $eapp-blue;
}
}
.spinner-label {
top: -8rem;
}
}
i {
position: relative;
top: -7rem;
display: block;
color: #fff;
background-color: $eapp-blue; // translates to rgb(0, 113, 188)
padding-top: 1.75rem;
border-radius: 50%;
font-size: 2.5rem;
width: 6rem;
height: 6rem;
margin-right: auto;
margin-left: auto;
&.invert {
background-color: transparent;
color: $eapp-blue;
}
}
strong {
display: block;
&.one-line {
padding: 0.7rem 0;
}
}
span.time {
display: block;
}
&.error {
i {
background-color: $eapp-red;
&.invert {
background-color: transparent;
color: $eapp-red;
}
}
&.active,
&:active,
&:hover {
color: $eapp-red;
}
.spinner-label {
.one-line {
color: $eapp-red;
}
}
}
.spinner {
position: relative;
top: -1rem;
width: auto;
height: auto;
.spinner-icon,
.spinner-icon:after {
width: 6rem;
height: 6rem;
border-top: $border-size solid rgba(0, 113, 188, 0.2);
border-right: $border-size solid rgba(0, 113, 188, 0.2);
border-bottom: $border-size solid rgba(0, 113, 188, 0.2);
border-left: $border-size solid $eapp-blue;
}
}
.spinner-label {
position: relative;
top: -7.15rem;
.one-line {
color: $eapp-blue;
}
}
}
.modal-open .saved-indicator {
display: none;
visibility: hidden;
}
@media only screen and (min-width: 1000px) {
.saved-indicator-container {
max-width: 80rem;
}
}