vexip-ui/css/breadcrumb.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-breadcrumb-vars{--vxp-breadcrumb-b-color:var(--vxp-border-color-base);--vxp-breadcrumb-b-color-hover:var(--vxp-color-primary-light-1);--vxp-breadcrumb-border-shape:var(--vxp-border-shape);--vxp-breadcrumb-radius:var(--vxp-radius-base);--vxp-breadcrumb-v-padding:4px;--vxp-breadcrumb-h-padding:8px;--vxp-breadcrumb-v-padding-border:4px;--vxp-breadcrumb-h-padding-border:8px;--vxp-breadcrumb-padding-border:var(--vxp-breadcrumb-v-padding-border) var(--vxp-breadcrumb-h-padding-border);--vxp-breadcrumb-item-bg-color:transparent;--vxp-breadcrumb-item-bg-color-hover:var(--vxp-color-primary-opacity-9);--vxp-breadcrumb-item-b-color:transparent;--vxp-breadcrumb-item-b-color-hover:var(--vxp-color-primary-opacity-6);--vxp-breadcrumb-item-radius:var(--vxp-radius-small);--vxp-breadcrumb-label-color:inherit;--vxp-breadcrumb-label-color-hover:var(--vxp-color-primary-base);--vxp-breadcrumb-separator-color:var(--vxp-content-color-placeholder);--vxp-breadcrumb-separator-color-hover:var(--vxp-color-primary-base)}.vxp-breadcrumb{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:flex;align-items:center;padding:var(--vxp-breadcrumb-v-padding) var(--vxp-breadcrumb-h-padding);margin:0;list-style:none}.vxp-breadcrumb,.vxp-breadcrumb *,.vxp-breadcrumb ::after,.vxp-breadcrumb ::before{box-sizing:border-box}.vxp-breadcrumb--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-breadcrumb--border{padding:var(--vxp-breadcrumb-padding-border);border:var(--vxp-breadcrumb-border-shape) var(--vxp-breadcrumb-b-color);border-radius:var(--vxp-breadcrumb-radius);transition:var(--vxp-transition-border)}.vxp-breadcrumb--border:hover{border-color:var(--vxp-breadcrumb-b-color-hover)}.vxp-breadcrumb__item{display:flex;align-items:center;background-color:var(--vxp-breadcrumb-item-bg-color);border:var(--vxp-breadcrumb-border-shape) var(--vxp-breadcrumb-item-b-color);border-radius:var(--vxp-breadcrumb-item-radius);transition:var(--vxp-transition-background),var(--vxp-transition-border)}.vxp-breadcrumb--border .vxp-breadcrumb__item:hover{background-color:var(--vxp-breadcrumb-item-bg-color-hover);border-color:var(--vxp-breadcrumb-item-b-color-hover)}.vxp-breadcrumb__label{padding:0 6px;color:var(--vxp-breadcrumb-label-color);text-decoration:none;cursor:pointer;outline:0;transition:var(--vxp-transition-color)}.vxp-breadcrumb__label:focus,.vxp-breadcrumb__label:hover{color:var(--vxp-breadcrumb-label-color-hover)}.vxp-breadcrumb__separator{display:inline-flex;padding:0 6px;color:var(--vxp-breadcrumb-separator-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-inline:var(--vxp-breadcrumb-border-shape) transparent;transition:var(--vxp-transition-color),var(--vxp-transition-border)}.vxp-breadcrumb__separator:hover{color:var(--vxp-breadcrumb-separator-color-hover)}.vxp-breadcrumb__item:last-child .vxp-breadcrumb__separator{display:none}.vxp-breadcrumb--border .vxp-breadcrumb__item:hover .vxp-breadcrumb__separator{border-inline-start-color:var(--vxp-breadcrumb-item-b-color-hover)}