react-simplicity-lib/dist/index.css

**react-simplicity-lib** is a collection of reusable React components that simplify UI development. This library includes various components like `Toggle`, `Modal`, `Tabs`, `HoverCard`, `Table`, and more, designed for easy integration and customization.

.toggle{display:flex;align-items:center;gap:4px;width:max-content;padding:2px}.toggle-area{display:flex;justify-content:flex-end;width:calc(var(--ballSize) * 2 + 8px);background-color:#d3d3d3;border-radius:100000px;padding:4px;transition:all;cursor:pointer}.toggle-ball-container{transition:width}.toggle-ball{width:var(--ballSize);aspect-ratio:1/1;border-radius:50%;background-color:gray}.hover-card{border:.5px solid lightgray;border-radius:10px;transition:all .3s;transition-duration:transform .3s;box-shadow:0 0 10px #d3d3d3;perspective:1500px}.type-writer{overflow:hidden;margin:0 auto;letter-spacing:.15em;position:relative}.type-writer:after{content:"";border-right:1px solid black;height:100%;animation:blink-caret 1s step-end infinite}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#000}}.animated-button{background-color:#fff;box-shadow:3px 3px 10px 1px var(--color),inset 0 0 5px var(--color);border:1px solid var(--color);color:#000;padding:5px 10px;display:inline-block;font-size:1rem;text-align:center;cursor:pointer;border-radius:5px;transition:transform .3s ease}.animated-button:hover{transform:scale(1.01)}.animated-button:active{transform:scale(.95)}.animated-button:focus{outline:none}.animated-button:disabled{background-color:#d3d3d3;cursor:not-allowed}.Modal{position:fixed;inset:0;background-color:#d3d3d399;z-index:1000000}.modal-center{display:flex;justify-content:center;align-items:center}.simplicity-table{height:max-content;max-height:100%;display:grid;grid-template-rows:1fr max-content;overflow:auto}.simplicity-table-container{height:100%;overflow:auto}.simplicity-table-container>table{background-color:#fff;font-size:.95rem;border-spacing:0;width:100%}.simplicity-table-container>table>thead{position:sticky;top:0;background-color:#cbdce1}.simplicity-table-container>table>tbody td,.simplicity-table-container>table>thead th{border:1px solid lightgray;padding:5px}.simplicity-table-container>table>thead th{border-color:#fff;color:#6a7e90}.simplicity-table-pagination{display:flex;justify-content:center;align-items:center;gap:10px;border-top:1px solid lightgray;padding:5px 10px}.simplicity-table-pagination button{background-color:#d3d3d3;border-radius:50%;padding:2px;width:24px;aspect-ratio:1/1;border:none;cursor:pointer}.simplicity-table-pagination button:disabled{cursor:not-allowed}.Tabs{height:100%;display:grid;grid-template-rows:max-content 1fr;padding:5px;background-color:#fff}.Tabs-names{display:flex;gap:5px}.Tab-name{padding:2px 12px;transition:border-radius .3s;cursor:pointer}.active-tab{border:2px solid var(--tabColor);border-bottom:none;border-radius:5px 5px 0 0;position:relative}.active-tab:after{content:"";position:absolute;width:100%;height:2px;background-color:#fff;left:0;bottom:-2px;z-index:1}.Tab-name:hover{border:2px solid var(--tabColor);border-bottom:none;border-radius:5px 5px 0 0}.Tabs-area{height:100%;position:relative;overflow:hidden;border:2px solid var(--tabColor)}.Tabs-area>div{height:100%;width:100%;display:flex;position:absolute;transition:left .3s}.Tab{width:100%;min-width:100%;height:100%}