gab-social/app/javascript/gabsocial/components/columns_area/columns_area.scss

181 lines
2.7 KiB
SCSS
Raw Normal View History

.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 {
flex: 1 1 auto;
position: relative;
@include flex(center, stretch, row);
&__panels {
@include size(100%);
@include flex(center);
&__pane {
height: 100%;
pointer-events: none;
padding-top: 15px;
@include flex(flex-end);
&--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;
>div {
.column,
.drawer {
@include horizontal-padding(5px);
}
}
}
}
.columns-area--mobile {
flex-direction: column;
width: 100%;
@include margin-center;
.column,
.drawer {
padding: 0;
@include size(100%);
}
.search__input {
padding: 15px 30px 15px 15px;
@include text-sizing(16px, 400, 18px);
}
.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 {
@include horizontal-margin(17px, 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();
}