various-ui/styles/table2.css

This is a test version of the Vue 3 component library

.ui-table2{--ui-table2-icon-color:var(--uicolor-font-2);--ui-table2-body-border:var(--uicolor-font-4-05);--ui-table2-header-color:var(--uicolor-font-1);--ui-table2-body-background:#ffffff;--ui-table2-header-background:#e9e9f5;--ui-table2-icon-active-color:var(--uicolor-main-color);--ui-table2-body-active-border:var(--uicolor-main-color);--ui-table2-body-active-background:var(--uicolor-main-color-005);--ui-table2-size:56px;--ui-table2-spacing:56px;--ui-table2-row-spacing:4px;--ui-table2-column-spacing:8px}.ui-table2{width:100%;overflow-x:auto}.ui-table2 .ui-table2-column:last-child{padding-right:0!important}.ui-table2 .ui-table2-column:first-child{padding-left:0!important}.ui-table2 .ui-table2-header{background-color:var(--ui-table2-header-background);padding:0 var(--ui-table2-spacing);border:1px solid var(--ui-table2-header-background)}.ui-table2 .ui-table2-header .ui-table2-row{display:flex;min-width:100%;min-height:var(--ui-table2-size);align-items:center;justify-content:flex-start}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-column{color:var(--ui-table2-header-color);display:flex;padding:0 var(--ui-table2-column-spacing);font-weight:700;align-items:center}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-sort{cursor:pointer;padding:4px 6px}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-sort .ui-table2-trigger{width:0;height:0;transition:all .3s;border-style:solid;border-width:0 4px 5px 4px;border-color:transparent transparent var(--ui-table2-icon-color) transparent}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-sort .ui-table2-trigger.ui-active{border-color:transparent transparent var(--ui-table2-icon-active-color) transparent}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-sort .ui-table2-trigger:last-child{margin-top:2px;transform:rotate(180deg)}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-explain,.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-extra{color:var(--ui-table2-icon-color);width:20px;height:20px;display:flex;transition:all .3s;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-explain .ui-icon,.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-extra .ui-icon{line-height:1}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-extra{cursor:pointer}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-extra.ui-active,.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-extra:hover{color:var(--ui-table2-icon-active-color)}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-explain .ui-icon{opacity:.7;font-size:16px;transition:all .3s}.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-explain.ui-active .ui-icon,.ui-table2 .ui-table2-header .ui-table2-row .ui-table2-explain:hover .ui-icon{opacity:1}.ui-table2 .ui-table2-bodys .ui-table2-body{background-color:var(--ui-table2-body-background);transition:all .5s;padding:0 var(--ui-table2-spacing);border:1px solid var(--ui-table2-body-border);margin:var(--ui-table2-row-spacing) 0 0}.ui-table2 .ui-table2-bodys .ui-table2-body .ui-table2-row{justify-content:flex-start;align-items:center;transition:all .3s;min-height:var(--ui-table2-size);min-width:100%;display:flex}.ui-table2 .ui-table2-bodys .ui-table2-body .ui-table2-row .ui-table2-column{display:flex;padding:8px var(--ui-table2-column-spacing);align-items:center;border-radius:4px}.ui-table2 .ui-table2-bodys .ui-table2-body .ui-table2-children{overflow:hidden;border-top:1px solid var(--ui-table2-body-active-border)}.ui-table2 .ui-table2-bodys .ui-table2-body.ui-active{background-color:var(--ui-table2-body-active-background);border-color:var(--ui-table2-body-active-border)}.ui-table2 .ui-table2-bodys .ui-table2-body.ui-table2-error{background-color:var(--ui-table2-body-background)!important;border-color:var(--ui-table2-body-border)!important;cursor:auto!important}.ui-table2 .ui-table2-bodys .ui-table2-body.ui-table2-error .ui-table2-row{justify-content:center}.ui-table2.ui-table2-selector .ui-table2-bodys .ui-table2-body{cursor:pointer}.ui-table2.ui-table2-selector .ui-table2-bodys .ui-table2-body:hover{background-color:var(--ui-table2-body-active-background);border-color:var(--ui-table2-body-active-border)}