Files
mattermost/webapp/sass/layout/_navigation.scss
Asaad Mahmood d64d1f4029 PLT-6905 - Updating channel header design (#6789)
* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text
2017-07-06 09:07:43 -04:00

187 lines
3.8 KiB
SCSS

@charset 'UTF-8';
.nav > li > a:focus,
.nav > li > a:hover {
background: transparent;
}
.nav-tabs {
margin-bottom: 10px;
> li {
margin-right: 5px;
> a {
border-bottom-color: transparent !important;
padding: 7px 15px;
.small {
@include opacity(.8);
margin-left: 4px;
}
}
}
}
#navbar {
input {
margin: 0 5px 0 2px;
}
.navbar-default {
background: $primary-color;
border: none;
min-height: 50px;
position: absolute;
.navbar-nav {
> li {
> a {
height: 50px;
padding: 0 1.3em;
i {
line-height: 50px;
}
}
}
}
.navbar-toggle {
border-color: transparent;
border-radius: 0;
fill: $white;
float: left;
height: 50px;
line-height: 48px;
margin: 0;
padding: 0 10px;
width: 50px;
z-index: 5;
&.navbar-right__icon {
@include border-radius(50px);
height: 32px;
line-height: 0;
margin: 9px 10px 0 0;
padding: 0;
width: 32px;
}
&.menu-toggle {
margin-right: 16px;
}
.icon-bar {
background: $white;
width: 21px;
}
.icon__search {
svg {
left: -1px;
position: relative;
width: 17px;
}
}
.icon--white {
color: $white;
}
&:hover,
&:active,
&:focus {
background: inherit;
}
}
.navbar-brand {
float: none;
font-size: 16px;
height: 50px;
line-height: 50px;
padding: 0 .5em;
.heading {
color: $white;
display: inline-block;
font-weight: 600;
line-height: 50px;
margin-right: 5px;
max-width: calc(100% - 200px);
overflow: hidden;
vertical-align: top;
}
.header-dropdown__icon {
margin-left: 0;
top: -1px;
}
.dropdown-toggle {
color: $white;
}
.description {
color: $white;
display: inline-block;
margin-right: 1em;
&.info-popover {
@include border-radius(50px);
cursor: pointer;
height: 32px;
line-height: 32px;
margin: 9px 10px 0 0;
position: relative;
text-align: center;
vertical-align: top;
width: 32px;
svg {
position: relative;
top: 5px;
}
}
}
}
}
.sidebar-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
span {
margin-left: 2px;
white-space: nowrap;
}
}
.channel-create-btn {
margin-right: 15px;
}
.more-channel-table {
border: 1px solid #dbdbdc;
width: 100%;
td {
padding: 7px;
}
button {
width: 110px;
}
}
}
.badge-notify {
background: $red;
left: 4px;
position: absolute;
top: 3px;
z-index: 100;
}