GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-06-10 14:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
Eugene Pankov 2017-01-13 16:36:25 +03:00
parent 2acc4f77d4
commit 15f9a0cb1a
2 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/src/components/app.less
View File

@ -15,7 +15,7 @@
@titlebar-height: 35px; @titlebar-height: 35px;
@tabs-height: 40px; @tabs-height: 40px;
@tab-border-radius: 3px; @tab-border-radius: 4px;
.button-states() { .button-states() {
transition: 0.125s all; transition: 0.125s all;
@ -61,7 +61,7 @@
.tabs { .tabs {
flex: none; flex: none;
height: @tabs-height; height: @tabs-height;
background: #141c23; background: @body-bg;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -81,6 +81,7 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
color: #888; color: #888;
background: #141c23;
i { i {
margin-right: 10px; margin-right: 10px;
@ -94,20 +95,19 @@
flex-basis: 0; flex-basis: 0;
flex-grow: 1000; flex-grow: 1000;
background: @body-bg;
display: flex; display: flex;
flex-direction: row;
overflow: hidden; overflow: hidden;
min-width: 0; min-width: 0;
background: @body-bg;
&.pre-selected, &:nth-last-child(2) { .button-states();
border-top-right-radius: @tab-border-radius;
}
&.post-selected { .content-wrapper {
border-top-left-radius: @tab-border-radius; display: flex;
} flex-direction: row;
flex: auto;
min-width: 0;
background: #141c23;
div.index { div.index {
flex: none; flex: none;
@ -118,23 +118,13 @@
div.name { div.name {
flex: auto; flex: auto;
margin: 0 15px 0 10px; margin: 0 1px 0 10px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: 0; min-width: 0;
} }
border-bottom: 2px solid transparent;
transition: 0.25s all;
.button-states();
&.active {
background: #141c23;
border-bottom: 2px solid #69bbea;
}
button { button {
flex: none; flex: none;
@ -168,6 +158,33 @@
opacity: 1; opacity: 1;
} }
} }
//border-bottom: 2px solid transparent;
transition: 0.25s all;
&.pre-selected, &:nth-last-child(2) {
.content-wrapper {
border-bottom-right-radius: @tab-border-radius;
}
}
&.post-selected {
.content-wrapper {
border-bottom-left-radius: @tab-border-radius;
}
}
&.active {
background: #141c23;
.content-wrapper {
//border-bottom: 2px solid #69bbea;
background: @body-bg;
border-top-left-radius: @tab-border-radius;
border-top-right-radius: @tab-border-radius;
}
}
}
} }
.tabs-content { .tabs-content {

1
app/src/components/app.pug
View File

@ -16,6 +16,7 @@
[class.post-selected]='tabs[idx - 1] == activeTab', [class.post-selected]='tabs[idx - 1] == activeTab',
@animateTab, @animateTab,
) )
.content-wrapper
div.index {{idx + 1}} div.index {{idx + 1}}
div.name {{tab.name || 'Terminal'}} div.name {{tab.name || 'Terminal'}}
button((click)='closeTab(tab)') × button((click)='closeTab(tab)') ×