DEV: Put full width styles into their own file (#132)
Followup f1d5b69293
We want to make it super clear that this is to be removed when we merge
full width into core, keeping it in desktop.scss together with other
styles will make that harder.
This commit is contained in:
Martin Brennan
+2
-315
@@ -1,315 +1,2 @@
|
||||
// Full width layout
|
||||
|
||||
$sidebar-width: 17em;
|
||||
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header #site-logo {
|
||||
// constraining the logo to fit its grid container
|
||||
// this prevents the logo from shifting header content
|
||||
// when the sidebar is opened
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain; // contains logo without squishing/stretching
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
padding: 0;
|
||||
|
||||
body.has-sidebar-page & {
|
||||
.sidebar-wrapper {
|
||||
width: var(--d-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-full-page-chat & {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: 100%; // safari has issues without this
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
margin: 0 auto;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
|
||||
body.has-full-page-chat & {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#main-outlet > .regular {
|
||||
max-width: var(--d-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
body.has-sidebar-page & {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header .title:not(.title--minimized) {
|
||||
// allowing overflow here isn't always ideal
|
||||
// but works well enough most of the time
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.d-header {
|
||||
> .wrap {
|
||||
.contents {
|
||||
display: grid;
|
||||
grid-template-areas: "logo lspace extra-info rspace panel";
|
||||
grid-template-columns:
|
||||
minmax(auto, 1fr)
|
||||
auto
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
auto
|
||||
minmax(auto, 1fr);
|
||||
|
||||
.d-header-mode {
|
||||
grid-area: extra-info;
|
||||
white-space: nowrap;
|
||||
|
||||
@include breakpoint("tablet") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header .title {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
// at wide widths, when 1fr > 0
|
||||
// we want the panel to be the same width as the sidebar
|
||||
// this way we can get more accurate centering
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
minmax(0, calc(var(--d-sidebar-width) - 11px));
|
||||
gap: 1em;
|
||||
|
||||
// at narrower widths, when 1fr = 0
|
||||
// we can center without matching the sidebar's width
|
||||
// which allows the title to take up the remaining width
|
||||
@media screen and (max-width: 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.d-header-mode {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-sidebar-toggle {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.before-header-panel-outlet {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
|
||||
.d-header-mode {
|
||||
.bootstrap-mode {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.home-logo-wrapper-outlet {
|
||||
grid-area: logo;
|
||||
margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-right: 0.725em;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
||||
.title {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
grid-area: panel;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-info-wrapper {
|
||||
grid-area: extra-info;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-search--enabled .floating-search-input-wrapper {
|
||||
grid-area: extra-info;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page {
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header-mode,
|
||||
.extra-info-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
#reply-control.show-preview {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
margin-left: $sidebar-width;
|
||||
width: auto;
|
||||
|
||||
// overruling new core composer changes
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// overruling new core composer changes
|
||||
@media screen and (min-width: $reply-area-max-width) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.sidebar-animate {
|
||||
#main-outlet-wrapper {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.d-header-wrap .wrap {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.d-header .title {
|
||||
margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-left: 0.725em;
|
||||
}
|
||||
}
|
||||
|
||||
// provides some extra space for login buttons
|
||||
@media screen and (min-width: 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header .topic-list-data.default {
|
||||
position: sticky;
|
||||
top: 10em;
|
||||
}
|
||||
.topic-author-avatar-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulk-select.topic-list-data {
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
margin-top: 0;
|
||||
label {
|
||||
padding-block: 0.345em;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-header {
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
|
||||
&:not(.default) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.default {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.bulk-select,
|
||||
span:not(.bulk-select-topics, .d-button-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: -1em;
|
||||
@media screen and (max-width: 1048px) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
padding: 1em;
|
||||
button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "desktop-horizon-fixes";
|
||||
@import "desktop-full-width";
|
||||
|
||||
Reference in New Issue
Block a user