Files
phptimerboard2/vendor/facade/ignition/resources/css/utilities/tab.css
2019-09-29 19:47:00 -05:00

94 lines
1.4 KiB
CSS
Vendored

:root {
--tab-main-height: calc(100vh - 3rem);
}
.tabs {
@apply z-10;
}
.tab-main {
@apply z-1;
@apply border-l;
@apply border-r;
@apply border-b;
@apply border-tint-300;
min-height: var(--tab-main-height);
}
.tab-content {
@apply bg-white;
@apply text-sm;
min-height: var(--tab-main-height);
}
.tab-content-section {
@apply py-8;
@apply border-t-2;
@apply border-tint-200;
}
.tab-content-section:first-child {
@apply border-t-0;
}
.tab-nav {
position: sticky;
position: -webkit-sticky;
@apply grid;
@apply justify-center;
@apply cols-auto;
@apply gap-2;
@apply top-0;
@apply w-full;
@apply z-10;
@apply bg-gray-700;
@apply p-1;
@apply shadow-lg;
@apply rounded-t-sm;
@apply text-xs;
}
.tab-bar {
@apply grid;
@apply cols-auto;
@apply justify-start;
@apply gap-1;
@apply overflow-x-auto;
@apply overflow-y-hidden;
}
.tab-bar::-webkit-scrollbar {
height: 2px;
}
@screen sm {
.tab-bar {
@apply justify-center;
}
}
.tab {
@apply px-4;
@apply text-gray-300;
@apply whitespace-no-wrap;
@apply rounded-sm;
@apply h-10;
@apply text-sm;
}
.tab-delimiter {
@apply border-l;
@apply border-gray-600;
}
.tab:hover {
@apply bg-tint-400;
@apply text-white;
}
.tab-active,
.tab-active:hover {
@apply bg-tint-600;
@apply text-white;
}