@ducor/react/dist/style.css

admin template ui interface

:root {
  --du-header-horizontal-height: 5rem;
  --du-footer-horizontal-height: 2.5rem;
  --du-sidebar-horizontal-width: 60px;
  --du-sidebar-vertical-width: 7.5rem;
  /* vertical */
  --du-sidebar-vertical-full: 16rem;
  --du-sidebar-vertical-compact: 10rem;
  --du-sidebar-vertical-mini: 5rem;
}

[data-layout] {
  min-height: 100vh !important;
  width: 100% !important;
  display: grid !important;
}

[data-du="*"] {
  z-index: 10;
}

/* main nav or logo  */
[data-du=header-nav] {
  grid-area: header_nav;
}

/* main header  */
[data-du=header] {
  grid-area: header;
}

/* sidebar  */
[data-du=sidebar] {
  grid-area: sidebar;
}

/* main content  */
[data-du=main] {
  grid-area: main;
}

/* footer/sidebar-footer auth control  */
[data-du=sidebar-footer] {
  grid-area: sidebar_footer;
}

/* footer  */
[data-du=footer] {
  grid-area: footer;
}

@keyframes loadingSpanDot1 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loadingSpanDot2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loadingSpanDot3 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.animate-loadingSpanDot1 {
  animation: loadingSpanDot1 1s ease-in-out infinite;
  animation-delay: 0s;
}

.animate-loadingSpanDot2 {
  animation: loadingSpanDot2 1s ease-in-out infinite;
  animation-delay: 0.3s;
}

.animate-loadingSpanDot3 {
  animation: loadingSpanDot3 1s ease-in-out infinite;
  animation-delay: 0.6s;
}

.box-rsbar {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}
.box-rsbar > .box-rsbar-body-col {
  width: 100%;
  flex-grow: 1;
  background: transparent;
}
.box-rsbar > .box-rsbar-resize-col {
  flex: none;
  height: 100%;
  position: absolute;
  right: 0;
  display: block;
  resize: both;
  margin-left: 0px;
  width: 3px;
}
.box-rsbar > .box-rsbar-resize-col > div {
  position: absolute;
  inset: 0px -1px;
  cursor: ew-resize;
  transition-delay: 0.25s;
  width: 5px;
}
.box-rsbar > .box-rsbar-resize-col:hover, .box-rsbar > .box-rsbar-resize-col::backdrop, .box-rsbar > .box-rsbar-resize-col::marker, .box-rsbar > .box-rsbar-resize-col:active {
  background-color: black;
}

