discourse/plugins/chat/assets/stylesheets/common/chat-navbar.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

107 lines
1.8 KiB
SCSS

.c-navbar-container {
position: relative;
border-bottom: 1px solid var(--primary-low);
background: var(--secondary);
box-sizing: border-box;
display: flex;
z-index: z("composer", "content") - 1;
padding: 0 1rem;
&.-clickable {
cursor: pointer;
}
&.-full-title {
.c-navbar__title {
min-height: var(--chat-header-offset);
}
.c-navbar__title,
.c-navbar__title-text {
height: auto;
overflow: visible;
white-space: normal;
text-overflow: unset;
}
}
}
.c-navbar {
display: flex;
align-items: flex-start;
width: 100%;
gap: 0.25rem;
position: relative;
.single-select-header {
padding: 0.3675rem 0.584rem;
}
}
.c-navbar__back-button {
height: var(--chat-header-offset);
}
.c-navbar__channel-title {
@include ellipsis();
font-weight: 700;
height: var(--chat-header-offset);
display: flex;
align-items: center;
}
.c-navbar__title {
display: flex;
align-items: center;
@include ellipsis();
height: var(--chat-header-offset);
&-text {
@include ellipsis();
font-weight: 700;
max-width: 100%;
vertical-align: middle;
padding-block: 5px;
> .d-icon {
margin-right: 5px;
}
}
.chat-drawer & {
padding-left: 1rem;
}
.d-icon {
vertical-align: middle;
}
}
.c-navbar__sub-title {
line-height: var(--line-height-small);
font-size: var(--font-down-1-rem);
font-weight: normal;
}
.c-navbar__threads-list-button {
gap: 0.25rem;
&.has-unreads {
.d-icon-discourse-threads {
color: var(--tertiary-med-or-tertiary);
}
}
}
.c-navbar__actions {
list-style: none;
margin-left: auto;
display: flex;
align-items: center;
height: var(--chat-header-offset);
}
.c-navbar__back-button ~ .c-navbar__title {
padding-left: 0;
}