mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
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
This commit is contained in:
Asaad Mahmood
committed by
Joram Wilander
Joram Wilander
parent
97cfe62309
commit
d64d1f4029
@@ -1,7 +1,7 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.btn {
|
||||
@include single-transition(all, .25s, ease-in);
|
||||
@include single-transition(all, .15s, ease-in);
|
||||
@include border-radius($border-rad);
|
||||
|
||||
&.btn-primary {
|
||||
|
||||
@@ -45,3 +45,23 @@ input {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* IE 10+ */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -36,6 +36,24 @@
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
|
||||
.icon {
|
||||
@include opacity(.5);
|
||||
display: inline-block;
|
||||
margin: 0 7px 0 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
width: 16px;
|
||||
|
||||
&.icon__globe {
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
@@ -59,11 +77,12 @@
|
||||
@include border-radius(20px);
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
margin-right: 7px;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
width: 16px;
|
||||
|
||||
.mention--align {
|
||||
display: inline-block;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
.popover {
|
||||
@include border-radius($border-rad);
|
||||
color: lighten($black, 25%);
|
||||
padding: 0;
|
||||
|
||||
&.bottom,
|
||||
&.right,
|
||||
@@ -220,17 +221,70 @@
|
||||
.member-list__popover {
|
||||
max-width: initial;
|
||||
|
||||
.more-modal__header {
|
||||
padding: 14px 0;
|
||||
|
||||
.icon {
|
||||
@include opacity(.8);
|
||||
margin: 0 38px 0 24px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.more-modal__list {
|
||||
.more-modal__row {
|
||||
min-height: inherit;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid;
|
||||
cursor: pointer;
|
||||
height: 45px;
|
||||
padding: 5px 19px 5px 17px;
|
||||
|
||||
&:hover {
|
||||
border-left: 3px solid transparent;
|
||||
padding-left: 14px;
|
||||
|
||||
.more-modal__actions {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.more-modal__row--button {
|
||||
border-left: none;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
font-weight: 500;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-modal__name {
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.more-modal__image {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.more-modal__details {
|
||||
line-height: 32px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.more-modal__actions {
|
||||
line-height: 31px;
|
||||
@include opacity(0);
|
||||
line-height: 42px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.channel-header {
|
||||
.search-bar__container {
|
||||
padding: 0 7px 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar__container {
|
||||
@include flex(0 0 56px);
|
||||
padding: 12px 5px 0 0;
|
||||
@include flex(0 0 79px);
|
||||
|
||||
.channel-header__links {
|
||||
.sidebar--right & {
|
||||
@@ -31,30 +24,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__collapse {
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
fill: $white;
|
||||
font-size: 35px;
|
||||
left: 0;
|
||||
line-height: 40px;
|
||||
padding-left: 1px;
|
||||
.search__icon {
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 49px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar__search-icon {
|
||||
@include opacity(.5);
|
||||
color: $dark-gray;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.sidebar__search-clear {
|
||||
@@ -69,31 +42,33 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.search-form__container {
|
||||
|
||||
}
|
||||
|
||||
.search__form {
|
||||
position: relative;
|
||||
|
||||
.search-bar__container & {
|
||||
@include border-radius(2px);
|
||||
@include border-radius(50px);
|
||||
border: 1px solid $light-gray;
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
margin: 16px 10px 0 0;
|
||||
width: 229px;
|
||||
}
|
||||
|
||||
.sidebar--right & {
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
width: 325px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
height: 40px;
|
||||
padding-right: 30px;
|
||||
|
||||
.search-bar__container & {
|
||||
border: none;
|
||||
height: 30px;
|
||||
}
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
outline: none;
|
||||
padding: 0 30px 0 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon--refresh {
|
||||
|
||||
@@ -42,10 +42,10 @@
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
margin: 0 7px 0 1px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 12px;
|
||||
top: 2px;
|
||||
width: 15px;
|
||||
|
||||
&.status--group {
|
||||
border-radius: 2px;
|
||||
@@ -54,18 +54,19 @@
|
||||
height: 16px;
|
||||
left: 1px;
|
||||
line-height: 15px;
|
||||
margin-left: -3px;
|
||||
margin: 0 9px 0 -1px;
|
||||
text-align: center;
|
||||
top: -1px;
|
||||
width: 16px;
|
||||
width: 15px;
|
||||
|
||||
.mentions__name & {
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
line-height: 20px;
|
||||
line-height: 18px;
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,14 +2,9 @@
|
||||
|
||||
.webrtc__header {
|
||||
@include webrtc-button;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,57 +1,82 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.channel-header {
|
||||
@include flex(0 0 57px);
|
||||
border-left: none;
|
||||
@include flex(0 0 70px);
|
||||
border-bottom: 1px solid;
|
||||
font-size: 14px;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
|
||||
.member-popover__trigger,
|
||||
.pinned-posts-button {
|
||||
.channel-header__icon {
|
||||
@include border-radius(50%);
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
height: 37px;
|
||||
line-height: 36px;
|
||||
margin: 16px 10px 0 0;
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 37px;
|
||||
|
||||
&.wide {
|
||||
@include border-radius(37px);
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
|
||||
> div {
|
||||
padding: 0 13px 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon__text {
|
||||
font-weight: 600;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.member-popover__container,
|
||||
.member-popover__trigger {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.member-popover__trigger {
|
||||
& + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.member-popover__trigger {
|
||||
.fa {
|
||||
margin-left: 4px;
|
||||
.icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon__pin,
|
||||
.icon__members {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon__mentions {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.icon__flag {
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-posts-button svg {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
.move--left & {
|
||||
.icon--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.alt {
|
||||
margin: 0;
|
||||
|
||||
th {
|
||||
font-weight: normal !important;
|
||||
font-weight: normal;
|
||||
vertical-align: top;
|
||||
|
||||
&.header-list__right {
|
||||
padding-right: 4px;
|
||||
@@ -69,15 +94,15 @@
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 15px;
|
||||
padding-right: 1em;
|
||||
padding: 0 0 0 20px;
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 6px;
|
||||
width: 8.9%;
|
||||
.channel-header__icon {
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,13 +118,26 @@
|
||||
|
||||
.heading {
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
margin: 0 4px 0 0;
|
||||
max-width: 100%;
|
||||
max-width: calc(100vw - 780px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
||||
.move--left & {
|
||||
max-width: calc(100vw - 830px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 880px);
|
||||
}
|
||||
}
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 830px);
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
@@ -131,62 +169,74 @@
|
||||
|
||||
.header-dropdown__icon {
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
font-size: 21px;
|
||||
margin-left: 1px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
.channel-header__title {
|
||||
.header-dropdown__icon {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__description {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
margin-top: 3px;
|
||||
max-width: calc(100vw - 730px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
|
||||
&.dropdown {
|
||||
float: left;
|
||||
max-width: 90%;
|
||||
padding-right: 1em;
|
||||
.markdown__heading {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-dropdown__icon {
|
||||
color: $dark-gray;
|
||||
}
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 780px);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.light {
|
||||
@include opacity(.6);
|
||||
color: inherit;
|
||||
|
||||
.modal {
|
||||
white-space: normal;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.description {
|
||||
margin-top: 2px;
|
||||
.move--left & {
|
||||
max-width: calc(100vw - 780px);
|
||||
}
|
||||
|
||||
.markdown-inline-img {
|
||||
max-height: 45px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.markdown-inline-img {
|
||||
max-height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
white-space: normal;
|
||||
}
|
||||
.status {
|
||||
width: 18px;
|
||||
|
||||
.status {
|
||||
width: 18px;
|
||||
|
||||
svg {
|
||||
max-height: 20px;
|
||||
width: 16px;
|
||||
}
|
||||
svg {
|
||||
max-height: 20px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -261,7 +311,7 @@
|
||||
@include legacy-pie-clearfix;
|
||||
@include display-flex();
|
||||
@include flex-direction(row-reverse);
|
||||
padding: 9px 10px;
|
||||
padding: 16px 47px 12px 12px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@@ -305,11 +355,12 @@
|
||||
.sidebar-header-dropdown,
|
||||
.admin-navbar-dropdown {
|
||||
font-size: .85em;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin-right: -15px;
|
||||
margin-right: -22px;
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 10px;
|
||||
top: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
@@ -323,7 +374,7 @@
|
||||
color: $white;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
height: 40px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
line-height: 1.8;
|
||||
padding: 10px;
|
||||
@@ -331,7 +382,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-right: 3px;
|
||||
margin-right: 10px;
|
||||
margin-top: 4px;
|
||||
width: 199px;
|
||||
|
||||
@@ -344,8 +395,16 @@
|
||||
|
||||
.sidebar-header-dropdown__icon,
|
||||
.admin-navbar-dropdown__icon {
|
||||
border-radius: 36px;
|
||||
fill: $white;
|
||||
float: right;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
right: -3px;
|
||||
text-align: center;
|
||||
top: 7px;
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -377,9 +436,7 @@
|
||||
}
|
||||
|
||||
.team__name {
|
||||
float: left;
|
||||
line-height: 22px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.user__name {
|
||||
@@ -419,8 +476,30 @@
|
||||
}
|
||||
|
||||
.channel-header__favorites {
|
||||
@include opacity(.5);
|
||||
float: left;
|
||||
margin: 1px 10px 0 0;
|
||||
height: 20px;
|
||||
margin: 0 8px 0 0;
|
||||
padding-top: 3px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&.inactive {
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.app__body {
|
||||
@@ -476,6 +555,7 @@
|
||||
&.active {
|
||||
color: $primary-color;
|
||||
@include opacity(1);
|
||||
|
||||
.icon {
|
||||
fill: $primary-color;
|
||||
}
|
||||
|
||||
@@ -31,17 +31,17 @@
|
||||
.navbar-default {
|
||||
background: $primary-color;
|
||||
border: none;
|
||||
min-height: 45px;
|
||||
min-height: 50px;
|
||||
position: absolute;
|
||||
|
||||
.navbar-nav {
|
||||
> li {
|
||||
> a {
|
||||
height: 45px;
|
||||
height: 50px;
|
||||
padding: 0 1.3em;
|
||||
|
||||
i {
|
||||
line-height: 45px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -52,22 +52,37 @@
|
||||
border-radius: 0;
|
||||
fill: $white;
|
||||
float: left;
|
||||
height: 44px;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
width: 43px;
|
||||
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 {
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
.icon__search {
|
||||
svg {
|
||||
left: -1px;
|
||||
position: relative;
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon--white {
|
||||
@@ -84,15 +99,15 @@
|
||||
.navbar-brand {
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 .5em;
|
||||
|
||||
.heading {
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
line-height: 47px;
|
||||
line-height: 50px;
|
||||
margin-right: 5px;
|
||||
max-width: calc(100% - 200px);
|
||||
overflow: hidden;
|
||||
@@ -114,20 +129,26 @@
|
||||
margin-right: 1em;
|
||||
|
||||
&.info-popover {
|
||||
@include background-size(100% 100%);
|
||||
background-image: url('../images/info__icon.png');
|
||||
@include border-radius(50px);
|
||||
cursor: pointer;
|
||||
height: 19px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 9px 10px 0 0;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
vertical-align: middle;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 32px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-channel {
|
||||
.sidebar-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -1487,16 +1487,21 @@
|
||||
|
||||
.flag-icon__container {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 15px;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
top: 2px;
|
||||
vertical-align: top;
|
||||
visibility: hidden;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,33 @@
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: 0 7px 0 1px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.icon__lock {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon__globe {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item__name {
|
||||
display: inline-block;
|
||||
max-width: 167px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sidebar__divider {
|
||||
color: $white;
|
||||
font-size: .9em;
|
||||
@@ -44,7 +71,6 @@
|
||||
}
|
||||
|
||||
.sidebar__switcher {
|
||||
border-top: 1px solid;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
padding-bottom: 0;
|
||||
@@ -54,18 +80,30 @@
|
||||
button {
|
||||
@include single-transition(all, .15s, ease-in);
|
||||
display: block;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
@include single-transition(all, .15s, ease-in);
|
||||
@include opacity(.6);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
margin-right: 15px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
@include opacity(1);
|
||||
@@ -93,15 +131,20 @@
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: $primary-color;
|
||||
@include border-radius(100px);
|
||||
font-size: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
min-width: 18px;
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.nav-pills__container {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height: calc(100% - 99px);
|
||||
height: calc(100% - 120px);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
@@ -119,11 +162,11 @@
|
||||
}
|
||||
|
||||
.nav-pills__unread-indicator-top {
|
||||
top: 66px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.nav-pills__unread-indicator-bottom {
|
||||
bottom: 50px;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -135,12 +178,10 @@
|
||||
|
||||
li {
|
||||
> h4 {
|
||||
color: #aaaaaa;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.3px;
|
||||
margin: 1.1em 0 .5em;
|
||||
padding: 0 10px 0 15px;
|
||||
font-weight: 600;
|
||||
margin: 1.5em 0 .7em;
|
||||
padding: 0 12px 0 17px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -155,17 +196,24 @@
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 3px 10px 3px 25px;
|
||||
padding: 5px 0 5px 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
&.icon__globe,
|
||||
&.icon__lock {
|
||||
@include opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.has-badge {
|
||||
padding-right: 30px;
|
||||
.sidebar-item__name {
|
||||
max-width: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-close {
|
||||
padding-right: 30px;
|
||||
|
||||
&:hover {
|
||||
.btn-close {
|
||||
@include opacity(.8);
|
||||
@@ -177,11 +225,11 @@
|
||||
@include opacity(0);
|
||||
display: none;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: -1px;
|
||||
right: 18px;
|
||||
top: 0px;
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
@@ -204,7 +252,14 @@
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon__globe,
|
||||
&.icon__lock {
|
||||
@include opacity(.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -229,9 +284,8 @@
|
||||
}
|
||||
|
||||
.add-channel-btn {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 22px;
|
||||
font-size: 1.9em;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin: -2px 0 0 0;
|
||||
@@ -245,35 +299,46 @@
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
|
||||
.status {
|
||||
bottom: -9px;
|
||||
bottom: -4px;
|
||||
height: 18px;
|
||||
right: -5px;
|
||||
width: 18px;
|
||||
|
||||
svg {
|
||||
top: 3px;
|
||||
max-height: 12px;
|
||||
&.status-edit {
|
||||
.fa {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon__container {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
||||
&:after {
|
||||
border-radius: 20px;
|
||||
content: '';
|
||||
height: 9px;
|
||||
left: 5px;
|
||||
height: 10px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 9px;
|
||||
top: 4px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
svg {
|
||||
height: 13px;
|
||||
left: 3px;
|
||||
max-height: initial;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
width: 13px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right__table {
|
||||
display: table;
|
||||
|
||||
> div:not(.sidebar-collapse__container) {
|
||||
display: table-cell;
|
||||
|
||||
&:last-child {
|
||||
.channel-header__icon {
|
||||
margin-right: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-form__container {
|
||||
padding-right: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.post-body {
|
||||
img {
|
||||
max-height: 200px;
|
||||
@@ -131,7 +150,6 @@
|
||||
@include flex(1 1 auto);
|
||||
@include flex-direction(column);
|
||||
border-left: $border-gray;
|
||||
border-top: $border-gray;
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
@@ -191,7 +209,7 @@
|
||||
|
||||
.sidebar--right__header {
|
||||
@include flex(0 0 44px);
|
||||
border-bottom: $border-gray;
|
||||
border-bottom: 1px solid;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
height: 44px;
|
||||
@@ -222,7 +240,7 @@
|
||||
@include opacity(.9);
|
||||
margin: 0 3px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -234,3 +252,25 @@
|
||||
.sidebar-right-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-collapse__container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-collapse {
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 0;
|
||||
padding-left: 1px;
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
z-index: 5;
|
||||
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,22 +80,20 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.inner-wrap {
|
||||
&.move--left {
|
||||
.channel-header {
|
||||
.heading {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header {
|
||||
.search-bar__container {
|
||||
.search__form {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
max-width: calc(100vw - 800px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 750px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.integration-option {
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.channel-header {
|
||||
.channel-header__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.member-role .member-menu,
|
||||
.member-drop .member-menu {
|
||||
right: 0;
|
||||
@@ -76,10 +82,10 @@
|
||||
@include box-shadow(none);
|
||||
background: alpha-color($black, .8);
|
||||
border: none;
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 50px);
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
top: 47px;
|
||||
top: 40px !important;
|
||||
width: 100%;
|
||||
|
||||
&.in {
|
||||
@@ -865,14 +871,18 @@
|
||||
white-space: nowrap;
|
||||
|
||||
.heading {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
top: 11px;
|
||||
top: 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.header-dropdown__icon {
|
||||
top: 18px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
top: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
@@ -891,12 +901,12 @@
|
||||
@include translate3d(0, 100%, 0);
|
||||
background: alpha-color($black, .9);
|
||||
display: block;
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 48px);
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
padding: 1.4em 0 0;
|
||||
position: fixed;
|
||||
top: 42px;
|
||||
top: 48px;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
|
||||
@@ -981,21 +991,36 @@
|
||||
}
|
||||
|
||||
.search-bar__container {
|
||||
@include flex(0 0 44px);
|
||||
@include flex(0 0 50px);
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
padding: 0;
|
||||
|
||||
.search-form__container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search__form {
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0);
|
||||
border: none;
|
||||
height: 45px;
|
||||
padding: 7px 20px 0 49px;
|
||||
position: relative;
|
||||
margin-top: 9px;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
.search-bar {
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.search__icon {
|
||||
left: 15px;
|
||||
top: 7px;
|
||||
|
||||
svg {
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon--refresh {
|
||||
@include opacity(.6);
|
||||
@@ -1009,7 +1034,7 @@
|
||||
background: $white;
|
||||
border: none;
|
||||
color: $dark-gray;
|
||||
padding: 0 31px 0 31px;
|
||||
padding: 0 31px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1053,7 +1078,7 @@
|
||||
}
|
||||
|
||||
.nav-pills__container {
|
||||
height: calc(100% - 42px);
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
> div {
|
||||
@@ -1110,7 +1135,7 @@
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 16px 0 8px;
|
||||
margin: 2em 0 1.5em;
|
||||
}
|
||||
|
||||
> a {
|
||||
@@ -1148,10 +1173,10 @@
|
||||
}
|
||||
|
||||
.emoji-rhs {
|
||||
position: relative;
|
||||
display: none;
|
||||
top: 1px;
|
||||
position: relative;
|
||||
right: -1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.msg-typing:empty {
|
||||
@@ -1171,27 +1196,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__collapse,
|
||||
.sidebar__search-icon {
|
||||
display: block;
|
||||
.sidebar-collapse__container {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sidebar__search-clear {
|
||||
@include opacity(1);
|
||||
color: inherit;
|
||||
display: block;
|
||||
top: 6px;
|
||||
height: 30px;
|
||||
width: 35px;
|
||||
margin-right: 18px;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 42px;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__search-clear-x {
|
||||
margin-left: 14px;
|
||||
font-size: 22px;
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
opacity: .7;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.sidebar--right__close {
|
||||
@@ -1199,12 +1229,12 @@
|
||||
}
|
||||
|
||||
.sidebar-right__body {
|
||||
height: calc(100% - 44px);
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
|
||||
.search-items-container {
|
||||
height: calc(100% - 44px);
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.inner-wrap {
|
||||
@@ -1261,10 +1291,10 @@
|
||||
|
||||
.app__content {
|
||||
margin: 0;
|
||||
padding-top: 45px;
|
||||
padding-top: 56px;
|
||||
|
||||
.channel__wrap & {
|
||||
padding-top: 45px;
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
#channel-header {
|
||||
|
||||
@@ -1,6 +1,30 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.inner-wrap {
|
||||
&.move--left {
|
||||
.channel-header {
|
||||
.heading {
|
||||
max-width: calc(100vw - 600px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 650px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
max-width: calc(100vw - 600px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 650px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
.textbox-preview-link,
|
||||
.textbox-help-link {
|
||||
@@ -8,15 +32,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header {
|
||||
.heading {
|
||||
max-width: 90px;
|
||||
.channel-header__info {
|
||||
.channel-header__description {
|
||||
max-width: calc(100vw - 660px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 710px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search__form {
|
||||
.sidebar--right & {
|
||||
width: 300px;
|
||||
.channel-header {
|
||||
.heading {
|
||||
max-width: calc(100vw - 700px);
|
||||
|
||||
.multi-teams & {
|
||||
max-width: calc(100vw - 750px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,7 +169,6 @@
|
||||
transform: translateX(0) !important;
|
||||
|
||||
.search-bar__container {
|
||||
padding-right: 8px;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,8 +25,16 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin: 0 4px 0 8px;
|
||||
.icon {
|
||||
margin: 0 5px 0 8px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
svg {
|
||||
@include opacity(.8);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,28 +31,8 @@
|
||||
// Webrtc button
|
||||
@mixin webrtc-button {
|
||||
.webrtc__button {
|
||||
@include border-radius(50px);
|
||||
background: $button--ready;
|
||||
display: block;
|
||||
height: 33px;
|
||||
text-align: center;
|
||||
width: 33px;
|
||||
|
||||
&.on,
|
||||
&:hover {
|
||||
background: darken($button--ready, 5%);
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background: $video-circle-offline;
|
||||
|
||||
&:hover {
|
||||
background: $video-circle-offline;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $white;
|
||||
@include opacity(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user