Customize UI tab width of Atom Material


#1

I really liked the Atom Material Theme by silvestreh,

but I want to customize the tab width similar to how the tabs of Dark Flat UI by olmokramer works.

As you can see, the tabs auto-adjust their widths with respect to the number of tabs existing.

I prefer this kind of UI/UX presentation to maximize the clicking space for each present tab.
Anyone has knowledge what to tweak on the Atom Material Theme’s source code to achieve this? Many thanks.


#2

Open up your stylesheet and add

.tab-bar {
  .tab {
    max-width: initial;
  }
}

#3

Thanks! Although the active tab’s width isn’t correlative with the inactive one’s, I think this will do. :smile:


#4

For equal tab widths for both active and inactive tabs, you can use:

.tab-bar .tab.active {
  -webkit-flex: 1;
  flex: 1;
}

#5

Many thanks! :smile:


#6

Whats the class name for in-active? .tab.in-active , .tab.inactive?


#7

NVM figured it out w --dev https://github.com/atom/atom/issues/1790 , It is neither that I mentioned above it is active or it is not. So just .tab


#8

No, there is no CSS class for inactive tabs, but you can use the :not() selector if you want to select only inactive tabs, like .tab:not(.active).