UNPKG

react-checker-maker

Version:

React checker maker is a lightweight package that can be used to manage privileges in [React Js](https://reactjs.org). This package utilizes [React Router Dom](https://reactrouter.com) and allows for the addition of specific privileges to routes and eleme

2 lines (1 loc) 4.42 kB
@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap";:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:.9}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;left:0;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease-out;visibility:hidden;width:max-content;will-change:opacity,visibility}.styles-module_fixed__7ciUi{position:fixed}.styles-module_arrow__K0L3T{background:inherit;height:8px;position:absolute;transform:rotate(45deg);width:8px}.styles-module_noArrow__T8y2L{display:none}.styles-module_clickable__Bv9o7{pointer-events:auto}.styles-module_show__2NboJ{opacity:var(--rt-opacity);visibility:visible}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}:root{--primary: #00aa9c;--primary-rgb: 0, 170, 156}*{box-sizing:border-box;padding:0;margin:0}html,body{max-width:100%;overflow-x:hidden;font-family:Poppins,sans-serif;letter-spacing:.03rem}h3,h4,h5,h6{font-weight:500}.cm{display:flex;flex-direction:column;width:100%;height:100%;padding:1rem}.cm_head{display:flex;width:100%;height:max-content;justify-content:space-between;align-items:center}.btn{display:flex;width:max-content;height:max-content;padding:.75rem 2rem;font-size:1rem;font-weight:500;border-radius:6px;background-color:var(--primary);color:#fff;border:1.5px solid transparent;cursor:pointer;letter-spacing:.03rem;transition:.1s all ease-in-out}.btn_outlined{background-color:transparent;border:1.5px solid var(--primary);color:var(--primary)}.btn_outlined:hover{background-color:var(--primary);color:#fff}.btn:hover{background-color:rgba(var(--primary-rgb),.9)}.cm_content{display:flex;width:100%;height:100%;flex-direction:column}.cm_tab{display:flex;width:100%;height:max-content;overflow-x:scroll;margin-top:1rem;padding-bottom:1rem}.cm_tab_item{display:flex;width:max-content;height:max-content;padding:.375rem 1.5rem;cursor:pointer;border-bottom:1px solid gray}.cm_tab_item.selected{font-weight:500;border-bottom:2px solid var(--primary);color:var(--primary);padding-bottom:calc(.375rem - .5px)}.cm_tab_item span{width:max-content}.cm_tab_content{display:grid;width:100%;height:100%;background-color:rgba(var(--primary-rgb),.03);padding:2rem;border-radius:.5rem;grid-template-columns:repeat(3,1fr);gap:3rem 2rem}.cm_tc_item{display:flex;flex-direction:column;width:100%;height:100%}.cm_tc_item .cm_tc_item_h{display:flex;width:100%;margin-bottom:.5rem;align-items:center}.cm_tc_item .cm_tc_item_h h3{margin-left:.5rem}.cm_tc_item .cm_tc_item_h span{margin-left:.5rem;font-size:14px}.cm_tc_item .cm_tc_item_c{display:flex;align-items:center;margin-top:1rem}.cm_tc_item .cm_tc_item_c span{width:100%;margin-left:.5rem}.cb{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;border:1.5px solid rgba(var(--primary-rgb));padding:3px;cursor:pointer}.cb.selected{background-color:var(--primary)}.cb .cb_i_box{width:100%;height:100%;background-color:var(--primary);border-radius:2px}.cb img{width:100%;height:100%}.cm_create{display:flex;width:100%;height:100%;flex-direction:column}.cm_create_action{display:flex;width:100%;height:max-content;padding:1.5rem;justify-content:flex-end;align-items:center}.cm_create_form{display:flex;width:100%;height:max-content;margin-bottom:1rem}.cm_create_form .cm_create_form_input{display:flex;width:40%;flex-direction:column;max-width:400px;margin-left:1rem}.cm_create_form .cm_create_form_input span{margin-bottom:.25rem}.cm_create_form .cm_create_form_input p{color:red}.cm_create_form .cm_create_form_input input{padding:.75rem 1rem;border-radius:.25rem;box-shadow:none;outline:none;border:1.5px solid black;font-size:16px}.cm_content_action{display:flex;width:100%;height:max-content;justify-content:flex-start;margin-top:.5rem}