Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vertical file tab list in Atom

Vertical File Tabs in Atom

Add the styles to the .atom/styles.less stylesheet in Atom.

Atom Vertical File Tabs

atom-pane.pane {
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
&:before {
content: 'Open Files';
color: #787878;
padding: 5px 10px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.item-views {
box-shadow: -1px 0 0 0 rgba(0,0,0,.5)
}
}
.tab-bar {
height: auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-flex-direction: column;
padding: 0;
margin-top: 26px;
box-shadow: inset 0 -8px 8px -4px rgba(0, 0, 0, 0.15), 0 -1px 0 0 rgba(0,0,0,.5);
&:after {
display: none;
}
&.list-inline > li:first-child {
padding-left: 10px;
}
.placeholder {
position: relative;
height: 1px;
width: auto;
margin: 0;
box-shadow: none;
&:after {
display: none;
}
}
.tab {
max-width: none;
-webkit-flex: 0 0 auto;
margin: 0 0 0px 0;
top: 0;
padding: 0 20px 0 10px;
background: rgba(255,255,255,.05);
box-shadow: 0 -1px 0 0 rgba(0,0,0,.3) inset;
height: auto;
&.is-dragging {
background: rgba(0,0,0, .65);
}
&:before, &:after {
display: none;
}
&.is-dragging {
box-shadow: 0 0 0 1px #484848;
}
&:not(.is-dragging):hover {
background: rgba(255,255,255,.1);
box-shadow: 0 0 6px 0 #000, 0 -1px 0 0 rgba(0,0,0,.5) inset;
}
&.active {
-webkit-flex: 0 0 auto;
width: auto;
background: none;
box-shadow: 0 0 6px 0 #000;
}
.title {
padding-right: 10px;
}
.close-icon {
right: 10px;
line-height: 200%;
}
&.modified:not(:hover) {
.close-icon {
right: 10px;
}
}
}
}
@Zequez

This comment has been minimized.

Copy link

@Zequez Zequez commented Oct 2, 2015

order: 1; to the .tab-bar move it to the right.

@Mootly

This comment has been minimized.

Copy link

@Mootly Mootly commented May 24, 2016

Just what I needed. Thanks.

Quick tip for those of us without scroll wheels or touch pads (because what the office gave us to work with): Kick out the size of the scroll bars a little as well. Otherwise the resize zone between the tree view pane and the tab pane will overwrite the scroll bar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.