@fangzhongya/fang-ui 0.0.12 → 0.0.13

package/dist/components/index.css

@@ -1,25 +1,44 @@
-.com {
-  font-size: 20px;
+:root {
+  --el-icon-picker-on: rgb(91, 189, 246);
+  --el-icon-picker-border: #eee;
+  --el-color-primary: #409eff;
+  --el-bag-primary: #409eff;
+  --el-bag-primary-text: #fff;
+  --el-border: #eee;
+  --el-layout-panel-gap: 10px;
+  --el-layout-panel-padding: 20px;
+  --el-layout-form-item-padding-right: var(
+  	--el-layout-panel-gap
+  );
+  --el-g-main-bg: var(--el-bg-color-page);
 }
 
-.cs-title {
-  margin: 10px;
-  padding: 10px;
-  width: 200px;
-  height: 200px;
-  border: 1px solid rgb(0, 255, 145);
+.el-com {
+  font-size: 20px;
 }
 
-.dom {
-  width: 200px;
-  display: flex;
+.el-f-dialog.el-dialog {
+  padding: 0;
 }
-
-.d {
-  border: 1px solid #f00;
+.el-f-dialog.el-dialog__header {
+  padding-top: 16px;
+  padding-left: 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.el-f-dialog.el-dialog__header .el-dialog__headerbtn {
+  width: 56px;
+  height: 56px;
+  font-size: 22px;
+}
+.el-f-dialog.el-dialog__body {
+  padding: 20px 30px;
+}
+.el-f-dialog.el-dialog__footer {
+  border-top: 1px solid #e5e7eb;
+  padding: 20px 20px;
 }
 
-.box-mask {
+.el-box-mask {
   display: block;
   opacity: 0.5;
   z-index: 0;
@@ -31,7 +50,7 @@
   background: rgba(2, 28, 39, 0.4);
 }
 
-.box-title {
+.el-box-title {
   padding: 10px;
   position: relative;
   background-color: #467ddc;
@@ -39,16 +58,16 @@
   align-items: center;
   display: flex;
 }
-.box-title .box-title-name {
+.el-box-title-name {
   flex: 1;
 }
-.box-title .box-title-close {
+.el-box-title-close {
   right: 10px;
   font-size: 18px;
   display: flex;
   align-items: center;
 }
-.box-title .box-title-close i {
+.el-box-title-close i {
   width: 20px;
   height: 20px;
   margin: 0 4px;
@@ -59,11 +78,99 @@
   text-align: center;
 }
 
-.drawer {
+.el-drawer {
   margin: 10px;
 }
 
-.box-adjust {
+.el-forms-div {
+  width: 100%;
+  height: 100%;
+}
+.el-forms-div-com {
+  height: 100%;
+}
+
+.el-forms-item {
+  width: 100%;
+}
+.el-forms-item-el-item.is-height {
+  min-height: var(--el-forms-item-row-height);
+}
+.el-forms-item-el-item.is-height .el-form-item__label {
+  height: var(--el-forms-item-row-height);
+  line-height: var(--el-forms-item-row-height);
+}
+.el-forms-item-el-item.is-top .el-form-item__content {
+  min-height: var(--el-forms-item-row-height);
+  display: grid;
+}
+
+.el-forms {
+  --el-forms-inline-right: 16px;
+  --el-forms-row-height: 32px;
+  --el-input-height: var(--el-forms-row-height);
+}
+.el-forms .el-form--label-center .el-form-item__label {
+  justify-content: center;
+  text-align: center;
+}
+.el-forms .el-form--label-left .el-form-item__label {
+  justify-content: flex-start;
+  text-align: left;
+}
+.el-forms .el-form-item__label {
+  text-align: right;
+}
+.el-forms-div--column .el-forms-li {
+  display: inline-flex;
+  margin-right: 0;
+}
+.el-forms-div--inline .el-forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.el-forms-div--inline .el-forms-li {
+  height: fit-content;
+  margin-right: var(--el-forms-inline-right);
+}
+.el-forms-div--box .el-forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.el-forms-div--box .el-forms-li {
+  box-sizing: border-box;
+  margin-right: 0;
+  padding-right: var(--el-forms-inline-right);
+}
+.el-forms-div--query .el-forms-elf {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.el-forms-div--query .el-forms-li {
+  height: fit-content;
+  margin-top: var(--el-forms-query-interval);
+  margin-bottom: var(--el-forms-query-interval);
+  margin-right: var(--el-forms-inline-right);
+}
+.el-forms-div--query .el-forms-li .el-form-item {
+  margin-bottom: 0;
+  flex: 1;
+}
+.el-forms-li .el-form-item {
+  margin-bottom: var(--el-forms-item-bottom);
+  flex: 1;
+}
+.el-forms-elf {
+  text-align: left;
+}
+.el-forms-elf.center .el-form-item__label {
+  justify-content: center;
+}
+
+.el-box-adjust {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -71,7 +178,7 @@
   top: 0;
   left: 0;
 }
-.box-adjust .box-adjust-body {
+.el-box-adjust-body {
   position: absolute;
   top: 30%;
   left: 30%;
@@ -82,19 +189,19 @@
   display: flex;
   flex-direction: column;
 }
-.box-adjust .box-adjust-body .box-adjust-body-div {
+.el-box-adjust-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.box-adjust .box-adjust-body.popup-center .box-adjust-body-div {
+.el-box-adjust-body.popup-center .el-box-adjust-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.box {
+.el-box {
   position: fixed;
   width: 100%;
   height: 100%;
@@ -106,7 +213,7 @@
   align-items: center;
   justify-content: center;
 }
-.box .box-body {
+.el-box-body {
   position: relative;
   z-index: 100;
   background: #fff;
@@ -116,23 +223,23 @@
   display: flex;
   flex-direction: column;
 }
-.box .box-body .box-body-div {
+.el-box-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.box .box-body.popup-center .box-body-div {
+.el-box-body.popup-center .el-box-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.box-local {
+.el-box-local {
   text-align: left;
 }
 
-.popup {
+.el-popup {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -140,7 +247,7 @@
   top: 0;
   left: 0;
 }
-.popup .popup-body {
+.el-popup-body {
   position: absolute;
   top: 30%;
   left: 30%;
@@ -151,18 +258,18 @@
   display: flex;
   flex-direction: column;
 }
-.popup .popup-body .popup-body-div {
+.el-popup-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.popup.popup-center {
+.el-popup.el-popup-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.popup.popup-center .popup-body {
+.el-popup.el-popup-center .el-popup-body {
   position: relative;
   width: initial;
   top: initial;
@@ -172,14 +279,14 @@
   min-height: 20%;
   max-height: 90%;
 }
-.popup.popup-center .popup-body .popup-body-div {
+.el-popup.el-popup-center .el-popup-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.window {
+.el-window {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -187,7 +294,7 @@
   top: 0;
   left: 0;
 }
-.window .window-body {
+.el-window-body {
   position: absolute;
   top: 30%;
   left: 30%;
@@ -198,27 +305,314 @@
   display: flex;
   flex-direction: column;
 }
-.window .window-body .window-title .com-title-close i {
+.el-window-body-title .com-title-close i {
   width: 20px;
   height: 20px;
   margin: 0 4px;
   cursor: pointer;
 }
-.window .window-body .window-body-div {
+.el-window-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.window .window-body.max {
+.el-window-body.max {
   width: 100vw !important;
   height: 100vh !important;
   top: initial !important;
   left: initial !important;
 }
-.window .window-body.max::-webkit-scrollbar {
+.el-window-body.max::-webkit-scrollbar {
   width: 0 !important;
 }
 
-.global-config {
+.elglobal-config {
+  left: 0;
+}
+
+.el-lists-div .el-lists-table {
+  width: 100%;
+  height: 100%;
+}
+.el-lists-div .el-lists-table td {
+  text-align: left;
+}
+.el-lists-div .el-lists-table th {
+  font-weight: initial;
+}
+.el-lists-div .el-lists-table .is-whole .el-lists-table-auto {
+  width: 100%;
+}
+.el-lists-div .el-lists-table .is-whole .el-lists-table-value {
+  width: 100%;
+  display: block;
+}
+.el-lists-div .el-lists-table .el-lists-table-td,
+.el-lists-div .el-lists-table .el-lists-table-th {
+  padding: 6px;
+}
+.el-lists-div .el-lists-table .el-lists-table-auto {
+  display: inline-flex;
+  align-items: center;
+}
+.el-lists-div .el-lists-table .el-lists-table-auto .el-lists-table-label {
+  white-space: nowrap;
+}
+.el-lists-div .el-lists-table .el-lists-table-th {
+  text-align: left;
+}
+.el-lists-div .el-lists-table.right .el-lists-table-th {
+  text-align: right;
+}
+.el-lists-div .el-lists-table.center .el-lists-table-th {
+  text-align: center;
+}
+.el-lists-div .el-lists-table.auto .el-lists-table-th {
+  padding-right: 0;
+}
+.el-lists-div .el-lists-table.top .el-lists-table-th {
+  padding-bottom: 0;
+}
+.el-lists-div .el-lists-table.is-aliquots {
+  table-layout: fixed;
+}
+.el-lists-div .el-lists-table.is-border {
+  border-right: 1px solid var(--el-lists-border-color);
+  border-top: 1px solid var(--el-lists-border-color);
+  border-bottom: 1px solid var(--el-lists-border-color);
+}
+.el-lists-div .el-lists-table.is-border > tr > td {
+  border-bottom: 1px solid var(--el-lists-border-color);
+  border-left: 1px solid var(--el-lists-border-color);
+}
+.el-lists-div .el-lists-table.is-border > tr > td:last-child {
+  border-right: 1px solid var(--el-lists-border-color);
+}
+.el-lists-div .el-lists-table.is-border > tr > th {
+  border-left: 1px solid var(--el-lists-border-color);
+  border-bottom: 1px solid var(--el-lists-border-color);
+}
+.el-lists-div .el-lists-table.is-border > tr > th:last-child {
+  border-right: 1px solid var(--el-lists-border-color);
+}
+.el-lists-div .el-lists-table.is-border > tr:last-child > td {
+  border-bottom: 0;
+}
+.el-lists-div .el-lists-table.is-border > tr:last-child > th {
+  border-bottom: 0;
+}
+.el-lists-div .el-lists-table.is-border.top > tr > th {
+  border-bottom: 0;
+}
+
+.el-page {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.el-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f5f5f5;
+}
+.el-page-query {
+  flex-grow: 1;
+}
+.el-page-main {
+  flex: 1;
+  padding: 10px;
+}
+.el-page-table {
+  height: 100%;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.el-page-table-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.el-page-table-top .page-operations {
+  flex-grow: 1;
+  display: flex;
+  margin-right: 20px;
+}
+.el-page-operations > .el-button {
+  margin-left: 2px;
+  margin-right: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.el-page-footer {
+  padding: 10px;
+  text-align: right;
+  background-color: #f5f5f5;
+}
+
+.el-array {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding: 1px;
+  position: relative;
+  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
+  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+}
+.el-array.is-focus {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+.el-array-error {
+  position: absolute;
+  bottom: -23px;
+  color: #f00;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  left: 12px;
+}
+.el-array-error.type-1 {
+  left: calc(50% + 24px);
+}
+.el-array-error.type-1.is-clear {
+  left: calc(50% + 11px);
+}
+.el-array-focus {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+.el-array-value {
+  flex: 1;
+  height: 100%;
+}
+.el-array-range {
+  padding: 0 5px;
+}
+.el-array-clear {
+  cursor: pointer;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  padding: 5px;
+}
+.el-array-clear svg {
+  width: 1rem;
+  height: 1rem;
+}
+.el-array .el-input .el-input__wrapper {
+  border: none;
+  box-shadow: none;
+}
+.el-array .el-input .el-input__wrapper input {
+  text-align: center;
+}
+
+.el-buttons-li {
+  height: inherit;
+}
+
+.el-cascaders-cascader {
+  height: 100%;
+}
+.el-cascaders-cascader > div {
+  height: 100%;
+}
+.el-cascaders-tree {
+  height: 100%;
+}
+
+.el-checks-check {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 0;
+}
+
+.el-dates-date {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.el-input-num-input {
+  height: 100%;
+}
+
+.el-inputs-input {
+  height: 100%;
+}
+
+.el-selects-select {
+  height: 100%;
+  min-width: 100px;
+}
+.el-selects-select > div {
+  height: 100%;
+}
+
+.el-switchs-switch {
+  height: 100%;
+}
+
+.el-tables {
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.el-tables-table {
+  background-color: transparent;
+}
+.el-tables-table.is-absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
+}
+.el-tables-table th.el-table__cell {
+  background-color: rgb(248, 248, 249);
+}
+
+.el-pags {
+  padding: 10px;
+}
+.el-pags-slot {
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+}
+.el-pags .el-pagination__total {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+}
+
+.el-tables-pagin {
+  width: 100%;
+  height: var(--el-tables-pagin-height);
+  display: flex;
+  flex-direction: column;
+}
+.el-tables-pagin-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.el-tables-pagin-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
+  display: none;
+}
+.el-tables-pagin-paginat {
+  overflow: hidden;
+}
+.el-tables-pagin-paginat .el-pagination {
+  justify-content: flex-end;
 }