Files
getgreen-backend/resources/sass/layout/_footer.scss

224 lines
4.3 KiB
SCSS
Executable File

.footer {
background-color: #efefef;
padding: 30px 0 30px;
&-top {
.logo {
@include mq("tablet", max) {
text-align: center;
}
}
.phone {
margin-left: 10px;
@include mq("tablet", max) {
margin-left: -20px;
display: flex;
justify-content: center;
}
i {
margin-right: 10px;
position: relative;
z-index: 2;
color: white;
&::after {
content: "";
position: absolute;
border-radius: 50%;
@extend %c-c;
width: 26px;
height: 26px;
background-color: #5b5b5b;
z-index: -2;
@extend %tr02;
}
}
&:hover {
span {
text-decoration: underline;
}
i::after {
background-color: $my-orange;
}
}
font-size: 16px;
font-weight: 600;
color: rgb(1, 1, 1);
line-height: 1.2;
}
.nav {
display: flex;
flex-direction: column;
&-item {
font-size: 16px;
font-weight: 600;
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
opacity: 1;
padding: 0;
// &:first-of-type {
// margin-bottom: 20px;
// @include mq("tablet", max) {
// margin-top: 20px;
// margin-bottom: 10px;
// font-size: 18px;
// }
// }
}
&-link {
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 14px;
opacity: 1;
font-weight: 600;
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
display: block;
&:hover {
text-decoration: underline;
color: $my-orange;
}
@include mq("tablet", max) {
text-align: center;
}
}
}
.socials {
display: flex;
// flex-direction: column;
align-items: center;
justify-content: flex-end;
@include mq("tablet-wide", max) {
flex-direction: row;
justify-content: center;
}
a {
display: block;
margin-bottom: 10px;
&:not(:last-of-type) {
// @include mq("tablet-wide", max) {
margin-right: 25px;
// }
}
i {
font-size: 14px;
position: relative;
z-index: 2;
color: white;
&::after {
content: "";
position: absolute;
border-radius: 50%;
@extend %c-c;
width: 26px;
height: 26px;
background-color: #5b5b5b;
z-index: -2;
@extend %tr02;
}
}
&:hover {
span {
text-decoration: underline;
}
i::after {
background-color: $my-orange;
}
}
}
}
}
.copyright,
.software-company {
font-size: 14px;
font-weight: normal;
color: rgb(0, 0, 0);
a {
&:hover {
color: $my-orange;
text-decoration: underline;
}
}
@include mq("tablet", max) {
text-align: center;
}
}
// &-bottom {
// margin-top: 20px;
// @include mq("tablet", max) {
// margin-top: 0;
// }
// .container {
// display: flex;
// justify-content: space-between;
// align-items: center;
// @include mq("tablet", max) {
// flex-direction: column;
// text-align: center;
// }
// }
// padding: 15px 0;
// border-top: 1px solid rgba(0, 0, 0, 0.102);
// }
.payments {
p {
font-size: 14px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: left;
line-height: 1;
padding: 0;
margin: 0;
margin-bottom: 15px;
@include mq("tablet-wide", max) {
margin-bottom: 25px;
}
@include mq("tablet", max) {
margin-bottom: 0;
margin-top: 15px;
}
}
&-item {
height: 50px;
width: 100px;
}
& > div {
margin-top: -20px;
img {
max-width: 100%;
height: 100%;
object-fit: contain;
}
@include mq("tablet-wide", max) {
margin-top: -40px;
}
@include mq("tablet", max) {
margin-top: 0;
}
}
}
}