tabby/terminus-core/src/components/tabHeader.component.scss
Eugene Pankov 633ef9e791 .
2017-04-27 19:16:17 +02:00

65 lines
1.2 KiB
SCSS

$tabs-height: 40px;
:host {
line-height: $tabs-height - 2px;
cursor: pointer;
flex: 1000 1 200px;
width: 200px;
display: flex;
flex-direction: row;
min-width: 0;
overflow: hidden;
transition: 0.25s ease-out all;
border-top: 1px solid transparent;
.index {
flex: none;
font-weight: bold;
margin-left: 10px;
width: 20px;
border-radius: 10px;
line-height: 38px;
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 {
display: block;
flex: none;
background: transparent;
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;
}
&:hover button {
transition: 0.25s opacity;
display: block;
opacity: 1;
}
}