SPA shop/forum/payment/users sections now keep configuration pages only. Operational workbenches were removed from the sidebar and loaders; legacy hash routes open NativeOpsRedirect into the matching WP native admin page. Admin SPA production build refreshed accordingly.
8260 lines
190 KiB
CSS
8260 lines
190 KiB
CSS
/* Auto-extracted by extract-naive-styles.mjs */
|
|
/* Naive UI v2 Component Styles - Build-time extraction */
|
|
/* DO NOT EDIT MANUALLY */
|
|
|
|
/* _internal/scrollbar/src/styles/index.cssr.mjs */
|
|
.n-scrollbar {
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: auto;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-container {
|
|
|
|
width: 100%;
|
|
overflow: scroll;
|
|
height: 100%;
|
|
min-height: inherit;
|
|
max-height: inherit;
|
|
scrollbar-width: none;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-container::-webkit-scrollbar, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-track-piece, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-thumb {
|
|
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-container > .n-scrollbar-content {
|
|
|
|
box-sizing: border-box;
|
|
min-width: 100%;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail, .n-scrollbar + .n-scrollbar-rail {
|
|
|
|
position: absolute;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
background: var(--n-scrollbar-rail-color);
|
|
-webkit-user-select: none;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal {
|
|
|
|
height: var(--n-scrollbar-height);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar {
|
|
|
|
height: var(--n-scrollbar-height);
|
|
border-radius: var(--n-scrollbar-border-radius);
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--top, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--top {
|
|
|
|
top: var(--n-scrollbar-rail-top-horizontal-top);
|
|
right: var(--n-scrollbar-rail-right-horizontal-top);
|
|
bottom: var(--n-scrollbar-rail-bottom-horizontal-top);
|
|
left: var(--n-scrollbar-rail-left-horizontal-top);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom {
|
|
|
|
top: var(--n-scrollbar-rail-top-horizontal-bottom);
|
|
right: var(--n-scrollbar-rail-right-horizontal-bottom);
|
|
bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom);
|
|
left: var(--n-scrollbar-rail-left-horizontal-bottom);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical {
|
|
|
|
width: var(--n-scrollbar-width);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar {
|
|
|
|
width: var(--n-scrollbar-width);
|
|
border-radius: var(--n-scrollbar-border-radius);
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--left, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--left {
|
|
|
|
top: var(--n-scrollbar-rail-top-vertical-left);
|
|
right: var(--n-scrollbar-rail-right-vertical-left);
|
|
bottom: var(--n-scrollbar-rail-bottom-vertical-left);
|
|
left: var(--n-scrollbar-rail-left-vertical-left);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--right, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--right {
|
|
|
|
top: var(--n-scrollbar-rail-top-vertical-right);
|
|
right: var(--n-scrollbar-rail-right-vertical-right);
|
|
bottom: var(--n-scrollbar-rail-bottom-vertical-right);
|
|
left: var(--n-scrollbar-rail-left-vertical-right);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar {
|
|
|
|
z-index: 1;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
background-color: var(--n-scrollbar-color);
|
|
transition: background-color .2s var(--n-scrollbar-bezier);
|
|
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover {
|
|
background-color: var(--n-scrollbar-color-hover);
|
|
}
|
|
|
|
/* menu/src/styles/index.cssr.mjs */
|
|
.n-menu {
|
|
|
|
background-color: var(--n-color);
|
|
color: var(--n-item-text-color);
|
|
overflow: hidden;
|
|
transition: background-color .3s var(--n-bezier);
|
|
box-sizing: border-box;
|
|
font-size: var(--n-font-size);
|
|
padding-bottom: 6px;
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal {
|
|
|
|
max-width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding-bottom: 0;
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-submenu {
|
|
margin: 0;
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content {
|
|
|
|
padding: 0 20px;
|
|
border-bottom: 2px solid #0000;
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content::before {
|
|
display: none;
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected {
|
|
border-bottom: 2px solid var(--n-border-color-horizontal)
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active {
|
|
|
|
border-bottom: 2px solid var(--n-border-color-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-child-active-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-child-active-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-child-active-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-child-active-hover-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover {
|
|
border-bottom: 2px solid var(--n-border-color-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover {
|
|
border-bottom: 2px solid var(--n-border-color-horizontal);
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover-horizontal);
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--horizontal .n-menu-item-content .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-horizontal);
|
|
}
|
|
|
|
.n-menu:not(.n-menu--responsive) .n-menu-item-content-header {
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--collapsed .n-menu-item-content.n-menu-item-content--selected::before {
|
|
|
|
background-color: var(--n-item-color-active-collapsed) !important;
|
|
|
|
}
|
|
|
|
.n-menu.n-menu--collapsed .n-menu-item-content .n-menu-item-content-header {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-menu.n-menu--collapsed .n-menu-item-content .n-menu-item-content__arrow {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-menu.n-menu--collapsed .n-menu-item-content .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-collapsed);
|
|
}
|
|
|
|
.n-menu .n-menu-item {
|
|
|
|
height: var(--n-item-height);
|
|
margin-top: 6px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content {
|
|
|
|
box-sizing: border-box;
|
|
line-height: 1.75;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-areas: "icon content arrow";
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-right: 18px;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
padding-left .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content > * {
|
|
z-index: 1;
|
|
}
|
|
|
|
.n-menu .n-menu-item-content::before {
|
|
|
|
z-index: auto;
|
|
content: "";
|
|
background-color: #0000;
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
top: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
border-radius: var(--n-border-radius);
|
|
transition: background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--disabled {
|
|
|
|
opacity: .45;
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--collapsed .n-menu-item-content__arrow {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected::before {
|
|
background-color: var(--n-item-color-active);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__arrow {
|
|
color: var(--n-arrow-color-active);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-child-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-child-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content__arrow {
|
|
|
|
color: var(--n-arrow-color-child-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content.n-menu-item-content--child-active .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-child-active);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within::before {
|
|
background-color: var(--n-item-color-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content__arrow {
|
|
|
|
color: var(--n-arrow-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):not(.n-menu-item-content--selected, child-active):focus-within .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content__arrow {
|
|
color: var(--n-arrow-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content__arrow {
|
|
color: var(--n-arrow-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-active-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content__arrow {
|
|
color: var(--n-arrow-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active.n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content__arrow {
|
|
color: var(--n-arrow-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content__icon {
|
|
color: var(--n-item-icon-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header a {
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--child-active:hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
color: var(--n-item-text-color-child-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected.n-menu-item-content--hover::before {
|
|
background-color: var(--n-item-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover::before {
|
|
background-color: var(--n-item-color-active-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover::before {
|
|
background-color: var(--n-item-color-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content__arrow {
|
|
|
|
color: var(--n-arrow-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
|
|
background-color: var(--n-item-color-hover);
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__arrow {
|
|
|
|
color: var(--n-arrow-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__icon {
|
|
|
|
color: var(--n-item-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header a {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content__icon {
|
|
|
|
grid-area: icon;
|
|
color: var(--n-item-icon-color);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
font-size .3s var(--n-bezier),
|
|
margin-right .3s var(--n-bezier);
|
|
box-sizing: content-box;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content__arrow {
|
|
|
|
grid-area: arrow;
|
|
font-size: 16px;
|
|
color: var(--n-arrow-color);
|
|
transform: rotate(180deg);
|
|
opacity: 1;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
transform 0.2s var(--n-bezier),
|
|
opacity 0.2s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content-header {
|
|
|
|
grid-area: content;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier);
|
|
opacity: 1;
|
|
white-space: nowrap;
|
|
color: var(--n-item-text-color);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content-header a {
|
|
|
|
outline: none;
|
|
text-decoration: none;
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-item-text-color);
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content-header a::before {
|
|
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-content .n-menu-item-content-header .n-menu-item-content-header__extra {
|
|
|
|
font-size: .93em;
|
|
color: var(--n-group-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-menu .n-submenu {
|
|
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-top: 6px;
|
|
|
|
}
|
|
|
|
.n-menu .n-submenu .n-menu-item-content {
|
|
|
|
height: var(--n-item-height);
|
|
|
|
}
|
|
|
|
.n-menu .n-submenu .n-submenu-children {
|
|
|
|
overflow: hidden;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-leave-from, .n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-leave-to, .n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-enter-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity .2s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top .2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom .2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top .2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom .2s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-menu .n-submenu .n-submenu-children.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .2s cubic-bezier(.4, 0, .2, 1),
|
|
opacity .2s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top .2s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom .2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top .2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom .2s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-menu .n-menu-item-group .n-menu-item-group-title {
|
|
|
|
margin-top: 6px;
|
|
color: var(--n-group-text-color);
|
|
cursor: default;
|
|
font-size: .93em;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition:
|
|
padding-left .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-menu-tooltip a {
|
|
|
|
color: inherit;
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
.n-menu-divider {
|
|
|
|
transition: background-color .3s var(--n-bezier);
|
|
background-color: var(--n-divider-color);
|
|
height: 1px;
|
|
margin: 6px 18px;
|
|
|
|
}
|
|
|
|
/* breadcrumb/src/styles/index.cssr.mjs */
|
|
.n-breadcrumb {
|
|
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
line-height: var(--n-item-line-height);
|
|
|
|
}
|
|
|
|
.n-breadcrumb ul {
|
|
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.n-breadcrumb a {
|
|
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item {
|
|
|
|
font-size: var(--n-font-size);
|
|
transition: color .3s var(--n-bezier);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-icon {
|
|
|
|
font-size: 18px;
|
|
vertical-align: -.2em;
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-item-text-color);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:hover {
|
|
|
|
background-color: var(--n-item-color-hover);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:active {
|
|
|
|
background-color: var(--n-item-color-pressed);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link {
|
|
|
|
padding: 4px;
|
|
border-radius: var(--n-item-border-radius);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
color: var(--n-item-text-color);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover .n-icon {
|
|
|
|
color: var(--n-item-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active {
|
|
|
|
color: var(--n-item-text-color-pressed);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active .n-icon {
|
|
|
|
color: var(--n-item-text-color-pressed);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__separator {
|
|
|
|
margin: 0 8px;
|
|
color: var(--n-separator-color);
|
|
transition: color .3s var(--n-bezier);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
|
|
|
|
font-weight: var(--n-font-weight-active);
|
|
cursor: unset;
|
|
color: var(--n-item-text-color-active);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link .n-icon {
|
|
|
|
color: var(--n-item-text-color-active);
|
|
|
|
}
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__separator {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
/* tabs/src/styles/index.cssr.mjs */
|
|
.n-tabs {
|
|
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--segment-type .n-tabs-rail.transition-disabled .n-tabs-capsule {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--top .n-tab-pane {
|
|
|
|
padding: var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left .n-tab-pane {
|
|
|
|
padding: var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left) var(--n-pane-padding-top);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left, .n-tabs.n-tabs--right {
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left .n-tabs-bar, .n-tabs.n-tabs--right .n-tabs-bar {
|
|
|
|
width: 2px;
|
|
right: 0;
|
|
transition:
|
|
top .2s var(--n-bezier),
|
|
max-height .2s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left .n-tabs-tab, .n-tabs.n-tabs--right .n-tabs-tab {
|
|
|
|
padding: var(--n-tab-padding-vertical);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--right {
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--right .n-tab-pane {
|
|
|
|
padding: var(--n-pane-padding-left) var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--right .n-tabs-bar {
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--bottom {
|
|
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--bottom .n-tab-pane {
|
|
|
|
padding: var(--n-pane-padding-bottom) var(--n-pane-padding-right) var(--n-pane-padding-top) var(--n-pane-padding-left);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--bottom .n-tabs-bar {
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail {
|
|
|
|
position: relative;
|
|
padding: 3px;
|
|
border-radius: var(--n-tab-border-radius);
|
|
width: 100%;
|
|
background-color: var(--n-color-segment);
|
|
transition: background-color .3s var(--n-bezier);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail .n-tabs-capsule {
|
|
|
|
border-radius: var(--n-tab-border-radius);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
background-color: var(--n-tab-color-segment);
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
|
|
transition: transform 0.3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper {
|
|
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab {
|
|
|
|
overflow: hidden;
|
|
border-radius: var(--n-tab-border-radius);
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
font-weight: var(--n-font-weight-strong);
|
|
color: var(--n-tab-text-color-active);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab:hover {
|
|
|
|
color: var(--n-tab-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--flex .n-tabs-nav {
|
|
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--flex .n-tabs-nav .n-tabs-wrapper {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--flex .n-tabs-nav .n-tabs-wrapper .n-tabs-tab {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav {
|
|
|
|
box-sizing: border-box;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav .n-tabs-nav__prefix, .n-tabs .n-tabs-nav .n-tabs-nav__suffix {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav .n-tabs-nav__prefix {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav .n-tabs-nav__suffix {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.n-tabs.n-tabs--top > .n-tabs-nav .n-tabs-nav-scroll-wrapper::before, .n-tabs.n-tabs--bottom > .n-tabs-nav .n-tabs-nav-scroll-wrapper::before {
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--top > .n-tabs-nav .n-tabs-nav-scroll-wrapper::after, .n-tabs.n-tabs--bottom > .n-tabs-nav .n-tabs-nav-scroll-wrapper::after {
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--top > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before, .n-tabs.n-tabs--bottom > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before {
|
|
|
|
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--top > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after, .n-tabs.n-tabs--bottom > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after {
|
|
|
|
box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left .n-tabs-nav-scroll-content, .n-tabs.n-tabs--right .n-tabs-nav-scroll-content {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left > .n-tabs-nav .n-tabs-nav-scroll-wrapper::before, .n-tabs.n-tabs--right > .n-tabs-nav .n-tabs-nav-scroll-wrapper::before {
|
|
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 20px;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left > .n-tabs-nav .n-tabs-nav-scroll-wrapper::after, .n-tabs.n-tabs--right > .n-tabs-nav .n-tabs-nav-scroll-wrapper::after {
|
|
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 20px;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before, .n-tabs.n-tabs--right > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before {
|
|
|
|
box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, .12);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--left > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after, .n-tabs.n-tabs--right > .n-tabs-nav .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after {
|
|
|
|
box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, .12);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav-scroll-wrapper {
|
|
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll {
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll::-webkit-scrollbar, .n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll::-webkit-scrollbar-track-piece, .n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll::-webkit-scrollbar-thumb {
|
|
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav-scroll-wrapper::before, .n-tabs .n-tabs-nav-scroll-wrapper::after {
|
|
|
|
transition: box-shadow .3s var(--n-bezier);
|
|
pointer-events: none;
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav-scroll-content {
|
|
|
|
display: flex;
|
|
position: relative;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: fit-content;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-wrapper {
|
|
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab-wrapper {
|
|
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab {
|
|
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
flex-wrap: nowrap;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--n-tab-text-color);
|
|
font-size: var(--n-tab-font-size);
|
|
background-clip: padding-box;
|
|
padding: var(--n-tab-padding);
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab.n-tabs-tab--disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab .n-tabs-tab__close {
|
|
|
|
margin-left: 6px;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab .n-tabs-tab__label {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-bar {
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
background-color: var(--n-bar-color);
|
|
transition:
|
|
left .2s var(--n-bezier),
|
|
max-width .2s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-bar.transition-disabled {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-bar.n-tabs-bar--disabled {
|
|
|
|
background-color: var(--n-tab-text-color-disabled)
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-pane-wrapper {
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: max-height .2s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane {
|
|
|
|
color: var(--n-pane-text-color);
|
|
width: 100%;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
opacity .2s var(--n-bezier);
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane.next-transition-leave-active, .n-tabs .n-tab-pane.prev-transition-leave-active, .n-tabs .n-tab-pane.next-transition-enter-active, .n-tabs .n-tab-pane.prev-transition-enter-active {
|
|
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
transform .2s var(--n-bezier),
|
|
opacity .2s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane.next-transition-leave-active, .n-tabs .n-tab-pane.prev-transition-leave-active {
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane.next-transition-enter-from, .n-tabs .n-tab-pane.prev-transition-leave-to {
|
|
|
|
transform: translateX(32px);
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane.next-transition-leave-to, .n-tabs .n-tab-pane.prev-transition-enter-from {
|
|
|
|
transform: translateX(-32px);
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tab-pane.next-transition-leave-from, .n-tabs .n-tab-pane.next-transition-enter-to, .n-tabs .n-tab-pane.prev-transition-leave-from, .n-tabs .n-tab-pane.prev-transition-enter-to {
|
|
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-tab-pad {
|
|
|
|
box-sizing: border-box;
|
|
width: var(--n-tab-gap);
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab, .n-tabs.n-tabs--bar-type .n-tabs-tab {
|
|
|
|
font-weight: var(--n-tab-font-weight);
|
|
box-sizing: border-box;
|
|
vertical-align: bottom;
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover {
|
|
color: var(--n-tab-text-color-hover);
|
|
}
|
|
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
color: var(--n-tab-text-color-active);
|
|
font-weight: var(--n-tab-font-weight-active);
|
|
|
|
}
|
|
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--disabled, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--disabled {
|
|
color: var(--n-tab-text-color-disabled);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__suffix {
|
|
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content {
|
|
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-bar {
|
|
|
|
bottom: -1px;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav__suffix {
|
|
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav-scroll-content {
|
|
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-bar {
|
|
|
|
right: -1px;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav__suffix {
|
|
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav-scroll-content {
|
|
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-bar {
|
|
|
|
left: -1px;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav__suffix {
|
|
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav-scroll-content {
|
|
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-bar {
|
|
|
|
top: -1px;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav__suffix {
|
|
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav-scroll-content {
|
|
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-bar {
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-nav__suffix {
|
|
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-pad {
|
|
|
|
flex-grow: 1;
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab-pad {
|
|
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab {
|
|
|
|
font-weight: var(--n-tab-font-weight);
|
|
border: 1px solid var(--n-tab-border-color);
|
|
background-color: var(--n-tab-color);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
vertical-align: bottom;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--n-tab-font-size);
|
|
color: var(--n-tab-text-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable {
|
|
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
font-size: 16px;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable .n-tabs-tab__height-placeholder {
|
|
|
|
width: 0;
|
|
font-size: var(--n-tab-font-size);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable:not(.n-tabs-tab--disabled):hover {
|
|
|
|
color: var(--n-tab-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--closable {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
background-color: #0000;
|
|
font-weight: var(--n-tab-font-weight-active);
|
|
color: var(--n-tab-text-color-active);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--disabled {
|
|
color: var(--n-tab-text-color-disabled);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left, .n-tabs .n-tabs-nav.n-tabs-nav--right {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-nav__suffix, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-nav__suffix {
|
|
|
|
padding: var(--n-tab-padding-vertical);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-wrapper, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-wrapper {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-tab-wrapper, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-tab-wrapper {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-tab-wrapper .n-tabs-tab-pad, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-tab-wrapper .n-tabs-tab-pad {
|
|
|
|
height: var(--n-tab-gap-vertical);
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-scroll-padding {
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-nav__suffix {
|
|
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab {
|
|
|
|
border-top-left-radius: var(--n-tab-border-radius);
|
|
border-top-right-radius: var(--n-tab-border-radius);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
border-bottom: 1px solid #0000;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab-pad {
|
|
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-pad {
|
|
|
|
border-bottom: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-scroll-padding {
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-nav__suffix {
|
|
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab {
|
|
|
|
border-top-left-radius: var(--n-tab-border-radius);
|
|
border-bottom-left-radius: var(--n-tab-border-radius);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
border-right: 1px solid #0000;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab-pad {
|
|
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-pad {
|
|
|
|
border-right: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-scroll-padding {
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-nav__suffix {
|
|
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab {
|
|
|
|
border-top-right-radius: var(--n-tab-border-radius);
|
|
border-bottom-right-radius: var(--n-tab-border-radius);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
border-left: 1px solid #0000;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab-pad {
|
|
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-pad {
|
|
|
|
border-left: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-scroll-padding {
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-nav__suffix {
|
|
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab {
|
|
|
|
border-bottom-left-radius: var(--n-tab-border-radius);
|
|
border-bottom-right-radius: var(--n-tab-border-radius);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
|
|
|
|
border-top: 1px solid #0000;
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab-pad {
|
|
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-pad {
|
|
|
|
border-top: 1px solid var(--n-tab-border-color);
|
|
|
|
}
|
|
|
|
/* steps/src/styles/index.cssr.mjs */
|
|
.n-steps {
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.n-steps .n-step {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
.n-steps .n-step.n-step--disabled {
|
|
cursor: not-allowed
|
|
}
|
|
|
|
.n-steps .n-step.n-step--clickable {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-steps .n-step:last-child .n-step-splitor {
|
|
display: none;
|
|
}
|
|
|
|
.n-steps .n-step-splitor {
|
|
|
|
background-color: var(--n-splitor-color);
|
|
margin-top: calc(var(--n-step-header-font-size) / 2);
|
|
height: 1px;
|
|
flex: 1;
|
|
align-self: flex-start;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.n-steps .n-step-content .n-step-content-header {
|
|
|
|
color: var(--n-header-text-color);
|
|
margin-top: calc(var(--n-indicator-size) / 2 - var(--n-step-header-font-size) / 2);
|
|
line-height: var(--n-step-header-font-size);
|
|
font-size: var(--n-step-header-font-size);
|
|
position: relative;
|
|
display: flex;
|
|
font-weight: var(--n-step-header-font-weight);
|
|
margin-left: 9px;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-content .n-step-content-header .n-step-content-header__title {
|
|
|
|
white-space: nowrap;
|
|
flex: 0;
|
|
|
|
}
|
|
|
|
.n-steps .n-step-content .n-step-content__description {
|
|
|
|
color: var(--n-description-text-color);
|
|
margin-top: 12px;
|
|
margin-left: 9px;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator {
|
|
|
|
background-color: var(--n-indicator-color);
|
|
box-shadow: 0 0 0 1px var(--n-indicator-border-color);
|
|
height: var(--n-indicator-size);
|
|
width: var(--n-indicator-size);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot {
|
|
|
|
position: relative;
|
|
width: var(--n-indicator-icon-size);
|
|
height: var(--n-indicator-icon-size);
|
|
font-size: var(--n-indicator-icon-size);
|
|
line-height: var(--n-indicator-icon-size);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index {
|
|
|
|
display: inline-block;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
white-space: nowrap;
|
|
font-size: var(--n-indicator-index-font-size);
|
|
width: var(--n-indicator-icon-size);
|
|
height: var(--n-indicator-icon-size);
|
|
line-height: var(--n-indicator-icon-size);
|
|
color: var(--n-indicator-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-enter-from, .n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-enter-to, .n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-enter-active, .n-steps .n-step-indicator .n-step-indicator-slot .n-step-indicator-slot__index.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-icon {
|
|
|
|
color: var(--n-indicator-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-enter-from, .n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-enter-to, .n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-enter-active, .n-steps .n-step-indicator .n-step-indicator-slot .n-icon.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon {
|
|
|
|
color: var(--n-indicator-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-enter-from, .n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-enter-to, .n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-enter-active, .n-steps .n-step-indicator .n-step-indicator-slot .n-base-icon.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-steps.n-steps--vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.n-steps.n-steps--vertical:not(.n-steps--show-description) > .n-step {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.n-steps.n-steps--vertical > .n-step {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.n-steps.n-steps--vertical > .n-step:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.n-steps.n-steps--vertical > .n-step > .n-step-indicator > .n-step-splitor {
|
|
|
|
position: absolute;
|
|
bottom: -8px;
|
|
width: 1px;
|
|
margin: 0 !important;
|
|
left: calc(var(--n-indicator-size) / 2);
|
|
height: calc(100% - var(--n-indicator-size));
|
|
|
|
}
|
|
|
|
.n-steps.n-steps--vertical > .n-step > .n-step-content .n-step-content__description {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step {
|
|
flex-direction: column
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step > .n-step-line {
|
|
display: flex;
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step > .n-step-line > .n-step-splitor {
|
|
|
|
margin-top: 0;
|
|
align-self: center;
|
|
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step > .n-step-content {
|
|
margin-top: calc(var(--n-indicator-size) / 2 - var(--n-step-header-font-size) / 2);
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step > .n-step-content .n-step-content-header {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
.n-steps.n-steps--content-bottom:not(.n-steps--vertical) > .n-step > .n-step-content .n-step-content__description {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
/* pagination/src/styles/index.cssr.mjs */
|
|
.n-pagination {
|
|
|
|
display: flex;
|
|
vertical-align: middle;
|
|
font-size: var(--n-item-font-size);
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-prefix {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
margin: var(--n-prefix-margin);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-suffix {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
margin: var(--n-suffix-margin);
|
|
|
|
}
|
|
|
|
.n-pagination > *:not(:first-child) {
|
|
|
|
margin: var(--n-item-margin);
|
|
|
|
}
|
|
|
|
.n-pagination .n-select {
|
|
|
|
width: var(--n-select-width);
|
|
|
|
}
|
|
|
|
.n-pagination.transition-disabled .n-pagination-item {
|
|
transition: none!important;
|
|
}
|
|
|
|
.n-pagination .n-pagination-quick-jumper {
|
|
|
|
white-space: nowrap;
|
|
display: flex;
|
|
color: var(--n-jumper-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
align-items: center;
|
|
font-size: var(--n-jumper-font-size);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-quick-jumper .n-input {
|
|
|
|
margin: var(--n-input-margin);
|
|
width: var(--n-input-width);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item {
|
|
|
|
position: relative;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
min-width: var(--n-item-size);
|
|
height: var(--n-item-size);
|
|
padding: var(--n-item-padding);
|
|
background-color: var(--n-item-color);
|
|
color: var(--n-item-text-color);
|
|
border-radius: var(--n-item-border-radius);
|
|
border: var(--n-item-border);
|
|
fill: var(--n-button-icon-color);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
fill .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item.n-pagination-item--button {
|
|
|
|
background: var(--n-button-color);
|
|
color: var(--n-button-icon-color);
|
|
border: var(--n-button-border);
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item.n-pagination-item--button .n-base-icon {
|
|
|
|
font-size: var(--n-button-icon-size);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--hover {
|
|
|
|
background: var(--n-item-color-hover);
|
|
color: var(--n-item-text-color-hover);
|
|
border: var(--n-item-border-hover);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--hover.n-pagination-item--button {
|
|
|
|
background: var(--n-button-color-hover);
|
|
border: var(--n-button-border-hover);
|
|
color: var(--n-button-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
|
|
|
|
background: var(--n-item-color-hover);
|
|
color: var(--n-item-text-color-hover);
|
|
border: var(--n-item-border-hover);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
|
|
|
|
background: var(--n-button-color-hover);
|
|
border: var(--n-button-border-hover);
|
|
color: var(--n-button-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):active {
|
|
|
|
background: var(--n-item-color-pressed);
|
|
color: var(--n-item-text-color-pressed);
|
|
border: var(--n-item-border-pressed);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):active.n-pagination-item--button {
|
|
|
|
background: var(--n-button-color-pressed);
|
|
border: var(--n-button-border-pressed);
|
|
color: var(--n-button-icon-color-pressed);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
|
|
|
|
background: var(--n-item-color-active);
|
|
color: var(--n-item-text-color-active);
|
|
border: var(--n-item-border-active);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active:hover {
|
|
|
|
background: var(--n-item-color-active-hover);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item.n-pagination-item--disabled {
|
|
|
|
cursor: not-allowed;
|
|
color: var(--n-item-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--active, .n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button {
|
|
|
|
background-color: var(--n-item-color-disabled);
|
|
border: var(--n-item-border-disabled);
|
|
|
|
}
|
|
|
|
.n-pagination.n-pagination--disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-pagination.n-pagination--disabled .n-pagination-quick-jumper {
|
|
|
|
color: var(--n-jumper-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-pagination.n-pagination--simple {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-pagination.n-pagination--simple .n-pagination-quick-jumper .n-input {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
/* switch/src/styles/index.cssr.mjs */
|
|
.n-switch {
|
|
|
|
height: var(--n-height);
|
|
min-width: var(--n-width);
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
display: inline-flex;
|
|
outline: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__children-placeholder {
|
|
|
|
height: var(--n-rail-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__rail-placeholder {
|
|
|
|
display: flex;
|
|
flex-wrap: none;
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__button-placeholder {
|
|
|
|
width: calc(1.75 * var(--n-rail-height));
|
|
height: var(--n-rail-height);
|
|
|
|
}
|
|
|
|
.n-switch .n-base-loading {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
font-size: calc(var(--n-button-width) - 4px);
|
|
color: var(--n-loading-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-switch .n-base-loading.icon-switch-transition-enter-from, .n-switch .n-base-loading.icon-switch-transition-leave-to {
|
|
transform: translateX(-50%) translateY(-50%) scale(0.75);
|
|
left: 50%;
|
|
top: 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-switch .n-base-loading.icon-switch-transition-enter-to, .n-switch .n-base-loading.icon-switch-transition-leave-from {
|
|
transform: scale(1) translateX(-50%) translateY(-50%);
|
|
left: 50%;
|
|
top: 50%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-switch .n-base-loading.icon-switch-transition-enter-active, .n-switch .n-base-loading.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-switch .n-switch__checked, .n-switch .n-switch__unchecked {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-text-color);
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__checked {
|
|
|
|
right: 0;
|
|
padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__unchecked {
|
|
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
|
|
}
|
|
|
|
.n-switch:focus .n-switch__rail {
|
|
|
|
box-shadow: var(--n-box-shadow-focus);
|
|
|
|
}
|
|
|
|
.n-switch.n-switch--round .n-switch__rail {
|
|
border-radius: calc(var(--n-rail-height) / 2);
|
|
}
|
|
|
|
.n-switch.n-switch--round .n-switch__rail .n-switch__button {
|
|
border-radius: calc(var(--n-button-height) / 2);
|
|
}
|
|
|
|
.n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--pressed .n-switch__rail .n-switch__button {
|
|
max-width: var(--n-button-width-pressed);
|
|
}
|
|
|
|
.n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band .n-switch__rail:active .n-switch__button {
|
|
max-width: var(--n-button-width-pressed);
|
|
}
|
|
|
|
.n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--active.n-switch--pressed .n-switch__rail .n-switch__button {
|
|
left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));
|
|
}
|
|
|
|
.n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--active .n-switch__rail:active .n-switch__button {
|
|
left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));
|
|
}
|
|
|
|
.n-switch.n-switch--active .n-switch__rail .n-switch__button {
|
|
left: calc(100% - var(--n-button-width) - var(--n-offset))
|
|
}
|
|
|
|
.n-switch .n-switch__rail {
|
|
|
|
overflow: hidden;
|
|
height: var(--n-rail-height);
|
|
min-width: var(--n-rail-width);
|
|
border-radius: var(--n-rail-border-radius);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
background .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
background-color: var(--n-rail-color);
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__rail .n-switch__button-icon {
|
|
|
|
color: var(--n-icon-color);
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: calc(var(--n-button-height) - 4px);
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
.n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-from, .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-to, .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-active, .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-switch .n-switch__rail .n-switch__button {
|
|
|
|
align-items: center;
|
|
top: var(--n-offset);
|
|
left: var(--n-offset);
|
|
height: var(--n-button-height);
|
|
width: var(--n-button-width-pressed);
|
|
max-width: var(--n-button-width);
|
|
border-radius: var(--n-button-border-radius);
|
|
background-color: var(--n-button-color);
|
|
box-shadow: var(--n-button-box-shadow);
|
|
box-sizing: border-box;
|
|
cursor: inherit;
|
|
content: "";
|
|
position: absolute;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
left .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
max-width .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-switch.n-switch--active .n-switch__rail {
|
|
background-color: var(--n-rail-color-active);
|
|
}
|
|
|
|
.n-switch.n-switch--loading .n-switch__rail {
|
|
|
|
cursor: wait;
|
|
|
|
}
|
|
|
|
.n-switch.n-switch--disabled .n-switch__rail {
|
|
|
|
cursor: not-allowed;
|
|
opacity: .5;
|
|
|
|
}
|
|
|
|
/* select/src/styles/index.cssr.mjs */
|
|
.n-select {
|
|
|
|
z-index: auto;
|
|
outline: none;
|
|
width: 100%;
|
|
position: relative;
|
|
font-weight: var(--n-font-weight);
|
|
|
|
}
|
|
|
|
.n-select-menu {
|
|
|
|
margin: 4px 0;
|
|
box-shadow: var(--n-menu-box-shadow);
|
|
|
|
}
|
|
|
|
.n-select-menu.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-select-menu.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-select-menu.fade-in-scale-up-transition-enter-from, .n-select-menu.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-select-menu.fade-in-scale-up-transition-leave-from, .n-select-menu.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* rate/src/styles/index.cssr.mjs */
|
|
.n-rate {
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.n-rate:hover .n-rate__item {
|
|
|
|
transition:
|
|
transform .1s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-rate .n-rate__item {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
transition:
|
|
transform .1s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
transform: scale(1);
|
|
font-size: var(--n-item-size);
|
|
color: var(--n-item-color);
|
|
|
|
}
|
|
|
|
.n-rate .n-rate__item:not(:first-child) {
|
|
|
|
margin-left: 6px;
|
|
|
|
}
|
|
|
|
.n-rate .n-rate__item.n-rate__item--active {
|
|
|
|
color: var(--n-item-color-active);
|
|
|
|
}
|
|
|
|
.n-rate:not(.n-rate--readonly) {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-rate:not(.n-rate--readonly) .n-rate__item:hover {
|
|
|
|
transform: scale(1.05);
|
|
|
|
}
|
|
|
|
.n-rate:not(.n-rate--readonly) .n-rate__item:active {
|
|
|
|
transform: scale(0.96);
|
|
|
|
}
|
|
|
|
.n-rate .n-rate__half {
|
|
|
|
display: flex;
|
|
transition: inherit;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0);
|
|
|
|
}
|
|
|
|
.n-rate .n-rate__half.n-rate__half--active {
|
|
|
|
color: var(--n-item-color-active);
|
|
|
|
}
|
|
|
|
/* time-picker/src/styles/index.cssr.mjs */
|
|
.n-time-picker {
|
|
|
|
z-index: auto;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-time-picker .n-time-picker-icon {
|
|
|
|
color: var(--n-icon-color-override);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-time-picker.n-time-picker--disabled .n-time-picker-icon {
|
|
|
|
color: var(--n-icon-color-disabled-override);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel {
|
|
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
outline: none;
|
|
font-size: var(--n-item-font-size);
|
|
border-radius: var(--n-border-radius);
|
|
margin: 4px 0;
|
|
min-width: 104px;
|
|
overflow: hidden;
|
|
background-color: var(--n-panel-color);
|
|
box-shadow: var(--n-panel-box-shadow);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-time-picker-panel.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-time-picker-panel.fade-in-scale-up-transition-enter-from, .n-time-picker-panel.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-time-picker-panel.fade-in-scale-up-transition-leave-from, .n-time-picker-panel.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-actions {
|
|
|
|
padding: var(--n-panel-action-padding);
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-cols {
|
|
|
|
height: calc(var(--n-item-height) * 6);
|
|
display: flex;
|
|
position: relative;
|
|
transition: border-color .3s var(--n-bezier);
|
|
border-bottom: 1px solid var(--n-panel-divider-color);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col {
|
|
|
|
flex-grow: 1;
|
|
min-width: var(--n-item-width);
|
|
height: calc(var(--n-item-height) * 6);
|
|
flex-direction: column;
|
|
transition: box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col.n-time-picker-col--transition-disabled .n-time-picker-col__item {
|
|
transition: none;
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col.n-time-picker-col--transition-disabled .n-time-picker-col__item::before {
|
|
transition: none;
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__padding {
|
|
|
|
height: calc(var(--n-item-height) * 5);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col:first-child {
|
|
min-width: calc(var(--n-item-width) + 4px);
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col:first-child .n-time-picker-col__item::before {
|
|
left: 4px;
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item {
|
|
|
|
cursor: pointer;
|
|
height: var(--n-item-height);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
text-decoration-color .3s var(--n-bezier);
|
|
background: #0000;
|
|
text-decoration-color: #0000;
|
|
color: var(--n-item-text-color);
|
|
z-index: 0;
|
|
box-sizing: border-box;
|
|
padding-top: 4px;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item::before {
|
|
|
|
content: "";
|
|
transition: background-color .3s var(--n-bezier);
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 4px;
|
|
top: 4px;
|
|
bottom: 0;
|
|
border-radius: var(--n-item-border-radius);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item:not(.n-time-picker-col__item--disabled):hover::before {
|
|
|
|
background-color: var(--n-item-color-hover);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item.n-time-picker-col__item--active {
|
|
|
|
color: var(--n-item-text-color-active);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item.n-time-picker-col__item--active::before {
|
|
|
|
background-color: var(--n-item-color-hover);
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col .n-time-picker-col__item.n-time-picker-col__item--disabled {
|
|
|
|
opacity: var(--n-item-opacity-disabled);
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-time-picker-panel .n-time-picker-col.n-time-picker-col--invalid .n-time-picker-col__item.n-time-picker-col__item--active {
|
|
|
|
text-decoration: line-through;
|
|
text-decoration-color: var(--n-item-text-color-active);
|
|
|
|
}
|
|
|
|
/* tag/src/styles/index.cssr.mjs */
|
|
.n-tag {
|
|
|
|
--n-close-margin: var(--n-close-margin-top) var(--n-close-margin-right) var(--n-close-margin-bottom) var(--n-close-margin-left);
|
|
white-space: nowrap;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
padding: var(--n-padding);
|
|
border-radius: var(--n-border-radius);
|
|
color: var(--n-text-color);
|
|
background-color: var(--n-color);
|
|
transition:
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier);
|
|
line-height: 1;
|
|
height: var(--n-height);
|
|
font-size: var(--n-font-size);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--strong {
|
|
|
|
font-weight: var(--n-font-weight-strong);
|
|
|
|
}
|
|
|
|
.n-tag .n-tag__border {
|
|
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
border: var(--n-border);
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tag .n-tag__icon {
|
|
|
|
display: flex;
|
|
margin: 0 4px 0 0;
|
|
color: var(--n-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: var(--n-avatar-size-override);
|
|
|
|
}
|
|
|
|
.n-tag .n-tag__avatar {
|
|
|
|
display: flex;
|
|
margin: 0 6px 0 0;
|
|
|
|
}
|
|
|
|
.n-tag .n-tag__close {
|
|
|
|
margin: var(--n-close-margin);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--round {
|
|
|
|
padding: 0 calc(var(--n-height) / 3);
|
|
border-radius: calc(var(--n-height) / 2);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--round .n-tag__icon {
|
|
|
|
margin: 0 4px 0 calc((var(--n-height) - 8px) / -2);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--round .n-tag__avatar {
|
|
|
|
margin: 0 6px 0 calc((var(--n-height) - 8px) / -2);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--round.n-tag--closable {
|
|
|
|
padding: 0 calc(var(--n-height) / 4) 0 calc(var(--n-height) / 3);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--icon.n-tag--round, .n-tag.n-tag--avatar.n-tag--round {
|
|
|
|
padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 2);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--disabled {
|
|
|
|
cursor: not-allowed !important;
|
|
opacity: var(--n-opacity-disabled);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--checkable {
|
|
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
color: var(--n-text-color-checkable);
|
|
background-color: var(--n-color-checkable);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--checkable:not(.n-tag--disabled):hover {
|
|
background-color: var(--n-color-hover-checkable);
|
|
}
|
|
|
|
.n-tag.n-tag--checkable:not(.n-tag--disabled):hover:not(.n-tag--checked) {
|
|
color: var(--n-text-color-hover-checkable);
|
|
}
|
|
|
|
.n-tag.n-tag--checkable:not(.n-tag--disabled):active {
|
|
background-color: var(--n-color-pressed-checkable);
|
|
}
|
|
|
|
.n-tag.n-tag--checkable:not(.n-tag--disabled):active:not(.n-tag--checked) {
|
|
color: var(--n-text-color-pressed-checkable);
|
|
}
|
|
|
|
.n-tag.n-tag--checkable.n-tag--checked {
|
|
|
|
color: var(--n-text-color-checked);
|
|
background-color: var(--n-color-checked);
|
|
|
|
}
|
|
|
|
.n-tag.n-tag--checkable.n-tag--checked:not(.n-tag--disabled):hover {
|
|
background-color: var(--n-color-checked-hover);
|
|
}
|
|
|
|
.n-tag.n-tag--checkable.n-tag--checked:not(.n-tag--disabled):active {
|
|
background-color: var(--n-color-checked-pressed);
|
|
}
|
|
|
|
/* alert/src/styles/index.cssr.mjs */
|
|
.n-alert {
|
|
|
|
line-height: var(--n-line-height);
|
|
border-radius: var(--n-border-radius);
|
|
position: relative;
|
|
transition: background-color .3s var(--n-bezier);
|
|
background-color: var(--n-color);
|
|
text-align: start;
|
|
word-break: break-word;
|
|
|
|
}
|
|
|
|
.n-alert .n-alert__border {
|
|
|
|
border-radius: inherit;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
transition: border-color .3s var(--n-bezier);
|
|
border: var(--n-border);
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.n-alert.n-alert--closable .n-alert-body .n-alert-body__title {
|
|
|
|
padding-right: 24px;
|
|
|
|
}
|
|
|
|
.n-alert .n-alert__icon {
|
|
color: var(--n-icon-color);
|
|
}
|
|
|
|
.n-alert .n-alert-body {
|
|
padding: var(--n-padding);
|
|
}
|
|
|
|
.n-alert .n-alert-body .n-alert-body__title {
|
|
color: var(--n-title-text-color);
|
|
}
|
|
|
|
.n-alert .n-alert-body .n-alert-body__content {
|
|
color: var(--n-content-text-color);
|
|
}
|
|
|
|
.n-alert.fade-in-height-expand-transition-leave-from, .n-alert.fade-in-height-expand-transition-enter-to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-alert.fade-in-height-expand-transition-leave-to, .n-alert.fade-in-height-expand-transition-enter-from {
|
|
transform: scale(0.9);
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-alert.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity .3s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s
|
|
,transform .3s var(--n-bezier)
|
|
|
|
}
|
|
|
|
.n-alert.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1),
|
|
opacity .3s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1)
|
|
,transform .3s var(--n-bezier)
|
|
|
|
}
|
|
|
|
.n-alert .n-alert__icon {
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
width: var(--n-icon-size);
|
|
height: var(--n-icon-size);
|
|
font-size: var(--n-icon-size);
|
|
margin: var(--n-icon-margin);
|
|
|
|
}
|
|
|
|
.n-alert .n-alert__close {
|
|
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin: var(--n-close-margin);
|
|
|
|
}
|
|
|
|
.n-alert.n-alert--show-icon .n-alert-body {
|
|
padding-left: calc(var(--n-icon-margin-left) + var(--n-icon-size) + var(--n-icon-margin-right));
|
|
}
|
|
|
|
.n-alert.n-alert--right-adjust .n-alert-body {
|
|
padding-right: calc(var(--n-close-size) + var(--n-padding) + 2px);
|
|
}
|
|
|
|
.n-alert .n-alert-body {
|
|
|
|
border-radius: var(--n-border-radius);
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-alert .n-alert-body .n-alert-body__title {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: 16px;
|
|
line-height: 19px;
|
|
font-weight: var(--n-title-font-weight);
|
|
|
|
}
|
|
|
|
.n-alert .n-alert-body .n-alert-body__title + .n-alert-body__content {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.n-alert .n-alert-body .n-alert-body__content {
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: var(--n-font-size);
|
|
}
|
|
|
|
.n-alert .n-alert__icon {
|
|
transition: color .3s var(--n-bezier);
|
|
}
|
|
|
|
/* empty/src/styles/index.cssr.mjs */
|
|
.n-empty {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: var(--n-font-size);
|
|
|
|
}
|
|
|
|
.n-empty .n-empty__icon {
|
|
|
|
width: var(--n-icon-size);
|
|
height: var(--n-icon-size);
|
|
font-size: var(--n-icon-size);
|
|
line-height: var(--n-icon-size);
|
|
color: var(--n-icon-color);
|
|
transition:
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-empty .n-empty__icon + .n-empty__description {
|
|
|
|
margin-top: 8px;
|
|
|
|
}
|
|
|
|
.n-empty .n-empty__description {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-text-color);
|
|
|
|
}
|
|
|
|
.n-empty .n-empty__extra {
|
|
|
|
text-align: center;
|
|
transition: color .3s var(--n-bezier);
|
|
margin-top: 12px;
|
|
color: var(--n-extra-text-color);
|
|
|
|
}
|
|
|
|
/* result/src/styles/index.cssr.mjs */
|
|
.n-result {
|
|
|
|
color: var(--n-text-color);
|
|
line-height: var(--n-line-height);
|
|
font-size: var(--n-font-size);
|
|
transition:
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-result .n-result-icon {
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-result .n-result-icon .n-result-icon__status-image {
|
|
|
|
font-size: var(--n-icon-size);
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
}
|
|
|
|
.n-result .n-result-icon .n-base-icon {
|
|
|
|
color: var(--n-icon-color);
|
|
font-size: var(--n-icon-size);
|
|
|
|
}
|
|
|
|
.n-result .n-result-content {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.n-result .n-result-footer {
|
|
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.n-result .n-result-header .n-result-header__title {
|
|
|
|
margin-top: 16px;
|
|
font-weight: var(--n-title-font-weight);
|
|
transition: color .3s var(--n-bezier);
|
|
text-align: center;
|
|
color: var(--n-title-text-color);
|
|
font-size: var(--n-title-font-size);
|
|
|
|
}
|
|
|
|
.n-result .n-result-header .n-result-header__description {
|
|
|
|
margin-top: 4px;
|
|
text-align: center;
|
|
font-size: var(--n-font-size);
|
|
|
|
}
|
|
|
|
/* statistic/src/styles/index.cssr.mjs */
|
|
.n-statistic .n-statistic__label {
|
|
|
|
font-weight: var(--n-label-font-weight);
|
|
transition: .3s color var(--n-bezier);
|
|
font-size: var(--n-label-font-size);
|
|
color: var(--n-label-text-color);
|
|
|
|
}
|
|
|
|
.n-statistic .n-statistic-value {
|
|
|
|
margin-top: 4px;
|
|
font-weight: var(--n-value-font-weight);
|
|
|
|
}
|
|
|
|
.n-statistic .n-statistic-value .n-statistic-value__prefix {
|
|
|
|
margin: 0 4px 0 0;
|
|
font-size: var(--n-value-font-size);
|
|
transition: .3s color var(--n-bezier);
|
|
color: var(--n-value-prefix-text-color);
|
|
|
|
}
|
|
|
|
.n-statistic .n-statistic-value .n-statistic-value__prefix .n-icon {
|
|
vertical-align: -0.125em;
|
|
}
|
|
|
|
.n-statistic .n-statistic-value .n-statistic-value__content {
|
|
|
|
font-size: var(--n-value-font-size);
|
|
transition: .3s color var(--n-bezier);
|
|
color: var(--n-value-text-color);
|
|
|
|
}
|
|
|
|
.n-statistic .n-statistic-value .n-statistic-value__suffix {
|
|
|
|
margin: 0 0 0 4px;
|
|
font-size: var(--n-value-font-size);
|
|
transition: .3s color var(--n-bezier);
|
|
color: var(--n-value-suffix-text-color);
|
|
|
|
}
|
|
|
|
.n-statistic .n-statistic-value .n-statistic-value__suffix .n-icon {
|
|
vertical-align: -0.125em;
|
|
}
|
|
|
|
/* collapse/src/styles/index.cssr.mjs */
|
|
.n-collapse {
|
|
width: 100%;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item {
|
|
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-text-color);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
margin: var(--n-item-margin);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--disabled .n-collapse-item__header {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--disabled .n-collapse-item__header .n-collapse-item__header-main {
|
|
|
|
color: var(--n-title-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--disabled .n-collapse-item__header .n-collapse-item-arrow {
|
|
|
|
color: var(--n-arrow-color-disabled);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:first-child > .n-collapse-item__header {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--left-arrow-placement .n-collapse-item__header .n-collapse-item-arrow {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--right-arrow-placement .n-collapse-item__header .n-collapse-item-arrow {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-leave-from, .n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-leave-to, .n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-enter-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.15s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity 0.15s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top 0.15s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom 0.15s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top 0.15s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom 0.15s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__content-wrapper.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.15s cubic-bezier(.4, 0, .2, 1),
|
|
opacity 0.15s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top 0.15s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom 0.15s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top 0.15s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom 0.15s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item.n-collapse-item--active .n-collapse-item__header.n-collapse-item__header--active .n-collapse-item-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:not(:first-child) {
|
|
border-top: 1px solid var(--n-divider-color);
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:not(.n-collapse-item--disabled).n-collapse-item--trigger-area-main .n-collapse-item__header .n-collapse-item__header-main {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:not(.n-collapse-item--disabled).n-collapse-item--trigger-area-main .n-collapse-item__header .n-collapse-item-arrow {
|
|
cursor: default;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:not(.n-collapse-item--disabled).n-collapse-item--trigger-area-arrow .n-collapse-item__header .n-collapse-item-arrow {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item:not(.n-collapse-item--disabled).n-collapse-item--trigger-area-extra .n-collapse-item__header .n-collapse-item__header-extra {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__header {
|
|
|
|
font-size: var(--n-title-font-size);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
transition: color .3s var(--n-bezier);
|
|
position: relative;
|
|
padding: var(--n-title-padding);
|
|
color: var(--n-title-text-color);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-main {
|
|
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
font-weight: var(--n-title-font-weight);
|
|
transition: color .3s var(--n-bezier);
|
|
flex: 1;
|
|
color: var(--n-title-text-color);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-extra {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-text-color);
|
|
|
|
}
|
|
|
|
.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item-arrow {
|
|
|
|
display: flex;
|
|
transition:
|
|
transform .15s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
font-size: 18px;
|
|
color: var(--n-arrow-color);
|
|
|
|
}
|
|
|
|
/* timeline/src/styles/index.cssr.mjs */
|
|
.n-timeline {
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.25;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal {
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item {
|
|
|
|
flex-shrink: 0;
|
|
padding-right: 40px;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item.n-timeline-item--dashed-line-type > .n-timeline-item-timeline .n-timeline-item-timeline__line {
|
|
|
|
background-image: linear-gradient(90deg, var(--n-color-start), var(--n-color-start) 50%, transparent 50%, transparent 100%);
|
|
background-size: 10px 1px;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item > .n-timeline-item-content {
|
|
|
|
margin-top: calc(var(--n-icon-size) + 12px);
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item > .n-timeline-item-content > .n-timeline-item-content__meta {
|
|
|
|
margin-top: 6px;
|
|
margin-bottom: unset;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item > .n-timeline-item-timeline {
|
|
|
|
width: 100%;
|
|
height: calc(var(--n-icon-size) + 12px);
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--horizontal > .n-timeline-item > .n-timeline-item-timeline .n-timeline-item-timeline__line {
|
|
|
|
left: var(--n-icon-size);
|
|
top: calc(var(--n-icon-size) / 2 - 1px);
|
|
right: 0px;
|
|
width: unset;
|
|
height: 2px;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--right-placement .n-timeline-item .n-timeline-item-content {
|
|
|
|
text-align: right;
|
|
margin-right: calc(var(--n-icon-size) + 12px);
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--right-placement .n-timeline-item .n-timeline-item-timeline {
|
|
|
|
width: var(--n-icon-size);
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--left-placement .n-timeline-item .n-timeline-item-content {
|
|
|
|
margin-left: calc(var(--n-icon-size) + 12px);
|
|
|
|
}
|
|
|
|
.n-timeline.n-timeline--left-placement .n-timeline-item .n-timeline-item-timeline {
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item:last-child .n-timeline-item-timeline .n-timeline-item-timeline__line {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item:last-child .n-timeline-item-content .n-timeline-item-content__meta {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-content .n-timeline-item-content__title {
|
|
|
|
margin: var(--n-title-margin);
|
|
font-size: var(--n-title-font-size);
|
|
transition: color .3s var(--n-bezier);
|
|
font-weight: var(--n-title-font-weight);
|
|
color: var(--n-title-text-color);
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-content .n-timeline-item-content__content {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: var(--n-content-font-size);
|
|
color: var(--n-content-text-color);
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-content .n-timeline-item-content__meta {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: 12px;
|
|
margin-top: 6px;
|
|
margin-bottom: 20px;
|
|
color: var(--n-meta-text-color);
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item.n-timeline-item--dashed-line-type .n-timeline-item-timeline .n-timeline-item-timeline__line {
|
|
|
|
--n-color-start: var(--n-line-color);
|
|
transition: --n-color-start .3s var(--n-bezier);
|
|
background-color: transparent;
|
|
background-image: linear-gradient(180deg, var(--n-color-start), var(--n-color-start) 50%, transparent 50%, transparent 100%);
|
|
background-size: 1px 10px;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-timeline {
|
|
|
|
width: calc(var(--n-icon-size) + 12px);
|
|
position: absolute;
|
|
top: calc(var(--n-title-font-size) * 1.25 / 2 - var(--n-icon-size) / 2);
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-timeline .n-timeline-item-timeline__circle {
|
|
|
|
border: var(--n-circle-border);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
width: var(--n-icon-size);
|
|
height: var(--n-icon-size);
|
|
border-radius: var(--n-icon-size);
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-timeline .n-timeline-item-timeline__icon {
|
|
|
|
color: var(--n-icon-color);
|
|
font-size: var(--n-icon-size);
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-timeline .n-timeline-item .n-timeline-item-timeline .n-timeline-item-timeline__line {
|
|
|
|
transition: background-color .3s var(--n-bezier);
|
|
position: absolute;
|
|
top: var(--n-icon-size);
|
|
left: calc(var(--n-icon-size) / 2 - 1px);
|
|
bottom: 0px;
|
|
width: 2px;
|
|
background-color: var(--n-line-color);
|
|
|
|
}
|
|
|
|
/* button/src/styles/index.cssr.mjs */
|
|
.n-button {
|
|
|
|
margin: 0;
|
|
font-weight: var(--n-font-weight);
|
|
line-height: 1;
|
|
font-family: inherit;
|
|
padding: var(--n-padding);
|
|
height: var(--n-height);
|
|
font-size: var(--n-font-size);
|
|
border-radius: var(--n-border-radius);
|
|
color: var(--n-text-color);
|
|
background-color: var(--n-color);
|
|
width: var(--n-width);
|
|
white-space: nowrap;
|
|
outline: none;
|
|
position: relative;
|
|
z-index: auto;
|
|
border: none;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-button.n-button--color .n-button__border {
|
|
border-color: var(--n-border-color);
|
|
}
|
|
|
|
.n-button.n-button--color.n-button--disabled .n-button__border {
|
|
border-color: var(--n-border-color-disabled);
|
|
}
|
|
|
|
.n-button.n-button--color:not(.n-button--disabled):focus .n-button__state-border {
|
|
border-color: var(--n-border-color-focus);
|
|
}
|
|
|
|
.n-button.n-button--color:not(.n-button--disabled):hover .n-button__state-border {
|
|
border-color: var(--n-border-color-hover);
|
|
}
|
|
|
|
.n-button.n-button--color:not(.n-button--disabled):active .n-button__state-border {
|
|
border-color: var(--n-border-color-pressed);
|
|
}
|
|
|
|
.n-button.n-button--color:not(.n-button--disabled).n-button--pressed .n-button__state-border {
|
|
border-color: var(--n-border-color-pressed);
|
|
}
|
|
|
|
.n-button.n-button--disabled {
|
|
background-color: var(--n-color-disabled);
|
|
color: var(--n-text-color-disabled);
|
|
}
|
|
|
|
.n-button.n-button--disabled .n-button__border {
|
|
border: var(--n-border-disabled);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):focus {
|
|
background-color: var(--n-color-focus);
|
|
color: var(--n-text-color-focus);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):focus .n-button__state-border {
|
|
border: var(--n-border-focus);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):hover {
|
|
background-color: var(--n-color-hover);
|
|
color: var(--n-text-color-hover);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):hover .n-button__state-border {
|
|
border: var(--n-border-hover);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):active {
|
|
background-color: var(--n-color-pressed);
|
|
color: var(--n-text-color-pressed);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled):active .n-button__state-border {
|
|
border: var(--n-border-pressed);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled).n-button--pressed {
|
|
background-color: var(--n-color-pressed);
|
|
color: var(--n-text-color-pressed);
|
|
}
|
|
|
|
.n-button:not(.n-button--disabled).n-button--pressed .n-button__state-border {
|
|
border: var(--n-border-pressed);
|
|
}
|
|
|
|
.n-button.n-button--loading {
|
|
cursor: wait;
|
|
}
|
|
|
|
.n-button .n-base-wave {
|
|
|
|
pointer-events: none;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
animation-iteration-count: 1;
|
|
animation-duration: var(--n-ripple-duration);
|
|
animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
|
|
|
|
}
|
|
|
|
.n-button .n-base-wave.n-base-wave--active {
|
|
z-index: 1;
|
|
animation-name: button-wave-spread, button-wave-opacity;
|
|
}
|
|
|
|
.n-button .n-button__border, .n-button .n-button__state-border {
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
transition: border-color .3s var(--n-bezier);
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.n-button .n-button__border {
|
|
|
|
border: var(--n-border);
|
|
|
|
}
|
|
|
|
.n-button .n-button__state-border {
|
|
|
|
border: var(--n-border);
|
|
border-color: #0000;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-button .n-button__icon {
|
|
|
|
margin: var(--n-icon-margin);
|
|
margin-left: 0;
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
max-width: var(--n-icon-size);
|
|
font-size: var(--n-icon-size);
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
.n-button .n-button__icon .n-icon-slot {
|
|
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-from, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-to {
|
|
transform: translateY(-50%) scale(0.75);
|
|
left: 0;
|
|
top: 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-to, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-from {
|
|
transform: scale(1) translateY(-50%);
|
|
left: 0;
|
|
top: 50%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-active, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-button .n-button__icon.fade-in-width-expand-transition-leave-from, .n-button .n-button__icon.fade-in-width-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-button .n-button__icon.fade-in-width-expand-transition-leave-to, .n-button .n-button__icon.fade-in-width-expand-transition-enter-from {
|
|
|
|
opacity: 0!important;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
|
|
}
|
|
|
|
.n-button .n-button__icon.fade-in-width-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
opacity .2s cubic-bezier(.4, 0, .2, 1),
|
|
max-width .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
|
margin-left .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
|
margin-right .2s cubic-bezier(.4, 0, .2, 1) .1s;
|
|
|
|
}
|
|
|
|
.n-button .n-button__icon.fade-in-width-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
opacity .2s cubic-bezier(.4, 0, .2, 1) .1s,
|
|
max-width .2s cubic-bezier(.4, 0, .2, 1),
|
|
margin-left .2s cubic-bezier(.4, 0, .2, 1),
|
|
margin-right .2s cubic-bezier(.4, 0, .2, 1);
|
|
|
|
}
|
|
|
|
.n-button .n-button__content {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
.n-button .n-button__content ~ .n-button__icon {
|
|
margin: var(--n-icon-margin);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.n-button.n-button--block {
|
|
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-button.n-button--dashed .n-button__border, .n-button.n-button--dashed .n-button__state-border {
|
|
border-style: dashed !important;
|
|
}
|
|
|
|
.n-button.n-button--disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--n-opacity-disabled);
|
|
}
|
|
|
|
@keyframes button-wave-spread {
|
|
from {
|
|
box-shadow: 0 0 0.5px 0 var(--n-ripple-color);
|
|
}
|
|
to {
|
|
box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color);
|
|
}
|
|
}
|
|
|
|
@keyframes button-wave-opacity {
|
|
from {
|
|
opacity: var(--n-wave-opacity);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* modal/src/styles/index.cssr.mjs */
|
|
.n-modal-container {
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 0;
|
|
width: 0;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.n-modal-mask {
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
|
|
}
|
|
|
|
.n-modal-mask.fade-in-transition-enter-active {
|
|
transition: all .25s var(--n-bezier-ease-out)!important;
|
|
}
|
|
|
|
.n-modal-mask.fade-in-transition-leave-active {
|
|
transition: all .25s var(--n-bezier-ease-out)!important;
|
|
}
|
|
|
|
.n-modal-mask.fade-in-transition-enter-from, .n-modal-mask.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-modal-mask.fade-in-transition-leave-from, .n-modal-mask.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-modal-body-wrapper {
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
overflow: visible;
|
|
|
|
}
|
|
|
|
.n-modal-body-wrapper .n-modal-scroll-content {
|
|
|
|
min-height: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-modal-body-wrapper.n-modal-body-wrapper--mask-hidden {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.n-modal-body-wrapper.n-modal-body-wrapper--mask-hidden .n-modal-scroll-content > * {
|
|
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
.n-modal {
|
|
|
|
position: relative;
|
|
align-self: center;
|
|
color: var(--n-text-color);
|
|
margin: auto;
|
|
box-shadow: var(--n-box-shadow);
|
|
|
|
}
|
|
|
|
.n-modal.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .25s cubic-bezier(.4, 0, 1, 1), transform .25s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-modal.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .25s cubic-bezier(0, 0, .2, 1), transform .25s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-modal.fade-in-scale-up-transition-enter-from, .n-modal.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.5);
|
|
}
|
|
|
|
.n-modal.fade-in-scale-up-transition-leave-from, .n-modal.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-modal .n-draggable {
|
|
|
|
cursor: move;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
/* message/src/styles/index.cssr.mjs */
|
|
.n-message-wrapper {
|
|
|
|
margin: var(--n-margin);
|
|
z-index: 0;
|
|
transform-origin: top center;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.n-message-wrapper.fade-in-height-expand-transition-leave-from, .n-message-wrapper.fade-in-height-expand-transition-enter-to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-message-wrapper.fade-in-height-expand-transition-leave-to, .n-message-wrapper.fade-in-height-expand-transition-enter-from {
|
|
transform: scale(0.85);
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-message-wrapper.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: visible;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity .3s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s
|
|
,transform .3s var(--n-bezier)
|
|
|
|
}
|
|
|
|
.n-message-wrapper.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: visible;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1),
|
|
opacity .3s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1)
|
|
,transform .3s var(--n-bezier)
|
|
|
|
}
|
|
|
|
.n-message {
|
|
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
transform .3s var(--n-bezier),
|
|
margin-bottom .3s var(--n-bezier);
|
|
padding: var(--n-padding);
|
|
border-radius: var(--n-border-radius);
|
|
border: var(--n-border);
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
max-width: var(--n-max-width);
|
|
color: var(--n-text-color);
|
|
background-color: var(--n-color);
|
|
box-shadow: var(--n-box-shadow);
|
|
|
|
}
|
|
|
|
.n-message .n-message__content {
|
|
|
|
display: inline-block;
|
|
line-height: var(--n-line-height);
|
|
font-size: var(--n-font-size);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon {
|
|
|
|
position: relative;
|
|
margin: var(--n-icon-margin);
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
font-size: var(--n-icon-size);
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--default-type > * {
|
|
|
|
color: var(--n-icon-color-default);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--info-type > * {
|
|
|
|
color: var(--n-icon-color-info);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--success-type > * {
|
|
|
|
color: var(--n-icon-color-success);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--warning-type > * {
|
|
|
|
color: var(--n-icon-color-warning);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--error-type > * {
|
|
|
|
color: var(--n-icon-color-error);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon.n-message__icon--loading-type > * {
|
|
|
|
color: var(--n-icon-color-loading);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon > * {
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-message .n-message__icon > *.icon-switch-transition-enter-from, .n-message .n-message__icon > *.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-message .n-message__icon > *.icon-switch-transition-enter-to, .n-message .n-message__icon > *.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-message .n-message__icon > *.icon-switch-transition-enter-active, .n-message .n-message__icon > *.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-message .n-message__close {
|
|
|
|
margin: var(--n-close-margin);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
.n-message .n-message__close:hover {
|
|
|
|
color: var(--n-close-icon-color-hover);
|
|
|
|
}
|
|
|
|
.n-message .n-message__close:active {
|
|
|
|
color: var(--n-close-icon-color-pressed);
|
|
|
|
}
|
|
|
|
.n-message-container {
|
|
|
|
z-index: 6000;
|
|
position: fixed;
|
|
height: 0;
|
|
overflow: visible;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--top {
|
|
|
|
top: 12px;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--top-left {
|
|
|
|
top: 12px;
|
|
left: 12px;
|
|
right: 0;
|
|
align-items: flex-start;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--top-right {
|
|
|
|
top: 12px;
|
|
left: 0;
|
|
right: 12px;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--bottom {
|
|
|
|
bottom: 4px;
|
|
left: 0;
|
|
right: 0;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--bottom-left {
|
|
|
|
bottom: 4px;
|
|
left: 12px;
|
|
right: 0;
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
|
|
}
|
|
|
|
.n-message-container.n-message-container--bottom-right {
|
|
|
|
bottom: 4px;
|
|
left: 0;
|
|
right: 12px;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
/* notification/src/styles/index.cssr.mjs */
|
|
.n-notification-container {
|
|
|
|
z-index: 4000;
|
|
position: fixed;
|
|
overflow: visible;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
.n-notification-container > .n-scrollbar {
|
|
|
|
width: initial;
|
|
overflow: visible;
|
|
height: -moz-fit-content !important;
|
|
height: fit-content !important;
|
|
max-height: 100vh !important;
|
|
|
|
}
|
|
|
|
.n-notification-container > .n-scrollbar > .n-scrollbar-container {
|
|
|
|
height: -moz-fit-content !important;
|
|
height: fit-content !important;
|
|
max-height: 100vh !important;
|
|
|
|
}
|
|
|
|
.n-notification-container > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content {
|
|
|
|
padding-top: 12px;
|
|
padding-bottom: 33px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--top-right, .n-notification-container.n-notification-container--top-left {
|
|
|
|
top: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-right.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-left.transitioning > .n-scrollbar > .n-scrollbar-container {
|
|
|
|
min-height: 100vh !important;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom, .n-notification-container.n-notification-container--bottom-right, .n-notification-container.n-notification-container--bottom-left {
|
|
|
|
bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-right > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-left > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content {
|
|
|
|
padding-bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper {
|
|
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-bottom: 0;
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--bottom {
|
|
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
transform: scale(0.85);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top .n-notification-wrapper {
|
|
|
|
transform-origin: top center;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom .n-notification-wrapper {
|
|
|
|
transform-origin: bottom center;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-right .n-notification, .n-notification-container.n-notification-container--bottom-right .n-notification {
|
|
|
|
margin-left: 28px;
|
|
margin-right: 16px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-left .n-notification, .n-notification-container.n-notification-container--bottom-left .n-notification {
|
|
|
|
margin-left: 16px;
|
|
margin-right: 28px;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-right {
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
transform: translate(calc(100%), 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-left {
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
transform: translate(calc(-100%), 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-right {
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
transform: translate(calc(100%), 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-left {
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
transform: translate(calc(-100%), 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
transform: translate(0, 0);
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--scrollable.n-notification-container--top-right {
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--scrollable.n-notification-container--top-left {
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-right {
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-left {
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification-wrapper {
|
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification-wrapper.notification-transition-enter-from, .n-notification-container .n-notification-wrapper.notification-transition-leave-to {
|
|
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification-wrapper.notification-transition-leave-from, .n-notification-container .n-notification-wrapper.notification-transition-enter-to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification-wrapper.notification-transition-leave-active {
|
|
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
transform .3s var(--n-bezier-ease-in),
|
|
max-height .3s var(--n-bezier),
|
|
margin-top .3s linear,
|
|
margin-bottom .3s linear,
|
|
box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification-wrapper.notification-transition-enter-active {
|
|
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
transform .3s var(--n-bezier-ease-out),
|
|
max-height .3s var(--n-bezier),
|
|
margin-top .3s linear,
|
|
margin-bottom .3s linear,
|
|
box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification {
|
|
|
|
background-color: var(--n-color);
|
|
color: var(--n-text-color);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
font-family: inherit;
|
|
font-size: var(--n-font-size);
|
|
font-weight: 400;
|
|
position: relative;
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
padding-left: var(--n-padding-left);
|
|
padding-right: var(--n-padding-right);
|
|
width: var(--n-width);
|
|
max-width: calc(100vw - 16px - 16px);
|
|
border-radius: var(--n-border-radius);
|
|
box-shadow: var(--n-box-shadow);
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification__avatar .n-icon {
|
|
|
|
color: var(--n-icon-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification__avatar .n-base-icon {
|
|
|
|
color: var(--n-icon-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification.n-notification--show-avatar .n-notification-main {
|
|
|
|
margin-left: 40px;
|
|
width: calc(100% - 40px);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification.n-notification--closable .n-notification-main > *:first-child {
|
|
|
|
padding-right: 20px;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification.n-notification--closable .n-notification__close {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: var(--n-close-margin);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification__avatar {
|
|
|
|
position: absolute;
|
|
top: var(--n-padding-top);
|
|
left: var(--n-padding-left);
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification__avatar .n-icon {
|
|
transition: color .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main {
|
|
|
|
padding-top: var(--n-padding-top);
|
|
padding-bottom: var(--n-padding-bottom);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 8px;
|
|
width: calc(100% - 8px);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main-footer {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__meta {
|
|
|
|
font-size: var(--n-meta-font-size);
|
|
transition: color .3s var(--n-bezier-ease-out);
|
|
color: var(--n-description-text-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__action {
|
|
|
|
cursor: pointer;
|
|
transition: color .3s var(--n-bezier-ease-out);
|
|
color: var(--n-action-text-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main__header {
|
|
|
|
font-weight: var(--n-title-font-weight);
|
|
font-size: var(--n-title-font-size);
|
|
transition: color .3s var(--n-bezier-ease-out);
|
|
color: var(--n-title-text-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main__description {
|
|
|
|
margin-top: 8px;
|
|
font-size: var(--n-description-font-size);
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
transition: color .3s var(--n-bezier-ease-out);
|
|
color: var(--n-description-text-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main__content {
|
|
|
|
line-height: var(--n-line-height);
|
|
margin: 12px 0 0 0;
|
|
font-family: inherit;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
transition: color .3s var(--n-bezier-ease-out);
|
|
color: var(--n-text-color);
|
|
|
|
}
|
|
|
|
.n-notification-container .n-notification .n-notification-main .n-notification-main__content:first-child {
|
|
margin: 0;
|
|
}
|
|
|
|
/* popconfirm/src/styles/index.cssr.mjs */
|
|
.n-popconfirm .n-popconfirm__body {
|
|
|
|
font-size: var(--n-font-size);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-popconfirm .n-popconfirm__body .n-popconfirm__icon {
|
|
|
|
display: flex;
|
|
font-size: var(--n-icon-size);
|
|
color: var(--n-icon-color);
|
|
transition: color .3s var(--n-bezier);
|
|
margin: 0 8px 0 0;
|
|
|
|
}
|
|
|
|
.n-popconfirm .n-popconfirm__action {
|
|
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.n-popconfirm .n-popconfirm__action:not(:first-child) {
|
|
margin-top: 8px
|
|
}
|
|
|
|
.n-popconfirm .n-popconfirm__action .n-button:not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* popover/src/styles/index.cssr.mjs */
|
|
.n-popover {
|
|
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
position: relative;
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-text-color);
|
|
box-shadow: var(--n-box-shadow);
|
|
word-break: break-word;
|
|
|
|
}
|
|
|
|
.n-popover > .n-scrollbar {
|
|
|
|
height: inherit;
|
|
max-height: inherit;
|
|
|
|
}
|
|
|
|
.n-popover:not(.n-popover--raw) {
|
|
|
|
background-color: var(--n-color);
|
|
border-radius: var(--n-border-radius);
|
|
|
|
}
|
|
|
|
.n-popover:not(.n-popover--raw):not(.n-popover--scrollable):not(.n-popover--show-header-or-footer) {
|
|
padding: var(--n-padding);
|
|
}
|
|
|
|
.n-popover .n-popover__header {
|
|
|
|
padding: var(--n-padding);
|
|
border-bottom: 1px solid var(--n-divider-color);
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-popover .n-popover__footer {
|
|
|
|
padding: var(--n-padding);
|
|
border-top: 1px solid var(--n-divider-color);
|
|
transition: border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-popover.n-popover--scrollable .n-popover__content, .n-popover.n-popover--show-header-or-footer .n-popover__content {
|
|
|
|
padding: var(--n-padding);
|
|
|
|
}
|
|
|
|
.n-popover-shared {
|
|
|
|
transform-origin: inherit;
|
|
|
|
}
|
|
|
|
.n-popover-shared .n-popover-arrow-wrapper {
|
|
|
|
position: absolute;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
transition: background-color .3s var(--n-bezier);
|
|
position: absolute;
|
|
display: block;
|
|
width: calc(var(--n-arrow-height) * 1.414);
|
|
height: calc(var(--n-arrow-height) * 1.414);
|
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
|
|
transform: rotate(45deg);
|
|
background-color: var(--n-color);
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
.n-popover-shared.popover-transition-enter-from, .n-popover-shared.popover-transition-leave-to {
|
|
|
|
opacity: 0;
|
|
transform: scale(.85);
|
|
|
|
}
|
|
|
|
.n-popover-shared.popover-transition-enter-to, .n-popover-shared.popover-transition-leave-from {
|
|
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.n-popover-shared.popover-transition-enter-active {
|
|
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
opacity .15s var(--n-bezier-ease-out),
|
|
transform .15s var(--n-bezier-ease-out);
|
|
|
|
}
|
|
|
|
.n-popover-shared.popover-transition-leave-active {
|
|
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
opacity .15s var(--n-bezier-ease-in),
|
|
transform .15s var(--n-bezier-ease-in);
|
|
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared {
|
|
|
|
margin-bottom: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-bottom: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
top: 100%;
|
|
bottom: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
top: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
left: calc(var(--n-arrow-offset) - var(--v-offset-left));
|
|
|
|
}
|
|
|
|
[v-placement="top"] > .n-popover-shared {
|
|
|
|
margin-bottom: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="top"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-bottom: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
top: 100%;
|
|
bottom: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
top: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared {
|
|
|
|
margin-bottom: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-bottom: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
top: 100%;
|
|
bottom: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
top: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
right: calc(var(--n-arrow-offset) + var(--v-offset-left));
|
|
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared {
|
|
|
|
margin-top: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-top: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 100%;
|
|
top: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
left: calc(var(--n-arrow-offset) - var(--v-offset-left));
|
|
|
|
}
|
|
|
|
[v-placement="bottom"] > .n-popover-shared {
|
|
|
|
margin-top: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="bottom"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-top: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 100%;
|
|
top: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared {
|
|
|
|
margin-top: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-top: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 100%;
|
|
top: auto;
|
|
height: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
right: calc(var(--n-arrow-offset) + var(--v-offset-left));
|
|
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared {
|
|
|
|
margin-right: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-right: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 100%;
|
|
right: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
left: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
|
|
|
|
}
|
|
|
|
[v-placement="left"] > .n-popover-shared {
|
|
|
|
margin-right: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="left"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-right: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 100%;
|
|
right: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
left: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
|
|
top: 50%;
|
|
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared {
|
|
|
|
margin-right: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-right: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 100%;
|
|
right: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
left: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared {
|
|
|
|
margin-left: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-left: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 100%;
|
|
left: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
right: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
|
|
|
|
}
|
|
|
|
[v-placement="right"] > .n-popover-shared {
|
|
|
|
margin-left: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="right"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-left: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 100%;
|
|
left: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
right: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
|
|
top: 50%;
|
|
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared {
|
|
|
|
margin-left: var(--n-space);
|
|
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--show-arrow {
|
|
|
|
margin-left: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--overlap {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
|
|
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 100%;
|
|
left: auto;
|
|
width: var(--n-space-arrow);
|
|
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
|
|
|
|
right: calc(var(--n-arrow-height) * 1.414 / -2);
|
|
bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
|
|
|
|
}
|
|
|
|
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top));
|
|
}
|
|
|
|
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top));
|
|
}
|
|
|
|
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left));
|
|
}
|
|
|
|
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left));
|
|
}
|
|
|
|
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top));
|
|
}
|
|
|
|
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top));
|
|
}
|
|
|
|
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left));
|
|
}
|
|
|
|
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
|
|
left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left));
|
|
}
|
|
|
|
/* dropdown/src/styles/index.cssr.mjs */
|
|
.n-dropdown-menu {
|
|
|
|
transform-origin: var(--v-transform-origin);
|
|
background-color: var(--n-color);
|
|
border-radius: var(--n-border-radius);
|
|
box-shadow: var(--n-box-shadow);
|
|
position: relative;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-dropdown-menu.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-dropdown-menu.fade-in-scale-up-transition-enter-from, .n-dropdown-menu.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-dropdown-menu.fade-in-scale-up-transition-leave-from, .n-dropdown-menu.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option a {
|
|
|
|
text-decoration: none;
|
|
color: inherit;
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option a::before {
|
|
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body {
|
|
|
|
display: flex;
|
|
cursor: pointer;
|
|
position: relative;
|
|
height: var(--n-option-height);
|
|
line-height: var(--n-option-height);
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-option-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body::before {
|
|
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 4px;
|
|
right: 4px;
|
|
transition: background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-border-radius);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending {
|
|
|
|
color: var(--n-option-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending .n-dropdown-option-body__suffix {
|
|
|
|
color: var(--n-option-text-color-hover);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending::before {
|
|
background-color: var(--n-option-color-hover);
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
|
|
|
|
color: var(--n-option-text-color-active);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active .n-dropdown-option-body__suffix {
|
|
|
|
color: var(--n-option-text-color-active);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
|
|
background-color: var(--n-option-color-active);
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active {
|
|
|
|
color: var(--n-option-text-color-child-active);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active .n-dropdown-option-body__suffix {
|
|
|
|
color: var(--n-option-text-color-child-active);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--disabled {
|
|
|
|
cursor: not-allowed;
|
|
opacity: var(--n-option-opacity-disabled);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group {
|
|
|
|
font-size: calc(var(--n-font-size) - 1px);
|
|
color: var(--n-group-header-text-color);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group .n-dropdown-option-body__prefix {
|
|
|
|
width: calc(var(--n-option-prefix-width) / 2);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
|
|
|
|
width: calc(var(--n-option-icon-prefix-width) / 2);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix {
|
|
|
|
width: var(--n-option-prefix-width);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--n-prefix-color);
|
|
transition: color .3s var(--n-bezier);
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
|
|
|
|
width: var(--n-option-icon-prefix-width);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix .n-icon {
|
|
|
|
font-size: var(--n-option-icon-size);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__label {
|
|
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix {
|
|
|
|
box-sizing: border-box;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
min-width: var(--n-option-suffix-width);
|
|
padding: 0 8px;
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-suffix-color);
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix.n-dropdown-option-body__suffix--has-submenu {
|
|
|
|
width: var(--n-option-icon-suffix-width);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix .n-icon {
|
|
|
|
font-size: var(--n-option-icon-size);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-menu {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-option .n-dropdown-offset-container {
|
|
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -4px;
|
|
bottom: -4px;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-divider {
|
|
|
|
transition: background-color .3s var(--n-bezier);
|
|
background-color: var(--n-divider-color);
|
|
height: 1px;
|
|
margin: 4px 0;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu .n-dropdown-menu-wrapper {
|
|
|
|
transform-origin: var(--v-transform-origin);
|
|
width: fit-content;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu > .n-scrollbar {
|
|
|
|
height: inherit;
|
|
max-height: inherit;
|
|
|
|
}
|
|
|
|
.n-dropdown-menu:not(.n-dropdown-menu--scrollable) {
|
|
|
|
padding: var(--n-padding);
|
|
|
|
}
|
|
|
|
.n-dropdown-menu.n-dropdown-menu--scrollable .n-dropdown-menu__content {
|
|
|
|
padding: var(--n-padding);
|
|
|
|
}
|
|
|
|
/* icon/src/styles/index.cssr.mjs */
|
|
.n-icon {
|
|
|
|
height: 1em;
|
|
width: 1em;
|
|
line-height: 1em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
position: relative;
|
|
fill: currentColor;
|
|
|
|
}
|
|
|
|
.n-icon.n-icon--color-transition {
|
|
transition: color .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-icon.n-icon--depth {
|
|
color: var(--n-color);
|
|
}
|
|
|
|
.n-icon.n-icon--depth svg {
|
|
opacity: var(--n-opacity);
|
|
transition: opacity .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-icon svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
/* icon-wrapper/src/styles/index.cssr.mjs */
|
|
.n-icon-wrapper {
|
|
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
background-color: var(--n-color);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--n-icon-color);
|
|
|
|
}
|
|
|
|
/* divider/src/styles/index.cssr.mjs */
|
|
.n-divider {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
color: var(--n-text-color);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-divider:not(.n-divider--vertical) {
|
|
|
|
margin-top: 24px;
|
|
margin-bottom: 24px;
|
|
|
|
}
|
|
|
|
.n-divider:not(.n-divider--vertical):not(.n-divider--no-title) {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-divider .n-divider__title {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
white-space: nowrap;
|
|
font-weight: var(--n-font-weight);
|
|
|
|
}
|
|
|
|
.n-divider.n-divider--title-position-left .n-divider__line.n-divider__line--left {
|
|
width: 28px;
|
|
}
|
|
|
|
.n-divider.n-divider--title-position-right .n-divider__line.n-divider__line--right {
|
|
width: 28px;
|
|
}
|
|
|
|
.n-divider.n-divider--dashed .n-divider__line {
|
|
|
|
background-color: #0000;
|
|
height: 0px;
|
|
width: 100%;
|
|
border-style: dashed;
|
|
border-width: 1px 0 0;
|
|
|
|
}
|
|
|
|
.n-divider.n-divider--vertical {
|
|
|
|
display: inline-block;
|
|
height: 1em;
|
|
margin: 0 8px;
|
|
vertical-align: middle;
|
|
width: 1px;
|
|
|
|
}
|
|
|
|
.n-divider .n-divider__line {
|
|
|
|
border: none;
|
|
transition: background-color .3s var(--n-bezier), border-color .3s var(--n-bezier);
|
|
height: 1px;
|
|
width: 100%;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.n-divider:not(.n-divider--dashed) .n-divider__line {
|
|
background-color: var(--n-color);
|
|
}
|
|
|
|
.n-divider.n-divider--dashed .n-divider__line {
|
|
border-color: var(--n-color);
|
|
}
|
|
|
|
.n-divider.n-divider--vertical {
|
|
background-color: var(--n-color);
|
|
}
|
|
|
|
/* gradient-text/src/styles/index.cssr.mjs */
|
|
.n-gradient-text {
|
|
|
|
display: inline-block;
|
|
font-weight: var(--n-font-weight);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: #0000;
|
|
white-space: nowrap;
|
|
background-image: linear-gradient(var(--n-rotate), var(--n-color-start) 0%, var(--n-color-end) 100%);
|
|
transition:
|
|
--n-color-start .3s var(--n-bezier),
|
|
--n-color-end .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
/* ellipsis/src/styles/index.cssr.mjs */
|
|
.n-ellipsis {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.n-ellipsis:not(.n-ellipsis--line-clamp) {
|
|
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
.n-ellipsis.n-ellipsis--line-clamp {
|
|
|
|
display: -webkit-inline-box;
|
|
-webkit-box-orient: vertical;
|
|
|
|
}
|
|
|
|
.n-ellipsis.n-ellipsis--cursor-pointer {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
/* spin/src/styles/index.cssr.mjs */
|
|
@keyframes spin-rotate {
|
|
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
}
|
|
|
|
.n-spin-container {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-spin-container .n-spin-body {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
}
|
|
|
|
.n-spin-container .n-spin-body.fade-in-transition-enter-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-spin-container .n-spin-body.fade-in-transition-leave-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-spin-container .n-spin-body.fade-in-transition-enter-from, .n-spin-container .n-spin-body.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-spin-container .n-spin-body.fade-in-transition-leave-from, .n-spin-container .n-spin-body.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-spin-body {
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-spin {
|
|
|
|
display: inline-flex;
|
|
height: var(--n-size);
|
|
width: var(--n-size);
|
|
font-size: var(--n-size);
|
|
color: var(--n-color);
|
|
|
|
}
|
|
|
|
.n-spin.n-spin--rotate {
|
|
|
|
animation: spin-rotate 2s linear infinite;
|
|
|
|
}
|
|
|
|
.n-spin-description {
|
|
|
|
display: inline-block;
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-text-color);
|
|
transition: color .3s var(--n-bezier);
|
|
margin-top: 8px;
|
|
|
|
}
|
|
|
|
.n-spin-content {
|
|
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
.n-spin-content.n-spin-content--spinning {
|
|
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
pointer-events: none;
|
|
opacity: var(--n-opacity-spinning);
|
|
|
|
}
|
|
|
|
/* loading-bar/src/styles/index.cssr.mjs */
|
|
.n-loading-bar-container {
|
|
|
|
z-index: 5999;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
|
|
}
|
|
|
|
.n-loading-bar-container.fade-in-transition-enter-active {
|
|
transition: all 0.3s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-loading-bar-container.fade-in-transition-leave-active {
|
|
transition: all 0.8s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-loading-bar-container.fade-in-transition-enter-from, .n-loading-bar-container.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-loading-bar-container.fade-in-transition-leave-from, .n-loading-bar-container.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-loading-bar-container .n-loading-bar {
|
|
|
|
width: 100%;
|
|
transition:
|
|
max-width 4s linear,
|
|
background .2s linear;
|
|
height: var(--n-height);
|
|
|
|
}
|
|
|
|
.n-loading-bar-container .n-loading-bar.n-loading-bar--starting {
|
|
|
|
background: var(--n-color-loading);
|
|
|
|
}
|
|
|
|
.n-loading-bar-container .n-loading-bar.n-loading-bar--finishing {
|
|
|
|
background: var(--n-color-loading);
|
|
transition:
|
|
max-width .2s linear,
|
|
background .2s linear;
|
|
|
|
}
|
|
|
|
.n-loading-bar-container .n-loading-bar.n-loading-bar--error {
|
|
|
|
background: var(--n-color-error);
|
|
transition:
|
|
max-width .2s linear,
|
|
background .2s linear;
|
|
|
|
}
|
|
|
|
/* upload/src/styles/index.cssr.mjs */
|
|
.n-upload {
|
|
width: 100%;
|
|
}
|
|
|
|
.n-upload.n-upload--dragger-inside .n-upload-trigger {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
.n-upload.n-upload--drag-over .n-upload-dragger {
|
|
|
|
border: var(--n-dragger-border-hover);
|
|
|
|
}
|
|
|
|
.n-upload-dragger {
|
|
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
text-align: center;
|
|
border-radius: var(--n-border-radius);
|
|
padding: 24px;
|
|
opacity: 1;
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
background-color: var(--n-dragger-color);
|
|
border: var(--n-dragger-border);
|
|
|
|
}
|
|
|
|
.n-upload-dragger:hover {
|
|
|
|
border: var(--n-dragger-border-hover);
|
|
|
|
}
|
|
|
|
.n-upload-dragger.n-upload-dragger--disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-upload-trigger {
|
|
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-upload-trigger + .n-upload-file-list {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.n-upload-trigger.n-upload-trigger--disabled {
|
|
|
|
opacity: var(--n-item-disabled-opacity);
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-upload-trigger.n-upload-trigger--image-card {
|
|
|
|
width: 96px;
|
|
height: 96px;
|
|
|
|
}
|
|
|
|
.n-upload-trigger.n-upload-trigger--image-card .n-base-icon {
|
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
|
|
.n-upload-trigger.n-upload-trigger--image-card .n-upload-dragger {
|
|
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-upload-file-list {
|
|
|
|
line-height: var(--n-line-height);
|
|
opacity: 1;
|
|
transition: opacity .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-upload-file-list a, .n-upload-file-list img {
|
|
outline: none;
|
|
}
|
|
|
|
.n-upload-file-list.n-upload-file-list--disabled {
|
|
|
|
opacity: var(--n-item-disabled-opacity);
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-upload-file-list.n-upload-file-list--disabled .n-upload-file {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.n-upload-file-list.n-upload-file-list--grid {
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 96px);
|
|
grid-gap: 8px;
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file {
|
|
|
|
display: block;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
padding: 0px 12px 0 6px;
|
|
transition: background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-border-radius);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.fade-in-height-expand-transition-leave-from, .n-upload-file-list .n-upload-file.fade-in-height-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.fade-in-height-expand-transition-leave-to, .n-upload-file-list .n-upload-file.fade-in-height-expand-transition-enter-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity .3s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1),
|
|
opacity .3s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-leave-from, .n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-leave-to, .n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-enter-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity .3s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-progress.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height .3s cubic-bezier(.4, 0, .2, 1),
|
|
opacity .3s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top .3s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom .3s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file:hover {
|
|
|
|
background-color: var(--n-item-color-hover);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file:hover .n-upload-file-info .n-upload-file-info__action {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type {
|
|
|
|
border-radius: var(--n-border-radius);
|
|
text-decoration: underline;
|
|
text-decoration-color: #0000;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type .n-upload-file-info {
|
|
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type .n-upload-file-info .n-progress {
|
|
|
|
padding: 2px 0;
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type .n-upload-file-info .n-upload-file-info__name {
|
|
|
|
padding: 0 8px;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type .n-upload-file-info .n-upload-file-info__thumbnail {
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 28px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-type .n-upload-file-info .n-upload-file-info__thumbnail img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--text-type .n-progress {
|
|
|
|
box-sizing: border-box;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
|
|
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
border: var(--n-item-border-image-card);
|
|
border-radius: var(--n-border-radius);
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: border-color .3s var(--n-bezier), background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-border-radius);
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type .n-progress {
|
|
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
width: unset;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type .n-upload-file-info {
|
|
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type .n-upload-file-info .n-upload-file-info__thumbnail {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type .n-upload-file-info .n-upload-file-info__thumbnail img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type::before {
|
|
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
opacity: 0;
|
|
transition: opacity .2s var(--n-bezier);
|
|
content: "";
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--image-card-type:hover .n-upload-file-info .n-upload-file-info__thumbnail {
|
|
opacity: .12;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--error-status:hover {
|
|
|
|
background-color: var(--n-item-color-hover-error);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--error-status .n-upload-file-info .n-upload-file-info__name {
|
|
color: var(--n-item-text-color-error);
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--error-status .n-upload-file-info .n-upload-file-info__thumbnail {
|
|
color: var(--n-item-text-color-error);
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--error-status.n-upload-file--image-card-type {
|
|
|
|
border: var(--n-item-border-image-card-error);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--with-url {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--with-url .n-upload-file-info .n-upload-file-info__name {
|
|
|
|
color: var(--n-item-text-color-success);
|
|
text-decoration-color: var(--n-item-text-color-success);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file.n-upload-file--with-url .n-upload-file-info .n-upload-file-info__name a {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info {
|
|
|
|
position: relative;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__thumbnail {
|
|
|
|
font-size: 18px;
|
|
opacity: 1;
|
|
transition: opacity .2s var(--n-bezier);
|
|
color: var(--n-item-icon-color);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__thumbnail .n-base-icon {
|
|
|
|
margin-right: 2px;
|
|
vertical-align: middle;
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action {
|
|
|
|
padding-top: inherit;
|
|
padding-bottom: inherit;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: opacity .2s var(--n-bezier);
|
|
justify-content: flex-end;
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button:not(:last-child) {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-enter-from, .n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-enter-to, .n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-enter-active, .n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action .n-button .n-base-icon svg.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action.n-upload-file-info__action--image-type {
|
|
|
|
position: relative;
|
|
max-width: 80px;
|
|
width: auto;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__action.n-upload-file-info__action--image-card-type {
|
|
|
|
z-index: 2;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__name {
|
|
|
|
color: var(--n-item-text-color);
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
text-decoration-color: #0000;
|
|
font-size: var(--n-font-size);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
text-decoration-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-upload-file-list .n-upload-file .n-upload-file-info .n-upload-file-info__name a {
|
|
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.n-upload-file-input {
|
|
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
/* image/src/styles/index.cssr.mjs */
|
|
body > .n-image-container {
|
|
position: fixed;
|
|
}
|
|
|
|
.n-image-preview-container {
|
|
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.n-image-preview-overlay {
|
|
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .3);
|
|
|
|
}
|
|
|
|
.n-image-preview-overlay.fade-in-transition-enter-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-image-preview-overlay.fade-in-transition-leave-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-image-preview-overlay.fade-in-transition-enter-from, .n-image-preview-overlay.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-image-preview-overlay.fade-in-transition-leave-from, .n-image-preview-overlay.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-image-preview-toolbar {
|
|
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: var(--n-toolbar-border-radius);
|
|
height: 48px;
|
|
bottom: 40px;
|
|
padding: 0 12px;
|
|
background: var(--n-toolbar-color);
|
|
box-shadow: var(--n-toolbar-box-shadow);
|
|
color: var(--n-toolbar-icon-color);
|
|
transition: color .3s var(--n-bezier);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-image-preview-toolbar .n-base-icon {
|
|
|
|
padding: 0 8px;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-image-preview-toolbar.fade-in-transition-enter-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-image-preview-toolbar.fade-in-transition-leave-active {
|
|
transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important;
|
|
}
|
|
|
|
.n-image-preview-toolbar.fade-in-transition-enter-from, .n-image-preview-toolbar.fade-in-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-image-preview-toolbar.fade-in-transition-leave-from, .n-image-preview-toolbar.fade-in-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-image-preview-wrapper {
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.n-image-preview-wrapper.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-image-preview-wrapper.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-image-preview-wrapper.fade-in-scale-up-transition-enter-from, .n-image-preview-wrapper.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-image-preview-wrapper.fade-in-scale-up-transition-leave-from, .n-image-preview-wrapper.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-image-preview {
|
|
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
pointer-events: all;
|
|
margin: auto;
|
|
max-height: calc(100vh - 32px);
|
|
max-width: calc(100vw - 32px);
|
|
transition: transform .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-image {
|
|
|
|
display: inline-flex;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
.n-image:not(.n-image--preview-disabled) {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-image img {
|
|
|
|
border-radius: inherit;
|
|
|
|
}
|
|
|
|
/* carousel/src/styles/index.cssr.mjs */
|
|
.n-carousel {
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
touch-action: pan-y;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__slides {
|
|
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition-timing-function: var(--n-bezier);
|
|
transition-property: transform;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__slides .n-carousel__slide {
|
|
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__slides .n-carousel__slide > img {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots {
|
|
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot {
|
|
|
|
height: var(--n-dot-size);
|
|
width: var(--n-dot-size);
|
|
background-color: var(--n-dot-color);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition:
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot:focus {
|
|
|
|
background-color: var(--n-dot-color-focus);
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot.n-carousel__dot--active {
|
|
|
|
background-color: var(--n-dot-color-active);
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
|
|
|
|
border-radius: 9999px;
|
|
width: var(--n-dot-line-width);
|
|
height: 4px;
|
|
background-color: var(--n-dot-color);
|
|
cursor: pointer;
|
|
transition:
|
|
width .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot:focus {
|
|
|
|
background-color: var(--n-dot-color-focus);
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
|
|
|
|
width: var(--n-dot-line-width-active);
|
|
background-color: var(--n-dot-color-active);
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__arrow {
|
|
|
|
transition: background-color .3s var(--n-bezier);
|
|
cursor: pointer;
|
|
height: 28px;
|
|
width: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(255, 255, 255, .2);
|
|
color: var(--n-arrow-color);
|
|
border-radius: 8px;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__arrow svg {
|
|
|
|
height: 1em;
|
|
width: 1em;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__arrow:hover {
|
|
|
|
background-color: rgba(255, 255, 255, .3);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical {
|
|
|
|
touch-action: pan-x;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical .n-carousel__slides {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical.n-carousel--fade .n-carousel__slide {
|
|
|
|
top: 50%;
|
|
left: unset;
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide {
|
|
|
|
top: 50%;
|
|
left: unset;
|
|
transform: translateY(-50%) translateZ(-400px);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--current {
|
|
|
|
transform: translateY(-50%) translateZ(0);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--prev {
|
|
|
|
transform: translateY(-100%) translateZ(-200px);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--next {
|
|
|
|
transform: translateY(0%) translateZ(-200px);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--usercontrol .n-carousel__slides > div {
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__dots {
|
|
|
|
transform: translateY(-50%);
|
|
top: 50%;
|
|
left: 12px;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
|
|
|
|
width: 4px;
|
|
height: var(--n-dot-line-width);
|
|
margin: 4px 0;
|
|
transition:
|
|
height .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
|
|
|
|
height: var(--n-dot-line-width-active);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__dot {
|
|
|
|
margin: 4px 0;
|
|
|
|
}
|
|
|
|
.n-carousel .n-carousel__arrow-group {
|
|
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--vertical .n-carousel__arrow {
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--show-arrow.n-carousel--bottom .n-carousel__dots {
|
|
|
|
transform: translateX(0);
|
|
bottom: 18px;
|
|
left: 18px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--show-arrow.n-carousel--top .n-carousel__dots {
|
|
|
|
transform: translateX(0);
|
|
top: 18px;
|
|
left: 18px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--show-arrow.n-carousel--left .n-carousel__dots {
|
|
|
|
transform: translateX(0);
|
|
top: 18px;
|
|
left: 18px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--show-arrow.n-carousel--right .n-carousel__dots {
|
|
|
|
transform: translateX(0);
|
|
top: 18px;
|
|
right: 18px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__arrow-group {
|
|
|
|
bottom: 12px;
|
|
left: 12px;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--left .n-carousel__arrow-group > *:first-child {
|
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__dots {
|
|
|
|
transform: translateY(-50%);
|
|
top: 50%;
|
|
right: 12px;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
|
|
|
|
width: 4px;
|
|
height: var(--n-dot-line-width);
|
|
margin: 4px 0;
|
|
transition:
|
|
height .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
|
|
|
|
height: var(--n-dot-line-width-active);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__dot {
|
|
|
|
margin: 4px 0;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__arrow-group {
|
|
|
|
bottom: 12px;
|
|
right: 12px;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--right .n-carousel__arrow-group > *:first-child {
|
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--top .n-carousel__dots {
|
|
|
|
transform: translateX(-50%);
|
|
top: 12px;
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--top .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
|
|
|
|
margin: 0 4px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--top .n-carousel__dot {
|
|
|
|
margin: 0 4px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--top .n-carousel__arrow-group {
|
|
|
|
top: 12px;
|
|
right: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--top .n-carousel__arrow-group > *:first-child {
|
|
|
|
margin-right: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--bottom .n-carousel__dots {
|
|
|
|
transform: translateX(-50%);
|
|
bottom: 12px;
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--bottom .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
|
|
|
|
margin: 0 4px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--bottom .n-carousel__dot {
|
|
|
|
margin: 0 4px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--bottom .n-carousel__arrow-group {
|
|
|
|
bottom: 12px;
|
|
right: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--bottom .n-carousel__arrow-group > *:first-child {
|
|
|
|
margin-right: 12px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--fade .n-carousel__slide {
|
|
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--fade .n-carousel__slide.n-carousel__slide--current {
|
|
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--card .n-carousel__slides {
|
|
|
|
perspective: 1000px;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--card .n-carousel__slide {
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateZ(-400px);
|
|
transition-property: opacity, transform;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--current {
|
|
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateZ(0);
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--prev {
|
|
|
|
opacity: 0.4;
|
|
transform: translateX(-100%) translateZ(-200px);
|
|
|
|
}
|
|
|
|
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--next {
|
|
|
|
opacity: 0.4;
|
|
transform: translateX(0%) translateZ(-200px);
|
|
|
|
}
|
|
|
|
/* transfer/src/styles/index.cssr.mjs */
|
|
.n-transfer {
|
|
|
|
width: 100%;
|
|
font-size: var(--n-font-size);
|
|
height: 300px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
word-break: break-word;
|
|
|
|
}
|
|
|
|
.n-transfer.n-transfer--disabled .n-transfer-list .n-transfer-list-header .n-transfer-list-header__title {
|
|
|
|
color: var(--n-header-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-transfer.n-transfer--disabled .n-transfer-list .n-transfer-list-header .n-transfer-list-header__extra {
|
|
|
|
color: var(--n-header-extra-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list {
|
|
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-clip: padding-box;
|
|
position: relative;
|
|
transition: background-color .3s var(--n-bezier);
|
|
background-color: var(--n-list-color);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list.n-transfer-list--source {
|
|
|
|
border-top-left-radius: var(--n-border-radius);
|
|
border-bottom-left-radius: var(--n-border-radius);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list.n-transfer-list--source .n-transfer-list__border {
|
|
border-right: 1px solid var(--n-divider-color);
|
|
}
|
|
|
|
.n-transfer .n-transfer-list.n-transfer-list--target {
|
|
|
|
border-top-right-radius: var(--n-border-radius);
|
|
border-bottom-right-radius: var(--n-border-radius);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list.n-transfer-list--target .n-transfer-list__border {
|
|
border-left: none;
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list__border {
|
|
|
|
padding: 0 12px;
|
|
border: 1px solid var(--n-border-color);
|
|
transition: border-color .3s var(--n-bezier);
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-header {
|
|
|
|
min-height: var(--n-header-height);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: 12px 12px 10px 12px;
|
|
align-items: center;
|
|
background-clip: padding-box;
|
|
border-radius: inherit;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
line-height: 1.5;
|
|
transition:
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-header > *:not(:first-child) {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-header .n-transfer-list-header__title {
|
|
|
|
flex: 1;
|
|
min-width: 0;
|
|
line-height: 1.5;
|
|
font-size: var(--n-header-font-size);
|
|
font-weight: var(--n-header-font-weight);
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-header-text-color);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-header .n-transfer-list-header__button {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-header .n-transfer-list-header__extra {
|
|
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: var(--n-extra-font-size);
|
|
margin-right: 0;
|
|
white-space: nowrap;
|
|
color: var(--n-header-extra-text-color);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body {
|
|
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: inherit;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-filter {
|
|
|
|
padding: 4px 12px 8px 12px;
|
|
box-sizing: border-box;
|
|
transition:
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container {
|
|
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-scrollbar {
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: unset;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-empty {
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(-50%);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content {
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item {
|
|
|
|
padding: 0 12px;
|
|
min-height: var(--n-item-height);
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--n-item-text-color);
|
|
position: relative;
|
|
transition: color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item .n-transfer-list-item__background {
|
|
|
|
position: absolute;
|
|
left: 4px;
|
|
right: 4px;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: var(--n-border-radius);
|
|
transition: background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item .n-transfer-list-item__checkbox {
|
|
|
|
position: relative;
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item .n-transfer-list-item__close {
|
|
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: relative;
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item .n-transfer-list-item__label {
|
|
|
|
position: relative;
|
|
min-width: 0;
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item.n-transfer-list-item--source {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item.n-transfer-list-item--disabled {
|
|
|
|
cursor: not-allowed;
|
|
color: var(--n-item-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item:not(.n-transfer-list-item--disabled):hover .n-transfer-list-item__background {
|
|
background-color: var(--n-item-color-pending);
|
|
}
|
|
|
|
.n-transfer .n-transfer-list .n-transfer-list-body .n-transfer-list-flex-container .n-transfer-list-content .n-transfer-list-item:not(.n-transfer-list-item--disabled):hover .n-transfer-list-item__close {
|
|
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
/* tree-select/src/styles/index.cssr.mjs */
|
|
.n-tree-select {
|
|
|
|
z-index: auto;
|
|
outline: none;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-tree-select-menu {
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 4px 0;
|
|
transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier);
|
|
border-radius: var(--n-menu-border-radius);
|
|
box-shadow: var(--n-menu-box-shadow);
|
|
background-color: var(--n-menu-color);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-tree-select-menu .n-tree {
|
|
max-height: var(--n-menu-height);
|
|
}
|
|
|
|
.n-tree-select-menu .n-tree-select-menu__empty {
|
|
|
|
display: flex;
|
|
padding: 12px 32px;
|
|
flex: 1;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-tree-select-menu .n-tree-select-menu__header {
|
|
|
|
padding: var(--n-header-padding);
|
|
transition:
|
|
color .3s var(--n-bezier);
|
|
border-color .3s var(--n-bezier);
|
|
border-bottom: 1px solid var(--n-header-divider-color);
|
|
color: var(--n-header-text-color);
|
|
|
|
}
|
|
|
|
.n-tree-select-menu .n-tree-select-menu__action {
|
|
|
|
padding: var(--n-action-padding);
|
|
transition:
|
|
color .3s var(--n-bezier);
|
|
border-color .3s var(--n-bezier);
|
|
border-top: 1px solid var(--n-action-divider-color);
|
|
color: var(--n-action-text-color);
|
|
|
|
}
|
|
|
|
.n-tree-select-menu.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-tree-select-menu.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-tree-select-menu.fade-in-scale-up-transition-enter-from, .n-tree-select-menu.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-tree-select-menu.fade-in-scale-up-transition-leave-from, .n-tree-select-menu.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* tree/src/styles/index.cssr.mjs */
|
|
.n-tree {
|
|
|
|
font-size: var(--n-font-size);
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.n-tree ul, .n-tree li {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
.n-tree > .n-tree-node:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-leave-from, .n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-leave-to, .n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-enter-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity 0.2s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom 0.2s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--expand.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
opacity 0.2s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom 0.2s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-enter-from, .n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-leave-to {
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-enter-to, .n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-leave-from {
|
|
opacity: 0;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-enter-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
opacity 0.2s cubic-bezier(0, 0, .2, 1) 0s,
|
|
margin-top 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
margin-bottom 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-top 0.2s cubic-bezier(.4, 0, .2, 1) 0s,
|
|
padding-bottom 0.2s cubic-bezier(.4, 0, .2, 1) 0s
|
|
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-motion-wrapper.n-tree-motion-wrapper--collapse.fade-in-height-expand-transition-leave-active {
|
|
|
|
overflow: hidden;
|
|
transition:
|
|
max-height 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
opacity 0.2s cubic-bezier(.4, 0, 1, 1),
|
|
margin-top 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
margin-bottom 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-top 0.2s cubic-bezier(.4, 0, .2, 1),
|
|
padding-bottom 0.2s cubic-bezier(.4, 0, .2, 1)
|
|
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-wrapper {
|
|
|
|
box-sizing: border-box;
|
|
padding: var(--n-node-wrapper-padding);
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
border-radius: var(--n-node-border-radius);
|
|
transition: background-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node.n-tree-node--highlight .n-tree-node-content .n-tree-node-content__text {
|
|
border-bottom-color: var(--n-node-text-color-disabled);
|
|
}
|
|
|
|
.n-tree .n-tree-node.n-tree-node--disabled .n-tree-node-content {
|
|
|
|
color: var(--n-node-text-color-disabled);
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node:not(.n-tree-node--disabled).n-tree-node--clickable .n-tree-node-content {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.n-tree.n-tree--block-node .n-tree-node-content {
|
|
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
.n-tree:not(.n-tree--block-line) .n-tree-node:not(.n-tree-node--disabled) .n-tree-node-content:hover {
|
|
background: var(--n-node-color-hover);
|
|
}
|
|
|
|
.n-tree:not(.n-tree--block-line) .n-tree-node:not(.n-tree-node--disabled).n-tree-node--selectable .n-tree-node-content:active {
|
|
background: var(--n-node-color-pressed);
|
|
}
|
|
|
|
.n-tree:not(.n-tree--block-line) .n-tree-node:not(.n-tree-node--disabled).n-tree-node--pending .n-tree-node-content {
|
|
|
|
background: var(--n-node-color-hover);
|
|
|
|
}
|
|
|
|
.n-tree:not(.n-tree--block-line) .n-tree-node:not(.n-tree-node--disabled).n-tree-node--selected .n-tree-node-content {
|
|
background: var(--n-node-color-active);
|
|
}
|
|
|
|
.n-tree:not(.n-tree--block-line) .n-tree-node.n-tree-node--selected .n-tree-node-content {
|
|
background: var(--n-node-color-active);
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled):hover {
|
|
background: var(--n-node-color-hover);
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled).n-tree-node--pending {
|
|
|
|
background: var(--n-node-color-hover);
|
|
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled).n-tree-node--selectable:not(.n-tree-node--selected):active {
|
|
background: var(--n-node-color-pressed);
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled).n-tree-node--selected {
|
|
background: var(--n-node-color-active);
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node.n-tree-node--selected {
|
|
background: var(--n-node-color-active);
|
|
}
|
|
|
|
.n-tree.n-tree--block-line .n-tree-node.n-tree-node--disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-tree.n-tree--ellipsis .n-tree-node .n-tree-node-content {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-tree.n-tree--ellipsis .n-tree-node .n-tree-node-content .n-tree-node-content__text {
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent {
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent.n-tree-node-indent--show-line {
|
|
position: relative
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent.n-tree-node-indent--show-line::before {
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
border-left: 1px solid var(--n-line-color);
|
|
transition: border-color .3s var(--n-bezier);
|
|
transform: translate(-50%);
|
|
content: "";
|
|
top: var(--n-line-offset-top);
|
|
bottom: var(--n-line-offset-bottom);
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent.n-tree-node-indent--show-line.n-tree-node-indent--last-child::before {
|
|
|
|
bottom: 50%;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent.n-tree-node-indent--show-line.n-tree-node-indent--is-leaf::after {
|
|
|
|
position: absolute;
|
|
content: "";
|
|
left: calc(50% + 0.5px);
|
|
right: 0;
|
|
bottom: 50%;
|
|
transition: border-color .3s var(--n-bezier);
|
|
border-bottom: 1px solid var(--n-line-color);
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-indent:not(.n-tree-node-indent--show-line) {
|
|
height: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher {
|
|
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
height: var(--n-node-content-height);
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform .15s var(--n-bezier);
|
|
vertical-align: bottom;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon {
|
|
|
|
position: relative;
|
|
height: 14px;
|
|
width: 14px;
|
|
display: flex;
|
|
color: var(--n-arrow-color);
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-enter-from, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-enter-to, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-enter-active, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-icon.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading {
|
|
|
|
color: var(--n-loading-color);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-enter-from, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-enter-to, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-enter-active, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-loading.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-enter-from, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-leave-to {
|
|
transform: scale(0.75);
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-enter-to, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-leave-from {
|
|
transform: scale(1) ;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-enter-active, .n-tree .n-tree-node-switcher .n-tree-node-switcher__icon .n-base-icon.icon-switch-transition-leave-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.n-tree .n-tree-node-switcher.n-tree-node-switcher--expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.n-tree .n-tree-node-checkbox {
|
|
|
|
display: inline-flex;
|
|
height: var(--n-node-content-height);
|
|
vertical-align: bottom;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-content {
|
|
|
|
user-select: none;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: var(--n-node-content-height);
|
|
box-sizing: border-box;
|
|
line-height: var(--n-line-height);
|
|
vertical-align: bottom;
|
|
padding: 0 6px 0 4px;
|
|
cursor: default;
|
|
border-radius: var(--n-node-border-radius);
|
|
color: var(--n-node-text-color);
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-content:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.n-tree .n-tree-node-content .n-tree-node-content__prefix {
|
|
|
|
display: inline-flex;
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-content .n-tree-node-content__text {
|
|
|
|
border-bottom: 1px solid #0000;
|
|
transition: border-color .3s var(--n-bezier);
|
|
flex-grow: 1;
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree-node-content .n-tree-node-content__suffix {
|
|
|
|
display: inline-flex;
|
|
|
|
}
|
|
|
|
.n-tree .n-tree__empty {
|
|
margin: auto;
|
|
}
|
|
|
|
/* thing/src/styles/index.cssr.mjs */
|
|
.n-thing {
|
|
|
|
display: flex;
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: var(--n-font-size);
|
|
color: var(--n-text-color);
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-avatar {
|
|
|
|
margin-right: 12px;
|
|
margin-top: 2px;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-avatar-header-wrapper {
|
|
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-avatar-header-wrapper .n-thing-header-wrapper {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main {
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-header {
|
|
|
|
display: flex;
|
|
margin-bottom: 4px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-header .n-thing-header__title {
|
|
|
|
font-size: 16px;
|
|
font-weight: var(--n-title-font-weight);
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-title-text-color);
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-main__description:not(:last-child) {
|
|
|
|
margin-bottom: 4px;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-main__content:not(:first-child) {
|
|
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-main__footer:not(:first-child) {
|
|
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
.n-thing .n-thing-main .n-thing-main__action:not(:first-child) {
|
|
|
|
margin-top: 12px;
|
|
|
|
}
|
|
|
|
/* auto-complete/src/styles/index.cssr.mjs */
|
|
.n-auto-complete {
|
|
|
|
z-index: auto;
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-auto-complete-menu {
|
|
|
|
margin: 4px 0;
|
|
box-shadow: var(--n-menu-box-shadow);
|
|
|
|
}
|
|
|
|
.n-auto-complete-menu.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-auto-complete-menu.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-auto-complete-menu.fade-in-scale-up-transition-enter-from, .n-auto-complete-menu.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-auto-complete-menu.fade-in-scale-up-transition-leave-from, .n-auto-complete-menu.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* cascader/src/styles/index.cssr.mjs */
|
|
.n-cascader-menu {
|
|
|
|
outline: none;
|
|
position: relative;
|
|
margin: 4px 0;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
border-radius: var(--n-menu-border-radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--n-menu-box-shadow);
|
|
color: var(--n-option-text-color);
|
|
background-color: var(--n-menu-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity 0.2s cubic-bezier(.4, 0, 1, 1), transform 0.2s cubic-bezier(.4, 0, 1, 1) ;
|
|
}
|
|
|
|
.n-cascader-menu.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity 0.2s cubic-bezier(0, 0, .2, 1), transform 0.2s cubic-bezier(0, 0, .2, 1) ;
|
|
}
|
|
|
|
.n-cascader-menu.fade-in-scale-up-transition-enter-from, .n-cascader-menu.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-cascader-menu.fade-in-scale-up-transition-leave-from, .n-cascader-menu.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-menu__empty {
|
|
|
|
display: flex;
|
|
padding: 12px 32px;
|
|
flex: 1;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-scrollbar {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-base-menu-mask {
|
|
|
|
background-color: var(--n-menu-mask-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-base-loading {
|
|
|
|
color: var(--n-loading-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu-wrapper {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu {
|
|
|
|
height: var(--n-menu-height);
|
|
min-width: var(--n-column-width);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu.n-cascader-submenu--virtual {
|
|
|
|
width: var(--n-column-width);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu .n-scrollbar-content {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu:first-child {
|
|
|
|
border-top-left-radius: var(--n-menu-border-radius);
|
|
border-bottom-left-radius: var(--n-menu-border-radius);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu:last-child {
|
|
|
|
border-top-right-radius: var(--n-menu-border-radius);
|
|
border-bottom-right-radius: var(--n-menu-border-radius);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-submenu:not(:first-child) {
|
|
|
|
border-left: 1px solid var(--n-menu-divider-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-menu-action {
|
|
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
border-top: 1px solid var(--n-menu-divider-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option {
|
|
|
|
height: var(--n-option-height);
|
|
line-height: var(--n-option-height);
|
|
font-size: var(--n-option-font-size);
|
|
padding: 0 0 0 18px;
|
|
box-sizing: border-box;
|
|
min-width: 182px;
|
|
background-color: #0000;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition:
|
|
background-color .2s var(--n-bezier),
|
|
color 0.2s var(--n-bezier);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--show-prefix {
|
|
|
|
padding-left: 0;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option__label {
|
|
|
|
flex: 1 0 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option__prefix {
|
|
|
|
min-width: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option__suffix {
|
|
|
|
min-width: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder {
|
|
|
|
line-height: 0;
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark {
|
|
|
|
color: var(--n-option-check-mark-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-leave-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-enter-active {
|
|
transform-origin: inherit;
|
|
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ,background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-enter-from, .n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-leave-from, .n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--checkmark.fade-in-scale-up-transition-enter-to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option .n-cascader-option-icon-placeholder .n-cascader-option-icon.n-cascader-option-icon--arrow {
|
|
|
|
color: var(--n-option-arrow-color);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--selected {
|
|
|
|
color: var(--n-option-text-color-active);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--active {
|
|
|
|
color: var(--n-option-text-color-active);
|
|
background-color: var(--n-option-color-hover);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--pending {
|
|
|
|
background-color: var(--n-option-color-hover);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option:hover {
|
|
|
|
background-color: var(--n-option-color-hover);
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--disabled {
|
|
|
|
color: var(--n-option-text-color-disabled);
|
|
background-color: #0000;
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.n-cascader-menu .n-cascader-option.n-cascader-option--disabled .n-cascader-option-icon.n-cascader-option-icon--arrow {
|
|
|
|
color: var(--n-option-text-color-disabled);
|
|
|
|
}
|
|
|
|
.n-cascader {
|
|
|
|
z-index: auto;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
/* dynamic-input/src/styles/index.cssr.mjs */
|
|
.n-dynamic-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item {
|
|
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item .n-dynamic-input-preset-input {
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item .n-dynamic-input-preset-pair {
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item .n-dynamic-input-preset-pair .n-dynamic-input-pair-input:first-child {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action {
|
|
|
|
align-self: flex-start;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin: var(--action-margin);
|
|
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item .n-dynamic-input-item__action.n-dynamic-input-item__action--icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.n-dynamic-input .n-dynamic-input-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.n-dynamic-input .n-form-item {
|
|
|
|
padding-top: 0 !important;
|
|
margin-right: 0 !important;
|
|
|
|
}
|
|
|
|
.n-dynamic-input .n-form-item .n-form-item-blank {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* dynamic-tags/src/styles/index.cssr.mjs */
|
|
.n-dynamic-tags .n-input {
|
|
min-width: var(--n-input-width);
|
|
} |