From d2893428490f88a04dc406921caf9fb637be3bf3 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 10 Nov 2023 00:05:09 -0300 Subject: [PATCH] fix: fix display none checkboxes --- dist/index.css | 6 +++--- dist/index.min.css | 2 +- package.json | 2 +- src/scss/components/_modal.scss | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dist/index.css b/dist/index.css index cbe6def..693d8cf 100644 --- a/dist/index.css +++ b/dist/index.css @@ -703,11 +703,11 @@ input.nb-checkbox { padding: 10px; margin: 0; } -input[type="checkbox"] { +#modal { display: none; } -input[type="checkbox"]:checked ~ .modal, -input[type="checkbox"]:checked ~ .modal-background { +#modal:checked ~ .modal, +#modal:checked ~ .modal-background { display: block; } .modal-background { diff --git a/dist/index.min.css b/dist/index.min.css index dc7170c..eec6a87 100644 --- a/dist/index.min.css +++ b/dist/index.min.css @@ -1 +1 @@ -*,*::before,*::after{box-sizing:border-box}html{font-size:16px;font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}input[type="checkbox"]{display:none}input[type="checkbox"]:checked ~ .modal,input[type="checkbox"]:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000} +*,*::before,*::after{box-sizing:border-box}html{font-size:16px;font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}#modal{display:none}#modal:checked ~ .modal,#modal:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000} diff --git a/package.json b/package.json index c59745b..5a23c85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "neobrutalismcss", - "version": "0.3.7", + "version": "0.3.8", "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web", "main": "dist/index.min.css", "repository": { diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 5173d35..f19a5e5 100644 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -1,9 +1,9 @@ -input[type="checkbox"] { +#modal { display: none; } -input[type="checkbox"]:checked ~ .modal, -input[type="checkbox"]:checked ~ .modal-background { +#modal:checked ~ .modal, +#modal:checked ~ .modal-background { display: block; }