187 lines
2.8 KiB
SCSS
187 lines
2.8 KiB
SCSS
|
.page {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
width: 100%;
|
||
|
|
||
|
&__top {
|
||
|
display: flex;
|
||
|
z-index: 105;
|
||
|
|
||
|
@include size(100%, auto);
|
||
|
|
||
|
@media (min-width:895px) {
|
||
|
top: -290px;
|
||
|
position: sticky;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&__columns {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
|
||
|
@include size(100%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.columns-area {
|
||
|
display: flex;
|
||
|
flex: 1 1 auto;
|
||
|
flex-direction: row;
|
||
|
justify-content: flex-start;
|
||
|
position: relative;
|
||
|
|
||
|
&__panels {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
|
||
|
@include size(100%);
|
||
|
|
||
|
&__pane {
|
||
|
height: 100%;
|
||
|
pointer-events: none;
|
||
|
display: flex;
|
||
|
justify-content: flex-end;
|
||
|
padding-top: 15px;
|
||
|
|
||
|
&--start {
|
||
|
justify-content: flex-start;
|
||
|
}
|
||
|
|
||
|
&__inner {
|
||
|
pointer-events: auto;
|
||
|
|
||
|
@include size(265px, 100%);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&__main {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
box-sizing: border-box;
|
||
|
width: 100%;
|
||
|
max-width: 600px;
|
||
|
padding: 0 20px;
|
||
|
|
||
|
@media screen and (max-width: 375px) {
|
||
|
padding: 0 10px;
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width: 895px) {
|
||
|
margin: 0 20px;
|
||
|
padding: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
@media screen and (min-width: 631px) {
|
||
|
.columns-area {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.columns-area>div {
|
||
|
|
||
|
.column,
|
||
|
.drawer {
|
||
|
padding-left: 5px;
|
||
|
padding-right: 5px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.columns-area--mobile {
|
||
|
flex-direction: column;
|
||
|
width: 100%;
|
||
|
|
||
|
@include margin-center;
|
||
|
|
||
|
.column,
|
||
|
.drawer {
|
||
|
padding: 0;
|
||
|
|
||
|
@include size(100%);
|
||
|
}
|
||
|
|
||
|
.search__input {
|
||
|
line-height: 18px;
|
||
|
font-size: 16px;
|
||
|
padding: 15px 30px 15px 15px;
|
||
|
}
|
||
|
|
||
|
.search__icon .fa {
|
||
|
top: 15px;
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width: 360px) {
|
||
|
padding: 15px 0;
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width: 630px) {
|
||
|
.detailed-status {
|
||
|
padding: 15px;
|
||
|
|
||
|
.media-gallery,
|
||
|
.video-player {
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.account__header__bar {
|
||
|
padding: 5px 10px;
|
||
|
}
|
||
|
|
||
|
.navigation-bar,
|
||
|
.compose-form {
|
||
|
padding: 15px;
|
||
|
}
|
||
|
|
||
|
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
|
||
|
padding-top: 15px;
|
||
|
}
|
||
|
|
||
|
.account {
|
||
|
padding: 15px 10px;
|
||
|
}
|
||
|
|
||
|
.notification {
|
||
|
&__message {
|
||
|
margin-left: 48px + 15px * 2;
|
||
|
padding-top: 15px;
|
||
|
}
|
||
|
|
||
|
&__favourite-icon-wrapper {
|
||
|
left: -32px;
|
||
|
}
|
||
|
|
||
|
.status {
|
||
|
padding-top: 8px;
|
||
|
}
|
||
|
|
||
|
.account {
|
||
|
padding-top: 8px;
|
||
|
}
|
||
|
|
||
|
.account__avatar-wrapper {
|
||
|
margin-left: 17px;
|
||
|
margin-right: 15px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (max-width: 895px) {
|
||
|
.columns-area__panels__pane--left {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (max-width: 1180px) {
|
||
|
.columns-area__panels__pane--right {
|
||
|
display: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.columns-area--mobile .column {
|
||
|
// @include gab-container-standards();
|
||
|
}
|