tabby/terminus-core/components/tabHeader.scss
Eugene Pankov 0ea346a6ae wip
2017-04-11 02:22:48 +02:00

81 lines
1.7 KiB
SCSS

@import '~variables.scss';
:host {
line-height: $tabs-height - 2px;
cursor: pointer;
flex: auto;
flex-basis: 0;
flex-grow: 1000;
display: flex;
overflow: hidden;
min-width: 0;
transition: 0.25s all;
//.button-states();
.content-wrapper {
display: flex;
flex-direction: row;
flex: auto;
min-width: 0;
transition: 0.25s all;
border-top: 1px solid transparent;
.index {
flex: none;
font-weight: bold;
align-self: center;
margin-left: 10px;
width: 20px;
height: 20px;
border-radius: 10px;
line-height: 20px;
text-align: center;
transition: 0.25s all;
}
.name {
flex: auto;
margin: 0 1px 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
button {
flex: none;
background: transparent;
display: block;
opacity: 0;
$button-size: $tabs-height * 0.6;
width: $button-size;
height: $button-size;
border-radius: $button-size / 2;
line-height: $button-size * 0.8;
margin-top: ($tabs-height - $button-size) * 0.4;
margin-right: 10px;
text-align: center;
font-size: 20px;
//.button-states();
}
&:hover button {
transition: 0.25s opacity;
display: block;
opacity: 1;
}
}
//border-bottom: 2px solid transparent;
transition: 0.25s all;
}