From 7f14997f90e1ec3944ab44195649485a395d9261 Mon Sep 17 00:00:00 2001 From: Paul Isaris Date: Wed, 5 Feb 2025 11:59:40 +0200 Subject: [PATCH] Fixes for Bootstrap-based apps --- package-lock.json | 4 ++-- package.json | 2 +- public/cookies-consent.css | 2 +- resources/scss/cookies-consent.scss | 6 +++++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b48a9dd..cb3971c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "laravel-cookies-consent", - "version": "3.1.2", + "version": "3.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "laravel-cookies-consent", - "version": "3.1.2", + "version": "3.1.3", "license": "ISC", "devDependencies": { "sass": "^1.83.4", diff --git a/package.json b/package.json index 411f04b..2df0a64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "laravel-cookies-consent", - "version": "3.1.2", + "version": "3.1.3", "description": "

\"logo\"

", "main": "index.js", "directories": { diff --git a/public/cookies-consent.css b/public/cookies-consent.css index e6a54a1..c9d2ff3 100644 --- a/public/cookies-consent.css +++ b/public/cookies-consent.css @@ -1 +1 @@ -.cookies-policy-body{min-height:100vh}.cookies-policy-body.banner{min-height:auto}.cookie-success-message{position:fixed;bottom:1rem;right:1rem;z-index:1050;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #c3e6cb;border-radius:.25rem;background-color:#d4edda;color:#155724;box-shadow:0 .5rem 1rem #00000026;transition:opacity .15s linear}.cookie-success-message.show{opacity:1;transform:translateY(0);transition:opacity .5s ease-in-out,transform .5s ease-in-out}.cookies-consent-banner{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-width:800px;margin:0}.cookies-consent-banner a{font-size:inherit}.cookies-consent-banner button,.cookies-consent-banner input,.cookies-consent-banner optgroup,.cookies-consent-banner select,.cookies-consent-banner textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.cookies-consent-banner .row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem;align-items:center;justify-content:center}.cookies-consent-banner .g-0{--bs-gutter-x: 0;--bs-gutter-y: 0}.cookies-consent-banner .col{flex:1;padding:0 15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding:0 15px;box-sizing:border-box}@media (max-width: 576px){.cookies-consent-banner .col-sm-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.cookies-consent-banner .col-lg-4{flex:0 0 auto;width:33.33333333%;padding:2px 8px}}.cookies-consent-banner .btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #212529;padding:.425rem .1rem;font-size:95%;border-radius:.375rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;white-space:nowrap}.cookies-consent-banner .btn.btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn.btn-light:hover{background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color;background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:20px}.cookies-consent-banner .accordion .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529;border-bottom:1px solid #ddd;max-height:45vh;overflow-y:auto;transition:max-height .3s ease-out}@media (max-width: 767px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:30vh}}@media (min-width: 768px) and (max-width: 1023px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:30vh}}@media (min-width: 1024px) and (max-width: 1439px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:35vh}}@media (min-width: 1440px){.cookies-consent-banner .accordion .accordion-item{max-height:45vh}}.cookies-consent-banner .accordion .accordion-header{margin-bottom:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-header{padding:2px}}.cookies-consent-banner .accordion .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:.5rem 1rem;font-size:1rem;color:#212529;text-align:left;background-color:#dee2e6;border:1px solid transparent;border-top-left-radius:.375rem;border-top-right-radius:.375rem;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-button{padding:.3rem .75rem}}.cookies-consent-banner .accordion .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion .accordion-button:after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background:no-repeat center/50% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");transform:rotate(0);transition:transform .2s ease-in-out}.cookies-consent-banner .accordion .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion .accordion-collapse{display:none;border-top:1px solid #dee2e6}.cookies-consent-banner .accordion .accordion-collapse.show{display:block}.cookies-consent-banner .accordion .accordion-body{padding:.5rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-body{padding:0}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check .form-check-input{float:left;margin-left:-1.25rem;width:1rem;height:1rem;border:1px solid #dee2e6;border-radius:.375rem;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-check .form-check-input[type=checkbox]{border-radius:1em}.cookies-consent-banner .form-check .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check .form-check-input:disabled~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner .form-switch{padding-left:2.5rem;display:flex;align-items:center}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;margin-right:10px;background-color:#adb5bd;border-radius:1em;position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:hover{cursor:pointer}.cookies-consent-banner .form-switch .form-check-input:before{content:"";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;border-radius:.75em;background-color:#fff;transition:transform .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:checked:before{transform:translate(1em)}.cookies-consent-banner .form-switch .form-check-input:checked{background-color:#0d6efd}.cookies-consent-banner .list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.cookies-consent-banner .list-group .list-group-item{position:relative;display:block;padding:.75rem 1.25rem;background-color:#fff;border:1px solid rgba(0,0,0,.125)}@media (max-width: 575.98px){.cookies-consent-banner .list-group .list-group-item{padding:.25rem .5rem}}.cookies-consent-banner .mt-3{margin-top:1rem!important}.cookies-consent-banner .h5{font-size:1.25rem}.cookies-consent-banner .small{font-size:90%}.cookies-consent-banner .m-0{margin:0!important}.cookies-consent-banner .pt-0{padding-top:0!important}.cookies-consent-banner .pb-2{padding-bottom:.5rem!important}.cookies-consent-banner dl{margin-top:0;margin-bottom:0}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dl dt{font-weight:700}.cookies-consent-banner dl dd{margin-bottom:.25rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dl dd:last-child{margin-bottom:0}}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .cookie-actions{margin-top:10px;width:100%;text-align:center}.cookies-consent-banner .cookie-actions .row{margin:0}.cookies-consent-banner .cookie-button{position:fixed;bottom:10px;left:10px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer}.cookies-consent-banner .cookie-button img{width:40px;height:40px}.cookies-consent-banner #cookie-consent-title{font-size:large}.cookies-consent-banner.banner{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;width:600px;display:none;max-height:80%;overflow:hidden}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 80px);overflow-y:auto}@media (max-width: 575.98px){.cookies-consent-banner.banner{width:calc(100% - 20px);left:10px;right:10px;padding:10px;max-height:95%}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 145px)}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}.cookies-consent-banner .policy-link{font-size:small;text-decoration:underline}#scify-cookie-consent-floating-button{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer;height:45px;width:45px}#scify-cookie-consent-floating-button img{width:100%;height:100%} +.cookies-policy-body{min-height:100vh}.cookies-policy-body.banner{min-height:auto}.cookie-success-message{position:fixed;bottom:1rem;right:1rem;z-index:1050;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid #c3e6cb;border-radius:.25rem;background-color:#d4edda;color:#155724;box-shadow:0 .5rem 1rem #00000026;transition:opacity .15s linear}.cookie-success-message.show{opacity:1;transform:translateY(0);transition:opacity .5s ease-in-out,transform .5s ease-in-out}.cookies-consent-banner{color:#222;font-family:Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.6;padding:20px;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-width:800px;margin:0}.cookies-consent-banner a{font-size:inherit}.cookies-consent-banner button,.cookies-consent-banner input,.cookies-consent-banner optgroup,.cookies-consent-banner select,.cookies-consent-banner textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.cookies-consent-banner .row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem;align-items:center;justify-content:center}.cookies-consent-banner .g-0{--bs-gutter-x: 0;--bs-gutter-y: 0}.cookies-consent-banner .col{flex:1;padding:0 15px;box-sizing:border-box}.cookies-consent-banner .col-6{width:50%;padding:0 15px;box-sizing:border-box}@media (max-width: 576px){.cookies-consent-banner .col-sm-12{flex:0 0 auto;width:100%}}@media (min-width: 992px){.cookies-consent-banner .col-lg-4{flex:0 0 auto;width:33.33333333%;padding:2px 8px}}.cookies-consent-banner .btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #212529;padding:.425rem .1rem;font-size:95%;border-radius:.375rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;white-space:nowrap}.cookies-consent-banner .btn.btn-light{color:#212529;background-color:#f8f9fa}.cookies-consent-banner .btn.btn-light:hover{background-color:#dae0e5;border-color:#dae0e5}.cookies-consent-banner .w-100{width:100%!important}.cookies-consent-banner .accordion{--bs-accordion-border-color: $border-color;background-color:#fff;border:1px solid #ddd;border-radius:4px;margin-bottom:20px}.cookies-consent-banner .accordion .accordion-item{background-color:#fff;border:1px solid #dee2e6;color:#212529;border-bottom:1px solid #ddd;max-height:45vh;overflow-y:auto;transition:max-height .3s ease-out}@media (max-width: 767px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:30vh}}@media (min-width: 768px) and (max-width: 1023px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:30vh}}@media (min-width: 1024px) and (max-width: 1439px){.cookies-consent-banner .accordion .cookies-consent-banner.banner{top:0;bottom:auto}.cookies-consent-banner .accordion .accordion-item{max-height:35vh}}@media (min-width: 1440px){.cookies-consent-banner .accordion .accordion-item{max-height:45vh}}.cookies-consent-banner .accordion .accordion-header{margin-bottom:0;padding:10px 15px;cursor:pointer;font-weight:700;background-color:#f7f7f7}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-header{padding:2px}}.cookies-consent-banner .accordion .accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:.5rem 1rem;font-size:1rem;color:#212529;text-align:left;background-color:#dee2e6;border:1px solid transparent;border-top-left-radius:.375rem;border-top-right-radius:.375rem;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-button{padding:.3rem .75rem}}.cookies-consent-banner .accordion .accordion-button:not(.collapsed){color:#0d6efd;background-color:#dee2e6;box-shadow:inset 0 -1px #00000020}.cookies-consent-banner .accordion .accordion-button:after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background:no-repeat center/50% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");transform:rotate(0);transition:transform .2s ease-in-out}.cookies-consent-banner .accordion .accordion-button.collapsed:after{transform:rotate(90deg)}.cookies-consent-banner .accordion .accordion-collapse{display:none;border-top:1px solid #dee2e6}.cookies-consent-banner .accordion .accordion-collapse.show{display:block}.cookies-consent-banner .accordion .accordion-body{padding:.5rem}@media (max-width: 575.98px){.cookies-consent-banner .accordion .accordion-body{padding:0}}.cookies-consent-banner .form-check{position:relative;display:block;padding-left:1.25rem}.cookies-consent-banner .form-check .form-check-input{float:left;margin-left:-1.25rem;width:1rem;height:1rem;border:1px solid #dee2e6;border-radius:.375rem;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.cookies-consent-banner .form-check .form-check-input[type=checkbox]{border-radius:1em}.cookies-consent-banner .form-check .form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.cookies-consent-banner .form-check .form-check-input:focus{border-color:#0d6efd;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cookies-consent-banner .form-check .form-check-input:disabled{filter:none;opacity:.5;pointer-events:none}.cookies-consent-banner .form-check .form-check-input:disabled~.form-check-label{cursor:default;opacity:.5}.cookies-consent-banner .form-switch{padding-left:2.5rem;display:flex;align-items:center}.cookies-consent-banner .form-switch .form-check-input{width:2em;height:18px;margin-right:10px;background-color:#adb5bd;border-radius:1em;position:relative;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;--bs-form-switch-bg: none !important}.cookies-consent-banner .form-switch .form-check-input:hover{cursor:pointer}.cookies-consent-banner .form-switch .form-check-input:before{content:"";position:absolute;top:.125em;left:.125em;width:.75em;height:.75em;border-radius:.75em;background-image:none!important;background-color:#fff!important;transition:transform .15s ease-in-out}.cookies-consent-banner .form-switch .form-check-input:checked:before{transform:translate(1em)}.cookies-consent-banner .form-switch .form-check-input:checked{background-color:#0d6efd;--bs-form-switch-bg: none !important;background-image:none!important}.cookies-consent-banner .list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.cookies-consent-banner .list-group .list-group-item{position:relative;display:block;padding:.75rem 1.25rem;background-color:#fff;border:1px solid rgba(0,0,0,.125)}@media (max-width: 575.98px){.cookies-consent-banner .list-group .list-group-item{padding:.25rem .5rem}}.cookies-consent-banner .mt-3{margin-top:1rem!important}.cookies-consent-banner .h5{font-size:1.25rem}.cookies-consent-banner .small{font-size:90%}.cookies-consent-banner .m-0{margin:0!important}.cookies-consent-banner .pt-0{padding-top:0!important}.cookies-consent-banner .pb-2{padding-bottom:.5rem!important}.cookies-consent-banner dl{margin-top:0;margin-bottom:0}@media (max-width: 575.98px){.cookies-consent-banner dl{margin-bottom:0}}.cookies-consent-banner dl dt{font-weight:700}.cookies-consent-banner dl dd{margin-bottom:.25rem;margin-left:0}@media (max-width: 575.98px){.cookies-consent-banner dl dd:last-child{margin-bottom:0}}.cookies-consent-banner code{font-size:87.5%;color:#d63384;word-wrap:break-word}.cookies-consent-banner .cookie-actions{margin-top:10px;width:100%;text-align:center}.cookies-consent-banner .cookie-actions .row{margin:0}.cookies-consent-banner .cookie-button{position:fixed;bottom:10px;left:10px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer}.cookies-consent-banner .cookie-button img{width:40px;height:40px}.cookies-consent-banner #cookie-consent-title{font-size:large}.cookies-consent-banner.banner{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;width:600px;display:none;max-height:80%;overflow:hidden}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 80px);overflow-y:auto}@media (max-width: 575.98px){.cookies-consent-banner.banner{width:calc(100% - 20px);left:10px;right:10px;padding:10px;max-height:95%}.cookies-consent-banner.banner .cookies-container{max-height:calc(100% - 145px)}.cookies-consent-banner.banner .cookie-actions button#accept-all-cookies,.cookies-consent-banner.banner .cookie-actions button#accept-selected-cookies{border-bottom:0}}.cookies-consent-banner .policy-link{font-size:small;text-decoration:underline}#scify-cookie-consent-floating-button{position:fixed;bottom:1.25rem;left:1.25rem;z-index:10000000;background-color:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:5px;cursor:pointer;height:45px;width:45px}#scify-cookie-consent-floating-button img{width:100%;height:100%} diff --git a/resources/scss/cookies-consent.scss b/resources/scss/cookies-consent.scss index 0416785..02424b0 100644 --- a/resources/scss/cookies-consent.scss +++ b/resources/scss/cookies-consent.scss @@ -322,6 +322,7 @@ border-radius: 1em; position: relative; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + --bs-form-switch-bg: none !important; // Removes Bootstrap background &:hover { cursor: pointer; @@ -335,7 +336,8 @@ width: 0.75em; height: 0.75em; border-radius: 0.75em; - background-color: #fff; + background-image: none !important; // Removes Bootstrap's background image + background-color: #fff !important; transition: transform 0.15s ease-in-out; } @@ -345,6 +347,8 @@ &:checked { background-color: $primary-color; + --bs-form-switch-bg: none !important; + background-image: none !important; // Ensures Bootstrap does not override the background } } }