summaryrefslogtreecommitdiffstats
path: root/webapp/sass/layout
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/layout')
-rw-r--r--webapp/sass/layout/_headers.scss230
-rw-r--r--webapp/sass/layout/_navigation.scss59
-rw-r--r--webapp/sass/layout/_post.scss9
-rw-r--r--webapp/sass/layout/_sidebar-left.scss145
-rw-r--r--webapp/sass/layout/_sidebar-right.scss46
5 files changed, 350 insertions, 139 deletions
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 1386b4169..dd8440d19 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -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;
+
+ .channel-header__title {
+ .header-dropdown__icon {
+ color: $dark-gray;
+ }
+
+ > a {
+ display: inline-block;
+ text-decoration: none;
+ }
+
+ .modal {
+ white-space: normal;
+ }
+ }
- > div {
- display: block;
+ .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;
- max-height: 45px;
- overflow: hidden;
- text-overflow: ellipsis;
-
- .markdown-inline-img {
- max-height: 45px;
- }
+ .move--left & {
+ max-width: calc(100vw - 780px);
}
- &.popover {
- white-space: normal;
+ .markdown-inline-img {
+ max-height: 45px;
}
+ }
- .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;
}
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 59b348d9e..09b6534b0 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -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;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index b8c623e2d..b227d818c 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -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;
}
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index ed587305a..cc0c4920f 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -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;
+ }
}
- .icon__container {
+ .fa {
position: relative;
- top: 3px;
+ top: 2px;
+ }
+ .icon__container {
&: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;
}
}
}
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index ab73e075b..8181ac270 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -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;
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-09-10 20:09:14 +0000