@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
1 lines • 2.4 kB
CSS
.pkt-tabs{--pkt-tabs-bg: var(--pkt-color-background-default);background-color:var(--pkt-tabs-bg);position:relative;border-bottom:1px solid var(--pkt-color-border-gray)}.pkt-tabs__list{position:relative;width:auto;width:100%;overflow-x:auto;scrollbar-width:thin;padding:.25rem 4rem 0 .25rem;margin:0;display:flex;flex-wrap:nowrap;align-items:flex-start}.pkt-tabs__button{border:0;padding:0;background:none;border-radius:0}.pkt-tabs__link,.pkt-tabs__button{cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:var(--pkt-color-text-action-disabled);border-bottom:.25rem solid rgba(0,0,0,0);white-space:nowrap;letter-spacing:-0.2px;font-weight:400;font-size:1rem;line-height:1.5rem}.pkt-tabs__link .pkt-icon,.pkt-tabs__link pkt-icon,.pkt-tabs__button .pkt-icon,.pkt-tabs__button pkt-icon{--fg-color: currentColor}.pkt-tabs__link,.pkt-tabs__link:hover,.pkt-tabs__link:active,.pkt-tabs__button,.pkt-tabs__button:hover,.pkt-tabs__button:active{text-decoration:none}.pkt-tabs__link:focus:not(:active),.pkt-tabs__link:focus-visible:not(:active),.pkt-tabs__button:focus:not(:active),.pkt-tabs__button:focus-visible:not(:active){border:0;box-shadow:none;background-color:var(--pkt-color-surface-default-gray);outline:.25rem solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-tabs__link.active:focus,.pkt-tabs__link.active:focus-visible,.pkt-tabs__button.active:focus,.pkt-tabs__button.active:focus-visible{box-shadow:none;border-bottom:.25rem solid var(--pkt-color-border-blue)}.pkt-tabs__link:hover,.pkt-tabs__link:focus,.pkt-tabs__link:focus-visible,.pkt-tabs__link:focus-visible:is(:active),.pkt-tabs__link:focus:is(:active),.pkt-tabs__link:active,.pkt-tabs__button:hover,.pkt-tabs__button:focus,.pkt-tabs__button:focus-visible,.pkt-tabs__button:focus-visible:is(:active),.pkt-tabs__button:focus:is(:active),.pkt-tabs__button:active{outline:0;color:var(--pkt-color-text-action-active);border-bottom:.25rem solid var(--pkt-color-border-states-hover)}.pkt-tabs__link.active,.pkt-tabs__button.active{color:var(--pkt-color-text-action-normal);border-bottom:.25rem solid var(--pkt-color-border-blue);letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-tabs:after{content:"";display:block;position:absolute;z-index:3;background:linear-gradient(90deg, transparent 0%, var(--pkt-tabs-bg) 100%);top:0;right:0;bottom:0;width:5rem;pointer-events:none}