.du-sidebar {
  display: flex;
  height: 100%;
}
.du-sidebar .du-sidebar-resize {
  height: 100%;
  position: relative;
  display: block;
  width: 1px;
  background-color: var(--borderColor-default, var(--color-border-default, #d0d7de));
  margin-left: 0px;
}
.du-sidebar .du-sidebar-resize > div {
  position: absolute;
  inset: 0px -2px;
  cursor: col-resize;
  background-color: transparent;
  transition-delay: 0.1s;
  width: 4px;
}
.du-sidebar .du-sidebar-resize.active {
  background-color: red;
  width: 2px;
}
.du-sidebar .du-sidebar-container {
  width: 100%;
  height: calc(100vh - var(--du-header-horizontal-height) - var(--du-footer-horizontal-height));
  display: flex;
  background: #111827;
  flex-direction: column;
}
.du-sidebar .du-sidebar-container .du-sidebar-header {
  flex: none;
  height: 3rem;
  text-align: center;
}
.du-sidebar .du-sidebar-container .du-sidebar-body {
  flex-grow: 1;
  padding: 1rem;
  height: 100%;
  overflow: auto;
}
.du-sidebar .du-sidebar-container .du-sidebar-footer {
  flex: none;
  height: 3rem;
  text-align: center;
}
.du-sidebar .du-sidebar-container.fixed {
  width: var(--du-du-sidebar-vertical-full);
}

.ui-tree .tree-item {
  position: relative;
}
.ui-tree [data-dept="0"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.ui-tree [data-dept="0"] a {
  width: 4.5rem;
  height: 4.5rem;
  display: block;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid red;
}
.ui-tree [data-dept="0"] a .tree-item-suffix svg {
  width: 100%;
  height: 100%;
}
.ui-tree [data-dept="0"] .tree-item-label,
.ui-tree [data-dept="0"] .tree-subitem-arrow {
  display: none;
}
.ui-tree [data-dept="0"] .tree-group {
  display: none;
}
.ui-tree [data-dept]:not([data-dept="0"]) {
  /* styles go here */
  max-height: 16rem;
  width: 12rem;
  overflow: auto;
}
.ui-tree [data-dept]:not([data-dept="0"]) .tree-item-label,
.ui-tree [data-dept]:not([data-dept="0"]) .tree-subitem-arrow {
  display: block;
}
.ui-tree [data-dept]:not([data-dept="0"]) .tree-group {
  display: block;
}

[data-layout=du-full-hh-top-ss-left-show] {
  display: grid;
  grid-template-rows: var(--du-header-horizontal-height) auto var(--du-footer-horizontal-height);
  grid-template-columns: var(--sidebar-width, --du-sidebar-vertical-full) calc(100% - var(--sidebar-width, --du-sidebar-vertical-full));
  grid-template-areas: "header_nav header" "sidebar main" "sidebar_footer footer";
  /* resolve header-nav fixed height  width*/
  /* resolve header fixed height  width*/
  /* resolve sidebar fixed height  width*/
  /* resolve sidebar footer fixed height  width*/
}
[data-layout=du-full-hh-top-ss-left-show] [data-du=header-nav] > .fixed:nth-child(1) {
  width: var(--du-sidebar-vertical-full);
  height: var(--du-header-horizontal-height);
}
[data-layout=du-full-hh-top-ss-left-show] [data-du=header] > .fixed:nth-child(1) {
  width: calc(100% - var(--du-sidebar-vertical-full));
  height: var(--du-header-horizontal-height);
}
[data-layout=du-full-hh-top-ss-left-show] [data-du=sidebar] > .fixed:nth-child(1) {
  width: var(--du-sidebar-vertical-full);
  height: calc(100vh - var(--du-header-horizontal-height) - var(--du-footer-horizontal-height));
}
[data-layout=du-full-hh-top-ss-left-show] [data-du=sidebar-footer] > .fixed:nth-child(1) {
  width: var(--du-sidebar-vertical-full);
  height: var(--du-footer-horizontal-height);
}

/* compact sidebar */
[data-layout=du-compact-hh-top-ss-left-show] {
  display: grid;
  grid-template-rows: var(--du-header-horizontal-height) auto var(--du-footer-horizontal-height);
  grid-template-columns: var(--du-sidebar-vertical-compact) calc(100% - var(--du-sidebar-vertical-compact));
  grid-template-areas: "header_nav header" "sidebar main" "sidebar_footer footer";
}
[data-layout=du-compact-hh-top-ss-left-show] [data-du=header-nav] > :nth-child(1) {
  height: var(--du-header-horizontal-height);
  width: var(--du-sidebar-vertical-compact);
}
[data-layout=du-compact-hh-top-ss-left-show] [data-du=sidebar] > .fixed:nth-child(1) {
  height: calc(100vh - var(--du-header-horizontal-height) - var(--du-footer-horizontal-height));
  width: var(--du-sidebar-vertical-compact);
}
[data-layout=du-compact-hh-top-ss-left-show] [data-du=sidebar-footer] > .fixed:nth-child(1) {
  height: var(--du-footer-horizontal-height);
  width: var(--du-sidebar-vertical-compact);
}

/* mini sidebar */
[data-layout=du-mini-hh-top-ss-left-show] {
  display: grid;
  grid-template-rows: var(--du-header-horizontal-height) auto var(--du-footer-horizontal-height);
  grid-template-columns: var(--du-sidebar-vertical-mini) calc(100% - var(--du-sidebar-vertical-mini));
  grid-template-areas: "header_nav header" "sidebar main" "sidebar_footer footer";
}
[data-layout=du-mini-hh-top-ss-left-show] [data-du=header-nav] > :nth-child(1) {
  height: var(--du-header-horizontal-height);
  width: var(--du-sidebar-vertical-mini);
}
[data-layout=du-mini-hh-top-ss-left-show] [data-du=sidebar] > .fixed:nth-child(1) {
  height: calc(100vh - var(--du-header-horizontal-height) - var(--du-footer-horizontal-height));
  width: var(--du-sidebar-vertical-mini);
}
[data-layout=du-mini-hh-top-ss-left-show] [data-du=sidebar-footer] > .fixed:nth-child(1) {
  height: var(--du-footer-horizontal-height);
  width: var(--du-sidebar-vertical-mini);
}

[data-layout=du-full-hh-top-ss-left] {
  display: grid;
  grid-template-rows: var(--du-header-horizontal-height) auto var(--du-footer-horizontal-height);
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
}
[data-layout=du-full-hh-top-ss-left] [data-du=header] > .fixed:nth-child(1) {
  width: 100%;
}
[data-layout=du-full-hh-top-ss-left] [data-du=header-nav],
[data-layout=du-full-hh-top-ss-left] [data-du=sidebar-footer],
[data-layout=du-full-hh-top-ss-left] [data-du=sidebar] {
  display: none;
}

@media (max-width: 767.98px) {
  [data-layout=du-full-hh-top-ss-left-show] {
    display: grid;
    grid-template-rows: var(--du-header-horizontal-height) auto var(--du-footer-horizontal-height);
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "footer";
  }
  [data-layout=du-full-hh-top-ss-left-show] [data-du=header] > .fixed:nth-child(1) {
    width: 100%;
  }
  [data-layout=du-full-hh-top-ss-left-show] [data-du=header-nav],
  [data-layout=du-full-hh-top-ss-left-show] [data-du=sidebar-footer] {
    display: none;
  }
  [data-layout=du-full-hh-top-ss-left-show] [data-du=sidebar] {
    width: var(--du-sidebar-vertical-full);
    position: absolute;
    top: var(--du-header-horizontal-height);
    left: 0;
    z-index: 5;
    height: calc(100vh - var(--du-header-horizontal-height));
  }
}

/*# sourceMappingURL=style.css.map */