|
Kite |
8c766d |
/* -----------------------------------------------------------------------------
|
|
Kite |
8c766d |
Component: Tabs
|
|
Kite |
8c766d |
----------------------------------------------------------------------------- */
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
// Container
|
|
Kite |
8c766d |
// -----------------------------------------------------------------------------
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
.tab-container {
|
|
Kite |
8c766d |
background-color: transparent; // Allows below qproperty to show
|
|
Kite |
8c766d |
qproperty-BottomAboveLineColor: @tabbar-bg-color;
|
|
Kite |
8c766d |
qproperty-BottomBelowLineColor: @accent;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
// Flat Tabs
|
|
Kite |
8c766d |
// -----------------------------------------------------------------------------
|
|
Kite |
8c766d |
// these are flat tabs with no top border ideal for palette widget etc
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
.tab-flat {
|
|
Kite |
8c766d |
@horizontal-padding: 4;
|
|
Kite |
8c766d |
background-color: @tab-bg-color;
|
|
Kite |
8c766d |
border-right: 1 solid @accent;
|
|
Kite |
8c766d |
border-bottom: 1 solid @accent;
|
|
Kite |
8c766d |
color: @tab-text-color;
|
|
Kite |
8c766d |
padding: 3 @horizontal-padding 3 @horizontal-padding;
|
|
Kite |
8c766d |
&:hover {
|
|
Kite |
8c766d |
background-color: @tab-bg-color-hover;
|
|
Kite |
8c766d |
color: @tab-text-color-hover;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:selected {
|
|
Kite |
8c766d |
background-color: @tab-bg-color-selected;
|
|
Kite |
8c766d |
color: @tab-text-color-selected;
|
|
Kite |
8c766d |
border-bottom-color: @tab-bg-color-selected;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:only-one {
|
|
Kite |
8c766d |
margin: 0;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
// Rounded Tabs
|
|
Kite |
8c766d |
// -----------------------------------------------------------------------------
|
|
Kite |
8c766d |
// these are rounded tabs with top border ideal for fx panels etc
|
|
Kite |
8c766d |
|
|
Kite |
8c766d |
.tab-round {
|
|
Kite |
8c766d |
@horizontal-padding: 7;
|
|
Kite |
8c766d |
background-color: @tab-bg-color;
|
|
Kite |
8c766d |
border-top: 1 solid @accent;
|
|
Kite |
8c766d |
border-right: 1 solid @accent;
|
|
Kite |
8c766d |
border-left: 1 solid @accent;
|
|
Kite |
8c766d |
border-bottom: 1 solid @accent;
|
|
Kite |
8c766d |
color: @tab-text-color;
|
|
Kite |
8c766d |
margin: 3 -1 0 0;
|
|
Kite |
8c766d |
padding: 2 @horizontal-padding 1 @horizontal-padding;
|
|
Kite |
8c766d |
&:hover {
|
|
Kite |
8c766d |
background-color: @tab-bg-color-hover;
|
|
Kite |
8c766d |
color: @tab-text-color-hover;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:selected {
|
|
Kite |
8c766d |
background-color: @tab-bg-color-selected;
|
|
Kite |
8c766d |
border-top-right-radius: 2;
|
|
Kite |
8c766d |
border-top-left-radius: 2;
|
|
Kite |
8c766d |
border-bottom-color: @tab-bg-color-selected;
|
|
Kite |
8c766d |
color: @tab-text-color-selected;
|
|
Kite |
8c766d |
margin: 1 -1 -1 0;
|
|
Kite |
8c766d |
padding: 2 @horizontal-padding 2 @horizontal-padding;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:only-one {
|
|
Kite |
8c766d |
margin: 1 0 0 0;
|
|
Kite |
8c766d |
padding: 3 @horizontal-padding 3 @horizontal-padding;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:last {
|
|
Kite |
8c766d |
margin-right: 0;
|
|
Kite |
8c766d |
border-top-right-radius: 2;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
&:first {
|
|
Kite |
8c766d |
border-top-left-radius: 2;
|
|
Kite |
8c766d |
}
|
|
Kite |
8c766d |
}
|