*, *:before, *:after { box-sizing: border-box; } body { margin: 0; height: 100vh; } #app { width: 100vw; height: 100vh; } .wrapper { width: 100%; height: 100%; } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .grid, .flex { &.center { justify-content: center; align-items: center; } > .fit-size { min: { width: 0; height: 0; } } > .fit-width { min-width: 0; } > .fit-height { min-height: 0; } } .flex { display: flex; &.column { flex-direction: column; &.align-left { align-items: flex-start; } &.align-center { align-items: center; } &.align-right { align-items: flex-end; } &.valign-top { justify-content: flex-start; } &.valign-center { justify-content: center; } &.valign-bottom { justify-content: flex-end; } } &:not(.column) { &.align-left { justify-content: flex-start; } &.align-center { justify-content: center; } &.align-right { justify-content: flex-end; } &.valign-top { align-items: flex-start; } &.valign-center { align-items: center; } &.valign-bottom { align-items: flex-end; } } &.flex-wrap { flex-wrap: wrap; } } .flex-1 { flex: 1; } .flex-auto { flex: 0 0 auto; } .grid { display: grid; &.label-input { grid-template-columns: repeat(var(--columns-repeat), max-content auto); } } .nowrap { white-space: nowrap; } .gap-1em { > * + * { margin-left: 1em; } } .font-size-12 { font-size: 12px; } .font-size-14 { font-size: 14px; } .number { text-align: right; } .text { text-align: left; } .text-right { text-align: right; } ul { list-style: none; } i { font-style: normal; } label { cursor: inherit; } input { &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; } &[type="number"] { -moz-appearance: textfield; } } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-center { text-align: center; } .origin-table { --border-color: #999999; width: 100%; > :first-child, colgroup + * { > tr:first-child { th, td { border-top: 1px solid var(--border-color); } } } th, td { border: { right: 1px solid var(--border-color); bottom: 1px solid var(--border-color); } &:first-child { border: { left: 1px solid var(--border-color); } } } .cell { min-height: 40px; padding: 8px 10px; } tr { &:not(:first-child) { td { border-top: 0; } } } } ::-webkit-scrollbar { width: 8px; height: 8px; }