Add tabs to the theme

This commit is contained in:
Ben Ogle 2013-08-22 18:18:08 -07:00
parent bfd1aaa1ed
commit c3350a6d60
4 changed files with 48 additions and 3 deletions

View File

@ -1,6 +1,6 @@
@import "ui-colors";
.tabs {
.tab-bar {
background: #161719;
border: none;
border-bottom: 4px solid rgba(41, 44, 47, 1);

View File

@ -7,4 +7,5 @@
'panels'
'lists'
'editor'
'tabs'
]

View File

@ -0,0 +1,42 @@
@import "ui-variables";
.tab-bar {
height: @tab-height + 5px;
border-bottom: 4px solid darken(@tab-color-active, 10%);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
margin-bottom: 1px;
}
.tab {
height: @tab-height;
line-height: @tab-height;
color: @text-color;
margin: 0 0 1px 1px;
background-image: -webkit-linear-gradient(@tab-color-inactive, darken(@tab-color-inactive, 10%));
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(0, 0, 0, 1),
inset 1px 0 0 @tool-panel-background-highlight-color,
inset -1px 0 0 @tool-panel-background-highlight-color;
}
.tab:hover {
color: @text-color-highlight;
}
.tab.active {
height: @tab-height + 1px;
background-image: -webkit-linear-gradient(@tab-color-active, darken(@tab-color-active, 10%));
color: @text-color-highlight;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
box-shadow:
inset 0 1px 0 rgba(0, 0, 0, 0.5),
inset 0 2px 0 rgba(255, 255, 255, 0.1),
inset 1px 0 0 rgba(255, 255, 255, 0.1),
inset -1px 0 0 rgba(255, 255, 255, 0.1)
}
.tab.active:hover .close-icon {
color: @text-color-highlight;
}

View File

@ -47,7 +47,9 @@
@component-padding: 10px;
@component-icon-padding: @line-height-base / 4;
@component-line-height: @line-height-base * 1.25;
@component-border-radius: 2px;
@tab-height: 30px;
@tab-color-active: #43484d;
@tab-color-inactive: #292c2f;