atom/packages/one-dark-ui/styles/tabs.less

// Tabs

@tab-border: 1px solid @tab-border-color;
@title-padding: .66em;
@icon-padding-top: .5em; // 2.5 (total) - 1.5 (text) / 2
@icon-padding-right: .5em;

.tab-bar {
  position: relative;
  height: @ui-tab-height;
  box-shadow: inset 0 -1px 0 @tab-border-color;
  background: @tab-bar-background-color;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0;

  &::-webkit-scrollbar {
    display: none;
  }

  &:empty {
    display: none;
  }


  // Tab ----------------------

  .tab {
    position: relative;
    top: 0;
    padding: 0;
    margin: 0;
    height: inherit;
    font-size: inherit;
    line-height: @ui-tab-height;
    color: @tab-text-color;
    background-color: @tab-background-color;
    box-shadow: inherit;
    border-left: @tab-border;
    &.active {
      color: @tab-text-color-active;
      background-color: @tab-background-color-active;
      box-shadow: none;
    }
    &:first-of-type {
      border-left-color: transparent;
    }
    &:last-of-type {
      // use box-shadow to not take up any space
      box-shadow: inset 0 -1px 0 @tab-border-color, 1px 0 0 @base-border-color;
    }
    &.active:last-of-type {
      box-shadow: 1px 0 0 @base-border-color;
    }


    // Title ----------------------

    .title {
      text-align: center;
      margin: 0 @title-padding;
    }

    // VCS coloring ----------------------
    &:not(.active) .status-added    { color: @tab-inactive-status-added; }
    &:not(.active) .status-modified { color: @tab-inactive-status-modified; }


    // Icons ----------------------

    .title.title:before {
      margin-right: .3em;
      width: auto;
      height: auto;
      line-height: 1;
      font-size: 1.125em;
      vertical-align: -.0625em; // Adjust center for the 0.1em font-size increase
    }

    // Close icon ----------------------

    .close-icon {
      top: @icon-padding-top;
      right: @icon-padding-right;
      z-index: 2;
      font-size: 1em;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      text-align: center;
      border-radius: @component-border-radius;
      background-color: inherit;
      overflow: hidden;
      transform: scale(0);
      transition: transform .08s;
      &:hover {
        color: @accent-text-color;
        background-color: @accent-color;
      }
      &:active {
        background-color: fade(@accent-color, 50%);
      }
      &::before {
        z-index: 1;
        font-size: 1.1em;
        vertical-align: -.05em; // Adjust center for the 0.1em font-size increase
        width: auto;
        height: auto;
        pointer-events: none;
      }
    }
    &:hover .close-icon {
      transform: scale(1);
      transition-duration: .16s;
    }
  }

  // Modified icon ----------------------

  .tab.modified {
    &:hover .close-icon {
      color: @accent-color;
      &:hover {
        color: @accent-bg-text-color;
      }
    }
    &:not(:hover) .close-icon {
      top: @icon-padding-top;
      right: @icon-padding-right;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      color: @accent-color;
      border-radius: @component-border-radius;
      border: none;
      transform: scale(1);
      &::before {
        content: "\f052";
        display: inline-block;
      }
    }
  }


  // Tabs in the docks ----------------------

  atom-dock & {
    .tab.active {
      background-color: @tool-panel-background-color;
    }
  }


  // Dragging ----------------------

  .tab.is-dragging {
    opacity: .5;

    .close-icon,
    &:before {
      visibility: hidden;
    }
  }

  .placeholder {
    position: relative;
    pointer-events: none;

    // bar
    &:before {
      z-index: 1;
      margin: 0;
      width: 2px;
      height: @ui-tab-height;
      background-color: @accent-color;
    }

    // arrow
    &:after {
      z-index: 0;
      top: @ui-tab-height/2;
      margin: -4px 0 0 -3px;
      border-radius: 0;
      border: 4px solid @accent-color;
      transform: rotate(45deg);
      background: transparent;
    }

    &:last-child {
      &:before {
        margin-left: -2px;
      }
      &:after {
        transform: none;
        margin-left: -10px;
        border-color: transparent @accent-color transparent transparent;
      }
    }
  }


  // Overrides ----------------------

  // keep tabs same size when active
  .tab,
  .tab.active {
    padding-right: 0;
    .title {
      padding: 0;
    }
  }
}


// Active pane marker --------------

atom-pane-axis > atom-pane.active,
atom-pane-container > atom-pane.pane {
  .tab.active:before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;
    top: 0;
    left: -1px; // cover left border
    bottom: 0;
    width: 2px;
    background: @accent-color;
  }
}

// hide marker in docks
atom-dock .tab-bar .tab::before {
  display: none;
}


// Custom tabs --------------

.tab-bar .tab.active {
  &[data-type$="Editor"],
  &[data-type$="AboutView"],
  &[data-type$="TimecopView"],
  &[data-type$="StyleguideView"],
  &[data-type="MarkdownPreviewView"] {
    color: @tab-text-color-editor;
    background-color: @tab-background-color-editor; // Match syntax background color
  }
}