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
Этот коммит содержится в:
Asaad Mahmood
коммит произвёл
Joram Wilander
Joram Wilander
родитель
97cfe62309
Коммит
d64d1f4029
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Ссылка в новой задаче
Block a user