discourse/plugins/chat/assets/stylesheets/common/chat-browse.scss
chapoi 292685d3de
UX: Chat browse redesign (#25698)
* UX: fix search input placeholder cutoff

* UX: use transparent button for new-channel

* UX: remove settings link

* UX: removed joined tag

* UX: increase lock icon size

* UX: use grid for channel card

* UX: chat-channel-card styling + cleanup

* UX: dont space about tabs on mobile

* specs

* PR feedback

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

* PR feedback > translation

* Remove import

* UX: update copy

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-02-15 18:00:22 +01:00

85 lines
1.4 KiB
SCSS

.chat-browse-view {
position: relative;
box-sizing: border-box;
padding: 1rem 1rem env(safe-area-inset-bottom) 1rem;
&__header {
display: flex;
align-items: center;
justify-content: flex-start;
}
&__title {
box-sizing: border-box;
margin-bottom: 0;
}
&__content_wrapper {
box-sizing: border-box;
margin-top: 1rem;
}
&__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.25rem;
@include breakpoint(tablet) {
grid-template-columns: repeat(1, 1fr);
grid-gap: 1rem;
}
}
&__actions {
display: flex;
justify-content: space-between;
align-items: end;
@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
}
}
&__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);
}
}
}