insomnia/app/css/components/tabs.scss
2016-04-22 20:54:55 -07:00

68 lines
1.2 KiB
SCSS

@import '../constants/colors';
@import '../constants/dimensions';
$border-color: $hl-md;
.ReactTabs {
.ReactTabs__TabList {
flex-shrink: 0;
align-items: flex-start;
align-content: flex-start;
height: $line-height-sm;
&::after {
width: 100%;
height: $line-height-sm;
content: "";
border-bottom: 1px solid $border-color;
box-sizing: border-box;
}
}
.ReactTabs__Tab {
align-self: flex-start;
padding: $padding-sm / 4 $padding-md;
height: $line-height-sm;
box-sizing: border-box;
border-bottom: 1px solid $border-color;
border-top: 0 !important;
&:first-child {
border-left-color: transparent;
}
&:focus {
outline: 0;
}
button {
color: $hl-xxl;
position: relative;
height: 100%;
width: 100%;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
}
.ReactTabs__Tab--selected {
border: 1px solid $border-color;
border-bottom-color: transparent;
button {
color: inherit;
border: 0 !important;
}
button:hover {
background: transparent;
}
}
.tab-panel-wrapper {
width: 100%;
height: 100%;
}
}