Add the styles to the .atom/styles.less stylesheet in Atom.
Last active
November 23, 2019 09:40
-
-
Save jasesmith/114da4e5310eda6238f0 to your computer and use it in GitHub Desktop.
Vertical file tab list in Atom
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| } | |
| } |
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
order: 1;to the.tab-barmove it to the right.