insomnia/app/css/components/tabs.scss

80 lines
1.3 KiB
SCSS
Raw Normal View History

2016-03-23 05:26:27 +00:00
@import '../constants/colors';
@import '../constants/dimensions';
2016-04-23 03:54:55 +00:00
$border-color: $hl-md;
2016-04-17 22:46:17 +00:00
2016-03-20 04:00:40 +00:00
.ReactTabs {
2016-05-01 19:56:30 +00:00
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
align-content: stretch;
2016-03-23 05:26:27 +00:00
.ReactTabs__TabList {
2016-05-01 19:56:30 +00:00
display: flex;
flex-direction: row;
width: 100%;
2016-05-01 20:46:11 +00:00
height: 100%;
2016-04-17 22:46:17 +00:00
&::after {
width: 100%;
height: $line-height-sm;
content: "";
border-bottom: 1px solid $border-color;
}
2016-03-23 05:26:27 +00:00
}
2016-04-05 05:35:21 +00:00
.ReactTabs__Tab {
2016-04-17 22:46:17 +00:00
height: $line-height-sm;
border: 1px solid transparent;
2016-04-17 22:46:17 +00:00
border-bottom: 1px solid $border-color;
border-top: 0 !important;
2016-05-01 19:56:30 +00:00
white-space: nowrap;
2016-06-12 00:00:52 +00:00
display: flex;
2016-04-17 22:46:17 +00:00
&:first-child {
border-left-color: transparent;
}
2016-04-06 07:19:36 +00:00
2016-04-18 05:58:58 +00:00
&:focus {
outline: 0;
}
& > * {
2016-06-12 00:00:52 +00:00
color: $hl-xxl;
2016-04-17 22:46:17 +00:00
height: 100%;
padding-left: $padding-md / 4;
padding-right: $padding-md / 4;
&:first-child {
padding-left: $padding-md;
}
&:last-child {
padding-right: $padding-md;
}
2016-04-05 05:35:21 +00:00
}
2016-03-20 04:00:40 +00:00
}
2016-04-05 05:35:21 +00:00
.ReactTabs__Tab--selected {
2016-04-17 22:46:17 +00:00
border: 1px solid $border-color;
border-bottom-color: transparent;
* {
2016-04-05 05:35:21 +00:00
color: inherit;
}
2016-04-06 07:19:36 +00:00
& > button:hover {
2016-04-12 00:39:49 +00:00
background: transparent;
2016-04-06 07:19:36 +00:00
}
2016-04-05 05:35:21 +00:00
}
2016-05-01 19:56:30 +00:00
.ReactTabs__TabPanel {
2016-04-10 06:59:05 +00:00
width: 100%;
height: 100%;
2016-05-01 19:56:30 +00:00
box-sizing: border-box;
2016-04-10 06:59:05 +00:00
}
2016-03-20 04:00:40 +00:00
}