MyCrypto/common/components/Footer/index.scss

150 lines
2.4 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-around;
text-align: center;
align-items: center;
@media (min-width: $screen-sm-min) {
flex-direction: row;
text-align: left;
align-items: flex-start;
}
& > div {
padding: 8px 16px;
}
&-social-media-wrap {
margin-top: 32px;
& .Footer-social-media-link {
transition: opacity 0.3s;
color: white;
margin: 1rem;
margin-left: 0;
&:hover {
opacity: 0.8;
color: white;
}
&:focus {
opacity: 0.8;
color: white;
}
}
}
&-affiliate-wrap {
& .Footer-affiliate-tag {
background-color: #0e97c0;
display: inline-block;
padding: 4px 12px;
border-radius: 30px;
margin: 0rem 0.5rem 0.5rem 0px;
transition: color 0.3s, background-color 0.3s;
&:hover {
background-color: white;
color: #0e97c0;
}
& a {
transition: color 0s;
color: inherit;
&:hover {
color: inherit;
}
}
}
}
&-column {
padding: 1rem 2rem;
}
&-about {
&-logo {
width: 100%;
height: auto;
max-width: 20rem;
}
&-text {
max-width: 50ch;
}
}
&-about,
&-links,
&-info {
& > a {
display: block;
font-size: 0.9rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}
&-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,
.Footer-modal-button {
color: #7fe5ff;
font-weight: 400;
transition: color 0.3s;
&:hover,
&:focus {
opacity: 1;
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: 0;
margin: 0 0 $space-xs 0;
}
li,
p {
font-size: $font-size-small;
margin: $space-sm 0;
}
}
.Modal {
color: #000;
}