mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 20:01:11 +08:00
7a05a9d411
Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
143 lines
2.4 KiB
SCSS
143 lines
2.4 KiB
SCSS
// Mobile
|
|
// global styles that apply to the Discourse application specifically
|
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
|
// throughout the Discourse application
|
|
|
|
// Base Elements
|
|
|
|
body {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.ios-device {
|
|
textarea {
|
|
background-color: var(--secondary);
|
|
font-size: var(--font-size-ios-input);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input#reply-title {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
/* 13px left is intentional here to properly align with post quotes */
|
|
padding: 10px 8px 10px 13px;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Common classes
|
|
.boxed {
|
|
.contents {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.mobile-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
a {
|
|
color: var(--primary);
|
|
.d-icon {
|
|
margin-right: 0.25em;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
> li > a.expander {
|
|
display: flex;
|
|
align-items: center;
|
|
@include form-item-sizing;
|
|
border-color: var(--primary-medium);
|
|
max-width: 100%;
|
|
.selection {
|
|
@include ellipsis;
|
|
max-width: 120px;
|
|
}
|
|
|
|
> .d-icon {
|
|
&:last-of-type {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.drop {
|
|
display: none;
|
|
&.expanded {
|
|
left: 0;
|
|
display: block;
|
|
position: absolute;
|
|
z-index: z("dropdown");
|
|
background-color: var(--secondary);
|
|
width: 100%;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 5px;
|
|
border: 1px solid var(--primary-low);
|
|
box-sizing: border-box;
|
|
|
|
li {
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
|
|
a {
|
|
height: 100%;
|
|
display: block;
|
|
padding: 5px 8px;
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-vertical {
|
|
.control-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
// Special elements
|
|
|
|
#main-outlet-wrapper {
|
|
margin-left: unset;
|
|
margin-right: unset;
|
|
}
|
|
|
|
#main-outlet {
|
|
padding-top: 1.25em;
|
|
&:after {
|
|
// setup overlay for sidebar
|
|
content: "";
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
}
|
|
|
|
#main {
|
|
position: relative;
|
|
}
|
|
|
|
// Styles used before the user is logged into discourse. For example, activating
|
|
// their account or changing their email.
|
|
#simple-container {
|
|
width: 90%;
|
|
}
|