omii-ui
Version:
使用OMII开发的WebComponents库,样式采用bootstrap。可以作为标准的esmodule使用
7 lines (6 loc) • 3.16 kB
CSS
/*!
* Bootstrap v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/.nav{--oi-nav-link-padding-x: 1rem;--oi-nav-link-padding-y: .5rem;--oi-nav-link-font-weight: ;--oi-nav-link-color: var(--oi-link-color);--oi-nav-link-hover-color: var(--oi-link-hover-color);--oi-nav-link-disabled-color: #6c757d;display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--oi-nav-link-padding-y) var(--oi-nav-link-padding-x);font-size:var(--oi-nav-link-font-size);font-weight:var(--oi-nav-link-font-weight);color:var(--oi-nav-link-color);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:var(--oi-nav-link-hover-color)}.nav-link.disabled{color:var(--oi-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--oi-nav-tabs-border-width: 1px;--oi-nav-tabs-border-color: #dee2e6;--oi-nav-tabs-border-radius: .375rem;--oi-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;--oi-nav-tabs-link-active-color: #495057;--oi-nav-tabs-link-active-bg: #fff;--oi-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;border-bottom:var(--oi-nav-tabs-border-width) solid var(--oi-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--oi-nav-tabs-border-width));background:none;border:var(--oi-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--oi-nav-tabs-border-radius);border-top-right-radius:var(--oi-nav-tabs-border-radius)}.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{isolation:isolate;border-color:var(--oi-nav-tabs-link-hover-border-color)}.nav-tabs .nav-link.disabled,.nav-tabs .nav-link:disabled{color:var(--oi-nav-link-disabled-color);background-color:transparent;border-color:transparent}.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{color:var(--oi-nav-tabs-link-active-color);background-color:var(--oi-nav-tabs-link-active-bg);border-color:var(--oi-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--oi-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--oi-nav-pills-border-radius: .375rem;--oi-nav-pills-link-active-color: #fff;--oi-nav-pills-link-active-bg: #0d6efd}.nav-pills .nav-link{background:none;border:0;border-radius:var(--oi-nav-pills-border-radius)}.nav-pills .nav-link:disabled{color:var(--oi-nav-link-disabled-color);background-color:transparent;border-color:transparent}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--oi-nav-pills-link-active-color);background-color:var(--oi-nav-pills-link-active-bg)}.nav-fill>.nav-link,.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified>.nav-link,.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}