git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/tabs.less

   1 @import "ui-variables";
   2 @import "ui-mixins";
   3 @tab-radius: 3px;
   4 @modified-icon-width: 8px;
   5 @tab-skew: 30deg;
   6 @tab-top-padding: 8px;
   7 @tab-bottom-border-height: 0;
   8 @tab-border: 1px solid @tab-border-color;
   9 @tab-max-width: 160px;
  10
  11 .tab-bar {
  12   height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
  13   background: @base-background-color;
  14   overflow-x: auto;
  15   overflow-y: hidden;
  16
  17   &::-webkit-scrollbar {
  18     display: none;
  19   }
  20
  21   &:after {
  22     content: "";
  23     position: absolute;
  24     bottom: 0;
  25     height: @tab-bottom-border-height;
  26     left: 0;
  27     right: 0;
  28     background-color: @tab-background-color-active;
  29     border-bottom: 1px solid @tab-bar-border-color;
  30     pointer-events: none;
  31   }
  32
  33   .tab {
  34     position: relative;
  35     top: @tab-top-padding;
  36     max-width: @tab-max-width;
  37     height: @tab-height;
  38     box-sizing: border-box;
  39     line-height: @tab-height;
  40     color: @text-color;
  41     padding: 0;
  42     margin: 0 0 0 0;
  43     .ui-tab-shadow;
  44     border-top-left-radius: 2px;
  45     border-top-right-radius: 2px;
  46     transition: color .1s ease-in;
  47     padding: 0px 6px 4px 6px;
  48
  49     .close-icon {
  50       right: 6px;
  51       z-index: 3;
  52       text-align: right;
  53       line-height: @tab-height;
  54       color: @text-color;
  55
  56       &:hover {
  57         color: inherit;
  58       }
  59     }
  60
  61     &.modified:not(:hover) .close-icon {
  62       top: @tab-height/2 - @modified-icon-width/2 + 1px;
  63       width: @modified-icon-width;
  64       height: @modified-icon-width;
  65     }
  66
  67     &.modified:hover .close-icon:hover {
  68       color: @text-color-highlight;
  69     }
  70
  71     .title {
  72       position: relative;
  73       z-index: 1;
  74       padding-right: 10px
  75     }
  76   }
  77
  78   .tab.active {
  79     z-index: 1;
  80     margin-top: -2px;
  81     height: @tab-height + 2px;
  82     border-bottom: 1px solid @base-background-color;
  83
  84     .close-icon {
  85       line-height: @tab-height - 1px;
  86       color: @text-color;
  87     }
  88   }
  89
  90   .tab:hover {
  91     color: @text-color-highlight;
  92   }
  93
  94   .tab.active:hover .close-icon {
  95     color: @text-color;
  96
  97     &:hover {
  98       color: inherit;
  99     }
 100   }
 101
 102   .placeholder {
 103     height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
 104     margin-left: -9px; // center between tabs
 105     pointer-events: none;
 106     &:after {
 107       top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px;
 108     }
 109   }
 110 }