89 lines
1.3 KiB
SCSS
89 lines
1.3 KiB
SCSS
.m-share {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 45px;
|
|
z-index: 3;
|
|
background-color: var(--transparent-background-color);
|
|
@include bs(0 -4px 10px rgba(0,0,0,0.1));
|
|
|
|
@include respond-to('medium') {
|
|
height: 50px;
|
|
}
|
|
|
|
@include respond-to('large') {
|
|
position: absolute;
|
|
top: 0;
|
|
left: auto;
|
|
right: -75px;
|
|
width: 40px;
|
|
height: auto;
|
|
background-color: transparent;
|
|
@include bs(0 0 0 transparent);
|
|
}
|
|
|
|
@include respond-to('extra-large') {
|
|
width: 50px;
|
|
right: -175px;
|
|
}
|
|
|
|
@include respond-to('largest') {
|
|
right: -200px;
|
|
}
|
|
|
|
a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
a:first-of-type {
|
|
margin-left: 0;
|
|
|
|
@include respond-to('large') {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
button:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.rtl {
|
|
.m-share {
|
|
@include respond-to('large') {
|
|
right: auto;
|
|
left: -75px;
|
|
}
|
|
|
|
@include respond-to('extra-large') {
|
|
left: -175px;
|
|
}
|
|
|
|
@include respond-to('largest') {
|
|
left: -200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-share__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
@include respond-to('large') {
|
|
position: sticky;
|
|
top: 100px;
|
|
flex-direction: column-reverse;
|
|
align-items: flex-start;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.rtl {
|
|
.m-share__content {
|
|
direction: ltr;
|
|
}
|
|
}
|