mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 21:24:04 +08:00
1219f41c68
- Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
121 lines
2.1 KiB
SCSS
121 lines
2.1 KiB
SCSS
.chat-browse-view {
|
|
position: relative;
|
|
height: calc(100vh - var(--header-offset) - var(--chat-header-offset));
|
|
padding-top: 1em;
|
|
padding-bottom: 41px;
|
|
box-sizing: border-box;
|
|
overflow-y: scroll;
|
|
|
|
@include chat-scrollbar();
|
|
|
|
@include breakpoint(mobile-large) {
|
|
padding-right: 1rem; //fix for different scroll behaviour on mobile where overflow-y:scroll acts like auto
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.new-channel-btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
box-sizing: border-box;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__content_wrapper {
|
|
margin: 2rem 0 0 1rem;
|
|
box-sizing: border-box;
|
|
|
|
@include breakpoint(tablet) {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
&__cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 2.5rem;
|
|
|
|
@include breakpoint(tablet) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
grid-gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
margin: 0 0 0 1rem;
|
|
|
|
@include breakpoint(tablet) {
|
|
flex-direction: column;
|
|
|
|
.dc-filter-input-container {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.dc-filter-input-container,
|
|
nav {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__filters {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
&:before {
|
|
content: none; //there is a strange thing applied on nav-pills and this resets it
|
|
}
|
|
|
|
@include breakpoint(mobile-large) {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
&__filter {
|
|
display: inline;
|
|
margin-right: 1em;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@include breakpoint(mobile-large) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__filter-link,
|
|
&__filter-link:visited {
|
|
color: var(--primary);
|
|
font-size: var(--font-up-2);
|
|
padding: 0 0.25rem;
|
|
|
|
@include breakpoint(tablet) {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
.chat-channel-card {
|
|
.chat-channel-card__leave-btn {
|
|
padding: 0;
|
|
&:hover,
|
|
&:focus {
|
|
background: none;
|
|
}
|
|
|
|
&:focus {
|
|
@include default-focus;
|
|
}
|
|
}
|
|
}
|
|
}
|