Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

navbar: Refactor tab_bar to nested selectors. 

This refactors tab_list styles to be under tab_bar and to use nesting.
This commit is contained in:
YashRE42 2019-03-10 23:38:36 +05:30 committed by Tim Abbott
parent 75215f0014
commit 7d4cebbc1e
1 changed files with 85 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
static/styles/zulip.scss
View File

@ -1702,103 +1702,100 @@ a:hover code {
float: left;
letter-spacing: normal;
height: 40px;
}
#tab_list {
list-style: none;
margin: 0px 0px 0px 0px;
height: 40px;
line-height: 40px;
font-size: 16px;
border: none;
white-space: nowrap;
}
#tab_list {
list-style: none;
margin: 0px 0px 0px 0px;
height: 40px;
line-height: 40px;
font-size: 16px;
border: none;
white-space: nowrap;
#tab_list li {
white-space: nowrap;
list-style-type: none;
display: inline-block;
position: relative;
font-weight: 300;
background-color: hsl(0, 0%, 98%);
margin: 0px;
padding: 0px;
text-overflow: ellipsis;
height: 40px;
padding: 0 5px;
}
li {
white-space: nowrap;
list-style-type: none;
display: inline-block;
position: relative;
font-weight: 300;
background-color: hsl(0, 0%, 98%);
margin: 0px;
padding: 0px;
text-overflow: ellipsis;
height: 40px;
padding: 0 5px;
}
#tab_list li.inactive {
background-color: hsl(0, 0%, 88%);
border-width: 0px;
margin-right: -4px;
font-size: 14px;
}
li.private_message a {
color: hsl(0, 0%, 100%);
}
#tab_list li.private_message a {
color: hsl(0, 0%, 100%);
}
a {
text-decoration: none;
color: inherit;
border-color: inherit;
width: 100%;
display: inline-block;
padding: 0px 5px;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tab_list li.inactive::before {
left: 100%;
top: 50%;
content: " ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
z-index: 1;
-moz-transform: scale(.9999);
}
li.active {
background-color: hsl(0, 0%, 88%);
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#tab_list a {
text-decoration: none;
color: inherit;
border-color: inherit;
width: 100%;
display: inline-block;
padding: 0px 5px;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
li.private_message {
border-top-color: hsla(0, 0%, 0%, 0.0);
border-right-color: hsla(0, 0%, 0%, 0.0);
border-bottom-color: hsla(0, 0%, 0%, 0.0);
background-color: hsl(0, 0%, 27%);
border-left-color: hsl(0, 0%, 27%);
color: hsl(0, 0%, 100%);
border-width: 0px;
}
#tab_list li.active {
background-color: hsl(0, 0%, 88%);
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.root {
border-color: hsl(0, 0%, 88%);
background-color: hsl(0, 0%, 88%);
margin: 0px;
a {
color: hsl(0, 0%, 52%);
padding-right: 2px;
&:hover {
color: hsl(0, 0%, 0%);
}
}
}
#tab_list li.active.root {
padding: 0px 10px;
}
li.inactive {
background-color: hsl(0, 0%, 88%);
border-width: 0px;
margin-right: -4px;
font-size: 14px;
&::before {
left: 100%;
top: 50%;
content: " ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
z-index: 1;
-moz-transform: scale(.9999);
}
}
#tab_list li.private_message {
border-top-color: hsla(0, 0%, 0%, 0.0);
border-right-color: hsla(0, 0%, 0%, 0.0);
border-bottom-color: hsla(0, 0%, 0%, 0.0);
background-color: hsl(0, 0%, 27%);
border-left-color: hsl(0, 0%, 27%);
color: hsl(0, 0%, 100%);
border-width: 0px;
}
#tab_list .root {
border-color: hsl(0, 0%, 88%);
background-color: hsl(0, 0%, 88%);
margin: 0px;
}
#tab_list li.root a {
color: hsl(0, 0%, 52%);
padding-right: 2px;
}
#tab_list .root a:hover {
color: hsl(0, 0%, 0%);
li.active.root {
padding: 0px 10px;
}
}
}
#tab_bar_underpadding {