@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
1 lines • 3.37 kB
CSS
pkt-combobox{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth]{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;transform:rotate(0deg);transition:transform 1s linear;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{transition:transform .1s ease-in-out;width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon{transform:rotate(0deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__value{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;border:2px solid var(--pkt-color-border-default);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input-div:first-child input{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-brand-warm-blue-1000);outline:none}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0;margin:0;width:0}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{width:100%;outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-left:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-top:.5rem}