MyCrypto/common/components/Footer/index.scss

104 lines
1.5 KiB
SCSS

@import 'common/sass/variables';
// footer
.Footer {
background-color: $ether-navy;
color: white;
padding-top: $space-xs;
padding-bottom: $space-sm;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
align-items: center;
@media (min-width: $screen-sm-min) {
flex-direction: row;
text-align: left;
align-items: flex-start;
}
&-column {
padding: 1rem 2rem;
}
&-about {
max-width: 22rem;
&-logo {
width: 100%;
height: auto;
max-width: 20rem;
}
}
&-info {
max-width: 34rem;
}
&-links {
max-width: 28rem;
}
&-modal-button {
color: #4ac8ed;
background-color: rgba(0, 0, 0, 0);
border: none;
text-align: left;
padding: 0;
margin: 0;
font-weight: 300;
transition: 500ms all ease-in-out;
&:hover {
color: #0e97c0;
}
}
p {
margin: $space-xs 0 $space-sm;
}
a {
color: #4ac8ed;
&:hover,
&:focus {
color: darken(#4ac8ed, 5%);
}
}
h5 {
font-size: $font-size-bump;
margin: $font-size-small 0 0;
i {
margin-right: 0.25em;
@media (min-width: $screen-sm-min) {
margin-left: -1.5em;
}
}
}
ul {
list-style: none;
padding-left: $space-sm;
margin: 0 0 $space-xs 0;
}
li,
p {
font-size: $font-size-small;
margin: $space-sm 0;
}
@media screen and (max-width: $grid-float-breakpoint) {
.row {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
}
}
.Modal {
color: #000;
}