]> git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/tabs.less
1e8c4629a82b50b1e54e4c04f037225ce6807242
[rbdr/dotfiles] / 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 }