apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[IMPROVE] Remove dangling side-nav styles (#13584)

Browse Source 
> “Does it spark joy?” - Marie Kondo

`side-nav` was fully replaced by `sidebar`.
pull/13467/head
Tasso Evangelista 6 years ago committed by Guilherme Gazzo
parent 79edb4c120
commit 50adf45104
3 changed files with 1 additions and 603 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 355
      packages/rocketchat_theme/client/imports/general/base_old.css
  2. 202
      packages/rocketchat_theme/client/imports/general/rtl.css
  3. 47
      packages/rocketchat_theme/server/colors.less

355
packages/rocketchat_theme/client/imports/general/base_old.css
Unescape View File

@ -1173,361 +1173,6 @@ rc-old select,
}
}
.rc-old .side-nav {
position: fixed;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
overflow: visible;
width: var(--rooms-box-width);
height: auto;
padding: 12px 0 0;
will-change: transform;
&::before {
position: absolute;
top: 59px;
left: 8px;
width: 189px;
height: 1px;
content: " ";
}
& .rooms-list {
position: absolute;
top: calc(var(--header-min-height) + var(--toolbar-height));
bottom: var(--footer-min-height);
display: block;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
direction: rtl;
-webkit-overflow-scrolling: touch;
& > .wrapper {
position: relative;
padding-bottom: 1em;
padding-left: 8px;
direction: ltr;
}
}
& .more {
display: block;
width: 100%;
margin-top: 2px;
padding: 4px 0 4px 10px;
font-size: 11px;
}
& .input-error {
margin-top: -12px;
margin-bottom: -20px;
padding: 0;
text-align: left;
font-size: 12px;
& strong {
display: block;
margin-bottom: 2px;
}
}
& .empty {
padding: 2px 10px;
font-size: 11px;
}
& .header {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: var(--header-min-height);
min-height: var(--header-min-height);
cursor: pointer;
}
& > .arrow {
position: absolute;
z-index: 3;
top: 18px;
right: 8px;
cursor: pointer;
}
& .footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: var(--footer-min-height);
min-height: var(--footer-min-height);
padding: 10px 15px 0;
text-align: right;
& .logo {
display: block;
width: 100%;
height: 100%;
margin-top: -1px;
&:hover {
text-decoration: none;
}
}
& small {
display: block;
width: 100%;
margin-top: 2px;
margin-bottom: 0;
padding-right: 4px;
text-transform: lowercase;
font-size: 11px;
font-weight: 400;
}
& img {
display: inline-block;
max-width: 222px;
max-height: 43px;
}
}
& .search-form > div {
position: relative;
}
& h3 {
position: relative;
margin: 25px 0 0;
padding-left: 10px;
text-transform: uppercase;
font-weight: 500;
line-height: 28px;
}
& .unread {
position: absolute;
top: 6px;
right: 6px;
min-width: 15px;
padding: 0 2px;
text-align: center;
border-radius: 2px;
font-size: 11px;
font-weight: 800;
line-height: 14px;
}
& ul {
position: relative;
& li {
overflow: hidden;
max-width: 100%;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
& .remove,
& .erase {
position: absolute;
top: 2px;
right: -18px;
display: block;
transition: opacity 0.15s ease 0.35s, transform 0.12s ease-out 0.35s;
transform: translateX(-10px);
opacity: 0;
}
&:hover .opt {
transform: translateX(0);
opacity: 1;
}
&.has-unread .opt {
opacity: 0;
}
&.has-alert .name {
font-weight: bold;
}
}
& a {
position: relative;
display: block;
overflow: hidden;
max-width: 100%;
padding: 6px 25px 7px 6px;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
border-radius: 2px 0 0 2px;
font-size: 15px;
line-height: 16px;
&:hover {
text-decoration: none;
}
& .archived {
font-style: italic;
}
}
& .opt {
position: absolute;
top: 7px;
right: 0;
display: block;
width: 50px;
padding-right: 10px;
transition: opacity 0.12s ease;
text-align: right;
opacity: 0;
& i {
margin: 0 1px;
}
& .icon-cancel-circled::before {
margin-left: 2px;
}
& .icon-logout {
margin-left: 1px;
}
&.fixed {
transform: translateX(0);
opacity: 1;
}
}
& i {
display: inline-block;
width: 16px;
font-size: 14px;
}
& input[type="text"] {
width: 100%;
font-size: 12px;
}
}
& .unread-rooms {
position: absolute;
z-index: 1;
display: -webkit-flex;
display: flex;
width: 100%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
line-height: 24px;
align-items: center;
justify-content: center;
&.top-unread-rooms {
top: calc(var(--header-min-height) + var(--toolbar-height));
}
&.bottom-unread-rooms {
bottom: var(--footer-min-height);
}
& i {
margin-left: 5px;
font-size: 12px;
}
}
& .unread-rooms-mode,
& .unread-rooms-mode + ul {
overflow: hidden;
max-height: 0;
margin: 0;
opacity: 0;
}
& .unread-rooms-mode.has-unread {
margin: 25px 0 0;
}
& .unread-rooms-mode.has-unread,
& .unread-rooms-mode.has-unread + ul {
max-height: 5000px;
transition: max-height 1s ease-in, opacity 0.5s linear;
opacity: 1;
}
}
.rc-old .toolbar {
position: absolute;
z-index: 2;

202
packages/rocketchat_theme/client/imports/general/rtl.css
Unescape View File

@ -22,208 +22,6 @@
text-align: left;
}
& .side-nav {
right: 0;
left: auto;
& .header {
right: 0;
left: auto;
& .account-box {
& .info {
padding: 10px 18px 10px 0;
& .thumb {
float: right;
&::after {
right: -14px;
left: auto;
}
}
& .data {
float: right;
padding: 0 10px 0 25px;
& .wrp {
text-align: right;
}
}
}
& .options {
right: 0;
left: auto;
& .status {
padding-right: 38px;
padding-left: auto;
&::after {
right: 18px;
left: auto;
}
}
& span.soon {
right: auto;
left: -30px;
}
}
& .options._hidden {
transform: translateX(100%);
}
}
}
& > .arrow {
right: auto;
left: 8px;
}
& .arrow {
transform: rotateY(180deg);
}
& .footer {
right: 0;
left: auto;
}
& .rooms-list {
direction: ltr;
& > .wrapper {
padding-right: 8px;
padding-left: auto;
direction: rtl;
& h3 {
padding-right: 10px;
padding-left: auto;
& .add-room i {
right: auto;
left: 6px;
}
}
& ul a {
padding: 6px 6px 7px 25px;
}
}
}
& .more {
padding: 4px 10px 4px 0;
}
& .empty {
padding-right: 10px;
padding-left: auto;
}
& ul .opt {
right: auto;
left: 0;
padding-right: auto;
padding-left: 10px;
text-align: left;
}
& .flex-nav {
right: 0;
left: auto;
& > section {
right: 0;
left: auto;
}
& header {
right: 0;
left: auto;
padding-right: 15px;
padding-left: auto;
& > div {
text-align: right;
}
}
& .content > .wrapper {
direction: rtl;
}
& .input-submit {
margin: 35px -4px 0 0;
}
& .button::before {
right: 0;
left: auto;
}
& footer {
right: 0;
left: auto;
text-align: right;
& > div {
text-align: right;
}
}
&.animated-hidden {
transform: translateX(100%);
& header,
& footer,
& .content {
transform: translateX(100%);
}
}
}
& .search-form {
margin-right: auto;
margin-left: 20px;
& .search {
padding-right: 25px;
padding-left: auto;
}
}
& h3 {
padding-right: 10px;
padding-left: auto;
&.add-room i {
right: auto;
left: 6px;
}
}
& .unread {
right: auto;
left: 6px;
}
}
& .side-nav::before {
right: 8px;
left: auto;
}
& .main-content {
left: 0;

47
packages/rocketchat_theme/server/colors.less
Unescape View File

@ -606,53 +606,8 @@ input:-webkit-autofill {
}
/** ----------------------------------------------------------------------------
* Side nav
* Sidebar
*/
.side-nav {
.arrow::before,
.arrow::after {
background-color: @tertiary-font-color;
}
li.active {
background-color: @transparent-light !important;
}
i.status-offline {
color: @transparent-lighter !important;
}
i {
color: @transparent-lighter;
}
.opt i:hover {
color: @transparent-lightest;
}
.has-alert .name {
color: @primary-background-contrast;
}
.unread {
color: @success-color;
border: 1px solid @success-color;
}
.unread.unread-mention {
background-color: @success-color;
color: contrast(@success-color, #000000, #ffffff, 50%);
}
.button {
.buttonColors(@tertiary-font-color, mix(@primary-action-color, @primary-background-color));
}
.options button {
.buttonColors(@tertiary-font-color, @primary-background-color);
}
}
.sidebar-item__last-message {
a:not(.mention-link) {
color: @link-font-color;

Write Preview
Loading…
Cancel
Save