@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
2 lines (1 loc) • 6.03 kB
CSS
.Primer_Brand__Tabs-module__Tabs___zia5x{gap:var(--base-size-4);background-color:var(--brand-color-canvas-backdrop);border-radius:var(--brand-borderRadius-large);padding:var(--brand-Tabs-container-padding);width:fit-content;min-height:var(--base-size-48);display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container___wuq7I{display:grid}@media screen and (width<=48rem){.Primer_Brand__Tabs-module__Tabs-container___wuq7I{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{align-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{align-items:center}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8{width:fit-content;max-width:100%;position:relative;overflow:hidden}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8:after{content:"";right:var(--brand-Tabs-list-borderWidth-active);top:var(--base-size-2);bottom:var(--base-size-2);background:linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);width:var(--base-size-48);z-index:2;pointer-events:none;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);opacity:0;opacity:calc(var(--has-overflow,0) * var(--can-scroll-right,0));border-radius:inherit;position:absolute}.Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55:after,.Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx:after{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV:after{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Tabs-module__Tablist__wrapper--lastTabIsActive___jCePF:after{opacity:0;visibility:hidden}.Primer_Brand__Tabs-module__Tabs___zia5x{scrollbar-width:none;-ms-overflow-style:none;max-width:100%;overflow:auto hidden}.Primer_Brand__Tabs-module__Tabs___zia5x::-webkit-scrollbar{display:none}}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{justify-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{justify-items:center}.Primer_Brand__Tabs-module__Tabs--default___MUcm6,.Primer_Brand__Tabs-module__Tabs--accent___p1SQc{border:var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd{gap:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__item___4V44f{z-index:1;cursor:pointer;padding:var(--base-size-8) var(--base-size-16);border-radius:var(--brand-borderRadius-full);transition:color var(--brand-animation-duration-fast) ease-in-out;white-space:nowrap;font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-600);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);color:var(--brand-color-text-default);background:0 0;border:0;position:relative}.Primer_Brand__Tabs-module__Tabs__slider___tkaHu{top:var(--base-size-4);bottom:var(--base-size-4);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);z-index:0;transform:translate(0);transform:translateX(var(--brand-Tabs-slider-x,0px));width:var(--brand-Tabs-slider-width);position:absolute}.Primer_Brand__Tabs-module__Tabs--default___MUcm6 .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);background:var(--brand-Tabs-item-default-bgColor-active)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid transparent;background:var(--brand-Tabs-item-accent-bgColor-rest)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest)}.Primer_Brand__Tabs-module__Tabs__item___4V44f:focus-visible{outline:var(--base-size-2) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__item___4V44f{padding:var(--base-size-8);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item___4V44f{transition:color var(--brand-animation-duration-faster) ease}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-Tabs-item-accent-fgColor-rest)}.Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR{margin-top:var(--base-size-16)}.Primer_Brand__Tabs-module__Tabs__panel___UdoZQ{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{margin-block-end:var(--base-size-12)}.Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv{width:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-text-muted);height:var(--base-size-6);transition:width var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1{background-color:var(--brand-color-text-default);width:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__control___xG_4C{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);background-color:#0000;border:none;align-content:center;display:flex}.Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe{top:calc(var(--base-size-2) / -2);position:relative;vertical-align:middle}@media screen and (width>=48rem){.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{display:none}.Primer_Brand__Tabs-module__Tabs__item___4V44f{padding-inline:var(--base-size-24)}}