UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

2 lines 4.76 kB
.prc-SegmentedControl-SegmentedControl-e7570{background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0}.prc-SegmentedControl-SegmentedControl-e7570:where([data-full-width]){display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-e7570:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-Item-7Aq6h{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-7Aq6h:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):after{background-color:var(--borderColor-default,var(--color-border-default));bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-7Aq6h:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:focus-within:has(:focus-visible){background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:first-child{margin-left:-1px}.prc-SegmentedControl-Item-7Aq6h:last-child{margin-right:-1px}.prc-SegmentedControl-Button-ojWXD{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-ojWXD svg{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-ojWXD:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:focus-visible:not(:last-child):after{width:0}@media (pointer:coarse){.prc-SegmentedControl-Button-ojWXD:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-O80Eh{width:32px}.prc-SegmentedControl-SegmentedControl-e7570:where([data-full-width]) .prc-SegmentedControl-IconButton-O80Eh{width:100%}.prc-SegmentedControl-Content-gnQ4n{align-items:center;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-Button-ojWXD[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-ojWXD[aria-current=true] .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):hover .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):active .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.prc-SegmentedControl-Text-c5gSh:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-dAHA8{margin-right:var(--base-size-4,.25rem)} /*# sourceMappingURL=SegmentedControl-459caec8.css.map */