From 10aef91b5d52af7e7d41f1641bec652d9fcdc0d3 Mon Sep 17 00:00:00 2001 From: matias Date: Mon, 23 Oct 2023 19:11:49 -0300 Subject: [PATCH] feat: add modal component --- dist/index.css | 65 ++++++++++++++++++++++++++++-- dist/index.min.css | 2 +- docs/index.html | 21 ++++++++++ package.json | 2 +- src/scss/components/_cards.scss | 9 +++-- src/scss/components/_modal.scss | 71 +++++++++++++++++++++++++++++++++ src/scss/index.scss | 1 + 7 files changed, 161 insertions(+), 10 deletions(-) create mode 100644 src/scss/components/_modal.scss diff --git a/dist/index.css b/dist/index.css index b0efdc3..4ee147f 100644 --- a/dist/index.css +++ b/dist/index.css @@ -602,13 +602,14 @@ html { .card { width: 300px; margin: 20px; - border: 2px solid #000; border-radius: 8px; overflow: hidden; - transition: box-shadow 0.2s ease, transform 0.3s ease; } + border: 3px solid #000; + box-shadow: -3px 3px 0px #000000; + transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { - box-shadow: 3px 3px 0px #000000; - transform: translate(-6px, -6px); } + box-shadow: 0px 0px 0px #000000; + transform: translate(-6px, 6px); } .card a { margin: 0; @@ -701,3 +702,59 @@ input.nb-checkbox { 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; } diff --git a/dist/index.min.css b/dist/index.min.css index 0c23cf0..d8c5f1d 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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:2px solid #000;border-radius:8px;overflow:hidden;transition:box-shadow 0.2s ease, transform 0.3s ease}.card:hover{box-shadow:3px 3px 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} +*,*::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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none}.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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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:none;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} diff --git a/docs/index.html b/docs/index.html index 64ae793..b8adf2f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -362,6 +362,27 @@

Avatar

+ +
+

Modal

+

+ Section demonstrates a modal component provided by NeoBrutalismCSS. +

+ + + +
+
+

Modal Title

+ +
+

Content for the modal

+
+ +

Colors

diff --git a/package.json b/package.json index c4be020..ade51ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "neobrutalismcss", - "version": "0.1.5", + "version": "0.2.5", "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/_cards.scss b/src/scss/components/_cards.scss index 41acef0..7a992c0 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -1,13 +1,14 @@ .card { width: 300px; margin: 20px; - border: 2px solid #000; border-radius: 8px; overflow: hidden; - transition: box-shadow 0.2s ease, transform 0.3s ease; + border: 3px solid #000; + box-shadow: -3px 3px 0px #000000; + transition: box-shadow 0.2s ease, transform 0.2s ease; &:hover { - box-shadow: 3px 3px 0px #000000; - transform: translate(-6px, -6px); + box-shadow: 0px 0px 0px #000000; + transform: translate(-6px, 6px); } } diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss new file mode 100644 index 0000000..5173d35 --- /dev/null +++ b/src/scss/components/_modal.scss @@ -0,0 +1,71 @@ +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; + + > p { + padding: 15px; + margin: 0; + } + + &-header { + background-color: #f9f9f9; + border-bottom: 1px solid #dddddd; + box-sizing: border-box; + height: 50px; + + h3 { + margin: 0; + box-sizing: border-box; + padding-left: 15px; + line-height: 50px; + color: #4d4d4d; + font-size: 16px; + display: inline-block; + } + + label { + box-sizing: border-box; + border-left: 1px solid #dddddd; + float: right; + line-height: 50px; + padding: 0 15px 0 15px; + cursor: pointer; + + &:hover { + img { + opacity: 0.6; + } + } + } + } +} diff --git a/src/scss/index.scss b/src/scss/index.scss index 6875f3f..a21a9be 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -12,3 +12,4 @@ @import "components/avatar"; @import "components/checkbox"; @import "components/badge"; +@import "components/modal";